feat: improve code

This commit is contained in:
chenos 2022-02-24 00:04:41 +08:00
parent 449c307eb9
commit 1f8c5f510b
11 changed files with 73 additions and 16 deletions

View File

@ -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",

View File

@ -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",

View File

@ -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;

View File

@ -16,6 +16,7 @@ export interface FieldOptions {
export interface CollectionOptions {
name?: string;
title?: string;
filterTargetKey?: string;
targetKey?: string;
fields?: FieldOptions[];

View File

@ -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={{

View File

@ -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>
);

View File

@ -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={{

View File

@ -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',

View File

@ -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>
);
};

View File

@ -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>

View File

@ -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={() => {