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

View File

@ -1,6 +1,6 @@
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import { ArrayTable } from '@formily/antd'; import { ArrayTable } from '@formily/antd';
import { ISchema, useForm } from '@formily/react'; import { useForm } from '@formily/react';
import { uid } from '@formily/shared'; import { uid } from '@formily/shared';
import { Button, Dropdown, Menu } from 'antd'; import { Button, Dropdown, Menu } from 'antd';
import { cloneDeep } from 'lodash'; import { cloneDeep } from 'lodash';
@ -14,9 +14,9 @@ import { useCollectionManager } from '../hooks';
import { IField } from '../interfaces/types'; import { IField } from '../interfaces/types';
import { useResourceActionContext, useResourceContext } from '../ResourceActionProvider'; import { useResourceActionContext, useResourceContext } from '../ResourceActionProvider';
import * as components from './components'; 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) { if (!schema) {
return; return;
} }
@ -24,7 +24,7 @@ const getSchema = (schema: IField, record: any, compile): ISchema => {
const properties = cloneDeep(schema.properties) as any; const properties = cloneDeep(schema.properties) as any;
if (schema.hasDefaultValue === true) { 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']['title'] = compile('{{ t("Default value") }}');
properties['defaultValue']['x-decorator'] = 'FormItem'; properties['defaultValue']['x-decorator'] = 'FormItem';
} }
@ -108,9 +108,9 @@ export const useCollectionFieldFormValues = () => {
} }
delete values.autoCreateReverseField; delete values.autoCreateReverseField;
return values; return values;
} },
} };
} };
const useCreateCollectionField = () => { const useCreateCollectionField = () => {
const form = useForm(); const form = useForm();
@ -143,7 +143,7 @@ export const AddCollectionField = (props) => {
}; };
export const AddFieldAction = (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 { getInterface } = useCollectionManager();
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [schema, setSchema] = useState({}); const [schema, setSchema] = useState({});
@ -164,11 +164,13 @@ export const AddFieldAction = (props) => {
}} }}
onClick={(info) => { onClick={(info) => {
const schema = getSchema(getInterface(info.key), record, compile); const schema = getSchema(getInterface(info.key), record, compile);
setSchema(schema); if (schema) {
setVisible(true); setSchema(schema);
setVisible(true);
}
}} }}
> >
{options.map((option) => { {getOptions().map((option) => {
return ( return (
option.children.length > 0 && ( option.children.length > 0 && (
<Menu.ItemGroup key={option.label} title={compile(option.label)}> <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('systemInfo', '{{t("System info")}}');
registerGroupLabel('others', '{{t("Others")}}'); registerGroupLabel('others', '{{t("Others")}}');
export const options = Object.keys(groupLabels).map((groupName) => { export const getOptions = () => {
return { return Object.keys(groupLabels).map((groupName) => {
label: groupLabels[groupName], return {
children: Object.keys(fields[groupName] || {}) label: groupLabels[groupName],
.map((type) => { children: Object.keys(fields[groupName] || {})
const field = fields[groupName][type]; .map((type) => {
return { const field = fields[groupName][type];
value: type, return {
label: field.title, value: type,
name: type, label: field.title,
...fields[groupName][type], name: type,
}; ...fields[groupName][type],
}) };
.sort((a, b) => a.order - b.order), })
}; .sort((a, b) => a.order - b.order),
}); };
});
};
export const options = getOptions();

View File

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

View File

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

View File

@ -5,10 +5,12 @@ export * from './CollectionManagerProvider';
export * from './CollectionManagerSchemaComponentProvider'; export * from './CollectionManagerSchemaComponentProvider';
export * from './CollectionManagerShortcut'; export * from './CollectionManagerShortcut';
export * from './CollectionProvider'; export * from './CollectionProvider';
export * from './Configuration';
export { registerField, registerGroupLabel } from './Configuration/interfaces';
export * from './context'; export * from './context';
export * from './hooks'; export * from './hooks';
export * as interfacesProperties from './interfaces/properties';
export * from './interfaces/types';
export * from './ResourceActionProvider'; export * from './ResourceActionProvider';
export * from './types'; 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 { defaultProps, operators, unique } from './properties';
import { IField } from './types'; import { IField } from './types';
import { i18n } from '../../i18n';
import { registerValidateFormats } from '@formily/core';
import { ISchema } from '@formily/react';
registerValidateFormats({ registerValidateFormats({
odd: /^-?\d*[13579]$/, odd: /^-?\d*[13579]$/,
@ -17,7 +16,7 @@ export const integer: IField = {
title: '{{t("Integer")}}', title: '{{t("Integer")}}',
sortable: true, sortable: true,
default: { default: {
type: 'integer', type: 'bigInt',
// name, // name,
uiSchema: { uiSchema: {
type: 'number', type: 'number',

View File

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

View File

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

View File

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

View File

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