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

package/src/schema-component/antd/table/Table.Column.ActionBar.tsx

@@ -1,53 +0,0 @@
-import { css } from '@emotion/css';
-import { observer } from '@formily/react';
-import React from 'react';
-import { SortableItem, useDesigner } from '../..';
-
-export const designerCss = css`
-  position: relative;
-  &:hover {
-    > .general-schema-designer {
-      display: block;
-    }
-  }
-  > .general-schema-designer {
-    position: absolute;
-    z-index: 999;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: none;
-    background: rgba(241, 139, 98, 0.06) !important;
-    border: 0 !important;
-    top: -16px !important;
-    bottom: -16px !important;
-    left: -16px !important;
-    right: -16px !important;
-    pointer-events: none;
-    > .general-schema-designer-icons {
-      position: absolute;
-      right: 2px;
-      top: 2px;
-      line-height: 16px;
-      pointer-events: all;
-      .ant-space-item {
-        background-color: #f18b62;
-        color: #fff;
-        line-height: 16px;
-        width: 16px;
-        padding-left: 1px;
-      }
-    }
-  }
-`;
-
-export const TableColumnActionBar = observer((props) => {
-  const Designer = useDesigner();
-  return (
-    <SortableItem className={designerCss}>
-      <Designer />
-      {props.children}
-    </SortableItem>
-  );
-});

package/src/schema-component/antd/table/Table.Column.Decorator.tsx

@@ -1,59 +0,0 @@
-import { useField, useFieldSchema } from '@formily/react';
-import React, { useLayoutEffect } from 'react';
-import { SortableItem, useCollection, useCompile, useDesignable, useDesigner } from '../../../';
-import { designerCss } from './Table.Column.ActionBar';
-
-export const useColumnSchema = () => {
-  const { getField } = useCollection();
-  const compile = useCompile();
-  const columnSchema = useFieldSchema();
-  const fieldSchema = columnSchema.reduceProperties((buf, s) => {
-    if (s['x-component'] === 'CollectionField') {
-      return s;
-    }
-    return buf;
-  }, null);
-  if (!fieldSchema) {
-    return {};
-  }
-  const collectionField = getField(fieldSchema.name);
-  return { columnSchema, fieldSchema, collectionField, uiSchema: compile(collectionField?.uiSchema) };
-};
-
-export const TableColumnDecorator = (props) => {
-  const Designer = useDesigner();
-  const field = useField();
-  const { fieldSchema, uiSchema, collectionField } = useColumnSchema();
-  const { refresh } = useDesignable();
-  const compile = useCompile();
-  useLayoutEffect(() => {
-    if (field.title) {
-      return;
-    }
-    if (!fieldSchema) {
-      return;
-    }
-    if (uiSchema?.title) {
-      field.title = uiSchema?.title;
-    }
-  }, [uiSchema?.title]);
-  return (
-    <SortableItem className={designerCss}>
-      <Designer fieldSchema={fieldSchema} uiSchema={uiSchema} collectionField={collectionField}/>
-      {/* <RecursionField name={columnSchema.name} schema={columnSchema}/> */}
-      {field.title || compile(uiSchema?.title)}
-      {/* <div
-        onClick={() => {
-          field.title = uid();
-          // columnSchema.title = field.title = field.title;
-          // refresh();
-          // field.query(`.*.${fieldSchema.name}`).take((f) => {
-          //   f.componentProps.dateFormat = 'YYYY-MM-DD';
-          // });
-        }}
-      >
-        Edit
-      </div> */}
-    </SortableItem>
-  );
-};

package/src/schema-component/antd/table/Table.Column.Designer.tsx

@@ -1,147 +0,0 @@
-import { ISchema, useField, useFieldSchema, useForm } from '@formily/react';
-import React from 'react';
-import { useCollectionManager } from '../../../collection-manager';
-import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
-import { useCompile, useDesignable } from '../../hooks';
-import { useActionContext } from '../action';
-
-const useLabelFields = (collectionName?: any) => {
-  if (!collectionName) {
-    return [];
-  }
-  const compile = useCompile();
-  const { getCollectionFields } = useCollectionManager();
-  const targetFields = getCollectionFields(collectionName);
-  return targetFields
-    ?.filter?.((field) => !field?.target && field.type !== 'boolean')
-    ?.map?.((field) => {
-      return {
-        value: field.name,
-        label: compile(field?.uiSchema?.title || field.name),
-      };
-    });
-};
-
-export const TableColumnDesigner = (props) => {
-  const { uiSchema, fieldSchema, collectionField } = props;
-  const field = useField();
-  const columnSchema = useFieldSchema();
-  const { dn } = useDesignable();
-  const initialValue = {
-    title: columnSchema?.title,
-  };
-  const options = useLabelFields(collectionField?.target);
-  return (
-    <GeneralSchemaDesigner>
-      <SchemaSettings.PopupItem
-        title={'编辑'}
-        schema={
-          {
-            title: '编辑字段',
-            'x-component': 'Action.Modal',
-            'x-component-props': {
-              width: 520,
-            },
-            'x-decorator': 'Form',
-            'x-decorator-props': {
-              initialValue,
-            },
-            type: 'void',
-            properties: {
-              title: {
-                'x-decorator': 'FormItem',
-                'x-component': 'Input',
-                title: '字段标题',
-                'x-component-props': {},
-                description: `原字段标题：${collectionField?.uiSchema?.title}`,
-              },
-              footer: {
-                type: 'void',
-                'x-component': 'Action.Modal.Footer',
-                properties: {
-                  cancel: {
-                    type: 'void',
-                    title: '{{t("Cancel")}}',
-                    'x-component': 'Action',
-                    'x-component-props': {
-                      useAction() {
-                        const ctx = useActionContext();
-                        return {
-                          async run() {
-                            ctx.setVisible(false);
-                          },
-                        };
-                      },
-                    },
-                  },
-                  submit: {
-                    type: 'void',
-                    title: 'Submit',
-                    'x-component': 'Action',
-                    'x-component-props': {
-                      type: 'primary',
-                      useAction() {
-                        const form = useForm();
-                        const ctx = useActionContext();
-                        return {
-                          async run() {
-                            const { title } = form.values;
-                            if (title) {
-                              field.title = title;
-                              columnSchema.title = title;
-                              dn.emit('patch', {
-                                schema: {
-                                  'x-uid': columnSchema['x-uid'],
-                                  title: columnSchema.title,
-                                },
-                              });
-                            }
-                            ctx.setVisible(false);
-                            dn.refresh();
-                          },
-                        };
-                      },
-                    },
-                  },
-                },
-              },
-            },
-          } as ISchema
-        }
-      />
-      {collectionField?.target && (
-        <SchemaSettings.SelectItem
-          title={'标题字段'}
-          options={options}
-          value={fieldSchema?.['x-component-props']?.['fieldNames']?.['label']}
-          onChange={(label) => {
-            const fieldNames = {
-              ...fieldSchema['x-component-props']['fieldNames'],
-              label,
-            };
-            fieldSchema['x-component-props']['fieldNames'] = fieldNames;
-            field.query(`.*.${fieldSchema.name}`).take((f) => {
-              f.componentProps.fieldNames = fieldNames;
-            });
-            dn.emit('patch', {
-              schema: {
-                'x-uid': fieldSchema['x-uid'],
-                'x-component-props': {
-                  fieldNames,
-                },
-              },
-            });
-            dn.refresh();
-          }}
-        />
-      )}
-      <SchemaSettings.Divider />
-      <SchemaSettings.Remove
-        removeParentsIfNoChildren
-        breakRemoveOn={{
-          'x-component': 'Grid',
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-};

package/src/schema-component/antd/table/Table.Column.tsx

@@ -1,7 +0,0 @@
-import { useField } from '@formily/react';
-import React from 'react';
-
-export const TableColumn = (props) => {
-  const field = useField();
-  return <div>{field.title}</div>;
-};

package/src/schema-component/antd/table/Table.Designer.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { useCollection } from '../../../collection-manager';
-import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
-
-export const TableDesigner = () => {
-  const { name, title } = useCollection();
-  return (
-    <GeneralSchemaDesigner title={title || name}>
-      <SchemaSettings.Remove
-        removeParentsIfNoChildren
-        breakRemoveOn={{
-          'x-component': 'Grid',
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-};

package/src/schema-component/antd/table/Table.RowActionDesigner.tsx

@@ -1,23 +0,0 @@
-import { DragOutlined } from '@ant-design/icons';
-import { useFieldSchema } from '@formily/react';
-import { Space } from 'antd';
-import React from 'react';
-import { DragHandler } from '../../../schema-component';
-import { useSchemaInitializer } from '../../../schema-initializer';
-
-export const TableRowActionDesigner = (props: any) => {
-  const fieldSchema = useFieldSchema();
-  const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
-  return (
-    <div className={'general-schema-designer'}>
-      <div className={'general-schema-designer-icons'}>
-        <Space size={2} align={'center'}>
-          <DragHandler>
-            <DragOutlined />
-          </DragHandler>
-          {render()}
-        </Space>
-      </div>
-    </div>
-  );
-};

package/src/schema-component/antd/table/Table.RowSelection.tsx

@@ -1,28 +0,0 @@
-import { Field } from '@formily/core';
-import { observer, useField } from '@formily/react';
-import { isArr, isValid } from '@formily/shared';
-import { TableProps } from 'antd';
-import React from 'react';
-import { TableVoid } from './Table.Void';
-
-type Props = TableProps<any> & { value?: any; onChange?: any; objectValue?: boolean };
-
-const toArr = (value: any) => (isArr(value) ? value : isValid(value) ? [value] : []);
-
-export const TableRowSelection = observer((props: Props) => {
-  const { rowKey = 'id', objectValue } = props;
-  const field = useField<Field>();
-  const rowSelection: any = {
-    type: 'checkbox',
-    ...props.rowSelection,
-    selectedRowKeys: toArr(field.value).map((val) => (typeof val === 'object' ? val[rowKey as any] : val)),
-    onChange(selectedRowKeys: any[], selectedRows?: any) {
-      if (rowSelection.type === 'checkbox') {
-        props.onChange(objectValue ? selectedRows : selectedRowKeys);
-      } else {
-        props.onChange([...(objectValue ? selectedRows : selectedRowKeys)].shift());
-      }
-    },
-  };
-  return <TableVoid {...props} rowSelection={rowSelection} />;
-});

package/src/schema-component/antd/table/Table.Void.Designer.tsx

@@ -1,208 +0,0 @@
-import { ArrayItems } from '@formily/antd';
-import { ISchema, useField, useFieldSchema } from '@formily/react';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { useCollection, useResourceActionContext } 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';
-
-export const TableVoidDesigner = () => {
-  const { name, title } = useCollection();
-  const field = useField();
-  const fieldSchema = useFieldSchema();
-  const dataSource = useCollectionFilterOptions(name);
-  const sortFields = useSortFields(name);
-  const ctx = useResourceActionContext();
-  const { t } = useTranslation();
-  const { dn } = useDesignable();
-  const defaultFilter = fieldSchema?.['x-decorator-props']?.request?.params?.filter || {};
-  const defaultSort = fieldSchema?.['x-decorator-props']?.request?.params?.sort || [];
-  const sort = defaultSort?.map((item: string) => {
-    return item.startsWith('-')
-      ? {
-          field: item.substring(1),
-          direction: 'desc',
-        }
-      : {
-          field: item,
-          direction: 'asc',
-        };
-  });
-  const template = useSchemaTemplate();
-  return (
-    <GeneralSchemaDesigner template={template} title={title || name}>
-      <SchemaSettings.SwitchItem
-        title={t('Enable drag and drop sorting')}
-        checked={field.decoratorProps.dragSort}
-        onChange={(dragSort) => {
-          field.decoratorProps.dragSort = dragSort;
-          fieldSchema['x-decorator-props'].dragSort = dragSort;
-          ctx.run({ ...ctx.params?.[0], sort: 'sort' });
-          dn.emit('patch', {
-            schema: {
-              ['x-uid']: fieldSchema['x-uid'],
-              'x-decorator-props': fieldSchema['x-decorator-props'],
-            },
-          });
-        }}
-      />
-      <SchemaSettings.ModalItem
-        title={'设置数据范围'}
-        schema={
-          {
-            type: 'object',
-            title: '设置数据范围',
-            properties: {
-              filter: {
-                default: defaultFilter,
-                title: '数据范围',
-                enum: dataSource,
-                'x-component': 'Filter',
-                'x-component-props': {},
-              },
-            },
-          } as ISchema
-        }
-        onSubmit={({ filter }) => {
-          const params = field.decoratorProps.request.params || {};
-          params.filter = filter;
-          field.decoratorProps.request.params = params;
-          fieldSchema['x-decorator-props']['request']['params'] = params;
-          ctx.run({ ...ctx.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.request.params || {};
-          params.sort = sortArr;
-          field.decoratorProps.request.params = params;
-          fieldSchema['x-decorator-props']['request']['params'] = params;
-          dn.emit('patch', {
-            schema: {
-              ['x-uid']: fieldSchema['x-uid'],
-              'x-decorator-props': fieldSchema['x-decorator-props'],
-            },
-          });
-          ctx.run({ ...ctx.params?.[0], sort: sortArr });
-        }}
-      />
-      <SchemaSettings.SelectItem
-        title={'每页显示'}
-        value={field.decoratorProps.request.params?.pageSize || 20}
-        options={[
-          { label: '10', value: 10 },
-          { label: '20', value: 20 },
-          { label: '50', value: 50 },
-          { label: '100', value: 100 },
-          { label: '200', value: 200 },
-        ]}
-        onChange={(pageSize) => {
-          const params = field.decoratorProps.request.params || {};
-          params.pageSize = pageSize;
-          field.decoratorProps.request.params = params;
-          fieldSchema['x-decorator-props']['request']['params'] = params;
-          ctx.run({ ...ctx.params?.[0], pageSize });
-          dn.emit('patch', {
-            schema: {
-              ['x-uid']: fieldSchema['x-uid'],
-              'x-decorator-props': fieldSchema['x-decorator-props'],
-            },
-          });
-        }}
-      />
-      <SchemaSettings.Divider />
-      <SchemaSettings.Template componentName={'Table'} collectionName={name}/>
-      <SchemaSettings.Divider />
-      <SchemaSettings.Remove
-        removeParentsIfNoChildren
-        breakRemoveOn={{
-          'x-component': 'Grid',
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-};

package/src/schema-component/antd/table/Table.Void.tsx

@@ -1,118 +0,0 @@
-import { createForm, Field } from '@formily/core';
-import { FieldContext, FormContext, observer, useField, useFieldSchema } from '@formily/react';
-import { Options, Result } from 'ahooks/lib/useRequest/src/types';
-import { TablePaginationConfig, TableProps } from 'antd';
-import { cloneDeep } from 'lodash';
-import React, { useMemo } from 'react';
-import { AsyncDataProvider, useAsyncData, useRequest } from '../../../';
-import { useAttach } from '../../hooks';
-import { TableArray } from './Table.Array';
-
-type TableVoidProps = TableProps<any> & {
-  request?: any;
-  useSelectedRowKeys?: any;
-  useDataSource?: (
-    options?: Options<any, any> & { uid?: string },
-    props?: any,
-  ) => Result<any, any> & { state?: any; setState?: any };
-};
-
-const usePaginationProps = (props: TableProps<any> & { request?: any }, service): TablePaginationConfig | false => {
-  if (props.pagination === false) {
-    return false;
-  }
-  const pagination: TablePaginationConfig = props.pagination || {};
-  if (props?.request?.params?.pageSize) {
-    pagination.defaultPageSize = props?.request?.params?.pageSize;
-  }
-  return {
-    showSizeChanger: true,
-    ...pagination,
-    onChange(page, pageSize) {
-      service?.run({ ...service?.params?.[0], page, pageSize });
-    },
-  };
-};
-
-const useRequestProps = (props) => {
-  const { request, pagination, dataSource } = props;
-  if (request) {
-    if (pagination === false) {
-      return request;
-    }
-    const params = cloneDeep(request.params || {});
-    if (!params.page) {
-      params.page = pagination?.current || pagination?.defaultCurrent || 1;
-    }
-    if (!params.pageSize) {
-      params.pageSize = pagination?.pageSize || pagination?.defaultPageSize || 10;
-    }
-    request.params = params;
-    return request;
-  }
-  return (params: any = {}) => {
-    const { page = 1, pageSize = 10 } = params;
-    const startIndex = (page - 1) * pageSize;
-    const endIndex = startIndex + pageSize - 1;
-    return Promise.resolve({
-      data: pagination === false ? dataSource : dataSource?.slice(startIndex, endIndex + 1),
-      meta: {
-        page,
-        pageSize,
-        count: dataSource?.length || 0,
-      },
-    });
-  };
-};
-
-const useDef = (options, props) => {
-  return useRequest(useRequestProps(props), options);
-};
-
-const useDefSelectedRowKeys = () => {
-  const result = useAsyncData();
-  return [result?.state?.selectedRowKeys, (selectedRowKeys) => result?.setState?.({ selectedRowKeys })];
-};
-
-export const TableVoid: React.FC<TableVoidProps> = observer((props) => {
-  const { rowKey = 'id', useDataSource = useDef, useSelectedRowKeys = useDefSelectedRowKeys } = props;
-  const field = useField<Field>();
-  const fieldSchema = useFieldSchema();
-  const form = useMemo(() => createForm(), []);
-  const f = useAttach(form.createArrayField({ ...field.props, basePath: '' }));
-  const result = useDataSource(
-    {
-      uid: fieldSchema['x-uid'],
-      onSuccess(data) {
-        form.setValues({
-          [fieldSchema.name]: data?.data,
-        });
-        if (field?.componentProps?.pagination === false) {
-          return;
-        }
-        field.componentProps.pagination = field.componentProps.pagination || {};
-        if (data?.meta?.count) {
-          field.componentProps.pagination.total = data?.meta?.count;
-        }
-        field.componentProps.pagination.current = data?.meta?.page || 1;
-        field.componentProps.pagination.pageSize = data?.meta?.pageSize || 10;
-      },
-    },
-    props,
-  );
-  return (
-    <AsyncDataProvider value={result}>
-      <FormContext.Provider value={form}>
-        <FieldContext.Provider value={f}>
-          <TableArray
-            {...props}
-            rowKey={rowKey}
-            useSelectedRowKeys={useSelectedRowKeys}
-            loading={result?.loading}
-            pagination={usePaginationProps(props, result)}
-          />
-        </FieldContext.Provider>
-      </FormContext.Provider>
-    </AsyncDataProvider>
-  );
-});