ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: improve code

Browse Source
This commit is contained in:
chenos 2022-02-21 15:08:45 +08:00
parent 46afc05898
commit 24aa18515b
48 changed files with 1032 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/client/src/collection-manager/CollectionField.tsx
View File

@ -1,6 +1,7 @@
import { Field, FormPath } from '@formily/core';
import { connect, SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
import React, { useContext, useEffect } from 'react';
import { Field } from '@formily/core';
import { connect, useField, useFieldSchema } from '@formily/react';
import React, { useEffect } from 'react';
import { useComponent } from '..';
import { CollectionFieldProvider } from './CollectionFieldProvider';
import { useCollectionField } from './hooks';
@ -9,9 +10,7 @@ const InternalField: React.FC = (props) => {
const field = useField<Field>();
const fieldSchema = useFieldSchema();
const { uiSchema } = useCollectionField();
console.log('uiSchema', uiSchema);
const options = useContext(SchemaOptionsContext);
const component = FormPath.getIn(options?.components, uiSchema['x-component']);
const component = useComponent(uiSchema?.['x-component']);
const setFieldProps = (key, value) => {
field[key] = typeof field[key] === 'undefined' ? value : field[key];
};
@ -22,6 +21,9 @@ const InternalField: React.FC = (props) => {
};
// TODO: 初步适配
useEffect(() => {
if (!uiSchema) {
return;
}
setFieldProps('title', uiSchema.title);
setFieldProps('description', uiSchema.description);
setFieldProps('initialValue', uiSchema.default);
@ -29,7 +31,10 @@ const InternalField: React.FC = (props) => {
// @ts-ignore
field.dataSource = uiSchema.enum;
field.component = [component, uiSchema['x-component-props']];
}, [uiSchema.title, uiSchema.description, uiSchema.required]);
}, [uiSchema?.title, uiSchema?.description, uiSchema?.required]);
if (!uiSchema) {
return null;
}
return React.createElement(component, props);
};

15
packages/client/src/collection-manager/Configuration/AddFieldAction.tsx
View File

@ -28,21 +28,6 @@ const getSchema = (schema: IField): ISchema => {
},
title: '{{ t("Add field") }}',
properties: {
type: {
'x-component': 'CollectionField',
'x-decorator': 'FormItem',
},
'uiSchema.title': {
type: 'number',
title: '{{ t("Field display name") }}',
required: true,
'x-component': 'Input',
'x-decorator': 'FormItem',
},
name: {
'x-component': 'CollectionField',
'x-decorator': 'FormItem',
},
// @ts-ignore
...schema.properties,
footer: {

22
packages/client/src/collection-manager/Configuration/EditFieldAction.tsx
View File

@ -1,5 +1,6 @@
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
import cloneDeep from 'lodash/cloneDeep';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useAPIClient } from '../../api-client';
@ -20,29 +21,10 @@ const getSchema = (schema: IField): ISchema => {
'x-component': 'Action.Drawer',
'x-decorator': 'Form',
'x-decorator-props': {
initialValue: {
...schema.default,
name: `f_${uid()}`,
},
initialValue: cloneDeep(schema.default),
},
title: '{{ t("Edit field") }}',
properties: {
type: {
'x-component': 'CollectionField',
'x-decorator': 'FormItem',
},
'uiSchema.title': {
type: 'number',
title: '{{ t("Field display name") }}',
required: true,
'x-component': 'Input',
'x-decorator': 'FormItem',
},
name: {
'x-component': 'CollectionField',
'x-decorator': 'FormItem',
'x-disabled': true,
},
// @ts-ignore
...schema.properties,
footer: {

3
packages/client/src/collection-manager/Configuration/interfaces.tsx
View File

@ -35,7 +35,10 @@ export const options = Object.keys(groupLabels).map((groupName) => {
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],
};

14
packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts
View File

@ -1,5 +1,6 @@
import { ISchema } from '@formily/react';
import { CollectionOptions } from '../../types';
import { options } from '../interfaces';
const collection: CollectionOptions = {
name: 'fields',
@ -28,7 +29,8 @@ const collection: CollectionOptions = {
uiSchema: {
title: '{{ t("Field interface") }}',
type: 'string',
'x-component': 'Input',
'x-component': 'Select',
enum: options as any,
},
},
{
@ -94,6 +96,12 @@ export const collectionFieldSchema: ISchema = {
type: 'void',
title: '{{ t("Delete") }}',
'x-component': 'Action',
"x-component-props": {
confirm: {
title: "{{t('Delete record')}}",
content: "{{t('Are you sure you want to delete it?')}}",
},
}
},
create: {
type: 'void',
@ -176,6 +184,10 @@ export const collectionFieldSchema: ISchema = {
title: '{{ t("Delete") }}',
'x-component': 'Action.Link',
'x-component-props': {
confirm: {
title: "{{t('Delete record')}}",
content: "{{t('Are you sure you want to delete it?')}}",
},
useAction: '{{ cm.useDestroyActionAndRefreshCM }}',
},
},

11
packages/client/src/collection-manager/Configuration/schemas/collections.ts
View File

@ -79,6 +79,12 @@ export const collectionSchema: ISchema = {
type: 'void',
title: '{{ t("Delete") }}',
'x-component': 'Action',
'x-component-props': {
confirm: {
title: "{{t('Delete record')}}",
content: "{{t('Are you sure you want to delete it?')}}",
},
},
},
create: {
type: 'void',
@ -101,6 +107,7 @@ export const collectionSchema: ISchema = {
name: {
'x-component': 'CollectionField',
'x-decorator': 'FormItem',
default: '{{ randomString("t_") }}',
},
footer: {
type: 'void',
@ -248,6 +255,10 @@ export const collectionSchema: ISchema = {
title: '{{ t("Delete") }}',
'x-component': 'Action.Link',
'x-component-props': {
confirm: {
title: "{{t('Delete record')}}",
content: "{{t('Are you sure you want to delete it?')}}",
},
useAction: '{{ cm.useDestroyActionAndRefreshCM }}',
},
},

3
packages/client/src/collection-manager/hooks/useCollectionField.ts
View File

@ -9,6 +9,9 @@ export const useCollectionField = () => {
const record = useRecord();
const api = useAPIClient();
const ctx = useContext(CollectionFieldContext);
if (!ctx) {
return {} as any;
}
const resourceName = `${ctx?.collectinName || collection?.name}.${ctx.name}`;
const resource = api?.resource(resourceName, record[ctx.sourceKey]);
return {

50
packages/client/src/collection-manager/interfaces/attachment.ts Normal file
View File

@ -0,0 +1,50 @@
import { uid } from '@formily/shared';
import { defaultProps } from './properties';
import { IField } from './types';
export const attachment: IField = {
name: 'attachment',
type: 'object',
group: 'media',
title: '{{t("Attachment")}}',
isAssociation: true,
default: {
type: 'belongsToMany',
target: 'attachments',
// name,
uiSchema: {
type: 'array',
// title,
'x-component': 'Upload.Attachment',
'x-decorator': 'FormItem',
'x-designable-bar': 'Upload.DesignableBar',
},
},
initialize: (values: any) => {
if (!values.through) {
values.through = `t_${uid()}`;
}
if (!values.foreignKey) {
values.foreignKey = `f_${uid()}`;
}
if (!values.otherKey) {
values.otherKey = `f_${uid()}`;
}
if (!values.sourceKey) {
values.sourceKey = 'id';
}
if (!values.targetKey) {
values.targetKey = 'id';
}
},
properties: {
...defaultProps,
'uiSchema.x-component-props.multiple': {
type: 'boolean',
'x-content': "{{t('Allow uploading multiple files')}}",
'x-decorator': 'FormItem',
'x-component': 'Checkbox',
default: true,
},
},
};

5
packages/client/src/collection-manager/interfaces/checkbox.ts
View File

@ -1,3 +1,4 @@
import { defaultProps } from './properties';
import { IField } from './types';
export const checkbox: IField = {
@ -14,7 +15,9 @@ export const checkbox: IField = {
'x-component': 'Checkbox',
},
},
properties: {},
properties: {
...defaultProps,
},
operators: [
{ label: '{{t("Yes")}}', value: '$isTruly', selected: true, noValue: true },
{ label: '{{t("No")}}', value: '$isFalsy', noValue: true },

3
packages/client/src/collection-manager/interfaces/checkboxGroup.ts
View File

@ -1,4 +1,4 @@
import { dataSource } from './properties';
import { dataSource, defaultProps } from './properties';
import { IField } from './types';
export const checkboxGroup: IField = {
@ -17,6 +17,7 @@ export const checkboxGroup: IField = {
},
},
properties: {
...defaultProps,
'uiSchema.enum': dataSource,
},
};

2
packages/client/src/collection-manager/interfaces/chinaRegion.ts
View File

@ -1,4 +1,5 @@
import { uid } from '@formily/shared';
import { defaultProps } from './properties';
import { IField } from './types';
export const chinaRegion: IField = {
@ -48,6 +49,7 @@ export const chinaRegion: IField = {
}
},
properties: {
...defaultProps,
'uiSchema.x-component-props.maxLevel': {
type: 'number',
'x-component': 'Radio.Group',

3
packages/client/src/collection-manager/interfaces/createdAt.ts
View File

@ -1,4 +1,4 @@
import { dateTimeProps } from './properties';
import { dateTimeProps, defaultProps } from './properties';
import { IField } from './types';
export const createdAt: IField = {
@ -21,6 +21,7 @@ export const createdAt: IField = {
},
},
properties: {
...defaultProps,
...dateTimeProps,
},
};

32
packages/client/src/collection-manager/interfaces/createdBy.ts Normal file
View File

@ -0,0 +1,32 @@
import { defaultProps } from './properties';
import { IField } from './types';
export const createdBy: IField = {
name: 'createdBy',
type: 'object',
group: 'systemInfo',
order: 3,
title: '{{t("Created by")}}',
isAssociation: true,
default: {
type: 'belongsTo',
target: 'users',
foreignKey: 'createdById',
// name,
uiSchema: {
type: 'object',
title: '{{t("Created by")}}',
'x-component': 'RecordPicker',
'x-component-props': {
fieldNames: {
value: 'id',
label: 'nickname',
},
},
'x-read-pretty': true,
},
},
properties: {
...defaultProps,
},
};

37
packages/client/src/collection-manager/interfaces/datetime.ts Normal file
View File

@ -0,0 +1,37 @@
import { dateTimeProps, defaultProps } from './properties';
import { IField } from './types';
export const datetime: IField = {
name: 'datetime',
type: 'object',
group: 'datetime',
order: 1,
title: '{{t("Datetime")}}',
sortable: true,
default: {
type: 'date',
// name,
uiSchema: {
type: 'datetime',
// title,
'x-component': 'DatePicker',
'x-component-props': {
showTime: false,
},
},
},
properties: {
...defaultProps,
...dateTimeProps,
},
operators: [
{ label: "{{ t('is') }}", value: '$dateOn', selected: true },
{ label: "{{ t('is not') }}", value: '$dateNotOn' },
{ label: "{{ t('is before') }}", value: '$dateBefore' },
{ label: "{{ t('is after') }}", value: '$dateAfter' },
{ label: "{{ t('is on or after') }}", value: '$dateNotBefore' },
{ label: "{{ t('is on or before') }}", value: '$dateNotAfter' },
{ label: "{{ t('is empty') }}", value: '$null', noValue: true },
{ label: "{{ t('is not empty') }}", value: '$notNull', noValue: true },
],
};

8
packages/client/src/collection-manager/interfaces/email.ts
View File

@ -1,3 +1,5 @@
import { input } from './input';
import { defaultProps } from './properties';
import { IField } from './types';
export const email: IField = {
@ -14,9 +16,11 @@ export const email: IField = {
type: 'string',
// title,
'x-component': 'Input',
'x-decorator': 'FormItem',
'x-validator': 'email',
'x-designable-bar': 'Input.DesignableBar',
},
},
properties: {
...defaultProps,
},
operators: input.operators,
};

22
packages/client/src/collection-manager/interfaces/icon.ts Normal file
View File

@ -0,0 +1,22 @@
import { defaultProps } from './properties';
import { IField } from './types';
export const icon: IField = {
name: 'icon',
type: 'object',
group: 'basic',
order: 8,
title: '{{t("Icon")}}',
default: {
type: 'string',
// name,
uiSchema: {
type: 'string',
// title,
'x-component': 'IconPicker',
},
},
properties: {
...defaultProps,
},
};

17
packages/client/src/collection-manager/interfaces/index.ts
View File

@ -1,8 +1,25 @@
export * from './attachment';
export * from './checkbox';
export * from './checkboxGroup';
export * from './chinaRegion';
export * from './createdAt';
export * from './createdBy';
export * from './datetime';
export * from './email';
export * from './icon';
export * from './input';
export * from './linkTo';
export * from './markdown';
export * from './multipleSelect';
export * from './number';
export * from './password';
export * from './percent';
export * from './phone';
export * from './radioGroup';
export * from './select';
export * from './subTable';
export * from './textarea';
export * from './time';
export * from './updatedAt';
export * from './updatedBy';

2
packages/client/src/collection-manager/interfaces/input.ts
View File

@ -1,3 +1,4 @@
import { defaultProps } from './properties';
import { IField } from './types';
export const input: IField = {
@ -16,6 +17,7 @@ export const input: IField = {
},
},
properties: {
...defaultProps,
},
operators: [
{ label: '{{t("contains")}}', value: '$includes', selected: true },

70
packages/client/src/collection-manager/interfaces/linkTo.ts Normal file
View File

@ -0,0 +1,70 @@
import { uid } from '@formily/shared';
import { defaultProps } from './properties';
import { IField } from './types';
export const linkTo: IField = {
name: 'linkTo',
type: 'object',
group: 'relation',
order: 1,
title: '{{t("Link to")}}',
isAssociation: true,
default: {
type: 'belongsToMany',
// name,
uiSchema: {
type: 'array',
// title,
'x-component': 'Select.Drawer',
'x-component-props': {},
},
},
initialize: (values: any) => {
if (values.dataType === 'belongsToMany') {
if (!values.through) {
values.through = `t_${uid()}`;
}
if (!values.foreignKey) {
values.foreignKey = `f_${uid()}`;
}
if (!values.otherKey) {
values.otherKey = `f_${uid()}`;
}
if (!values.sourceKey) {
values.sourceKey = 'id';
}
if (!values.targetKey) {
if (values.target === 'roles') {
values.targetKey = 'name';
} else {
values.targetKey = 'id';
}
}
}
},
properties: {
...defaultProps,
target: {
type: 'string',
title: '{{t("Related collection")}}',
required: true,
// 'x-reactions': ['{{useAsyncDataSource(loadCollections)}}'],
'x-decorator': 'FormItem',
'x-component': 'Select',
},
// 'uiSchema.x-component-props.fieldNames.label': {
// type: 'string',
// title: '要显示的标题字段',
// required: true,
// 'x-reactions': ['{{useAsyncDataSource(loadCollectionFields)}}'],
// 'x-decorator': 'FormItem',
// 'x-component': 'Select',
// },
'uiSchema.x-component-props.multiple': {
type: 'boolean',
'x-content': '{{t("Allow linking to multiple records")}}',
'x-decorator': 'FormItem',
'x-component': 'Checkbox',
},
},
};

21
packages/client/src/collection-manager/interfaces/markdown.ts Normal file
View File

@ -0,0 +1,21 @@
import { defaultProps } from './properties';
import { IField } from './types';
export const markdown: IField = {
name: 'markdown',
type: 'object',
title: 'Markdown',
group: 'media',
default: {
type: 'text',
// name,
uiSchema: {
type: 'string',
// title,
'x-component': 'Markdown',
},
},
properties: {
...defaultProps,
},
};

54
packages/client/src/collection-manager/interfaces/multipleSelect.ts Normal file
View File

@ -0,0 +1,54 @@
import { dataSource, defaultProps } from './properties';
import { IField } from './types';
export const multipleSelect: IField = {
name: 'multipleSelect',
type: 'object',
group: 'choices',
order: 3,
title: '{{t("Multiple select")}}',
default: {
type: 'json',
// name,
uiSchema: {
type: 'array',
// title,
'x-component': 'Select',
'x-component-props': {
mode: 'multiple',
},
'x-decorator': 'FormItem',
'x-designable-bar': 'Select.DesignableBar',
enum: [],
},
},
properties: {
...defaultProps,
'uiSchema.enum': dataSource,
},
operations: [
{
label: '{{t("is")}}',
value: '$match',
selected: true,
schema: { 'x-component': 'Select' },
},
{
label: '{{t("is not")}}',
value: '$notMatch',
schema: { 'x-component': 'Select' },
},
{
label: '{{t("contains")}}',
value: '$anyOf',
schema: { 'x-component': 'Select' },
},
{
label: '{{t("does not contain")}}',
value: '$noneOf',
schema: { 'x-component': 'Select' },
},
{ label: '{{t("is empty")}}', value: '$null', noValue: true },
{ label: '{{t("is not empty")}}', value: '$notNull', noValue: true },
],
};

52
packages/client/src/collection-manager/interfaces/number.ts Normal file
View File

@ -0,0 +1,52 @@
import { defaultProps } from './properties';
import { IField } from './types';
export const number: IField = {
name: 'number',
type: 'object',
group: 'basic',
order: 5,
title: '{{t("Number")}}',
sortable: true,
default: {
type: 'float',
// name,
uiSchema: {
type: 'number',
// title,
'x-component': 'InputNumber',
'x-component-props': {
stringMode: true,
step: '0',
},
},
},
properties: {
...defaultProps,
'uiSchema.x-component-props.step': {
type: 'string',
title: '{{t("Precision")}}',
'x-component': 'Select',
'x-decorator': 'FormItem',
default: '0',
enum: [
{ value: '0', label: '1' },
{ value: '0.1', label: '1.0' },
{ value: '0.01', label: '1.00' },
{ value: '0.001', label: '1.000' },
{ value: '0.0001', label: '1.0000' },
{ value: '0.00001', label: '1.00000' },
],
},
},
operations: [
{ label: '{{t("=")}}', value: '$eq', selected: true },
{ label: '{{t("≠")}}', value: '$ne' },
{ label: '{{t(">")}}', value: '$gt' },
{ label: '{{t("≥")}}', value: '$gte' },
{ label: '{{t("<")}}', value: '$lt' },
{ label: '{{t("≤")}}', value: '$lte' },
{ label: '{{t("is empty")}}', value: '$null', noValue: true },
{ label: '{{t("is not empty")}}', value: '$notNull', noValue: true },
],
};

24
packages/client/src/collection-manager/interfaces/password.ts Normal file
View File

@ -0,0 +1,24 @@
import { defaultProps } from './properties';
import { IField } from './types';
export const password: IField = {
name: 'password',
type: 'object',
group: 'basic',
order: 7,
title: '{{t("Password")}}',
default: {
type: 'password',
// name,
uiSchema: {
type: 'string',
// title,
'x-component': 'Password',
'x-decorator': 'FormItem',
'x-designable-bar': 'Password.DesignableBar',
},
},
properties: {
...defaultProps,
},
};

47
packages/client/src/collection-manager/interfaces/percent.ts Normal file
View File

@ -0,0 +1,47 @@
import { number } from './number';
import { defaultProps } from './properties';
import { IField } from './types';
export const percent: IField = {
name: 'percent',
type: 'object',
group: 'basic',
order: 6,
title: '{{t("Percent")}}',
sortable: true,
default: {
type: 'float',
// name,
uiSchema: {
type: 'string',
// title,
'x-component': 'InputNumber',
'x-component-props': {
stringMode: true,
step: '0',
addonAfter: '%',
},
'x-decorator': 'FormItem',
'x-designable-bar': 'InputNumber.DesignableBar',
},
},
properties: {
...defaultProps,
'uiSchema.x-component-props.step': {
type: 'string',
title: '{{t("Precision")}}',
'x-component': 'Select',
'x-decorator': 'FormItem',
default: '0',
enum: [
{ value: '0', label: '1' },
{ value: '0.1', label: '1.0' },
{ value: '0.01', label: '1.00' },
{ value: '0.001', label: '1.000' },
{ value: '0.0001', label: '1.0000' },
{ value: '0.00001', label: '1.00000' },
],
},
},
operators: number.operators,
};

28
packages/client/src/collection-manager/interfaces/phone.ts Normal file
View File

@ -0,0 +1,28 @@
import { input } from './input';
import { defaultProps } from './properties';
import { IField } from './types';
export const phone: IField = {
name: 'phone',
type: 'object',
group: 'basic',
order: 3,
title: '{{t("Phone")}}',
sortable: true,
default: {
type: 'string',
// name,
uiSchema: {
type: 'string',
// title,
'x-component': 'Input',
'x-decorator': 'FormItem',
'x-validator': 'phone',
'x-designable-bar': 'Input.DesignableBar',
},
},
properties: {
...defaultProps,
},
operators: input.operators,
};

25
packages/client/src/collection-manager/interfaces/radioGroup.ts Normal file
View File

@ -0,0 +1,25 @@
import { dataSource, defaultProps } from './properties';
import { select } from './select';
import { IField } from './types';
export const radioGroup: IField = {
name: 'radioGroup',
type: 'object',
group: 'choices',
order: 4,
title: '{{t("Radio group")}}',
default: {
type: 'string',
// name,
uiSchema: {
type: 'string',
// title,
'x-component': 'Radio.Group',
},
},
properties: {
...defaultProps,
'uiSchema.enum': dataSource,
},
operators: select.operators,
};

55
packages/client/src/collection-manager/interfaces/select.ts Normal file
View File

@ -0,0 +1,55 @@
import { dataSource, defaultProps } from './properties';
import { IField } from './types';
export const select: IField = {
name: 'select',
type: 'object',
group: 'choices',
order: 2,
title: '{{t("Single select")}}',
default: {
type: 'string',
// name,
uiSchema: {
type: 'string',
// title,
'x-component': 'Select',
enum: [],
},
},
properties: {
...defaultProps,
'uiSchema.enum': dataSource,
},
operators: [
{
label: '{{t("is")}}',
value: '$eq',
selected: true,
schema: { 'x-component': 'Select' },
},
{
label: '{{t("is not")}}',
value: '$ne',
schema: { 'x-component': 'Select' },
},
{
label: '{{t("contains")}}',
value: '$in',
schema: {
'x-component': 'Select',
'x-component-props': { mode: 'tags' },
},
},
{
label: '{{t("does not contain")}}',
value: '$notIn',
schema: {
'x-component': 'Select',
'x-component-props': { mode: 'tags' },
},
},
{ label: '{{t("is empty")}}', value: '$null', noValue: true },
{ label: '{{t("is not empty")}}', value: '$notNull', noValue: true },
],
};

41
packages/client/src/collection-manager/interfaces/subTable.ts Normal file
View File

@ -0,0 +1,41 @@
import { uid } from '@formily/shared';
import { defaultProps } from './properties';
import { IField } from './types';
export const subTable: IField = {
name: 'subTable',
type: 'object',
group: 'relation',
order: 2,
title: '{{t("Sub-table")}}',
isAssociation: true,
disabled: true,
default: {
type: 'hasMany',
// name,
uiSchema: {
type: 'array',
// title,
'x-component': 'Table',
'x-component-props': {},
enum: [],
},
},
initialize: (values: any) => {
if (!values.target) {
values.target = `t_${uid()}`;
}
if (!values.foreignKey) {
values.foreignKey = `f_${uid()}`;
}
},
properties: {
...defaultProps,
// children: {
// type: 'array',
// title: '{{t("Sub-table fields")}}',
// 'x-decorator': 'FormItem',
// 'x-component': 'DatabaseField',
// },
},
};

5
packages/client/src/collection-manager/interfaces/textarea.ts
View File

@ -1,3 +1,4 @@
import { defaultProps } from './properties';
import { IField } from './types';
export const textarea: IField = {
@ -15,5 +16,7 @@ export const textarea: IField = {
'x-component': 'Input.TextArea',
},
},
properties: {},
properties: {
...defaultProps,
},
};

45
packages/client/src/collection-manager/interfaces/time.ts Normal file
View File

@ -0,0 +1,45 @@
import { defaultProps } from './properties';
import { IField } from './types';
export const time: IField = {
name: 'time',
type: 'object',
group: 'datetime',
order: 2,
title: '{{t("Time")}}',
sortable: true,
default: {
type: 'time',
// name,
uiSchema: {
type: 'string',
'x-component': 'TimePicker',
},
},
properties: {
...defaultProps,
'uiSchema.x-component-props.format': {
type: 'string',
title: '{{t("Time format")}}',
'x-component': 'Radio.Group',
'x-decorator': 'FormItem',
default: 'HH:mm:ss',
enum: [
{
label: '{{t("12 hour")}}',
value: 'hh:mm:ss a',
},
{
label: '{{t("24 hour")}}',
value: 'HH:mm:ss',
},
],
},
},
operators: [
{ label: '{{t("is")}}', value: '$eq', selected: true },
{ label: '{{t("is not")}}', value: '$neq' },
{ label: '{{t("is empty")}}', value: '$null', noValue: true },
{ label: '{{t("is not empty")}}', value: '$notNull', noValue: true },
],
};

1
packages/client/src/collection-manager/interfaces/types.ts
View File

@ -8,5 +8,6 @@ interface IDefault {
export interface IField extends ISchema {
default?: IDefault;
operators?: any[];
[key: string]: any;
}

29
packages/client/src/collection-manager/interfaces/updatedAt.ts Normal file
View File

@ -0,0 +1,29 @@
import { datetime } from './datetime';
import { dateTimeProps, defaultProps } from './properties';
import { IField } from './types';
export const updatedAt: IField = {
name: 'updatedAt',
type: 'object',
group: 'systemInfo',
order: 2,
title: '{{t("Last updated at")}}',
sortable: true,
default: {
type: 'date',
field: 'updated_at',
// name,
uiSchema: {
type: 'datetime',
title: '{{t("Last updated at")}}',
'x-component': 'DatePicker',
'x-component-props': {},
'x-read-pretty': true,
},
},
properties: {
...defaultProps,
...dateTimeProps,
},
operators: datetime.operators,
};

31
packages/client/src/collection-manager/interfaces/updatedBy.ts Normal file
View File

@ -0,0 +1,31 @@
import { defaultProps } from './properties';
import { IField } from './types';
export const updatedBy: IField = {
name: 'updatedBy',
type: 'object',
group: 'systemInfo',
order: 4,
title: '{{t("Last updated by")}}',
isAssociation: true,
default: {
type: 'belongsTo',
target: 'users',
foreignKey: 'updatedById',
uiSchema: {
type: 'object',
title: '{{t("Last updated by")}}',
'x-component': 'Select.Drawer',
'x-component-props': {
fieldNames: {
value: 'id',
label: 'nickname',
},
},
'x-read-pretty': true,
},
},
properties: {
...defaultProps,
},
};

4
packages/client/src/route-switch/antd/admin-layout/index.tsx
View File

@ -39,6 +39,10 @@ export function AdminLayout(props: any) {
uid={route.uiSchemaUid}
scope={{ onSelect, sideMenuRef, defaultSelectedUid }}
schemaTransform={(data) => {
if (!data) {
return data;
}
data['x-component-props'] = data['x-component-props'] || {};
data['x-component-props']['defaultSelectedUid'] = defaultSelectedUid;
return data;
}}

3
packages/client/src/schema-component/antd/AntdSchemaComponentProvider.tsx
View File

@ -1,8 +1,9 @@
import React from 'react';
import * as components from '.';
import * as common from '../common';
import { SchemaComponentOptions } from '../core/SchemaComponentOptions';
export const AntdSchemaComponentProvider = (props) => {
const { children } = props;
return <SchemaComponentOptions components={{ ...(components as any) }}>{children}</SchemaComponentOptions>;
return <SchemaComponentOptions components={{ ...components, ...common } as any}>{children}</SchemaComponentOptions>;
};

22
packages/client/src/schema-component/antd/action/Action.tsx
View File

@ -1,6 +1,6 @@
import { css } from '@emotion/css';
import { observer, useField } from '@formily/react';
import { Button } from 'antd';
import { Button, Modal } from 'antd';
import classnames from 'classnames';
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
@ -63,7 +63,7 @@ export const actionDesignerCss = css`
`;
export const Action: ComposedAction = observer((props: any) => {
const { openMode, containerRefKey, component, useAction = useA, onClick, className, ...others } = props;
const { confirm, openMode, containerRefKey, component, useAction = useA, onClick, className, ...others } = props;
const [visible, setVisible] = useState(false);
const Designer = useDesigner();
const field = useField();
@ -73,9 +73,19 @@ export const Action: ComposedAction = observer((props: any) => {
<SortableItem
{...others}
onClick={(e) => {
onClick && onClick(e);
setVisible(true);
run();
const onOk = () => {
onClick?.(e);
setVisible(true);
run();
};
if (confirm) {
Modal.confirm({
...confirm,
onOk,
});
} else {
onOk();
}
}}
component={component || Button}
className={classnames(className, actionDesignerCss)}
@ -102,7 +112,7 @@ Action.Designer = () => {
};
Action.Link = observer((props) => {
return <Action {...props} component={Link} className={'nb-action-link'}/>;
return <Action {...props} component={Link} className={'nb-action-link'} />;
});
Action.Drawer = ActionDrawer;

35
packages/client/src/schema-component/antd/action/ActionBar.tsx
View File

@ -1,6 +1,7 @@
import { observer, RecursionField, useFieldSchema } from '@formily/react';
import { Space } from 'antd';
import React from 'react';
import { DndContext } from '../../common';
import { useComponent } from '../../hooks';
export const ActionBar = observer((props: any) => {
@ -18,22 +19,24 @@ export const ActionBar = observer((props: any) => {
return (
<div style={{ display: 'flex', justifyContent: 'space-between', ...style }} {...others}>
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
<Space>
{fieldSchema.mapProperties((schema, key) => {
if (schema['x-align'] !== 'left') {
return null;
}
return <RecursionField key={key} name={key} schema={schema} />;
})}
</Space>
<Space>
{fieldSchema.mapProperties((schema, key) => {
if (schema['x-align'] === 'left') {
return null;
}
return <RecursionField key={key} name={key} schema={schema} />;
})}
</Space>
<DndContext>
<Space>
{fieldSchema.mapProperties((schema, key) => {
if (schema['x-align'] !== 'left') {
return null;
}
return <RecursionField key={key} name={key} schema={schema} />;
})}
</Space>
<Space>
{fieldSchema.mapProperties((schema, key) => {
if (schema['x-align'] === 'left') {
return null;
}
return <RecursionField key={key} name={key} schema={schema} />;
})}
</Space>
</DndContext>
</div>
{ActionInitializer && <ActionInitializer />}
</div>

46
packages/client/src/schema-component/antd/array-table/ArrayTable.tsx
View File

@ -1,7 +1,10 @@
import { css } from '@emotion/css';
import { ArrayField } from '@formily/core';
import { observer, RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
import { Table, TableColumnProps } from 'antd';
import cls from 'classnames';
import React from 'react';
import { DndContext } from '../..';
import { RecordProvider } from '../../../';
import { useComponent } from '../../hooks';
@ -23,6 +26,7 @@ const useTableColumns = () => {
return {
title: <RecursionField name={s.name} schema={s} onlyRenderSelf />,
dataIndex: s.name,
key: s.name,
render: (v, record) => {
const index = field.value?.indexOf(record);
return (
@ -39,8 +43,8 @@ const useTableColumns = () => {
}
return columns.concat({
title: <Initializer />,
dataIndex: 'TableColumnInitializer',
key: 'TableColumnInitializer',
dataIndex: 'TABLE_COLUMN_INITIALIZER',
key: 'TABLE_COLUMN_INITIALIZER',
});
};
@ -49,13 +53,49 @@ type ArrayTableType = React.FC<any> & {
mixin?: (T: any) => void;
};
export const components = {
header: {
wrapper: (props) => {
return (
<DndContext>
<thead {...props} />
</DndContext>
);
},
cell: (props) => {
return (
<th
{...props}
className={cls(
props.className,
css`
&:hover .general-schema-designer {
display: block;
}
`,
)}
/>
);
},
},
body: {
wrapper: (props) => {
return (
<DndContext>
<tbody {...props} />
</DndContext>
);
},
},
};
export const ArrayTable: ArrayTableType = observer((props) => {
const field = useField<ArrayField>();
const columns = useTableColumns();
const { onChange, ...others } = props;
return (
<div>
<Table {...others} columns={columns} dataSource={field.value?.slice()} />
<Table {...others} components={components} columns={columns} dataSource={field.value?.slice()} />
</div>
);
});

13
packages/client/src/schema-component/antd/menu/Menu.Designer.tsx
View File

@ -6,7 +6,18 @@ export const MenuDesigner = () => {
const field = useField();
return (
<GeneralSchemaDesigner>
<SchemaSettings.Item>编辑</SchemaSettings.Item>
<SchemaSettings.Popup
schema={{
type: 'void',
'x-component': 'Action.Modal',
'x-decorator': 'Form',
'x-component-props': {
title: '标题',
},
}}
>
编辑
</SchemaSettings.Popup>
<SchemaSettings.Divider />
<SchemaSettings.Remove />
</GeneralSchemaDesigner>

7
packages/client/src/schema-component/common/dnd-context/index.tsx
View File

@ -49,7 +49,12 @@ const useDragEnd = () => {
export const DndContext = observer((props) => {
return (
<DndKitContext collisionDetection={rectIntersection} onDragEnd={useDragEnd()}>
<DragOverlay>
<DragOverlay
dropAnimation={{
duration: 10,
easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
}}
>
<span style={{ whiteSpace: 'nowrap' }}>拖拽中</span>
</DragOverlay>
{props.children}

16
packages/client/src/schema-component/core/SchemaComponentProvider.tsx
View File

@ -1,20 +1,24 @@
import React, { useMemo, useState } from 'react';
import { uid } from '@formily/shared';
import { createForm } from '@formily/core';
import { useCookieState } from 'ahooks';
import { useTranslation } from 'react-i18next';
import { FormProvider } from '@formily/react';
import { ISchemaComponentProvider } from '../types';
import { uid } from '@formily/shared';
import { useCookieState } from 'ahooks';
import React, { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { SchemaComponentContext } from '../context';
import { ISchemaComponentProvider } from '../types';
import { SchemaComponentOptions } from './SchemaComponentOptions';
const randomString = (prefix: string = '') => {
return `${prefix}${uid()}`;
};
export const SchemaComponentProvider: React.FC<ISchemaComponentProvider> = (props) => {
const { components, children } = props;
const [, setUid] = useState(uid());
const [formId, setFormId] = useState(uid());
const form = props.form || useMemo(() => createForm(), [formId]);
const { t } = useTranslation();
const scope = { ...props.scope, t };
const scope = { ...props.scope, t, randomString };
const [active, setActive] = useCookieState('useCookieDesignable');
return (
<SchemaComponentContext.Provider

1
packages/client/src/schema-initializer/Initializers/BlockInitializer/TableBlock.tsx
View File

@ -59,6 +59,7 @@ const createSchema = (collectionName) => {
properties: {
actions: {
type: 'void',
'x-decorator': 'DndContext',
'x-component': 'Space',
'x-component-props': {
split: '|',

12
packages/client/src/schema-initializer/Initializers/FormItemInitializer/index.tsx
View File

@ -13,7 +13,7 @@ const useFormItems = () => {
return {
type: 'item',
title: field?.uiSchema?.title || field.name,
component: InitializeFormItem,
component: FormItem,
schema: {
name: field.name,
'x-designer': 'FormItem.Designer',
@ -74,7 +74,7 @@ const useCurrentFieldSchema = (path: string) => {
const itemWrap = SchemaInitializer.itemWrap;
const InitializeFormItem = itemWrap((props) => {
const FormItem = itemWrap((props) => {
const { item, insert } = props;
const { schema, exists, remove } = useCurrentFieldSchema(item.schema['x-collection-field']);
return (
@ -95,8 +95,10 @@ const InitializeFormItem = itemWrap((props) => {
);
});
const InitializeTextFormItem = itemWrap((props) => {
const TextItem = itemWrap((props) => {
const { insert } = props;
const { t } = useTranslation();
return (
<SchemaInitializer.Item
onClick={() => {
@ -107,7 +109,7 @@ const InitializeTextFormItem = itemWrap((props) => {
'x-designer': 'Markdown.Void.Designer',
'x-component': 'Markdown.Void',
'x-component-props': {
content: '# Markdown content',
content: t('This is a demo text, **supports Markdown syntax**.'),
},
});
}}
@ -133,7 +135,7 @@ export const FormItemInitializer = observer((props: any) => {
{
type: 'item',
title: t('Add text'),
component: InitializeTextFormItem,
component: TextItem,
},
]}
>

95
packages/client/src/schema-initializer/Initializers/PopupFormActionInitializer/index.tsx Normal file
View File

@ -0,0 +1,95 @@
import { observer, useFieldSchema } from '@formily/react';
import { Switch } from 'antd';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SchemaInitializer } from '../..';
import { useDesignable } from '../../../schema-component';
const useCurrentActionSchema = (action: string) => {
const fieldSchema = useFieldSchema();
const { remove } = useDesignable();
const schema = fieldSchema.reduceProperties((buf, s) => {
if (s['x-action'] === action) {
return s;
}
return buf;
});
return {
schema,
exists: !!schema,
remove() {
schema && remove(schema);
},
};
};
const InitializeAction = SchemaInitializer.itemWrap((props) => {
const { item, insert } = props;
const { exists, remove } = useCurrentActionSchema(item.schema['x-action']);
return (
<SchemaInitializer.Item
onClick={() => {
if (exists) {
return remove();
}
insert({
type: 'void',
'x-designer': 'Action.Designer',
'x-component': 'Action',
...item.schema,
});
}}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
{item.title}
<Switch style={{ marginLeft: 20 }} size={'small'} checked={exists} />
</div>
</SchemaInitializer.Item>
);
});
export const PopupFormActionInitializer = observer((props: any) => {
const { t } = useTranslation();
return (
<SchemaInitializer.Button
insertPosition={'beforeEnd'}
items={[
{
type: 'itemGroup',
title: t('Enable actions'),
children: [
{
type: 'item',
title: t('Submit'),
component: InitializeAction,
schema: {
title: '{{ t("Submit") }}',
'x-action': 'submit',
'x-component': 'Action',
'x-component-props': {
type: 'primary',
useAction: '{{ cm.useCreateAction }}',
},
},
},
{
type: 'item',
title: t('Cancel'),
component: InitializeAction,
schema: {
title: '{{ t("Cancel") }}',
'x-action': 'cancel',
'x-component': 'Action',
'x-component-props': {
useAction: '{{ cm.useCancelAction }}',
},
},
},
],
},
]}
>
{t('Configure actions')}
</SchemaInitializer.Button>
);
});

23
packages/client/src/schema-initializer/Initializers/TableActionInitializer/index.tsx
View File

@ -100,20 +100,15 @@ export const TableActionInitializer = observer((props: any) => {
type: 'void',
'x-component': 'Action.Container.Footer',
properties: {
action1: {
title: '{{ t("Cancel") }}',
'x-component': 'Action',
actions: {
type: 'void',
'x-action-initializer': 'PopupFormActionInitializer',
'x-decorator': 'DndContext',
'x-component': 'ActionBar',
'x-component-props': {
useAction: '{{ cm.useCancelAction }}',
},
},
action2: {
title: '{{ t("Submit") }}',
'x-component': 'Action',
'x-component-props': {
type: 'primary',
useAction: '{{ cm.useCreateAction }}',
layout: 'one-column',
},
properties: {},
},
},
},
@ -130,6 +125,10 @@ export const TableActionInitializer = observer((props: any) => {
title: '{{ t("Delete") }}',
'x-action': 'destroy',
'x-component-props': {
confirm: {
title: "{{t('Delete record')}}",
content: "{{t('Are you sure you want to delete it?')}}",
},
useAction: '{{ cm.useBulkDestroyAction }}',
},
},

23
packages/client/src/schema-initializer/Initializers/TableRecordActionInitializer/index.tsx
View File

@ -204,20 +204,15 @@ export const TableRecordActionInitializer = observer((props: any) => {
'x-component': 'ActionBar',
'x-component-props': {},
properties: {
action1: {
title: '{{ t("Cancel") }}',
'x-component': 'Action',
actions: {
type: 'void',
'x-action-initializer': 'PopupFormActionInitializer',
'x-decorator': 'DndContext',
'x-component': 'ActionBar',
'x-component-props': {
useAction: '{{ cm.useCancelAction }}',
},
},
action2: {
title: '{{ t("Submit") }}',
'x-component': 'Action',
'x-component-props': {
type: 'primary',
useAction: '{{ cm.useUpdateAction }}',
layout: 'one-column',
},
properties: {},
},
},
},
@ -236,6 +231,10 @@ export const TableRecordActionInitializer = observer((props: any) => {
title: '{{ t("Delete") }}',
'x-action': 'destroy',
'x-component-props': {
confirm: {
title: "{{t('Delete record')}}",
content: "{{t('Are you sure you want to delete it?')}}",
},
useAction: '{{ cm.useDestroyAction }}',
},
},

1
packages/client/src/schema-initializer/Initializers/index.ts
View File

@ -2,6 +2,7 @@ export * from './BlockInitializer';
export * from './DetailsActionInitializer';
export * from './FormActionInitializer';
export * from './FormItemInitializer';
export * from './PopupFormActionInitializer';
export * from './RecordBlockInitializer';
export * from './TableActionInitializer';
export * from './TableColumnInitializer';

58
packages/client/src/schema-settings/SchemaSettings.tsx
View File

@ -1,8 +1,10 @@
import { GeneralField } from '@formily/core';
import { ISchema, Schema } from '@formily/react';
import { Dropdown, Menu, MenuItemProps } from 'antd';
import React, { createContext, useContext } from 'react';
import { Designable } from '..';
import { uid } from '@formily/shared';
import { Dropdown, Menu, MenuItemProps, Modal } from 'antd';
import React, { createContext, useContext, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ActionContext, Designable, SchemaComponent } from '..';
interface SchemaSettingsProps {
title?: any;
@ -32,6 +34,7 @@ type SchemaSettingsNested = {
Remove?: React.FC<RemoveProps>;
Item?: React.FC<MenuItemProps>;
Divider?: React.FC;
Popup?: React.FC<MenuItemProps & { schema?: ISchema }>;
[key: string]: any;
};
@ -68,6 +71,7 @@ SchemaSettings.Item = (props) => {
<Menu.Item
{...props}
onClick={(info) => {
//
info.domEvent.preventDefault();
info.domEvent.stopPropagation();
props?.onClick?.(info);
@ -92,18 +96,26 @@ SchemaSettings.Divider = (props) => {
};
SchemaSettings.Remove = (props: any) => {
const { removeParentsIfNoChildren, breakRemoveOn } = props;
const { confirm, removeParentsIfNoChildren, breakRemoveOn } = props;
const { dn } = useSchemaSettings();
const { t } = useTranslation();
return (
<SchemaSettings.Item
onClick={() => {
dn.remove(null, {
removeParentsIfNoChildren,
breakRemoveOn,
Modal.confirm({
title: t('Delete block'),
content: t('Are you sure you want to delete it?'),
...confirm,
onOk() {
dn.remove(null, {
removeParentsIfNoChildren,
breakRemoveOn,
});
},
});
}}
>
移除
{t('Delete')}
</SchemaSettings.Item>
);
};
@ -116,10 +128,34 @@ SchemaSettings.SwitchItem = (props) => {
return null;
};
SchemaSettings.ModalItem = (props) => {
return null;
SchemaSettings.Popup = (props) => {
const { schema, ...others } = props;
const [visible, setVisible] = useState(false);
return (
<ActionContext.Provider value={{ visible, setVisible }}>
<SchemaSettings.Item
{...others}
onClick={() => {
setVisible(true);
}}
>
{props.children || props.title}
</SchemaSettings.Item>
<SchemaComponent
schema={{
name: uid(),
...schema,
}}
/>
</ActionContext.Provider>
);
};
SchemaSettings.DrawerItem = (props) => {
return null;
const [visible, setVisible] = useState(false);
return (
<ActionContext.Provider value={{ visible, setVisible }}>
<SchemaSettings.Item {...props}>{props.children || props.title}</SchemaSettings.Item>
</ActionContext.Provider>
);
};