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

package/src/schema-component/antd/filter/demos/demo5.tsx

@@ -1,104 +0,0 @@
-import {
-  AntdSchemaComponentProvider,
-  FilterAction, SchemaComponent,
-  SchemaComponentProvider
-} from '@nocobase/client';
-import React from 'react';
-
-const schema: any = {
-  type: 'void',
-  properties: {
-    demo: {
-      type: 'object',
-      enum: [
-        {
-          name: 'name',
-          title: 'Name',
-          operators: [
-            { label: 'eq', value: '$eq' },
-            { label: 'ne', value: '$ne' },
-          ],
-          schema: {
-            type: 'string',
-            title: 'Name',
-            'x-component': 'Input',
-          },
-        },
-        {
-          name: 'age',
-          title: 'Age',
-          operators: [
-            { label: 'in', value: '$in' },
-            { label: 'not', value: '$not' },
-          ],
-          schema: {
-            type: 'string',
-            title: 'Age',
-            'x-component': 'InputNumber',
-          },
-        },
-        {
-          name: 'tags',
-          title: 'Tags',
-          schema: {
-            title: 'Tags',
-          },
-          children: [
-            {
-              name: 'slug',
-              title: 'Slug',
-              operators: [
-                { label: 'in', value: '$in' },
-                { label: 'not', value: '$not' },
-              ],
-              schema: {
-                title: 'Slug',
-                type: 'string',
-                'x-component': 'Input',
-              },
-            },
-            {
-              name: 'title',
-              title: 'Title',
-              operators: [
-                { label: 'eq', value: '$eq' },
-                { label: 'ne', value: '$ne' },
-              ],
-              schema: {
-                title: 'Title',
-                type: 'string',
-                'x-component': 'Input',
-              },
-            },
-          ],
-        },
-      ],
-      default: {
-        $or: [
-          {
-            name: {
-              $ne: null,
-            },
-          },
-          {
-            'tags.title': {
-              $eq: 'aaa',
-            },
-          },
-        ],
-      },
-      'x-component': 'FilterAction',
-      'x-component-props': {},
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider>
-      <AntdSchemaComponentProvider>
-        <SchemaComponent components={{ FilterAction }} schema={schema} />
-      </AntdSchemaComponentProvider>
-    </SchemaComponentProvider>
-  );
-};

package/src/schema-component/antd/filter/demos/demo6.tsx

@@ -1,105 +0,0 @@
-import {
-  AntdSchemaComponentProvider,
-  CollectionManagerProvider,
-  CollectionProvider,
-  Filter,
-  Input,
-  SchemaComponent,
-  SchemaComponentProvider,
-  useCollection,
-  useCollectionManager,
-  useFilterOptions
-} from '@nocobase/client';
-import { Select } from 'antd';
-import React, { useState } from 'react';
-
-const collections = [
-  {
-    name: 'test1',
-    fields: [
-      {
-        type: 'string',
-        name: 'title1',
-        interface: 'input',
-        uiSchema: {
-          title: 'Title1',
-          type: 'string',
-          'x-component': 'Input',
-          required: true,
-        },
-      },
-    ],
-  },
-  {
-    name: 'test2',
-    fields: [
-      {
-        type: 'string',
-        name: 'title2',
-        interface: 'input',
-        uiSchema: {
-          title: 'Title2',
-          type: 'string',
-          'x-component': 'Input',
-          required: true,
-        },
-      },
-    ],
-  },
-];
-
-const schema: any = {
-  type: 'void',
-  properties: {
-    demo: {
-      name: 'filter',
-      type: 'object',
-      'x-component': 'Filter',
-      'x-component-props': {
-        useProps: () => {
-          const { name } = useCollection();
-          const options = useFilterOptions(name);
-          return {
-            options,
-          };
-        },
-      },
-    },
-  },
-};
-
-const SwitchCollection = (props) => {
-  const [collection, setCollection] = useState(collections[0]);
-  const { getCollection } = useCollectionManager();
-  return (
-    <div>
-      <Select
-        options={[
-          { label: 'test1', value: 'test1' },
-          { label: 'test2', value: 'test2' },
-        ]}
-        defaultValue={'test1'}
-        onChange={(value) => {
-          setCollection(getCollection(value));
-        }}
-      />
-      <br />
-      <br />
-      <CollectionProvider collection={collection}>{props.children}</CollectionProvider>
-    </div>
-  );
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider>
-      <AntdSchemaComponentProvider>
-        <CollectionManagerProvider collections={collections}>
-          <SwitchCollection>
-            <SchemaComponent components={{ Input, Filter }} schema={schema} />
-          </SwitchCollection>
-        </CollectionManagerProvider>
-      </AntdSchemaComponentProvider>
-    </SchemaComponentProvider>
-  );
-};

package/src/schema-component/antd/filter/index.md

@@ -1,30 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# Filter
-
-## Examples
-
-### Filter Action
-
-<code src="./demos/demo3.tsx" />
-
-### Filter Default Value
-
-<code src="./demos/demo2.tsx" />
-
-### Custom Dynamic Component
-
-<code src="./demos/demo4.tsx" />
-
-### FilterAction
-
-<code src="./demos/demo5.tsx" />
-
-### Dynamic options
-
-<code src="./demos/demo6.tsx" />

package/src/schema-component/antd/filter/index.ts

@@ -1,3 +0,0 @@
-export * from './Filter';
-export * from './useFilterActionProps';
-

package/src/schema-component/antd/filter/style.less

@@ -1,18 +0,0 @@
-.nb-filter-group {
-  position: relative;
-  margin-bottom: 14px;
-  min-width: 400px;
-  &-close {
-    position: absolute;
-    right: 10px;
-  }
-  &.bordered {
-    border: 1px dashed rgb(222, 222, 222);
-    padding: 14px;
-  }
-}
-.nb-filter-list {
-  .ant-form-inline {
-    margin-bottom: 8px;
-  }
-}

package/src/schema-component/antd/filter/useFilterActionProps.ts

@@ -1,120 +0,0 @@
-import { Field } from '@formily/core';
-import { useField, useFieldSchema } from '@formily/react';
-import flat from 'flat';
-import { useTranslation } from 'react-i18next';
-import { useBlockRequestContext } from '../../../block-provider';
-import { useCollection, useCollectionManager } from '../../../collection-manager';
-
-export const useFilterOptions = (collectionName: string) => {
-  const fieldSchema = useFieldSchema();
-  const nonfilterable = fieldSchema?.['x-component-props']?.nonfilterable || [];
-  const { getCollectionFields, getInterface } = useCollectionManager();
-  const fields = getCollectionFields(collectionName);
-  const field2option = (field, depth) => {
-    if (nonfilterable.length && depth === 1 && nonfilterable.includes(field.name)) {
-      return;
-    }
-    if (!field.interface) {
-      return;
-    }
-    const fieldInterface = getInterface(field.interface);
-    if (!fieldInterface.filterable) {
-      return;
-    }
-    const { nested, children, operators } = fieldInterface.filterable;
-    const option = {
-      name: field.name,
-      title: field?.uiSchema?.title || field.name,
-      schema: field?.uiSchema,
-      operators:
-        operators?.filter?.((operator) => {
-          return !operator?.visible || operator.visible(field);
-        }) || [],
-    };
-    if (field.target && depth > 2) {
-      return;
-    }
-    if (depth > 2) {
-      return option;
-    }
-    if (children?.length) {
-      option['children'] = children;
-    }
-    if (nested) {
-      const targetFields = getCollectionFields(field.target);
-      const options = getOptions(targetFields, depth+1).filter(Boolean);
-      option['children'] = option['children'] || [];
-      option['children'].push(...options);
-    }
-    return option;
-  };
-  const getOptions = (fields, depth) => {
-    const options = [];
-    fields.forEach((field) => {
-      const option = field2option(field, depth);
-      if (option) {
-        options.push(option);
-      }
-    });
-    return options;
-  };
-  return getOptions(fields, 1);
-};
-
-const isEmpty = (obj) => {
-  return obj && Object.keys(obj).length === 0 && Object.getPrototypeOf(obj) === Object.prototype;
-};
-
-const removeNullCondition = (filter) => {
-  const items = flat(filter || {});
-  const values = {};
-  for (const key in items) {
-    const value = items[key];
-    if (value !== null && !isEmpty(value)) {
-      values[key] = value;
-    }
-  }
-  return flat.unflatten(values);
-};
-
-export const mergeFilter = (filter1, filter2) => {
-  if (filter1 && filter2) {
-    return { $and: [filter1, filter2] };
-  }
-  if (!filter1 && filter2) {
-    return filter2;
-  }
-  if (filter1 && !filter2) {
-    return filter1;
-  }
-  return {};
-};
-
-export const useFilterActionProps = () => {
-  const { name } = useCollection();
-  const options = useFilterOptions(name);
-  const { service, props } = useBlockRequestContext();
-  const field = useField<Field>();
-  const { t } = useTranslation();
-  return {
-    options,
-    onSubmit(values) {
-      // filter parameter for the block
-      const defaultFilter = removeNullCondition(props.params.filter);
-      // filter parameter for the filter action
-      const filter = removeNullCondition(values?.filter);
-      service.run({ ...service.params?.[0], page: 1, filter: mergeFilter(defaultFilter, filter) });
-      const items = filter?.$and || filter?.$or;
-      if (items?.length) {
-        field.title = t('{{count}} filter items', { count: items?.length || 0 });
-      } else {
-        field.title = t('Filter');
-      }
-    },
-    onReset() {
-      const filter = removeNullCondition(props.params.filter);
-      service.run({ ...service.params?.[0], filter, page: 1 });
-      field.title = t('Filter');
-    },
-  };
-};

package/src/schema-component/antd/filter/useValues.ts

@@ -1,83 +0,0 @@
-import { useField } from '@formily/react';
-import { merge } from '@formily/shared';
-import flat from 'flat';
-import get from 'lodash/get';
-import { useContext, useEffect } from 'react';
-import { FilterContext, FilterLogicContext } from './context';
-
-// import { useValues } from './useValues';
-const findOption = (dataIndex = [], options) => {
-  let items = options;
-  let option;
-  dataIndex?.forEach?.((name, index) => {
-    const item = items.find((item) => item.name === name);
-    if (item) {
-      option = item;
-    }
-    items = item?.children || [];
-  });
-  return option;
-};
-
-export const useValues = () => {
-  const field = useField<any>();
-  const logic = useContext(FilterLogicContext);
-  const { options } = useContext(FilterContext);
-  const data2value = () => {
-    field.value = flat.unflatten({
-      [`${field.data.dataIndex?.join('.')}.${field.data?.operator?.value}`]: field.data?.value,
-    });
-  };
-  const value2data = () => {
-    const values = flat(field.value);
-    const path = Object.keys(values).shift() || '';
-    if (!path) {
-      return;
-    }
-    const [fieldPath, otherPath] = path.split('.$');
-    const [operatorValue] = otherPath.split('.', 2);
-    const dataIndex = fieldPath.split('.');
-    const option = findOption(dataIndex, options);
-    const operators = option?.operators;
-    const operator = operators?.find?.((item) => item.value === `$${operatorValue}`);
-    field.data = field.data || {};
-    field.data.dataIndex = dataIndex;
-    field.data.operators = operators;
-    field.data.operator = operator;
-    field.data.schema = merge(option?.schema, operator?.schema);
-    field.data.value = get(field.value, `${fieldPath}.$${operatorValue}`);
-    console.log('option', operator, field.data.value);
-  };
-  useEffect(() => {
-    value2data();
-  }, [logic]);
-  return {
-    fields: options,
-    ...field.data,
-    setDataIndex(dataIndex) {
-      const option = findOption(dataIndex, options);
-      const operator = option?.operators?.[0];
-      field.data = field.data || {};
-      field.data.operators = option?.operators;
-      field.data.operator = operator;
-      field.data.schema = merge(option?.schema, operator?.schema);
-      field.data.dataIndex = dataIndex;
-      field.data.value = null;
-      data2value();
-      console.log('setDataIndex', field.data);
-    },
-    setOperator(operatorValue) {
-      const operator = field.data?.operators?.find?.((item) => item.value === operatorValue);
-      field.data.operator = operator;
-      field.data.schema = merge(field.data.schema, operator.schema);
-      field.data.value = operator.noValue ? operator.default || true : null;
-      data2value();
-      console.log('setOperator', field.data);
-    },
-    setValue(value) {
-      field.data.value = value;
-      data2value();
-      console.log('setValue', field.data);
-    },
-  };
-};

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

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

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

@@ -1,125 +0,0 @@
-import { FormLayout } from '@formily/antd';
-import { createForm } from '@formily/core';
-import { FieldContext, FormContext, observer, RecursionField, useField, useFieldSchema } from '@formily/react';
-import { Options, Result } from 'ahooks/lib/useRequest/src/types';
-import { Spin } from 'antd';
-import React, { createContext, useContext, useMemo } from 'react';
-import { useAttach, useComponent } from '../..';
-import { useRequest } from '../../../api-client';
-import { useCollection } from '../../../collection-manager';
-import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
-import { useSchemaTemplate } from '../../../schema-templates';
-
-type Opts = Options<any, any> & { uid?: string };
-
-export interface FormProps {
-  [key: string]: any;
-}
-
-export type FormUseValues = (opts?: Opts, props?: FormProps) => Result<any, 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 useRequestProps = (props: any) => {
-  const { request, initialValue } = props;
-  if (request) {
-    return request;
-  }
-  return () => {
-    return Promise.resolve({
-      data: initialValue,
-    });
-  };
-};
-
-const useDef = (opts: any = {}, props: FormProps = {}) => {
-  return useRequest(useRequestProps(props), opts);
-};
-
-const FormBlockContext = createContext<any>(null);
-
-export const Form: React.FC<FormProps> & { Designer?: any } = observer((props) => {
-  const { request, effects, initialValue, useValues = useDef, ...others } = props;
-  const fieldSchema = useFieldSchema();
-  const field = useField();
-  const form = useMemo(() => createForm({ effects }), []);
-  const result = useValues(
-    {
-      uid: fieldSchema['x-uid'],
-      async onSuccess(data) {
-        await form.reset();
-        form.setValues(data?.data);
-      },
-    },
-    props,
-  );
-  const parent = useContext(FormBlockContext);
-  return (
-    <FormBlockContext.Provider value={{ parent, form, result, field, fieldSchema }}>
-      <Spin spinning={result?.loading || false}>
-        {fieldSchema['x-decorator'] === 'Form' ? (
-          <FormDecorator form={form} {...others} />
-        ) : (
-          <FormComponent form={form} {...others} />
-        )}
-      </Spin>
-    </FormBlockContext.Provider>
-  );
-});
-
-Form.Designer = () => {
-  const { name, title } = useCollection();
-  const template = useSchemaTemplate();
-  return (
-    <GeneralSchemaDesigner template={template} title={title || name}>
-      <SchemaSettings.Template componentName={'Form'} collectionName={name} />
-      <SchemaSettings.Divider />
-      <SchemaSettings.Remove
-        removeParentsIfNoChildren
-        breakRemoveOn={{
-          'x-component': 'Grid',
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-};

package/src/schema-component/antd/form/demos/apiClient.ts

@@ -1,21 +0,0 @@
-import { uid } from '@formily/shared';
-import { APIClient } from '@nocobase/client';
-import MockAdapter from 'axios-mock-adapter';
-
-export const apiClient = new APIClient();
-
-const mock = new MockAdapter(apiClient.axios);
-
-const sleep = (value: number) => new Promise((resolve) => setTimeout(resolve, value));
-
-mock.onGet('/posts:get').reply(async (config) => {
-  await sleep(1000);
-  return [
-    200,
-    {
-      data: {
-        field1: uid(),
-      },
-    },
-  ];
-});

package/src/schema-component/antd/form/demos/demo1.tsx

@@ -1,62 +0,0 @@
-import { FormItem, Input } from '@formily/antd';
-import { ISchema, observer, useForm } from '@formily/react';
-import { Action, Form, SchemaComponent, SchemaComponentProvider, useCloseAction } from '@nocobase/client';
-import React from 'react';
-
-export default observer(() => {
-  const schema: ISchema = {
-    type: 'object',
-    properties: {
-      a1: {
-        type: 'void',
-        'x-component': 'Action',
-        'x-component-props': {
-          type: 'primary',
-        },
-        title: 'Open',
-        properties: {
-          d1: {
-            type: 'void',
-            'x-component': 'Action.Drawer',
-            'x-decorator': 'Form',
-            title: 'Drawer Title',
-            properties: {
-              field1: {
-                'x-component': 'Input',
-                'x-decorator': 'FormItem',
-                title: 'T1',
-              },
-              out: {
-                'x-component': 'Output',
-              },
-              f1: {
-                type: 'void',
-                'x-component': 'Action.Drawer.Footer',
-                properties: {
-                  a1: {
-                    'x-component': 'Action',
-                    title: 'Close',
-                    'x-component-props': {
-                      useAction: '{{ useCloseAction }}',
-                    },
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  };
-
-  const Output = observer(() => {
-    const form = useForm();
-    return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
-  });
-
-  return (
-    <SchemaComponentProvider scope={{ useCloseAction }} components={{ Output, Form, Action, Input, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-});