feat: improve code
This commit is contained in:
parent
449c307eb9
commit
1f8c5f510b
@ -41,6 +41,7 @@
|
||||
"@typescript-eslint/eslint-plugin": "^4.9.1",
|
||||
"@typescript-eslint/parser": "^4.8.2",
|
||||
"antd": "^4.18.5",
|
||||
"classnames": "^2.3.1",
|
||||
"concurrently": "^7.0.0",
|
||||
"cross-env": "^5.2.0",
|
||||
"dotenv": "^10.0.0",
|
||||
|
@ -26,6 +26,7 @@
|
||||
"ahooks": "^3.0.5",
|
||||
"antd": "^4.18.5",
|
||||
"axios": "^0.24.0",
|
||||
"classnames": "^2.3.1",
|
||||
"file-saver": "^2.0.5",
|
||||
"i18next": "^21.6.0",
|
||||
"marked": "^4.0.12",
|
||||
|
@ -29,6 +29,7 @@ const InternalField: React.FC = (props) => {
|
||||
setFieldProps('title', uiSchema.title);
|
||||
setFieldProps('description', uiSchema.description);
|
||||
setFieldProps('initialValue', uiSchema.default);
|
||||
field.readPretty = uiSchema['x-read-pretty'];
|
||||
setRequired();
|
||||
// @ts-ignore
|
||||
field.dataSource = uiSchema.enum;
|
||||
|
@ -16,6 +16,7 @@ export interface FieldOptions {
|
||||
|
||||
export interface CollectionOptions {
|
||||
name?: string;
|
||||
title?: string;
|
||||
filterTargetKey?: string;
|
||||
targetKey?: string;
|
||||
fields?: FieldOptions[];
|
||||
|
@ -1,9 +1,11 @@
|
||||
import React from 'react';
|
||||
import { useCollection } from '../../../collection-manager';
|
||||
import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
|
||||
|
||||
export const FormDesigner = () => {
|
||||
const { name, title } = useCollection();
|
||||
return (
|
||||
<GeneralSchemaDesigner>
|
||||
<GeneralSchemaDesigner title={title || name}>
|
||||
<SchemaSettings.Remove
|
||||
removeParentsIfNoChildren
|
||||
breakRemoveOn={{
|
||||
|
@ -6,6 +6,7 @@ import { Spin } from 'antd';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useAttach, useComponent } from '../..';
|
||||
import { useRequest } from '../../../api-client';
|
||||
import { useCollection } from '../../../collection-manager';
|
||||
import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
|
||||
|
||||
type Opts = Options<any, any> & { uid?: string };
|
||||
@ -100,8 +101,9 @@ export const Form: React.FC<FormProps> & { Designer?: any } = observer((props) =
|
||||
});
|
||||
|
||||
Form.Designer = () => {
|
||||
const { name, title } = useCollection();
|
||||
return (
|
||||
<GeneralSchemaDesigner>
|
||||
<GeneralSchemaDesigner title={title || name}>
|
||||
<SchemaSettings.Remove />
|
||||
</GeneralSchemaDesigner>
|
||||
);
|
||||
|
@ -1,9 +1,11 @@
|
||||
import React from 'react';
|
||||
import { useCollection } from '../../../collection-manager';
|
||||
import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
|
||||
|
||||
export const VoidTableDesigner = () => {
|
||||
const { name, title } = useCollection();
|
||||
return (
|
||||
<GeneralSchemaDesigner>
|
||||
<GeneralSchemaDesigner title={title || name}>
|
||||
<SchemaSettings.Remove
|
||||
removeParentsIfNoChildren
|
||||
breakRemoveOn={{
|
||||
|
@ -12,7 +12,7 @@ export const GridFormItemInitializers = (props: any) => {
|
||||
items={[
|
||||
{
|
||||
type: 'itemGroup',
|
||||
title: 'Display fields',
|
||||
title: t('Display fields'),
|
||||
children: useFormItemInitializerFields(),
|
||||
},
|
||||
{
|
||||
@ -20,7 +20,7 @@ export const GridFormItemInitializers = (props: any) => {
|
||||
},
|
||||
{
|
||||
type: 'item',
|
||||
title: 'Add text',
|
||||
title: t('Add text'),
|
||||
component: 'GeneralInitializer',
|
||||
schema: {
|
||||
type: 'void',
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { ISchema, observer } from '@formily/react';
|
||||
import { Button, Dropdown, Menu } from 'antd';
|
||||
import React, { createContext, useContext, useState } from 'react';
|
||||
import { useDesignable } from '../schema-component/hooks';
|
||||
import { useCompile, useDesignable } from '../schema-component/hooks';
|
||||
import { initializes, items } from './Initializers';
|
||||
import {
|
||||
SchemaInitializerButtonProps,
|
||||
@ -31,6 +31,7 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
|
||||
style,
|
||||
...others
|
||||
} = props;
|
||||
const compile = useCompile();
|
||||
let { insertAdjacent, findComponent, designable } = useDesignable();
|
||||
const [visible, setVisible] = useState(false);
|
||||
const insertSchema = (schema) => {
|
||||
@ -59,14 +60,21 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
|
||||
insert: insertSchema,
|
||||
}}
|
||||
>
|
||||
<Component {...item} item={item} insert={insertSchema} />
|
||||
<Component
|
||||
{...item}
|
||||
item={{
|
||||
...item,
|
||||
title: compile(item.title),
|
||||
}}
|
||||
insert={insertSchema}
|
||||
/>
|
||||
</SchemaInitializerItemContext.Provider>
|
||||
)
|
||||
);
|
||||
}
|
||||
return (
|
||||
item?.children?.length > 0 && (
|
||||
<Menu.ItemGroup key={`item-group-${indexA}`} title={item.title}>
|
||||
<Menu.ItemGroup key={`item-group-${indexA}`} title={compile(item.title)}>
|
||||
{item?.children?.map((child, indexB) => {
|
||||
if (!child.component) {
|
||||
return null;
|
||||
@ -83,7 +91,14 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
|
||||
insert: insertSchema,
|
||||
}}
|
||||
>
|
||||
<Component {...child} item={child} insert={insertSchema} />
|
||||
<Component
|
||||
{...child}
|
||||
item={{
|
||||
...child,
|
||||
title: compile(child.title),
|
||||
}}
|
||||
insert={insertSchema}
|
||||
/>
|
||||
</SchemaInitializerItemContext.Provider>
|
||||
)
|
||||
);
|
||||
@ -117,7 +132,7 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
|
||||
color: '#f18b62',
|
||||
}}
|
||||
>
|
||||
{props.children || props.title}
|
||||
{compile(props.children || props.title)}
|
||||
</Button>
|
||||
</Dropdown>
|
||||
);
|
||||
@ -125,6 +140,7 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
|
||||
|
||||
SchemaInitializer.Item = (props: SchemaInitializerItemProps) => {
|
||||
const { index, info } = useContext(SchemaInitializerItemContext);
|
||||
const compile = useCompile();
|
||||
const { items = [], children = info?.title, icon, onClick, ...others } = props;
|
||||
if (items?.length > 0) {
|
||||
const renderMenuItem = (items: SchemaInitializerItemOptions[]) => {
|
||||
@ -138,7 +154,7 @@ SchemaInitializer.Item = (props: SchemaInitializerItemProps) => {
|
||||
if (item.type === 'itemGroup') {
|
||||
return (
|
||||
// @ts-ignore
|
||||
<Menu.ItemGroup eventKey={`item-group-${indexA}`} key={`item-group-${indexA}`} title={item.title}>
|
||||
<Menu.ItemGroup eventKey={`item-group-${indexA}`} key={`item-group-${indexA}`} title={compile(item.title)}>
|
||||
{renderMenuItem(item.children)}
|
||||
</Menu.ItemGroup>
|
||||
);
|
||||
@ -146,7 +162,7 @@ SchemaInitializer.Item = (props: SchemaInitializerItemProps) => {
|
||||
if (item.type === 'subMenu') {
|
||||
return (
|
||||
// @ts-ignore
|
||||
<Menu.SubMenu eventKey={`sub-menu-${indexA}`} key={`sub-menu-${indexA}`} title={item.title}>
|
||||
<Menu.SubMenu eventKey={`sub-menu-${indexA}`} key={`sub-menu-${indexA}`} title={compile(item.title)}>
|
||||
{renderMenuItem(item.children)}
|
||||
</Menu.SubMenu>
|
||||
);
|
||||
@ -159,14 +175,14 @@ SchemaInitializer.Item = (props: SchemaInitializerItemProps) => {
|
||||
onClick({ ...info, item });
|
||||
}}
|
||||
>
|
||||
{item.title}
|
||||
{compile(item.title)}
|
||||
</Menu.Item>
|
||||
);
|
||||
});
|
||||
};
|
||||
return (
|
||||
// @ts-ignore
|
||||
<Menu.SubMenu eventKey={index} key={index} title={children} icon={icon}>
|
||||
<Menu.SubMenu eventKey={index} key={index} title={compile(children)} icon={icon}>
|
||||
{renderMenuItem(items)}
|
||||
</Menu.SubMenu>
|
||||
);
|
||||
@ -180,7 +196,7 @@ SchemaInitializer.Item = (props: SchemaInitializerItemProps) => {
|
||||
}}
|
||||
{...others}
|
||||
>
|
||||
{children}
|
||||
{compile(children)}
|
||||
</Menu.Item>
|
||||
);
|
||||
};
|
||||
|
@ -1,11 +1,29 @@
|
||||
import { DragOutlined, MenuOutlined } from '@ant-design/icons';
|
||||
import { css } from '@emotion/css';
|
||||
import { useField, useFieldSchema } from '@formily/react';
|
||||
import { Space } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import { DragHandler, useDesignable } from '../schema-component';
|
||||
import { SchemaSettings } from './SchemaSettings';
|
||||
|
||||
const titleCss = css`
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
background: #f18b62;
|
||||
color: #fff;
|
||||
padding: 0 5px;
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-radius: 2px;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
`;
|
||||
|
||||
export const GeneralSchemaDesigner = (props: any) => {
|
||||
const { title } = props;
|
||||
const { dn, designable } = useDesignable();
|
||||
const field = useField();
|
||||
const fieldSchema = useFieldSchema();
|
||||
@ -19,6 +37,7 @@ export const GeneralSchemaDesigner = (props: any) => {
|
||||
}
|
||||
return (
|
||||
<div className={'general-schema-designer'}>
|
||||
{title && <div className={classNames('general-schema-designer-title', titleCss)}>{title}</div>}
|
||||
<div className={'general-schema-designer-icons'}>
|
||||
<Space size={2} align={'center'}>
|
||||
<DragHandler>
|
||||
|
@ -1,17 +1,29 @@
|
||||
import { Menu } from 'antd';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { useDesignable } from '..';
|
||||
import { ProfileAction } from './ProfileAction';
|
||||
|
||||
export const CurrentUser = () => {
|
||||
const history = useHistory();
|
||||
const { reset } = useDesignable();
|
||||
const { i18n } = useTranslation();
|
||||
return (
|
||||
<div style={{ display: 'inline-block' }}>
|
||||
<Menu selectable={false} mode={'horizontal'} theme={'dark'}>
|
||||
<Menu.SubMenu key={'current-user'} title={'超级管理员'}>
|
||||
<ProfileAction />
|
||||
<Menu.Item>切换角色</Menu.Item>
|
||||
<Menu.Item>语言设置</Menu.Item>
|
||||
<Menu.Item
|
||||
onClick={() => {
|
||||
i18n.changeLanguage(i18n.language === 'en-US' ? 'zh-CN' : 'en-US');
|
||||
// reset();
|
||||
window.location.reload();
|
||||
}}
|
||||
>
|
||||
语言设置
|
||||
</Menu.Item>
|
||||
<Menu.Divider />
|
||||
<Menu.Item
|
||||
onClick={() => {
|
||||
|
Loading…
Reference in New Issue
Block a user