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

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

@@ -1,33 +0,0 @@
-import { isArrayField } from '@formily/core';
-import { observer, useField } from '@formily/react';
-import { isValid } from '@formily/shared';
-import { Tag } from 'antd';
-import React from 'react';
-import { defaultFieldNames, getCurrentOptions } from './shared';
-
-type Composed = {
-  Select?: React.FC<any>;
-  Object?: React.FC<any>;
-};
-
-export const ReadPretty = observer((props: any) => {
-  const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
-  const field = useField<any>();
-  if (!isValid(props.value)) {
-    return <div />;
-  }
-  if (isArrayField(field) && field?.value?.length === 0) {
-    return <div />;
-  }
-  const dataSource = field.dataSource || props.options || [];
-  const options = getCurrentOptions(field.value, dataSource, fieldNames);
-  return (
-    <div>
-      {options.map((option, key) => (
-        <Tag key={key} color={option[fieldNames.color]}>
-          {option[fieldNames.label]}
-        </Tag>
-      ))}
-    </div>
-  );
-});

package/src/schema-component/antd/select/Select.tsx

@@ -1,83 +0,0 @@
-import { LoadingOutlined } from '@ant-design/icons';
-import { connect, mapProps, mapReadPretty } from '@formily/react';
-import { isValid, toArr } from '@formily/shared';
-import type { SelectProps } from 'antd';
-import { Select as AntdSelect } from 'antd';
-import React from 'react';
-import { ReadPretty } from './ReadPretty';
-import { defaultFieldNames, getCurrentOptions } from './shared';
-
-type Props = SelectProps<any, any> & { objectValue?: boolean; onChange?: (v: any) => void };
-
-const isEmptyObject = (val: any) => !isValid(val) || (typeof val === 'object' && Object.keys(val).length === 0);
-
-const ObjectSelect = (props: Props) => {
-  const { value, options, onChange, fieldNames, mode, ...others } = props;
-  const toValue = (v: any) => {
-    if (isEmptyObject(v)) {
-      return;
-    }
-    const values = toArr(v).filter(item => item).map((val) => {
-      return typeof val === 'object' ? val[fieldNames.value] : val;
-    });
-    const current = getCurrentOptions(values, options, fieldNames)?.map((val) => {
-      return {
-        label: val[fieldNames.label],
-        value: val[fieldNames.value],
-      };
-    });
-    if (['tags', 'multiple'].includes(mode)) {
-      return current;
-    }
-    return current.shift();
-  };
-  return (
-    <AntdSelect
-      value={toValue(value)}
-      allowClear
-      labelInValue
-      options={options}
-      fieldNames={fieldNames}
-      onChange={(changed) => {
-        const current = getCurrentOptions(
-          toArr(changed).map((v) => v.value),
-          options,
-          fieldNames,
-        );
-        if (['tags', 'multiple'].includes(mode)) {
-          onChange(current);
-        } else {
-          onChange(current.shift());
-        }
-      }}
-      mode={mode}
-      {...others}
-    />
-  );
-};
-
-export const Select = connect(
-  (props: Props) => {
-    const { objectValue, ...others } = props;
-    if (objectValue) {
-      return <ObjectSelect {...others} />;
-    }
-    return <AntdSelect {...others} value={others.value || undefined}/>;
-  },
-  mapProps(
-    {
-      dataSource: 'options',
-      loading: true,
-    },
-    (props, field) => {
-      return {
-        ...props,
-        fieldNames: { ...defaultFieldNames, ...props.fieldNames },
-        suffixIcon: field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffixIcon,
-      };
-    },
-  ),
-  mapReadPretty(ReadPretty),
-);
-
-export default Select;

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

@@ -1,60 +0,0 @@
-/**
- * title: Select
- */
-import { FormItem } from '@formily/antd';
-import { SchemaComponent, SchemaComponentProvider, Select } from '@nocobase/client';
-import React from 'react';
-
-const dataSource = [
-  {
-    label: '福建',
-    value: 'FuJian',
-    children: [
-      { label: '{{t("福州")}}', value: 'FZ' },
-      { label: '莆田', value: 'PT' },
-    ],
-  },
-  { label: '江苏', value: 'XZ' },
-  { label: '浙江', value: 'ZX' },
-];
-
-const schema = {
-  type: 'object',
-  properties: {
-    editable: {
-      type: 'string',
-      title: `Editable`,
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {},
-      enum: dataSource,
-      'x-reactions': {
-        target: 'read',
-        fulfill: {
-          state: {
-            value: '{{$self.value}}',
-          },
-        },
-      },
-    },
-    read: {
-      type: 'string',
-      title: `Read pretty`,
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {},
-      enum: dataSource,
-    },
-  },
-};
-
-const t = (text?: any) => text;
-
-export default () => {
-  return (
-    <SchemaComponentProvider scope={{ t }} components={{ Select, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};

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

@@ -1,64 +0,0 @@
-/**
- * title: Select
- */
-import { FormItem } from '@formily/antd';
-import { SchemaComponent, SchemaComponentProvider, Select } from '@nocobase/client';
-import React from 'react';
-
-const dataSource = [
-  {
-    label: '福建',
-    value: 'FuJian',
-    children: [
-      { label: '{{t("福州")}}', value: 'FZ' },
-      { label: '莆田', value: 'PT' },
-    ],
-  },
-  { label: '江苏', value: 'XZ' },
-  { label: '浙江', value: 'ZX' },
-];
-
-const schema = {
-  type: 'object',
-  properties: {
-    editable: {
-      type: 'string',
-      title: `Editable`,
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        mode: 'tags',
-      },
-      enum: dataSource,
-      'x-reactions': {
-        target: 'read',
-        fulfill: {
-          state: {
-            value: '{{$self.value}}',
-          },
-        },
-      },
-    },
-    read: {
-      type: 'string',
-      title: `Read pretty`,
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        mode: 'tags',
-      },
-      enum: dataSource,
-    },
-  },
-};
-
-const t = (text?: any) => text;
-
-export default () => {
-  return (
-    <SchemaComponentProvider scope={{ t }} components={{ Select, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};

package/src/schema-component/antd/select/demos/demo3.tsx

@@ -1,77 +0,0 @@
-/**
- * title: Select
- */
-import { FormItem } from '@formily/antd';
-import { ISchema } from '@formily/react';
-import { SchemaComponent, SchemaComponentProvider, Select } from '@nocobase/client';
-import React from 'react';
-
-const schema: ISchema = {
-  type: 'object',
-  properties: {
-    editable: {
-      type: 'object',
-      title: `Editable`,
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        // mode: 'tags',
-        objectValue: true,
-        fieldNames: { label: 'title', value: 'id' },
-        options: [
-          {
-            title: '福建',
-            id: 'FuJian',
-            children: [
-              { title: '福州', id: 'FZ' },
-              { title: '莆田', id: 'PT' },
-            ],
-          },
-          { title: '江苏', id: 'XZ' },
-          { title: '浙江', id: 'ZX' },
-        ],
-      },
-      default: { title: '福州', id: 'FZ' },
-      'x-reactions': {
-        target: 'read',
-        fulfill: {
-          state: {
-            value: '{{$self.value}}',
-          },
-        },
-      },
-    },
-    read: {
-      type: 'object',
-      title: `Read pretty`,
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        // mode: 'tags',
-        objectValue: true,
-        fieldNames: { label: 'title', value: 'id' },
-        options: [
-          {
-            title: '福建',
-            id: 'FuJian',
-            children: [
-              { title: '福州', id: 'FZ' },
-              { title: '莆田', id: 'PT' },
-            ],
-          },
-          { title: '江苏', id: 'XZ' },
-          { title: '浙江', id: 'ZX' },
-        ],
-      },
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ Select, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};

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

@@ -1,38 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# Select 
-
-## Examples
-
-### 单选
-
-<code src="./demos/demo1.tsx" />
-
-### 多选
-
-<code src="./demos/demo2.tsx" />
-
-### 值为 Object 类型的 Select
-
-<code src="./demos/demo3.tsx" />
-
-## API
-
-基于 Ant Design 的 [Select](https://ant.design/components/select/#API)，相关扩展属性有：
-
-- `objectValue` 值为 object 类型
-- `fieldNames` 默认值有区别
-
-```ts
-export const defaultFieldNames = {
-  label: 'label',
-  value: 'value',
-  color: 'color',
-  options: 'children',
-};
-```

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

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

package/src/schema-component/antd/select/shared.ts

@@ -1,26 +0,0 @@
-import { toArr } from '@formily/shared';
-
-export const defaultFieldNames = {
-  label: 'label',
-  value: 'value',
-  color: 'color',
-  options: 'children',
-};
-
-export const getCurrentOptions = (values, dataSource, fieldNames) => {
-  values = toArr(values).map((val) => (typeof val === 'object' ? val[fieldNames.value] : val));
-  const findOptions = (options: any[]) => {
-    let current = [];
-    for (const option of options) {
-      if (values.includes(option[fieldNames.value])) {
-        current.push(option);
-      }
-      const children = option[fieldNames.options];
-      if (Array.isArray(children)) {
-        current.push(...findOptions(children));
-      }
-    }
-    return current;
-  };
-  return findOptions(dataSource);
-};

package/src/schema-component/antd/space/index.tsx

@@ -1,18 +0,0 @@
-import { useFormLayout } from '@formily/antd';
-import { Divider, Space as AntdSpace, SpaceProps } from 'antd';
-import React from 'react';
-
-export const Space: React.FC<SpaceProps> = (props) => {
-  let { split } = props;
-  if (split === '|') {
-    split = <Divider type="vertical" style={{ margin: '0 2px' }}/>;
-  }
-  const layout = useFormLayout();
-  return React.createElement(AntdSpace, {
-    size: props.size ?? layout?.spaceGap,
-    ...props,
-    split,
-  });
-};
-
-export default Space;

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
-
-export const TableArrayDesigner = () => {
-  return (
-    <GeneralSchemaDesigner>
-      <SchemaSettings.Remove
-        removeParentsIfNoChildren
-        breakRemoveOn={{
-          'x-component': 'Grid',
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-};

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

@@ -1,277 +0,0 @@
-import { MenuOutlined } from '@ant-design/icons';
-import { css } from '@emotion/css';
-import { ArrayField, Field } from '@formily/core';
-import { observer, RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
-import { Table, TableColumnProps } from 'antd';
-import { default as classNames, default as cls } from 'classnames';
-import React, { useState } from 'react';
-import ReactDragListView from 'react-drag-listview';
-import { DndContext } from '../..';
-import { RecordIndexProvider, RecordProvider, useRequest, useSchemaInitializer } from '../../../';
-
-const isColumnComponent = (schema: Schema) => {
-  return schema['x-component']?.endsWith('.Column') > -1;
-};
-
-const useTableColumns = () => {
-  const start = Date.now();
-  const field = useField<ArrayField>();
-  const schema = useFieldSchema();
-  const { exists, render } = useSchemaInitializer(schema['x-initializer']);
-  const columns = schema
-    .reduceProperties((buf, s) => {
-      if (isColumnComponent(s)) {
-        return buf.concat([s]);
-      }
-    }, [])
-    .map((s: Schema) => {
-      return {
-        title: <RecursionField name={s.name} schema={s} onlyRenderSelf />,
-        dataIndex: s.name,
-        key: s.name,
-        render: (v, record) => {
-          const index = field.value?.indexOf(record);
-          console.log((Date.now() - start) / 1000);
-          return (
-            <RecordIndexProvider index={index}>
-              <RecordProvider record={record}>
-                <RecursionField schema={s} name={index} onlyRenderProperties />
-              </RecordProvider>
-            </RecordIndexProvider>
-          );
-        },
-      } as TableColumnProps<any>;
-    });
-  if (!exists) {
-    return columns;
-  }
-  return columns.concat({
-    title: render(),
-    dataIndex: 'TABLE_COLUMN_INITIALIZER',
-    key: 'TABLE_COLUMN_INITIALIZER',
-  });
-};
-
-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>
-      );
-    },
-    row: (props) => {
-      return <tr {...props} />;
-    },
-    cell: (props) => (
-      <td
-        {...props}
-        className={classNames(
-          props.className,
-          css`
-            max-width: 300px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          `,
-        )}
-      />
-    ),
-  },
-};
-
-const useDef = () => {
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-  return [selectedRowKeys, setSelectedRowKeys];
-};
-
-const useDefDataSource = (options, props) => {
-  const field = useField<Field>();
-  return useRequest(() => {
-    return Promise.resolve({
-      data: field.value,
-    });
-  }, options);
-};
-
-const SortHandle = () => {
-  return <MenuOutlined className={'drag-handle'} style={{ cursor: 'grab' }} />;
-};
-
-const TableIndex = (props) => {
-  const { index } = props;
-  return (
-    <div className={classNames('nb-table-index')} style={{ padding: '0 8px 0 16px' }}>
-      {index + 1}
-    </div>
-  );
-};
-
-const useDefAction = () => {
-  return {
-    async move() {},
-  };
-};
-
-export const TableArray: React.FC<any> = observer((props) => {
-  const field = useField<ArrayField>();
-  const columns = useTableColumns();
-  const {
-    dragSort = false,
-    showIndex = true,
-    useSelectedRowKeys = useDef,
-    useDataSource = useDefDataSource,
-    useAction = useDefAction,
-    onChange,
-    ...others
-  } = props;
-  const [selectedRowKeys, setSelectedRowKeys] = useSelectedRowKeys();
-  useDataSource({
-    onSuccess(data) {
-      field.value = data?.data || [];
-    },
-  });
-  const { move } = useAction();
-  const restProps = {
-    rowSelection: props.rowSelection
-      ? {
-          type: 'checkbox',
-          selectedRowKeys,
-          onChange(selectedRowKeys: any[]) {
-            setSelectedRowKeys(selectedRowKeys);
-          },
-          renderCell: (checked, record, index, originNode) => {
-            const current = props?.pagination?.current;
-            const pageSize = props?.pagination?.pageSize || 20;
-            if (current) {
-              index = index + (current - 1) * pageSize;
-            }
-            return (
-              <div
-                className={classNames(
-                  checked ? 'checked' : null,
-                  css`
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-evenly;
-                    padding-right: 8px;
-                    .nb-table-index {
-                      opacity: 0;
-                    }
-                    &:not(.checked) {
-                      .nb-table-index {
-                        opacity: 1;
-                      }
-                    }
-                    &:hover {
-                      .nb-table-index {
-                        opacity: 0;
-                      }
-                      .nb-origin-node {
-                        display: block;
-                      }
-                    }
-                  `,
-                )}
-              >
-                <div
-                  className={classNames(
-                    checked ? 'checked' : null,
-                    css`
-                      position: relative;
-                      display: flex;
-                      align-items: center;
-                      justify-content: space-evenly;
-                    `,
-                  )}
-                >
-                  {dragSort && <SortHandle />}
-                  {showIndex && <TableIndex index={index} />}
-                </div>
-                <div
-                  className={classNames(
-                    'nb-origin-node',
-                    checked ? 'checked' : null,
-                    css`
-                      position: absolute;
-                      right: 50%;
-                      transform: translateX(50%);
-                      &:not(.checked) {
-                        display: none;
-                      }
-                    `,
-                  )}
-                >
-                  {originNode}
-                </div>
-              </div>
-            );
-          },
-          ...props.rowSelection,
-        }
-      : undefined,
-  };
-
-  const defaultRowKey = (record: any) => {
-    return field.value?.indexOf?.(record);
-  };
-
-  return (
-    <div
-      className={css`
-        .ant-table {
-          overflow-x: auto;
-          overflow-y: hidden;
-        }
-      `}
-    >
-      <ReactDragListView
-        handleSelector={'.drag-handle'}
-        onDragEnd={async (fromIndex, toIndex) => {
-          const from = field.value[fromIndex];
-          const to = field.value[toIndex];
-          field.move(fromIndex, toIndex);
-          await move(from, to);
-        }}
-        lineClassName={css`
-          border-bottom: 2px solid rgba(241, 139, 98, 0.6) !important;
-        `}
-      >
-        <Table
-          rowKey={defaultRowKey}
-          {...others}
-          {...restProps}
-          components={components}
-          columns={columns}
-          dataSource={field?.value?.slice?.()}
-        />
-      </ReactDragListView>
-    </div>
-  );
-});