feat: draggable page tabs

This commit is contained in:
chenos 2023-01-15 09:43:03 +08:00
parent 9281ee61dc
commit 332010a036
4 changed files with 119 additions and 94 deletions

View File

@ -1,13 +1,11 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { useMutationObserver } from 'ahooks';
import { Layout, Spin } from 'antd'; import { Layout, Spin } from 'antd';
import React, { createContext, useContext, useMemo, useRef, useState } from 'react'; import React, { createContext, useContext, useMemo, useRef, useState } from 'react';
import { useHistory, useRouteMatch } from 'react-router-dom'; import { useHistory, useRouteMatch } from 'react-router-dom';
import { import {
ACLRolesCheckProvider, ACLRolesCheckProvider, CurrentAppInfoProvider, CurrentUser,
CurrentUser, CurrentUserProvider, findByUid,
CurrentUserProvider,
CurrentAppInfoProvider,
findByUid,
findMenuItem, findMenuItem,
RemoteCollectionManagerProvider, RemoteCollectionManagerProvider,
RemotePluginManagerToolbar, RemotePluginManagerToolbar,
@ -17,11 +15,9 @@ import {
useDocumentTitle, useDocumentTitle,
useRequest, useRequest,
useRoute, useRoute,
useSystemSettings, useSystemSettings
} from '../../../'; } from '../../../';
import { useCollectionManager } from '../../../collection-manager'; import { useCollectionManager } from '../../../collection-manager';
import { PoweredBy } from '../../../powered-by';
import { useMutationObserver } from 'ahooks';
const filterByACL = (schema, options) => { const filterByACL = (schema, options) => {
const { allowAll, allowMenuItemIds = [] } = options; const { allowAll, allowMenuItemIds = [] } = options;
@ -209,8 +205,8 @@ export const InternalAdminLayout = (props: any) => {
max-width: var(--side-menu-width); max-width: var(--side-menu-width);
min-width: var(--side-menu-width); min-width: var(--side-menu-width);
pointer-events: none; pointer-events: none;
transition: background-color 0.3s ease 0s, min-width 0.3s ease 0s, /* transition: background-color 0.3s ease 0s, min-width 0.3s ease 0s,
max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; */
`} `}
></div> ></div>
<Layout.Sider <Layout.Sider

View File

@ -1,6 +1,7 @@
import { PlusOutlined } from '@ant-design/icons';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { FormDialog, FormLayout } from '@formily/antd'; import { FormDialog, FormLayout } from '@formily/antd';
import { RecursionField, Schema, SchemaOptionsContext, useField, useFieldSchema } from '@formily/react'; import { Schema, SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
import { Button, PageHeader as AntdPageHeader, Spin, Tabs } from 'antd'; import { Button, PageHeader as AntdPageHeader, Spin, Tabs } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
@ -8,6 +9,8 @@ import { useTranslation } from 'react-i18next';
import { useHistory, useLocation } from 'react-router-dom'; import { useHistory, useLocation } from 'react-router-dom';
import { useDocumentTitle } from '../../../document-title'; import { useDocumentTitle } from '../../../document-title';
import { Icon } from '../../../icon'; import { Icon } from '../../../icon';
import { DndContext } from '../../common';
import { SortableItem } from '../../common/sortable-item';
import { SchemaComponent, SchemaComponentOptions } from '../../core'; import { SchemaComponent, SchemaComponentOptions } from '../../core';
import { useCompile, useDesignable } from '../../hooks'; import { useCompile, useDesignable } from '../../hooks';
import FixedBlock from './FixedBlock'; import FixedBlock from './FixedBlock';
@ -160,84 +163,91 @@ export const Page = (props) => {
{...others} {...others}
footer={ footer={
enablePageTabs && ( enablePageTabs && (
<Tabs <DndContext>
size={'small'} <Tabs
activeKey={activeKey} size={'small'}
onTabClick={(activeKey) => { activeKey={activeKey}
setLoading(true); onTabClick={(activeKey) => {
setActiveKey(activeKey); setLoading(true);
window.history.pushState({}, '', location.pathname + `?tab=` + activeKey); setActiveKey(activeKey);
setTimeout(() => { window.history.pushState({}, '', location.pathname + `?tab=` + activeKey);
setLoading(false); setTimeout(() => {
}, 50); setLoading(false);
}} }, 50);
tabBarExtraContent={ }}
dn.designable && ( tabBarExtraContent={
<Button dn.designable && (
className={css` <Button
border-color: rgb(241, 139, 98) !important; icon={<PlusOutlined />}
color: rgb(241, 139, 98) !important; className={css`
`} border-color: rgb(241, 139, 98) !important;
type={'dashed'} color: rgb(241, 139, 98) !important;
onClick={async () => { `}
const values = await FormDialog(t('Add tab'), () => { type={'dashed'}
return ( onClick={async () => {
<SchemaComponentOptions scope={options.scope} components={{ ...options.components }}> const values = await FormDialog(t('Add tab'), () => {
<FormLayout layout={'vertical'}> return (
<SchemaComponent <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
schema={{ <FormLayout layout={'vertical'}>
properties: { <SchemaComponent
title: { schema={{
title: t('Tab name'), properties: {
'x-component': 'Input', title: {
'x-decorator': 'FormItem', title: t('Tab name'),
required: true, 'x-component': 'Input',
'x-decorator': 'FormItem',
required: true,
},
icon: {
title: t('Icon'),
'x-component': 'IconPicker',
'x-decorator': 'FormItem',
},
}, },
icon: { }}
title: t('Icon'), />
'x-component': 'IconPicker', </FormLayout>
'x-decorator': 'FormItem', </SchemaComponentOptions>
}, );
}, }).open({
}} initialValues: {},
/> });
</FormLayout> const { title, icon } = values;
</SchemaComponentOptions> dn.insertBeforeEnd({
); type: 'void',
}).open({ title,
initialValues: {}, 'x-icon': icon,
}); 'x-component': 'Grid',
const { title, icon } = values; 'x-initializer': 'BlockInitializers',
dn.insertBeforeEnd({ properties: {},
type: 'void', });
title, }}
'x-icon': icon, >
'x-component': 'Grid', Add tab
'x-initializer': 'BlockInitializers', </Button>
properties: {}, )
}); }
}} >
> {fieldSchema.mapProperties((schema) => {
Add tab return (
</Button> <Tabs.TabPane
) tab={
} <SortableItem
> id={schema.name}
{fieldSchema.mapProperties((schema) => { schema={schema}
return ( className={classNames('nb-action-link', designerCss, props.className)}
<Tabs.TabPane >
tab={ {schema['x-icon'] && <Icon style={{ marginRight: 8 }} type={schema['x-icon']} />}
<span className={classNames('nb-action-link', designerCss, props.className)}> <span>{schema.title || t('Unnamed')}</span>
{schema['x-icon'] && <Icon style={{ marginRight: 8 }} type={schema['x-icon']} />} <PageTabDesigner schema={schema} />
<span>{schema.title || t('Unnamed')}</span> </SortableItem>
<PageTabDesigner schema={schema} /> }
</span> key={schema.name}
} />
key={schema.name} );
/> })}
); </Tabs>
})} </DndContext>
</Tabs>
) )
} }
/> />

View File

@ -1,9 +1,9 @@
import { MenuOutlined } from '@ant-design/icons'; import { DragOutlined, MenuOutlined } from '@ant-design/icons';
import { ISchema, useField, useFieldSchema } from '@formily/react'; import { ISchema, useField, useFieldSchema } from '@formily/react';
import { Modal, Space } from 'antd'; import { Modal, Space } from 'antd';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useDesignable } from '../..'; import { DragHandler, useDesignable } from '../..';
import { SchemaSettings } from '../../../schema-settings'; import { SchemaSettings } from '../../../schema-settings';
export const PageDesigner = ({ title }) => { export const PageDesigner = ({ title }) => {
@ -120,6 +120,9 @@ export const PageTabDesigner = ({ schema }) => {
<div className={'general-schema-designer'}> <div className={'general-schema-designer'}>
<div className={'general-schema-designer-icons'}> <div className={'general-schema-designer-icons'}>
<Space size={2} align={'center'}> <Space size={2} align={'center'}>
<DragHandler>
<DragOutlined />
</DragHandler>
<SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />}> <SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />}>
<SchemaSettings.ModalItem <SchemaSettings.ModalItem
title={t('Edit')} title={t('Edit')}

View File

@ -38,12 +38,28 @@ export const Sortable = (props: any) => {
); );
}; };
export const SortableItem: React.FC<any> = observer((props) => { const useSortableItemProps = (props) => {
const id = useSortableItemId(props);
if (props.schema) {
return { ...props, id };
}
const schema = useFieldSchema();
return { ...props, id, schema };
};
const useSortableItemId = (props) => {
if (props.id) {
return props.id;
}
const field = useField(); const field = useField();
const fieldSchema = useFieldSchema(); return field.address.toString();
};
export const SortableItem: React.FC<any> = observer((props) => {
const { schema, id, ...others } = useSortableItemProps(props);
return ( return (
<SortableProvider id={field.address.toString()} data={{ insertAdjacent: 'afterEnd', schema: fieldSchema }}> <SortableProvider id={id} data={{ insertAdjacent: 'afterEnd', schema: schema }}>
<Sortable {...props}>{props.children}</Sortable> <Sortable {...others}>{props.children}</Sortable>
</SortableProvider> </SortableProvider>
); );
}); });