fix: improve collection manager

This commit is contained in:
chenos 2022-11-19 18:39:40 +08:00
parent 0cbfa0a521
commit ef81032dbe
12 changed files with 76 additions and 48 deletions

View File

@ -1,5 +1,5 @@
import { Spin } from 'antd';
import React, { useState } from 'react';
import React, { useContext, useState } from 'react';
import { useAPIClient, useRequest } from '../api-client';
import { CollectionManagerSchemaComponentProvider } from './CollectionManagerSchemaComponentProvider';
import { CollectionManagerContext } from './context';
@ -8,11 +8,13 @@ import { CollectionManagerOptions } from './types';
export const CollectionManagerProvider: React.FC<CollectionManagerOptions> = (props) => {
const { service, interfaces, collections = [], refreshCM } = props;
const ctx = useContext(CollectionManagerContext);
return (
<CollectionManagerContext.Provider
value={{
...ctx,
service,
interfaces: { ...defaultInterfaces, ...interfaces },
interfaces: { ...defaultInterfaces, ...interfaces, ...ctx.interfaces },
collections,
refreshCM,
}}

View File

@ -1,6 +1,6 @@
import { PlusOutlined } from '@ant-design/icons';
import { ArrayTable } from '@formily/antd';
import { ISchema, useForm } from '@formily/react';
import { useForm } from '@formily/react';
import { uid } from '@formily/shared';
import { Button, Dropdown, Menu } from 'antd';
import { cloneDeep } from 'lodash';
@ -14,9 +14,9 @@ import { useCollectionManager } from '../hooks';
import { IField } from '../interfaces/types';
import { useResourceActionContext, useResourceContext } from '../ResourceActionProvider';
import * as components from './components';
import { options } from './interfaces';
import { getOptions } from './interfaces';
const getSchema = (schema: IField, record: any, compile): ISchema => {
const getSchema = (schema: IField, record: any, compile) => {
if (!schema) {
return;
}
@ -24,7 +24,7 @@ const getSchema = (schema: IField, record: any, compile): ISchema => {
const properties = cloneDeep(schema.properties) as any;
if (schema.hasDefaultValue === true) {
properties['defaultValue'] = cloneDeep(schema.default.uiSchema);
properties['defaultValue'] = cloneDeep(schema?.default?.uiSchema);
properties['defaultValue']['title'] = compile('{{ t("Default value") }}');
properties['defaultValue']['x-decorator'] = 'FormItem';
}
@ -108,9 +108,9 @@ export const useCollectionFieldFormValues = () => {
}
delete values.autoCreateReverseField;
return values;
}
}
}
},
};
};
const useCreateCollectionField = () => {
const form = useForm();
@ -143,7 +143,7 @@ export const AddCollectionField = (props) => {
};
export const AddFieldAction = (props) => {
const { scope, getContainer, item: record, children,trigger ,align} = props;
const { scope, getContainer, item: record, children, trigger, align } = props;
const { getInterface } = useCollectionManager();
const [visible, setVisible] = useState(false);
const [schema, setSchema] = useState({});
@ -164,11 +164,13 @@ export const AddFieldAction = (props) => {
}}
onClick={(info) => {
const schema = getSchema(getInterface(info.key), record, compile);
setSchema(schema);
setVisible(true);
if (schema) {
setSchema(schema);
setVisible(true);
}
}}
>
{options.map((option) => {
{getOptions().map((option) => {
return (
option.children.length > 0 && (
<Menu.ItemGroup key={option.label} title={compile(option.label)}>

View File

@ -0,0 +1,16 @@
import { observer } from '@formily/react';
import { Tag } from 'antd';
import React from 'react';
import { useCompile } from '../../../schema-component';
import { useCollectionManager } from '../../hooks';
export const CollectionFieldInterface = observer((props: any) => {
const { value } = props;
const { getInterface } = useCollectionManager();
const compile = useCompile();
const schema = getInterface(value);
if (!schema) return null;
return <Tag>{compile(schema.title)}</Tag>;
});

View File

@ -31,19 +31,23 @@ registerGroupLabel('advanced', '{{t("Advanced type")}}');
registerGroupLabel('systemInfo', '{{t("System info")}}');
registerGroupLabel('others', '{{t("Others")}}');
export const options = Object.keys(groupLabels).map((groupName) => {
return {
label: groupLabels[groupName],
children: Object.keys(fields[groupName] || {})
.map((type) => {
const field = fields[groupName][type];
return {
value: type,
label: field.title,
name: type,
...fields[groupName][type],
};
})
.sort((a, b) => a.order - b.order),
};
});
export const getOptions = () => {
return Object.keys(groupLabels).map((groupName) => {
return {
label: groupLabels[groupName],
children: Object.keys(fields[groupName] || {})
.map((type) => {
const field = fields[groupName][type];
return {
value: type,
label: field.title,
name: type,
...fields[groupName][type],
};
})
.sort((a, b) => a.order - b.order),
};
});
};
export const options = getOptions();

View File

@ -1,5 +1,6 @@
import { ISchema } from '@formily/react';
import { CollectionOptions } from '../../types';
import { CollectionFieldInterface } from '../components/CollectionFieldInterface';
import { options } from '../interfaces';
const collection: CollectionOptions = {
@ -155,9 +156,10 @@ export const collectionFieldSchema: ISchema = {
type: 'void',
'x-decorator': 'Table.Column.Decorator',
'x-component': 'Table.Column',
title: '{{t("Field interface")}}',
properties: {
interface: {
'x-component': 'CollectionField',
'x-component': CollectionFieldInterface,
'x-read-pretty': true,
},
},

View File

@ -106,7 +106,7 @@ export const useCollectionManager = () => {
if (!fieldNames?.length) {
return;
}
let cName = collectionName;
let cName: any = collectionName;
let collectionField;
while (cName && fieldNames.length > 0) {
const fileName = fieldNames.shift();

View File

@ -5,10 +5,12 @@ export * from './CollectionManagerProvider';
export * from './CollectionManagerSchemaComponentProvider';
export * from './CollectionManagerShortcut';
export * from './CollectionProvider';
export * from './Configuration';
export { registerField, registerGroupLabel } from './Configuration/interfaces';
export * from './context';
export * from './hooks';
export * as interfacesProperties from './interfaces/properties';
export * from './interfaces/types';
export * from './ResourceActionProvider';
export * from './types';
export * from './Configuration';

View File

@ -1,8 +1,7 @@
import { registerValidateFormats } from '@formily/core';
import { i18n } from '../../i18n';
import { defaultProps, operators, unique } from './properties';
import { IField } from './types';
import { i18n } from '../../i18n';
import { registerValidateFormats } from '@formily/core';
import { ISchema } from '@formily/react';
registerValidateFormats({
odd: /^-?\d*[13579]$/,
@ -17,7 +16,7 @@ export const integer: IField = {
title: '{{t("Integer")}}',
sortable: true,
default: {
type: 'integer',
type: 'bigInt',
// name,
uiSchema: {
type: 'number',

View File

@ -1,6 +1,6 @@
import { defaultProps, operators, unique } from './properties';
import { IField } from './types';
import { registerValidateRules } from '@formily/core';
import { defaultProps } from './properties';
import { IField } from './types';
registerValidateRules({
json(value) {
@ -20,7 +20,7 @@ export const json: IField = {
name: 'json',
type: 'object',
group: 'advanced',
order: 3,
order: 4,
title: '{{t("JSON")}}',
sortable: true,
default: {

View File

@ -15,6 +15,7 @@ export const type: ISchema = {
{ label: 'String', value: 'string' },
{ label: 'Text', value: 'text' },
{ label: 'Integer', value: 'integer' },
{ label: 'BigInteger', value: 'bigInt' },
{ label: 'Float', value: 'float' },
{ label: 'Double', value: 'double' },
{ label: 'Decimal', value: 'decimal' },

View File

@ -1,14 +1,14 @@
import React, { useContext } from 'react';
import { Button, Select } from 'antd';
import { css } from '@emotion/css';
import { ArrayTable, FormButtonGroup, FormDrawer, FormLayout, Submit } from '@formily/antd';
import { onFieldValueChange } from '@formily/core';
import { SchemaOptionsContext, useForm, useFormEffects } from '@formily/react';
import { ArrayTable, FormButtonGroup, FormDrawer, FormLayout, Submit } from '@formily/antd';
import { Button, Select } from 'antd';
import React, { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { css } from '@emotion/css';
import { Cron, SchemaComponent, SchemaComponentOptions, useCompile } from '../../schema-component';
import { IField } from './types';
import { defaultProps, operators, unique } from './properties';
import { IField } from './types';
function RuleTypeSelect(props) {
const compile = useCompile();
@ -252,7 +252,7 @@ export const sequence: IField = {
name: 'sequence',
type: 'object',
group: 'advanced',
order: 2,
order: 3,
title: '{{t("Sequence")}}',
sortable: true,
default: {

View File

@ -35,13 +35,13 @@ export const FormItem: any = (props) => {
`}`}
{...props}
extra={
field.description ? (
typeof field.description === 'string' ? (
<div
dangerouslySetInnerHTML={{
__html: HTMLEncode(field.description).split('\n').join('<br/>'),
}}
/>
) : null
) : field.description
}
/>
</BlockItem>