feat: draggable page tabs
This commit is contained in:
chenos
parent
9281ee61dc
commit
332010a036
@ -1,13 +1,11 @@
|
||||
import { css } from '@emotion/css';
|
||||
import { useMutationObserver } from 'ahooks';
|
||||
import { Layout, Spin } from 'antd';
|
||||
import React, { createContext, useContext, useMemo, useRef, useState } from 'react';
|
||||
import { useHistory, useRouteMatch } from 'react-router-dom';
|
||||
import {
|
||||
ACLRolesCheckProvider,
|
||||
CurrentUser,
|
||||
CurrentUserProvider,
|
||||
CurrentAppInfoProvider,
|
||||
findByUid,
|
||||
ACLRolesCheckProvider, CurrentAppInfoProvider, CurrentUser,
|
||||
CurrentUserProvider, findByUid,
|
||||
findMenuItem,
|
||||
RemoteCollectionManagerProvider,
|
||||
RemotePluginManagerToolbar,
|
||||
@ -17,11 +15,9 @@ import {
|
||||
useDocumentTitle,
|
||||
useRequest,
|
||||
useRoute,
|
||||
useSystemSettings,
|
||||
useSystemSettings
|
||||
} from '../../../';
|
||||
import { useCollectionManager } from '../../../collection-manager';
|
||||
import { PoweredBy } from '../../../powered-by';
|
||||
import { useMutationObserver } from 'ahooks';
|
||||
|
||||
const filterByACL = (schema, options) => {
|
||||
const { allowAll, allowMenuItemIds = [] } = options;
|
||||
@ -209,8 +205,8 @@ export const InternalAdminLayout = (props: any) => {
|
||||
max-width: var(--side-menu-width);
|
||||
min-width: var(--side-menu-width);
|
||||
pointer-events: none;
|
||||
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;
|
||||
/* 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; */
|
||||
`}
|
||||
></div>
|
||||
<Layout.Sider
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { css } from '@emotion/css';
|
||||
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 classNames from 'classnames';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
@ -8,6 +9,8 @@ import { useTranslation } from 'react-i18next';
|
||||
import { useHistory, useLocation } from 'react-router-dom';
|
||||
import { useDocumentTitle } from '../../../document-title';
|
||||
import { Icon } from '../../../icon';
|
||||
import { DndContext } from '../../common';
|
||||
import { SortableItem } from '../../common/sortable-item';
|
||||
import { SchemaComponent, SchemaComponentOptions } from '../../core';
|
||||
import { useCompile, useDesignable } from '../../hooks';
|
||||
import FixedBlock from './FixedBlock';
|
||||
@ -160,84 +163,91 @@ export const Page = (props) => {
|
||||
{...others}
|
||||
footer={
|
||||
enablePageTabs && (
|
||||
<Tabs
|
||||
size={'small'}
|
||||
activeKey={activeKey}
|
||||
onTabClick={(activeKey) => {
|
||||
setLoading(true);
|
||||
setActiveKey(activeKey);
|
||||
window.history.pushState({}, '', location.pathname + `?tab=` + activeKey);
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 50);
|
||||
}}
|
||||
tabBarExtraContent={
|
||||
dn.designable && (
|
||||
<Button
|
||||
className={css`
|
||||
border-color: rgb(241, 139, 98) !important;
|
||||
color: rgb(241, 139, 98) !important;
|
||||
`}
|
||||
type={'dashed'}
|
||||
onClick={async () => {
|
||||
const values = await FormDialog(t('Add tab'), () => {
|
||||
return (
|
||||
<SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
|
||||
<FormLayout layout={'vertical'}>
|
||||
<SchemaComponent
|
||||
schema={{
|
||||
properties: {
|
||||
title: {
|
||||
title: t('Tab name'),
|
||||
'x-component': 'Input',
|
||||
'x-decorator': 'FormItem',
|
||||
required: true,
|
||||
<DndContext>
|
||||
<Tabs
|
||||
size={'small'}
|
||||
activeKey={activeKey}
|
||||
onTabClick={(activeKey) => {
|
||||
setLoading(true);
|
||||
setActiveKey(activeKey);
|
||||
window.history.pushState({}, '', location.pathname + `?tab=` + activeKey);
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 50);
|
||||
}}
|
||||
tabBarExtraContent={
|
||||
dn.designable && (
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
className={css`
|
||||
border-color: rgb(241, 139, 98) !important;
|
||||
color: rgb(241, 139, 98) !important;
|
||||
`}
|
||||
type={'dashed'}
|
||||
onClick={async () => {
|
||||
const values = await FormDialog(t('Add tab'), () => {
|
||||
return (
|
||||
<SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
|
||||
<FormLayout layout={'vertical'}>
|
||||
<SchemaComponent
|
||||
schema={{
|
||||
properties: {
|
||||
title: {
|
||||
title: t('Tab name'),
|
||||
'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',
|
||||
'x-decorator': 'FormItem',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</FormLayout>
|
||||
</SchemaComponentOptions>
|
||||
);
|
||||
}).open({
|
||||
initialValues: {},
|
||||
});
|
||||
const { title, icon } = values;
|
||||
dn.insertBeforeEnd({
|
||||
type: 'void',
|
||||
title,
|
||||
'x-icon': icon,
|
||||
'x-component': 'Grid',
|
||||
'x-initializer': 'BlockInitializers',
|
||||
properties: {},
|
||||
});
|
||||
}}
|
||||
>
|
||||
Add tab
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
>
|
||||
{fieldSchema.mapProperties((schema) => {
|
||||
return (
|
||||
<Tabs.TabPane
|
||||
tab={
|
||||
<span className={classNames('nb-action-link', designerCss, props.className)}>
|
||||
{schema['x-icon'] && <Icon style={{ marginRight: 8 }} type={schema['x-icon']} />}
|
||||
<span>{schema.title || t('Unnamed')}</span>
|
||||
<PageTabDesigner schema={schema} />
|
||||
</span>
|
||||
}
|
||||
key={schema.name}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Tabs>
|
||||
}}
|
||||
/>
|
||||
</FormLayout>
|
||||
</SchemaComponentOptions>
|
||||
);
|
||||
}).open({
|
||||
initialValues: {},
|
||||
});
|
||||
const { title, icon } = values;
|
||||
dn.insertBeforeEnd({
|
||||
type: 'void',
|
||||
title,
|
||||
'x-icon': icon,
|
||||
'x-component': 'Grid',
|
||||
'x-initializer': 'BlockInitializers',
|
||||
properties: {},
|
||||
});
|
||||
}}
|
||||
>
|
||||
Add tab
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
>
|
||||
{fieldSchema.mapProperties((schema) => {
|
||||
return (
|
||||
<Tabs.TabPane
|
||||
tab={
|
||||
<SortableItem
|
||||
id={schema.name}
|
||||
schema={schema}
|
||||
className={classNames('nb-action-link', designerCss, props.className)}
|
||||
>
|
||||
{schema['x-icon'] && <Icon style={{ marginRight: 8 }} type={schema['x-icon']} />}
|
||||
<span>{schema.title || t('Unnamed')}</span>
|
||||
<PageTabDesigner schema={schema} />
|
||||
</SortableItem>
|
||||
}
|
||||
key={schema.name}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Tabs>
|
||||
</DndContext>
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
@ -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 { Modal, Space } from 'antd';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDesignable } from '../..';
|
||||
import { DragHandler, useDesignable } from '../..';
|
||||
import { SchemaSettings } from '../../../schema-settings';
|
||||
|
||||
export const PageDesigner = ({ title }) => {
|
||||
@ -120,6 +120,9 @@ export const PageTabDesigner = ({ schema }) => {
|
||||
<div className={'general-schema-designer'}>
|
||||
<div className={'general-schema-designer-icons'}>
|
||||
<Space size={2} align={'center'}>
|
||||
<DragHandler>
|
||||
<DragOutlined />
|
||||
</DragHandler>
|
||||
<SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />}>
|
||||
<SchemaSettings.ModalItem
|
||||
title={t('Edit')}
|
||||
|
||||
@ -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 fieldSchema = useFieldSchema();
|
||||
return field.address.toString();
|
||||
};
|
||||
|
||||
export const SortableItem: React.FC<any> = observer((props) => {
|
||||
const { schema, id, ...others } = useSortableItemProps(props);
|
||||
return (
|
||||
<SortableProvider id={field.address.toString()} data={{ insertAdjacent: 'afterEnd', schema: fieldSchema }}>
|
||||
<Sortable {...props}>{props.children}</Sortable>
|
||||
<SortableProvider id={id} data={{ insertAdjacent: 'afterEnd', schema: schema }}>
|
||||
<Sortable {...others}>{props.children}</Sortable>
|
||||
</SortableProvider>
|
||||
);
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user