feat: page tabs (#1261)
* feat: page tabs * feat: hide page title * fix: style
This commit is contained in:
chenos
GitHub
parent
9e9688fa5b
commit
ef860d7556
@ -1,5 +1,6 @@
|
||||
import { FormDialog, FormLayout } from '@formily/antd';
|
||||
import { SchemaOptionsContext } from '@formily/react';
|
||||
import { uid } from '@formily/shared';
|
||||
import React, { useContext } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { SchemaComponent, SchemaComponentOptions } from '../../..';
|
||||
@ -151,7 +152,7 @@ export const PageMenuItem = itemWrap((props) => {
|
||||
'x-component': 'Page',
|
||||
'x-async': true,
|
||||
properties: {
|
||||
grid: {
|
||||
[uid()]: {
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-initializer': 'BlockInitializers',
|
||||
|
||||
@ -1,23 +1,262 @@
|
||||
import { useField } from '@formily/react';
|
||||
import { PageHeader as AntdPageHeader } from 'antd';
|
||||
import React, { useEffect } from 'react';
|
||||
import { css } from '@emotion/css';
|
||||
import { FormDialog, FormLayout } from '@formily/antd';
|
||||
import { RecursionField, 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';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useHistory, useLocation } from 'react-router-dom';
|
||||
import { useDocumentTitle } from '../../../document-title';
|
||||
import { useCompile } from '../../hooks';
|
||||
import { Icon } from '../../../icon';
|
||||
import { SchemaComponent, SchemaComponentOptions } from '../../core';
|
||||
import { useCompile, useDesignable } from '../../hooks';
|
||||
import { PageDesigner, PageTabDesigner } from './PageTabDesigner';
|
||||
|
||||
const designerCss = css`
|
||||
position: relative;
|
||||
&:hover {
|
||||
> .general-schema-designer {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.nb-action-link {
|
||||
> .general-schema-designer {
|
||||
top: -10px;
|
||||
bottom: -10px;
|
||||
left: -10px;
|
||||
right: -10px;
|
||||
}
|
||||
}
|
||||
> .general-schema-designer {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: none;
|
||||
background: rgba(241, 139, 98, 0.06);
|
||||
border: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
> .general-schema-designer-icons {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
line-height: 16px;
|
||||
pointer-events: all;
|
||||
.ant-space-item {
|
||||
background-color: #f18b62;
|
||||
color: #fff;
|
||||
line-height: 16px;
|
||||
width: 16px;
|
||||
padding-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const pageDesignerCss = css`
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
padding-top: 1px;
|
||||
&:hover {
|
||||
> .general-schema-designer {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.ant-page-header {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
> .general-schema-designer {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: none;
|
||||
/* background: rgba(241, 139, 98, 0.06); */
|
||||
border: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
> .general-schema-designer-icons {
|
||||
z-index: 9999;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
line-height: 16px;
|
||||
pointer-events: all;
|
||||
.ant-space-item {
|
||||
background-color: #f18b62;
|
||||
color: #fff;
|
||||
line-height: 16px;
|
||||
width: 16px;
|
||||
padding-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const Page = (props) => {
|
||||
const { children, ...others } = props;
|
||||
const field = useField();
|
||||
const compile = useCompile();
|
||||
const { title, setTitle } = useDocumentTitle();
|
||||
const fieldSchema = useFieldSchema();
|
||||
const history = useHistory();
|
||||
const dn = useDesignable();
|
||||
useEffect(() => {
|
||||
if (!title) {
|
||||
setTitle(field.title);
|
||||
setTitle(fieldSchema.title);
|
||||
}
|
||||
}, [field.title, title]);
|
||||
}, [fieldSchema.title, title]);
|
||||
const disablePageHeader = fieldSchema['x-component-props']?.disablePageHeader;
|
||||
const enablePageTabs = fieldSchema['x-component-props']?.enablePageTabs;
|
||||
const hidePageTitle = fieldSchema['x-component-props']?.hidePageTitle;
|
||||
const { t } = useTranslation();
|
||||
const options = useContext(SchemaOptionsContext);
|
||||
const location = useLocation<any>();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [activeKey, setActiveKey] = useState(() => {
|
||||
// @ts-ignore
|
||||
return location?.query?.tab || Object.keys(fieldSchema.properties).shift();
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<AntdPageHeader ghost={false} title={compile(title)} {...others} />
|
||||
<div style={{ margin: 24 }}>{children}</div>
|
||||
<div className={pageDesignerCss}>
|
||||
<PageDesigner title={fieldSchema.title || title} />
|
||||
{!disablePageHeader && (
|
||||
<AntdPageHeader
|
||||
className={css`
|
||||
&.has-footer {
|
||||
padding-top: 12px;
|
||||
.ant-page-header-heading-left {
|
||||
/* margin: 0; */
|
||||
}
|
||||
.ant-page-header-footer {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
`}
|
||||
ghost={false}
|
||||
title={hidePageTitle ? undefined : fieldSchema.title || compile(title)}
|
||||
{...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={
|
||||
<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,
|
||||
},
|
||||
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>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<div style={{ margin: 24 }}>
|
||||
{loading ? (
|
||||
<Spin />
|
||||
) : !disablePageHeader && enablePageTabs ? (
|
||||
<RecursionField
|
||||
schema={fieldSchema}
|
||||
onlyRenderProperties
|
||||
filterProperties={(s) => {
|
||||
return s.name === activeKey;
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={css`
|
||||
.nb-grid:not(:last-child) {
|
||||
> .nb-schema-initializer-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -0,0 +1,176 @@
|
||||
import { 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 { SchemaSettings } from '../../../schema-settings';
|
||||
|
||||
export const PageDesigner = ({ title }) => {
|
||||
const { dn } = useDesignable();
|
||||
const { t } = useTranslation();
|
||||
const field = useField();
|
||||
const fieldSchema = useFieldSchema();
|
||||
const hidePageTitle = fieldSchema['x-component-props']?.hidePageTitle;
|
||||
const disablePageHeader = fieldSchema['x-component-props']?.disablePageHeader;
|
||||
return (
|
||||
<div className={'general-schema-designer'}>
|
||||
<div className={'general-schema-designer-icons'}>
|
||||
<Space size={2} align={'center'}>
|
||||
<SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />}>
|
||||
<SchemaSettings.SwitchItem
|
||||
title={t('Enable page header')}
|
||||
checked={!fieldSchema['x-component-props']?.disablePageHeader}
|
||||
onChange={(v) => {
|
||||
fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
|
||||
fieldSchema['x-component-props']['disablePageHeader'] = !v;
|
||||
dn.emit('patch', {
|
||||
schema: {
|
||||
['x-uid']: fieldSchema['x-uid'],
|
||||
['x-component-props']: fieldSchema['x-component-props'],
|
||||
},
|
||||
});
|
||||
dn.refresh();
|
||||
}}
|
||||
/>
|
||||
{!disablePageHeader && <SchemaSettings.Divider />}
|
||||
{!disablePageHeader && (
|
||||
<SchemaSettings.SwitchItem
|
||||
title={t('Display page title')}
|
||||
checked={!fieldSchema['x-component-props']?.hidePageTitle}
|
||||
onChange={(v) => {
|
||||
fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
|
||||
fieldSchema['x-component-props']['hidePageTitle'] = !v;
|
||||
dn.emit('patch', {
|
||||
schema: {
|
||||
['x-uid']: fieldSchema['x-uid'],
|
||||
['x-component-props']: fieldSchema['x-component-props'],
|
||||
},
|
||||
});
|
||||
dn.refresh();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!disablePageHeader && !hidePageTitle && (
|
||||
<SchemaSettings.ModalItem
|
||||
hide
|
||||
title={t('Edit page title')}
|
||||
schema={
|
||||
{
|
||||
type: 'object',
|
||||
title: t('Edit page title'),
|
||||
properties: {
|
||||
title: {
|
||||
title: t('Title'),
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
'x-component-props': {},
|
||||
},
|
||||
},
|
||||
} as ISchema
|
||||
}
|
||||
initialValues={{ title }}
|
||||
onSubmit={({ title }) => {
|
||||
field.title = title;
|
||||
fieldSchema['title'] = title;
|
||||
dn.emit('patch', {
|
||||
schema: {
|
||||
['x-uid']: fieldSchema['x-uid'],
|
||||
title,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!disablePageHeader && (
|
||||
<SchemaSettings.SwitchItem
|
||||
title={t('Enable page tabs')}
|
||||
checked={fieldSchema['x-component-props']?.enablePageTabs}
|
||||
onChange={(v) => {
|
||||
fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
|
||||
fieldSchema['x-component-props']['enablePageTabs'] = v;
|
||||
dn.emit('patch', {
|
||||
schema: {
|
||||
['x-uid']: fieldSchema['x-uid'],
|
||||
['x-component-props']: fieldSchema['x-component-props'],
|
||||
},
|
||||
});
|
||||
dn.refresh();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</SchemaSettings>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const PageTabDesigner = ({ schema }) => {
|
||||
const { dn } = useDesignable();
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className={'general-schema-designer'}>
|
||||
<div className={'general-schema-designer-icons'}>
|
||||
<Space size={2} align={'center'}>
|
||||
<SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />}>
|
||||
<SchemaSettings.ModalItem
|
||||
title={t('Edit')}
|
||||
schema={
|
||||
{
|
||||
type: 'object',
|
||||
title: t('Edit tab'),
|
||||
properties: {
|
||||
title: {
|
||||
title: t('Tab name'),
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
'x-component-props': {},
|
||||
},
|
||||
icon: {
|
||||
title: t('Icon'),
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'IconPicker',
|
||||
'x-component-props': {},
|
||||
},
|
||||
},
|
||||
} as ISchema
|
||||
}
|
||||
initialValues={{ title: schema.title, icon: schema['x-icon'] }}
|
||||
onSubmit={({ title, icon }) => {
|
||||
schema.title = title;
|
||||
schema['x-icon'] = icon;
|
||||
dn.emit('patch', {
|
||||
schema: {
|
||||
['x-uid']: schema['x-uid'],
|
||||
title,
|
||||
'x-icon': icon,
|
||||
},
|
||||
});
|
||||
dn.refresh();
|
||||
}}
|
||||
/>
|
||||
<SchemaSettings.Divider />
|
||||
<SchemaSettings.Item
|
||||
eventKey="remove"
|
||||
onClick={() => {
|
||||
Modal.confirm({
|
||||
title: t('Delete block'),
|
||||
content: t('Are you sure you want to delete it?'),
|
||||
...confirm,
|
||||
onOk() {
|
||||
dn.remove(schema);
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t('Delete')}
|
||||
</SchemaSettings.Item>
|
||||
</SchemaSettings>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,5 +1,5 @@
|
||||
import { Repository, Transactionable } from '@nocobase/database';
|
||||
import { Cache } from '@nocobase/cache';
|
||||
import { Repository, Transactionable } from '@nocobase/database';
|
||||
import { uid } from '@nocobase/utils';
|
||||
import lodash from 'lodash';
|
||||
import { Transaction } from 'sequelize';
|
||||
@ -336,11 +336,16 @@ export class UiSchemaRepository extends Repository {
|
||||
@transaction()
|
||||
async patch(newSchema: any, options?) {
|
||||
const { transaction } = options;
|
||||
|
||||
const rootUid = newSchema['x-uid'];
|
||||
await this.clearXUidPathCache(rootUid, transaction);
|
||||
const oldTree = await this.getJsonSchema(rootUid);
|
||||
|
||||
if (!newSchema['properties']) {
|
||||
const s = await this.model.findByPk(rootUid, { transaction });
|
||||
s.set({ ...s.toJSON(), ...newSchema });
|
||||
// console.log(s.toJSON());
|
||||
await s.save({ transaction, hooks: false });
|
||||
return;
|
||||
}
|
||||
const oldTree = await this.getJsonSchema(rootUid, { transaction });
|
||||
const traverSchemaTree = async (schema, path = []) => {
|
||||
const node = schema;
|
||||
const oldNode = path.length == 0 ? oldTree : lodash.get(oldTree, path);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user