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

package/src/schema-component/antd/calendar/types.d.ts

@@ -1,8 +0,0 @@
-export interface ToolbarProps {
-  localizer?: any;
-  label?: any;
-  view?: any;
-  views?: any;
-  onNavigate?: (action: string) => void;
-  onView?: (view: string) => void;
-}

package/src/schema-component/antd/calendar/utils.ts

@@ -1,13 +0,0 @@
-import { get } from 'lodash';
-import { i18n } from '../../../i18n';
-
-export const toEvents = (data: any[], fieldNames: any) => {
-  return data?.map((item) => {
-    return {
-      id: get(item, fieldNames.id || 'id'),
-      title: get(item, fieldNames.title) || i18n.t('Untitle'),
-      start: new Date(get(item, fieldNames.start)),
-      end: new Date(get(item, fieldNames.end || fieldNames.start)),
-    };
-  });
-};

package/src/schema-component/antd/card-item/CardItem.tsx

@@ -1,13 +0,0 @@
-import { Card } from 'antd';
-import React from 'react';
-import { BlockItem } from '../block-item';
-
-export const CardItem: React.FC = (props) => {
-  return (
-    <BlockItem className={'noco-card-item'}>
-      <Card style={{ marginBottom: 24 }} bordered={false} {...props}>
-        {props.children}
-      </Card>
-    </BlockItem>
-  );
-};

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

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

package/src/schema-component/antd/card-item/index.ts

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

package/src/schema-component/antd/cascader/Cascader.tsx

@@ -1,99 +0,0 @@
-import { LoadingOutlined } from '@ant-design/icons';
-import { ArrayField } from '@formily/core';
-import { connect, mapProps, mapReadPretty, useField } from '@formily/react';
-import { toArr } from '@formily/shared';
-import { Cascader as AntdCascader, Space } from 'antd';
-import { isBoolean, omit } from 'lodash';
-import React from 'react';
-import { useRequest } from '../../../api-client';
-import { defaultFieldNames } from './defaultFieldNames';
-import { ReadPretty } from './ReadPretty';
-
-const useDefDataSource = (options) => {
-  const field = useField<ArrayField>();
-  return useRequest(() => Promise.resolve({ data: field.dataSource || [] }), options);
-};
-
-const useDefLoadData = (props: any) => {
-  return props?.loadData;
-};
-
-export const Cascader = connect(
-  (props: any) => {
-    const field = useField<ArrayField>();
-    const {
-      value,
-      onChange,
-      labelInValue,
-      // fieldNames = defaultFieldNames,
-      useDataSource = useDefDataSource,
-      useLoadData = useDefLoadData,
-      changeOnSelectLast,
-      changeOnSelect,
-      maxLevel,
-      ...others
-    } = props;
-    const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
-    const loadData = useLoadData(props);
-    const { loading } = useDataSource({
-      onSuccess(data) {
-        field.dataSource = data?.data || [];
-      },
-    });
-    // 兼容值为 object[] 的情况
-    const toValue = () => {
-      return toArr(value).map((item) => {
-        if (typeof item === 'object') {
-          return item[fieldNames.value];
-        }
-        return item;
-      });
-    };
-    const displayRender = (labels: string[], selectedOptions: any[]) => {
-      return (
-        <Space split={'/'}>
-          {labels.map((label, index) => {
-            if (selectedOptions[index]) {
-              return <span key={label}>{label}</span>;
-            }
-            const item = toArr(value).find((item) => item[fieldNames.value] === label);
-            return <span key={label}>{item?.[fieldNames.label] || label}</span>;
-          })}
-        </Space>
-      );
-    };
-    return (
-      <AntdCascader
-        loading={loading}
-        {...others}
-        options={field.dataSource}
-        loadData={loadData}
-        changeOnSelect={isBoolean(changeOnSelectLast) ? !changeOnSelectLast : changeOnSelect}
-        value={toValue()}
-        fieldNames={fieldNames}
-        displayRender={displayRender}
-        onChange={(value, selectedOptions) => {
-          if (labelInValue) {
-            onChange(selectedOptions.map((option) => omit(option, [fieldNames.children])));
-          } else {
-            onChange(value);
-          }
-        }}
-      />
-    );
-  },
-  mapProps(
-    {
-      dataSource: 'options',
-    },
-    (props, field) => {
-      return {
-        ...props,
-        suffixIcon: field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffixIcon,
-      };
-    },
-  ),
-  mapReadPretty(ReadPretty),
-);
-
-export default Cascader;

package/src/schema-component/antd/cascader/ReadPretty.tsx

@@ -1,35 +0,0 @@
-import { ArrayField } from '@formily/core';
-import { useField } from '@formily/react';
-import { toArr } from '@formily/shared';
-import React from 'react';
-import { defaultFieldNames } from './defaultFieldNames';
-
-export const ReadPretty: React.FC<unknown> = (props: any) => {
-  const { fieldNames = defaultFieldNames } = props;
-  const values = toArr(props.value);
-  const len = values.length;
-  const field = useField<ArrayField>();
-  let dataSource = field.dataSource;
-  const data = [];
-  for (const item of values) {
-    if (typeof item === 'object') {
-      data.push(item);
-    } else {
-      const curr = dataSource?.find((v) => v[fieldNames.value] === item);
-      dataSource = curr?.[fieldNames.children] || [];
-      data.push(curr || { label: item, value: item });
-    }
-  }
-  return (
-    <div>
-      {data.map((item, index) => {
-        return (
-          <span key={index}>
-            {typeof item === 'object' ? item[fieldNames.label] : item}
-            {len > index + 1 && ' / '}
-          </span>
-        );
-      })}
-    </div>
-  );
-};

package/src/schema-component/antd/cascader/defaultFieldNames.ts

@@ -1,5 +0,0 @@
-export const defaultFieldNames = {
-  label: 'label',
-  value: 'value',
-  children: 'children',
-};

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

@@ -1,83 +0,0 @@
-import { FormItem } from '@formily/antd';
-import { Cascader, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
-import React from 'react';
-
-const options = [
-  {
-    value: 'zhejiang',
-    label: 'Zhejiang',
-    children: [
-      {
-        value: 'hangzhou',
-        label: 'Hangzhou',
-        children: [
-          {
-            value: 'xihu',
-            label: 'West Lake',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: 'jiangsu',
-    label: 'Jiangsu',
-    children: [
-      {
-        value: 'nanjing',
-        label: 'Nanjing',
-        children: [
-          {
-            value: 'zhonghuamen',
-            label: 'Zhong Hua Men',
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const schema = {
-  type: 'object',
-  properties: {
-    input: {
-      type: 'string',
-      title: `编辑模式`,
-      name: 'name1',
-      enum: options,
-      'x-decorator': 'FormItem',
-      'x-component': 'Cascader',
-      'x-component-props': {
-        // changeOnSelect: true,
-      },
-      'x-reactions': {
-        target: 'read',
-        fulfill: {
-          state: {
-            value: '{{$self.value}}',
-          },
-        },
-      },
-    },
-    read: {
-      type: 'string',
-      title: `阅读模式`,
-      enum: options,
-      name: 'name2',
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Cascader',
-      'x-component-props': {
-        changeOnSelect: true,
-      },
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ Cascader, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};

package/src/schema-component/antd/cascader/demos/demo2.tsx

@@ -1,130 +0,0 @@
-import { FormItem } from '@formily/antd';
-import { ArrayField } from '@formily/core';
-import { useField } from '@formily/react';
-import { action } from '@formily/reactive';
-import {
-  APIClient,
-  APIClientProvider,
-  Cascader,
-  SchemaComponent,
-  SchemaComponentProvider,
-  useAPIClient
-} from '@nocobase/client';
-import MockAdapter from 'axios-mock-adapter';
-import React from 'react';
-
-const apiClient = new APIClient();
-
-const mock = new MockAdapter(apiClient.axios);
-
-mock.onGet('/china_regions').reply(200, {
-  data: [
-    {
-      value: 'zhejiang',
-      label: 'Zhejiang',
-      isLeaf: false,
-    },
-    {
-      value: 'jiangsu',
-      label: 'Jiangsu',
-      isLeaf: false,
-    },
-  ],
-});
-
-const useAsyncDataSource = (api: APIClient) => (field) => {
-  field.loading = true;
-  console.log('useAsyncDataSource');
-  api.request({ url: 'china_regions' }).then(
-    action.bound((res) => {
-      field.dataSource = res?.data?.data || [];
-      field.loading = false;
-    }),
-  );
-};
-
-const useLoadData = () => {
-  // hook 写在这里
-  const api = useAPIClient();
-  const field = useField<ArrayField>();
-  return (selectedOptions) => {
-    const targetOption = selectedOptions[selectedOptions.length - 1];
-    targetOption.loading = true;
-    // load options lazily
-    setTimeout(() => {
-      targetOption.loading = false;
-      targetOption.children = [
-        {
-          label: `${targetOption.label} Dynamic 1`,
-          value: 'dynamic1',
-        },
-        {
-          label: `${targetOption.label} Dynamic 2`,
-          value: 'dynamic2',
-        },
-      ];
-      field.dataSource = [...field.dataSource];
-    }, 500);
-  };
-};
-
-const schema = {
-  type: 'object',
-  properties: {
-    input: {
-      type: 'string',
-      title: `编辑模式`,
-      'x-decorator': 'FormItem',
-      'x-component': 'Cascader',
-      'x-component-props': {
-        changeOnSelectLast: false,
-        labelInValue: true,
-        maxLevel: 3,
-        useLoadData: '{{useLoadData}}',
-        // fieldNames: {
-        //   label: 'name',
-        //   value: 'code',
-        //   children: 'children',
-        // },
-      },
-      'x-reactions': [
-        '{{useAsyncDataSource(apiClient)}}',
-        {
-          target: 'read',
-          fulfill: {
-            state: {
-              value: '{{$self.value}}',
-            },
-          },
-        },
-      ],
-    },
-    read: {
-      type: 'string',
-      title: `阅读模式`,
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Cascader',
-      'x-component-props': {
-        changeOnSelectLast: false,
-        labelInValue: true,
-        maxLevel: 3,
-        // fieldNames: {
-        //   label: 'name',
-        //   value: 'code',
-        //   children: 'children',
-        // },
-      },
-    },
-  },
-};
-
-export default () => {
-  return (
-    <APIClientProvider apiClient={apiClient}>
-      <SchemaComponentProvider components={{ Cascader, FormItem }}>
-        <SchemaComponent scope={{ apiClient, useLoadData, useAsyncDataSource }} schema={schema} />
-      </SchemaComponentProvider>
-    </APIClientProvider>
-  );
-};

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

@@ -1,37 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# Cascader
-
-## Examples
-
-### Cascader  
-
-<code src="./demos/demo1.tsx" />
-
-### Asynchronous Data Source
-
-<code src="./demos/demo2.tsx" />
-
-## API
-
-基于 antd 的 [Cascader](https://ant.design/components/cascader/#API) 附加的一些属性：
-
-- `labelInValue` 是否把每个选项的 label 包装到 value 中
-- `changeOnSelectLast` 必须选到最后一级
-- `useLoadData` 可调用 hook 的 loadData
-
-```ts
-{
-  useLoadData: (props) => {
-    // 这里可以写 hook
-    return function loadData(selectedOptions) {
-      // Cascader 的 loadData
-    }
-  }
-}
-```

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

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

package/src/schema-component/antd/chart/Chart.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export const Chart = () => {
-  return <div>Chart</div>;
-};

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

@@ -1,8 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# Chart <Badge>待定</Badge>

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

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

package/src/schema-component/antd/checkbox/Checkbox.tsx

@@ -1,65 +0,0 @@
-import { CheckOutlined } from '@ant-design/icons';
-import { connect, mapProps, mapReadPretty, useField } from '@formily/react';
-import { isValid } from '@formily/shared';
-import { Checkbox as AntdCheckbox, Tag } from 'antd';
-import type { CheckboxGroupProps, CheckboxProps } from 'antd/lib/checkbox';
-import uniq from 'lodash/uniq';
-import React from 'react';
-
-type ComposedCheckbox = React.FC<CheckboxProps> & {
-  Group?: React.FC<CheckboxGroupProps>;
-  __ANT_CHECKBOX?: boolean;
-};
-
-export const Checkbox: ComposedCheckbox = connect(
-  AntdCheckbox,
-  mapProps(
-    {
-      value: 'checked',
-      onInput: 'onChange',
-    },
-    (props, field) => {
-      // console.log({ props, field });
-      return {
-        ...props,
-      };
-    },
-  ),
-  mapReadPretty((props) => {
-    if (!isValid(props.value)) {
-      return <div></div>;
-    }
-    return props.value ? <CheckOutlined style={{ color: '#52c41a' }} /> : null;
-  }),
-);
-
-Checkbox.__ANT_CHECKBOX = true;
-
-Checkbox.Group = connect(
-  AntdCheckbox.Group,
-  mapProps({
-    dataSource: 'options',
-  }),
-  mapReadPretty((props) => {
-    if (!isValid(props.value)) {
-      return <div></div>;
-    }
-    const { options = [] } = props;
-    const field = useField<any>();
-    const dataSource = field.dataSource || [];
-    const value = uniq(field.value ? field.value : []);
-    return (
-      <div>
-        {dataSource
-          .filter((option) => value.includes(option.value))
-          .map((option, key) => (
-            <Tag key={key} color={option.color}>
-              {option.label}
-            </Tag>
-          ))}
-      </div>
-    );
-  }),
-);
-
-export default Checkbox;

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

@@ -1,41 +0,0 @@
-/**
- * title: 勾选
- */
-import { FormItem } from '@formily/antd';
-import { Checkbox, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
-import React from 'react';
-
-const schema = {
-  type: 'object',
-  properties: {
-    input: {
-      type: 'boolean',
-      title: `编辑模式`,
-      'x-decorator': 'FormItem',
-      'x-component': 'Checkbox',
-      'x-reactions': {
-        target: 'read',
-        fulfill: {
-          state: {
-            value: '{{$self.value}}',
-          },
-        },
-      },
-    },
-    read: {
-      type: 'boolean',
-      title: `阅读模式`,
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Checkbox',
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ Checkbox, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};

package/src/schema-component/antd/checkbox/demos/demo2.tsx

@@ -1,56 +0,0 @@
-/**
- * title: 组
- */
-import { FormItem } from '@formily/antd';
-import { Checkbox, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
-import React from 'react';
-
-const options = [
-  {
-    label: '选项1',
-    value: 1,
-    color: 'red',
-  },
-  {
-    label: '选项2',
-    value: 2,
-    color: 'blue',
-  },
-];
-
-const schema = {
-  type: 'object',
-  properties: {
-    input: {
-      type: 'array',
-      title: `编辑模式`,
-      enum: options,
-      'x-decorator': 'FormItem',
-      'x-component': 'Checkbox.Group',
-      'x-reactions': {
-        target: 'read',
-        fulfill: {
-          state: {
-            value: '{{$self.value}}',
-          },
-        },
-      },
-    },
-    read: {
-      type: 'array',
-      title: `阅读模式`,
-      enum: options,
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Checkbox.Group',
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ Checkbox, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};

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

@@ -1,18 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# Checkbox
-
-## Examples
-
-### 勾选
-
-<code src="./demos/demo1.tsx" />
-
-### 组
-
-<code src="./demos/demo2.tsx" />

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

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