@nocobase/client 0.7.0-alpha.82 → 0.7.1-alpha.4

package/src/schema-component/antd/form-item/FormItem.tsx

@@ -1,213 +0,0 @@
-import { css } from '@emotion/css';
-import { FormItem as Item } from '@formily/antd';
-import { Field } from '@formily/core';
-import { ISchema, useField, useFieldSchema } from '@formily/react';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { useCompile, useDesignable } from '../..';
-import { useCollection, useCollectionManager } from '../../../collection-manager';
-import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
-import { BlockItem } from '../block-item';
-import { HTMLEncode } from '../input/shared';
-
-export const FormItem: any = (props) => {
-  const field = useField();
-  return (
-    <BlockItem className={'nb-form-item'}>
-      <Item
-       className={`${css`& .ant-space{
-        flex-wrap:wrap;
-      }`}`}
-        {...props}
-        extra={
-          field.description ? (
-            <div
-              dangerouslySetInnerHTML={{
-                __html: HTMLEncode(field.description).split('\n').join('<br/>'),
-              }}
-            />
-          ) : null
-        }
-      />
-    </BlockItem>
-  );
-};
-
-FormItem.Designer = () => {
-  const { getCollectionFields } = useCollectionManager();
-  const { getField } = useCollection();
-  const field = useField<Field>();
-  const fieldSchema = useFieldSchema();
-  const { t } = useTranslation();
-  const { dn, refresh } = useDesignable();
-  const compile = useCompile();
-  const collectionField = getField(fieldSchema['name']);
-  const originalTitle = collectionField?.uiSchema?.title;
-  const targetFields = collectionField?.target ? getCollectionFields(collectionField.target) : [];
-  const initialValue = {
-    title: field.title === originalTitle ? undefined : field.title,
-  };
-  if (!field.readPretty) {
-    initialValue['required'] = field.required;
-  }
-  const options = targetFields
-    .filter((field) => !field?.target && field.type !== 'boolean')
-    .map((field) => ({
-      value: field?.name,
-      label: compile(field?.uiSchema?.title) || field?.name,
-    }));
-  return (
-    <GeneralSchemaDesigner>
-      {collectionField && (
-        <SchemaSettings.ModalItem
-          title={t('Edit field title')}
-          schema={
-            {
-              type: 'object',
-              title: t('Edit field title'),
-              properties: {
-                title: {
-                  title: t('Field title'),
-                  default: field?.title,
-                  description: `${t('Original field title: ')}${collectionField?.uiSchema?.title}`,
-                  'x-decorator': 'FormItem',
-                  'x-component': 'Input',
-                  'x-component-props': {},
-                },
-              },
-            } as ISchema
-          }
-          onSubmit={({ title }) => {
-            if (title) {
-              field.title = title;
-              fieldSchema.title = title;
-              dn.emit('patch', {
-                schema: {
-                  'x-uid': fieldSchema['x-uid'],
-                  title: fieldSchema.title,
-                },
-              });
-            }
-            dn.refresh();
-          }}
-        />
-      )}
-      {!field.readPretty && (
-        <SchemaSettings.ModalItem
-          title={t('Edit description')}
-          schema={
-            {
-              type: 'object',
-              title: t('Edit description'),
-              properties: {
-                description: {
-                  // title: t('Description'),
-                  default: field?.description,
-                  'x-decorator': 'FormItem',
-                  'x-component': 'Input.TextArea',
-                  'x-component-props': {},
-                },
-              },
-            } as ISchema
-          }
-          onSubmit={({ description }) => {
-            field.description = description;
-            fieldSchema.description = description;
-            dn.emit('patch', {
-              schema: {
-                'x-uid': fieldSchema['x-uid'],
-                description: fieldSchema.description,
-              },
-            });
-            dn.refresh();
-          }}
-        />
-      )}
-      {field.readPretty && (
-        <SchemaSettings.ModalItem
-          title={t('Edit tooltip')}
-          schema={
-            {
-              type: 'object',
-              title: t('Edit description'),
-              properties: {
-                tooltip: {
-                  default: fieldSchema?.['x-decorator-props']?.tooltip,
-                  'x-decorator': 'FormItem',
-                  'x-component': 'Input.TextArea',
-                  'x-component-props': {},
-                },
-              },
-            } as ISchema
-          }
-          onSubmit={({ tooltip }) => {
-            field.decoratorProps.tooltip = tooltip;
-            fieldSchema['x-decorator-props'] = fieldSchema['x-decorator-props'] || {};
-            fieldSchema['x-decorator-props']['tooltip'] = tooltip;
-            dn.emit('patch', {
-              schema: {
-                'x-uid': fieldSchema['x-uid'],
-                'x-decorator-props': fieldSchema['x-decorator-props'],
-              },
-            });
-            dn.refresh();
-          }}
-        />
-      )}
-      {!field.readPretty && (
-        <SchemaSettings.SwitchItem
-          title={t('Required')}
-          checked={field.required}
-          onChange={(required) => {
-            const schema = {
-              ['x-uid']: fieldSchema['x-uid'],
-            };
-            field.required = required;
-            fieldSchema['required'] = required;
-            schema['required'] = required;
-            dn.emit('patch', {
-              schema,
-            });
-            refresh();
-          }}
-        />
-      )}
-      {collectionField?.target && (
-        <SchemaSettings.SelectItem
-          title={t('Title field')}
-          options={options}
-          value={field?.componentProps?.fieldNames?.label}
-          onChange={(label) => {
-            const schema = {
-              ['x-uid']: fieldSchema['x-uid'],
-            };
-            const fieldNames = {
-              ...field.componentProps.fieldNames,
-              label,
-            };
-            fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
-            fieldSchema['x-component-props']['fieldNames'] = fieldNames;
-            field.componentProps.fieldNames = fieldNames;
-            schema['x-component-props'] = {
-              fieldNames,
-            };
-            dn.emit('patch', {
-              schema,
-            });
-            dn.refresh();
-          }}
-        />
-      )}
-      {collectionField && <SchemaSettings.Divider />}
-      <SchemaSettings.Remove
-        removeParentsIfNoChildren
-        confirm={{
-          title: t('Delete field')
-        }}
-        breakRemoveOn={{
-          'x-component': 'Grid',
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-};

package/src/schema-component/antd/form-item/index.md

@@ -1,10 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# FormItem
-
-表单字段装饰器。除此之外，也继承了 BlockItem 的功能。

package/src/schema-component/antd/form-item/index.tsx

@@ -1 +0,0 @@
-export * from './FormItem';

package/src/schema-component/antd/form-v2/Form.Designer.tsx

@@ -1,217 +0,0 @@
-import { ArrayItems } from '@formily/antd';
-import { ISchema, useField, useFieldSchema } from '@formily/react';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { useFormBlockContext } from '../../../block-provider';
-import { useDetailsBlockContext } from '../../../block-provider/DetailsBlockProvider';
-import { useCollection } from '../../../collection-manager';
-import { useCollectionFilterOptions, useSortFields } from '../../../collection-manager/action-hooks';
-import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
-import { useSchemaTemplate } from '../../../schema-templates';
-import { useDesignable } from '../../hooks';
-import { useActionContext } from '../action';
-
-export const FormDesigner = () => {
-  const { name, title } = useCollection();
-  const template = useSchemaTemplate();
-  const ctx = useFormBlockContext();
-  const field = useField();
-  const fieldSchema = useFieldSchema();
-  const { dn } = useDesignable();
-  const { t } = useTranslation();
-  const { visible } = useActionContext();
-  return (
-    <GeneralSchemaDesigner template={template} title={title || name}>
-      {/* <SchemaSettings.Template componentName={'FormItem'} collectionName={name} /> */}
-      <SchemaSettings.FormItemTemplate componentName={'FormItem'} collectionName={name} />
-      <SchemaSettings.Divider />
-      <SchemaSettings.Remove
-        removeParentsIfNoChildren
-        breakRemoveOn={{
-          'x-component': 'Grid',
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-};
-
-export const ReadPrettyFormDesigner = () => {
-  const { name, title } = useCollection();
-  const template = useSchemaTemplate();
-  return (
-    <GeneralSchemaDesigner template={template} title={title || name}>
-      {/* <SchemaSettings.Template componentName={'ReadPrettyForm'} collectionName={name} /> */}
-      <SchemaSettings.FormItemTemplate
-        insertAdjacentPosition={'beforeEnd'}
-        componentName={'ReadPrettyFormItem'}
-        collectionName={name}
-      />
-      <SchemaSettings.Divider />
-      <SchemaSettings.Remove
-        removeParentsIfNoChildren
-        breakRemoveOn={{
-          'x-component': 'Grid',
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-};
-
-export const DetailsDesigner = () => {
-  const { name, title } = useCollection();
-  const template = useSchemaTemplate();
-  const { t } = useTranslation();
-  const fieldSchema = useFieldSchema();
-  const field = useField();
-  const dataSource = useCollectionFilterOptions(name);
-  const { service } = useDetailsBlockContext();
-  const { dn } = useDesignable();
-  const sortFields = useSortFields(name);
-  const defaultFilter = fieldSchema?.['x-decorator-props']?.params?.filter || {};
-  const defaultSort = fieldSchema?.['x-decorator-props']?.params?.sort || [];
-  const sort = defaultSort?.map((item: string) => {
-    return item.startsWith('-')
-      ? {
-          field: item.substring(1),
-          direction: 'desc',
-        }
-      : {
-          field: item,
-          direction: 'asc',
-        };
-  });
-  return (
-    <GeneralSchemaDesigner template={template} title={title || name}>
-      <SchemaSettings.ModalItem
-        title={t('Set the data scope')}
-        schema={
-          {
-            type: 'object',
-            title: t('Set the data scope'),
-            properties: {
-              filter: {
-                default: defaultFilter,
-                // title: '数据范围',
-                enum: dataSource,
-                'x-component': 'Filter',
-                'x-component-props': {},
-              },
-            },
-          } as ISchema
-        }
-        onSubmit={({ filter }) => {
-          const params = field.decoratorProps.params || {};
-          params.filter = filter;
-          field.decoratorProps.params = params;
-          fieldSchema['x-decorator-props']['params'] = params;
-          service.run({ ...service.params?.[0], filter });
-          dn.emit('patch', {
-            schema: {
-              ['x-uid']: fieldSchema['x-uid'],
-              'x-decorator-props': fieldSchema['x-decorator-props'],
-            },
-          });
-        }}
-      />
-      <SchemaSettings.ModalItem
-        title={t('Set default sorting rules')}
-        components={{ ArrayItems }}
-        schema={
-          {
-            type: 'object',
-            title: t('Set default sorting rules'),
-            properties: {
-              sort: {
-                type: 'array',
-                default: sort,
-                'x-component': 'ArrayItems',
-                'x-decorator': 'FormItem',
-                items: {
-                  type: 'object',
-                  properties: {
-                    space: {
-                      type: 'void',
-                      'x-component': 'Space',
-                      properties: {
-                        sort: {
-                          type: 'void',
-                          'x-decorator': 'FormItem',
-                          'x-component': 'ArrayItems.SortHandle',
-                        },
-                        field: {
-                          type: 'string',
-                          enum: sortFields,
-                          'x-decorator': 'FormItem',
-                          'x-component': 'Select',
-                          'x-component-props': {
-                            style: {
-                              width: 260,
-                            },
-                          },
-                        },
-                        direction: {
-                          type: 'string',
-                          'x-decorator': 'FormItem',
-                          'x-component': 'Radio.Group',
-                          'x-component-props': {
-                            optionType: 'button',
-                          },
-                          enum: [
-                            {
-                              label: t('ASC'),
-                              value: 'asc',
-                            },
-                            {
-                              label: t('DESC'),
-                              value: 'desc',
-                            },
-                          ],
-                        },
-                        remove: {
-                          type: 'void',
-                          'x-decorator': 'FormItem',
-                          'x-component': 'ArrayItems.Remove',
-                        },
-                      },
-                    },
-                  },
-                },
-                properties: {
-                  add: {
-                    type: 'void',
-                    title: t('Add sort field'),
-                    'x-component': 'ArrayItems.Addition',
-                  },
-                },
-              },
-            },
-          } as ISchema
-        }
-        onSubmit={({ sort }) => {
-          const sortArr = sort.map((item) => {
-            return item.direction === 'desc' ? `-${item.field}` : item.field;
-          });
-          const params = field.decoratorProps.params || {};
-          params.sort = sortArr;
-          field.decoratorProps.params = params;
-          fieldSchema['x-decorator-props']['params'] = params;
-          dn.emit('patch', {
-            schema: {
-              ['x-uid']: fieldSchema['x-uid'],
-              'x-decorator-props': fieldSchema['x-decorator-props'],
-            },
-          });
-          service.run({ ...service.params?.[0], sort: sortArr });
-        }}
-      />
-      <SchemaSettings.Template componentName={'Details'} collectionName={name} />
-      <SchemaSettings.Divider />
-      <SchemaSettings.Remove
-        removeParentsIfNoChildren
-        breakRemoveOn={{
-          'x-component': 'Grid',
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-};

package/src/schema-component/antd/form-v2/Form.tsx

@@ -1,106 +0,0 @@
-import { FormLayout } from '@formily/antd';
-import { createForm, Field, onFormInputChange } from '@formily/core';
-import { FieldContext, FormContext, observer, RecursionField, useField, useFieldSchema } from '@formily/react';
-import { uid } from '@nocobase/utils';
-import { Spin } from 'antd';
-import React, { useEffect, useMemo } from 'react';
-import { useActionContext } from '..';
-import { useAttach, useComponent } from '../..';
-import { useProps } from '../../hooks/useProps';
-
-export interface FormProps {
-  [key: string]: any;
-}
-
-const FormComponent: React.FC<FormProps> = (props) => {
-  const { form, children, ...others } = props;
-  const field = useField();
-  const fieldSchema = useFieldSchema();
-  // TODO: component 里 useField 会与当前 field 存在偏差
-  const f = useAttach(form.createVoidField({ ...field.props, basePath: '' }));
-  return (
-    <FieldContext.Provider value={undefined}>
-      <FormContext.Provider value={form}>
-        <FormLayout layout={'vertical'} {...others}>
-          <RecursionField basePath={f.address} schema={fieldSchema} onlyRenderProperties />
-        </FormLayout>
-      </FormContext.Provider>
-    </FieldContext.Provider>
-  );
-};
-
-const Def = (props: any) => props.children;
-
-const FormDecorator: React.FC<FormProps> = (props) => {
-  const { form, children, ...others } = props;
-  const field = useField();
-  const fieldSchema = useFieldSchema();
-  // TODO: component 里 useField 会与当前 field 存在偏差
-  const f = useAttach(form.createVoidField({ ...field.props, basePath: '' }));
-  const Component = useComponent(fieldSchema['x-component'], Def);
-  return (
-    <FieldContext.Provider value={undefined}>
-      <FormContext.Provider value={form}>
-        <FormLayout layout={'vertical'} {...others}>
-          <FieldContext.Provider value={f}>
-            <Component {...field.componentProps}>
-              <RecursionField basePath={f.address} schema={fieldSchema} onlyRenderProperties />
-            </Component>
-          </FieldContext.Provider>
-          {/* <FieldContext.Provider value={f}>{children}</FieldContext.Provider> */}
-        </FormLayout>
-      </FormContext.Provider>
-    </FieldContext.Provider>
-  );
-};
-
-const WithForm = (props) => {
-  const { form } = props;
-  const fieldSchema = useFieldSchema();
-  const { setFormValueChanged } = useActionContext();
-  useEffect(() => {
-    const id = uid();
-    form.addEffects(id, () => {
-      onFormInputChange((form) => {
-        setFormValueChanged?.(true);
-      });
-    });
-    return () => {
-      form.removeEffects(id);
-    };
-  }, []);
-  return fieldSchema['x-decorator'] === 'Form' ? <FormDecorator {...props} /> : <FormComponent {...props} />;
-};
-
-const WithoutForm = (props) => {
-  const fieldSchema = useFieldSchema();
-  const { setFormValueChanged } = useActionContext();
-  const form = useMemo(
-    () =>
-      createForm({
-        effects() {
-          onFormInputChange((form) => {
-            setFormValueChanged(true);
-          });
-        },
-      }),
-    [],
-  );
-  return fieldSchema['x-decorator'] === 'Form' ? (
-    <FormDecorator form={form} {...props} />
-  ) : (
-    <FormComponent form={form} {...props} />
-  );
-};
-
-export const Form: React.FC<FormProps> & { Designer?: any; ReadPrettyDesigner?: any } = observer((props) => {
-  const field = useField<Field>();
-  const { form, ...others } = useProps(props);
-  return (
-    <form>
-      <Spin spinning={field.loading || false}>
-        {form ? <WithForm form={form} {...others} /> : <WithoutForm {...others} />}
-      </Spin>
-    </form>
-  );
-});