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

package/src/schema-component/antd/color-select/ColorSelect.tsx

@@ -1,51 +0,0 @@
-import { LoadingOutlined } from '@ant-design/icons';
-import { connect, mapProps, mapReadPretty } from '@formily/react';
-import { Select, Tag } from 'antd';
-import React from 'react';
-import { useCompile } from '../../hooks/useCompile';
-
-const colors = {
-  red: '{{t("Red")}}',
-  magenta: '{{t("Magenta")}}',
-  volcano: '{{t("Volcano")}}',
-  orange: '{{t("Orange")}}',
-  gold: '{{t("Gold")}}',
-  lime: '{{t("Lime")}}',
-  green: '{{t("Green")}}',
-  cyan: '{{t("Cyan")}}',
-  blue: '{{t("Blue")}}',
-  geekblue: '{{t("Geek blue")}}',
-  purple: '{{t("Purple")}}',
-  default: '{{t("Default")}}',
-};
-
-export const ColorSelect = connect(
-  (props) => {
-    const compile = useCompile();
-    return (
-      <Select {...props}>
-        {Object.keys(colors).map((color) => (
-          <Select.Option value={color}>
-            <Tag color={color}>{compile(colors[color] || colors.default)}</Tag>
-          </Select.Option>
-        ))}
-      </Select>
-    );
-  },
-  mapProps((props, field) => {
-    return {
-      ...props,
-      suffix: <span>{field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffix}</span>,
-    };
-  }),
-  mapReadPretty((props) => {
-    const compile = useCompile();
-    const { value } = props;
-    if (!colors[value]) {
-      return null;
-    }
-    return <Tag color={value}>{compile(colors[value] || colors.default)}</Tag>;
-  }),
-);
-
-export default ColorSelect;

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

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

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

@@ -1,14 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# ColorSelect
-
-## Examples
-
-### ColorSelect usage
-
-<code src="./demos/demo1.tsx" />

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

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

package/src/schema-component/antd/date-picker/DatePicker.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { DatePicker as AntdDatePicker } from 'antd';
-import type {
-  DatePickerProps as AntdDatePickerProps,
-  RangePickerProps as AntdRangePickerProps,
-} from 'antd/lib/date-picker';
-import { connect, mapProps, mapReadPretty } from '@formily/react';
-import { ReadPretty } from './ReadPretty';
-import { mapDateFormat } from './util';
-
-type ComposedDatePicker = React.FC<AntdDatePickerProps> & {
-  RangePicker?: React.FC<AntdRangePickerProps>;
-};
-
-export const DatePicker: ComposedDatePicker = connect(
-  AntdDatePicker,
-  mapProps(mapDateFormat()),
-  mapReadPretty(ReadPretty.DatePicker),
-);
-
-DatePicker.RangePicker = connect(
-  AntdDatePicker.RangePicker,
-  mapProps(mapDateFormat()),
-  mapReadPretty(ReadPretty.DateRangePicker),
-);
-
-export default DatePicker;

package/src/schema-component/antd/date-picker/ReadPretty.tsx

@@ -1,43 +0,0 @@
-import { formatMomentValue, usePrefixCls } from '@formily/antd/lib/__builtins__';
-import { isArr } from '@formily/shared';
-import type {
-  DatePickerProps as AntdDatePickerProps,
-  RangePickerProps as AntdRangePickerProps
-} from 'antd/lib/date-picker';
-import cls from 'classnames';
-import moment from 'moment';
-import React from 'react';
-import { getDefaultFormat } from './util';
-
-type Composed = {
-  DatePicker: React.FC<AntdDatePickerProps>;
-  DateRangePicker: React.FC<AntdRangePickerProps>;
-};
-
-export const ReadPretty: Composed = () => null;
-
-ReadPretty.DatePicker = (props: any) => {
-  if (!props.value) {
-    return <div></div>;
-  }
-  const prefixCls = usePrefixCls('description-date-picker', props);
-  const getLabels = () => {
-    const d = moment(props.value);
-    const labels = formatMomentValue(d.isValid() ? d : null, getDefaultFormat(props), props.placeholder);
-    return isArr(labels) ? labels.join('~') : labels;
-  };
-  return <div className={cls(prefixCls, props.className)}>{getLabels()}</div>;
-};
-
-ReadPretty.DateRangePicker = (props: any) => {
-  const prefixCls = usePrefixCls('description-text', props);
-  const getLabels = () => {
-    const labels = formatMomentValue(props.value, props.format, props.placeholder);
-    return isArr(labels) ? labels.join('~') : labels;
-  };
-  return (
-    <div className={cls(prefixCls, props.className)} style={props.style}>
-      {getLabels()}
-    </div>
-  );
-};

package/src/schema-component/antd/date-picker/demos/demo1.tsx

@@ -1,49 +0,0 @@
-/**
- * title: DatePicker
- */
-import { FormItem } from '@formily/antd';
-import { DatePicker, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
-import React from 'react';
-
-const schema = {
-  type: 'object',
-  properties: {
-    input: {
-      type: 'boolean',
-      title: `Editable`,
-      'x-decorator': 'FormItem',
-      'x-component': 'DatePicker',
-      'x-component-props': {
-        dateFormat: 'YYYY/MM/DD',
-        // showTime: true,
-      },
-      'x-reactions': {
-        target: 'read',
-        fulfill: {
-          state: {
-            value: '{{$self.value}}',
-          },
-        },
-      },
-    },
-    read: {
-      type: 'boolean',
-      title: `Read pretty`,
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'DatePicker',
-      'x-component-props': {
-        dateFormat: 'YYYY/MM/DD',
-        // showTime: true,
-      },
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ DatePicker, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};

package/src/schema-component/antd/date-picker/demos/demo2.tsx

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

package/src/schema-component/antd/date-picker/index.md

@@ -1,25 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# DatePicker
-
-## Examples
-
-### DatePicker
-
-<code src="./demos/demo1.tsx" />
-
-### RangePicker
-
-<code src="./demos/demo2.tsx" />
-
-## API
-
-基于 antd 的 [DatePicker](https://ant.design/components/date-picker/#API)，新增了以下扩展属性，用于支持 NocoBase 的日期字段设置。
-
-- `dateFormat` 设置日期格式
-- `timeFormat` 设置时间格式

package/src/schema-component/antd/date-picker/index.ts

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

package/src/schema-component/antd/date-picker/util.ts

@@ -1,42 +0,0 @@
-import { formatMomentValue, momentable } from '@formily/antd/lib/__builtins__';
-import type { DatePickerProps } from 'antd/lib/date-picker';
-
-export const getDefaultFormat = (props: DatePickerProps & { dateFormat: string; timeFormat: string }) => {
-  if (props.format) {
-    return props.format;
-  }
-  if (props.dateFormat) {
-    if (props['showTime']) {
-      return `${props.dateFormat} ${props.timeFormat || 'HH:mm:ss'}`;
-    }
-    return props.dateFormat;
-  }
-  if (props['picker'] === 'month') {
-    return 'YYYY-MM';
-  } else if (props['picker'] === 'quarter') {
-    return 'YYYY-\\QQ';
-  } else if (props['picker'] === 'year') {
-    return 'YYYY';
-  } else if (props['picker'] === 'week') {
-    return 'YYYY-wo';
-  }
-  return props['showTime'] ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
-};
-
-export const mapDateFormat = function () {
-  return (props: any) => {
-    const format = getDefaultFormat(props) as any;
-    const onChange = props.onChange;
-    return {
-      ...props,
-      format: format,
-
-      value: momentable(props.value, format === 'YYYY-wo' ? 'YYYY-w' : format),
-      onChange: (value: moment.Moment | moment.Moment[]) => {
-        if (onChange) {
-          onChange(formatMomentValue(value, format));
-        }
-      },
-    };
-  };
-};

package/src/schema-component/antd/filter/DynamicComponent.tsx

@@ -1,56 +0,0 @@
-import { createForm, onFieldValueChange } from '@formily/core';
-import { FieldContext, FormContext } from '@formily/react';
-import { merge } from '@formily/shared';
-import React, { useContext, useMemo } from 'react';
-import { SchemaComponent } from '../../core';
-import { useComponent } from '../../hooks';
-import { FilterContext } from './context';
-
-export const DynamicComponent = (props) => {
-  const { dynamicComponent } = useContext(FilterContext);
-  const component = useComponent(dynamicComponent);
-  const form = useMemo(() => {
-    return createForm({
-      values: {
-        value: props.value,
-      },
-      effects() {
-        onFieldValueChange('value', (field) => {
-          props?.onChange?.(field.value);
-        });
-      },
-    });
-  }, [JSON.stringify(props.schema), JSON.stringify(props.value)]);
-  const renderSchemaComponent = () => {
-    return (
-      <FieldContext.Provider value={null}>
-        <SchemaComponent
-          schema={{
-            'x-component': 'Input',
-            ...props.schema,
-            'x-component-props': merge(props?.schema?.['x-component-props'] || {}, {
-              style: {
-                minWidth: 150,
-              },
-            }),
-            name: 'value',
-            'x-read-pretty': false,
-            'x-validator': undefined,
-            'x-decorator': undefined,
-          }}
-        />
-      </FieldContext.Provider>
-    );
-  };
-  return (
-    <FormContext.Provider value={form}>
-      {component
-        ? React.createElement(component, {
-            value: props.value,
-            onChange: props?.onChange,
-            renderSchemaComponent,
-          })
-        : renderSchemaComponent()}
-    </FormContext.Provider>
-  );
-};

package/src/schema-component/antd/filter/Filter.Action.Designer.tsx

@@ -1,120 +0,0 @@
-import { ISchema, useField, useFieldSchema } from '@formily/react';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { useDesignable } from '../..';
-import { useCollection, useCollectionManager } from '../../../collection-manager';
-import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
-import { useCompile } from '../../hooks';
-
-export const useFilterableFields = (collectionName: string) => {
-  const { getCollectionFields, getInterface } = useCollectionManager();
-  const fields = getCollectionFields(collectionName);
-  return fields?.filter?.((field) => {
-    if (!field.interface) {
-      return false;
-    }
-    const fieldInterface = getInterface(field.interface);
-    if (!fieldInterface.filterable) {
-      return false;
-    }
-    return true;
-  });
-};
-
-export const FilterActionDesigner = (props) => {
-  const field = useField();
-  const fieldSchema = useFieldSchema();
-  const { dn } = useDesignable();
-  const { name } = useCollection();
-  const fields = useFilterableFields(name);
-  const compile = useCompile();
-  const { t } = useTranslation();
-  const nonfilterable = fieldSchema?.['x-component-props']?.nonfilterable || [];
-  return (
-    <GeneralSchemaDesigner {...props} disableInitializer>
-      <SchemaSettings.ItemGroup title={t('Filterable fields')}>
-        {fields.map((field) => {
-          const checked = !nonfilterable.includes(field.name);
-          return (
-            <SchemaSettings.SwitchItem
-              checked={checked}
-              title={compile(field?.uiSchema?.title)}
-              onChange={(value) => {
-                fieldSchema['x-component-props'] = fieldSchema?.['x-component-props'] || {};
-                const nonfilterable = fieldSchema?.['x-component-props']?.nonfilterable || [];
-                if (!value) {
-                  nonfilterable.push(field.name);
-                } else {
-                  const index = nonfilterable.indexOf(field.name);
-                  nonfilterable.splice(index, 1);
-                }
-                fieldSchema['x-component-props'].nonfilterable = nonfilterable;
-                dn.emit('patch', {
-                  schema: {
-                    ['x-uid']: fieldSchema['x-uid'],
-                    'x-component-props': {
-                      ...fieldSchema['x-component-props'],
-                    },
-                  },
-                });
-                dn.refresh();
-              }}
-            />
-          );
-        })}
-      </SchemaSettings.ItemGroup>
-      <SchemaSettings.Divider />
-      <SchemaSettings.ModalItem
-        title={t('Edit button')}
-        schema={
-          {
-            type: 'object',
-            title: t('Edit button'),
-            properties: {
-              title: {
-                'x-decorator': 'FormItem',
-                'x-component': 'Input',
-                title: t('Button title'),
-                default: fieldSchema.title,
-                'x-component-props': {},
-              },
-              icon: {
-                'x-decorator': 'FormItem',
-                'x-component': 'IconPicker',
-                title: t('Button icon'),
-                default: fieldSchema?.['x-component-props']?.icon,
-                'x-component-props': {},
-              },
-            },
-          } as ISchema
-        }
-        onSubmit={({ title, icon }) => {
-          if (title) {
-            fieldSchema.title = title;
-            field.title = title;
-            field.componentProps.icon = icon;
-            fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
-            fieldSchema['x-component-props'].icon = icon;
-            dn.emit('patch', {
-              schema: {
-                ['x-uid']: fieldSchema['x-uid'],
-                title,
-                'x-component-props': {
-                  ...fieldSchema['x-component-props'],
-                },
-              },
-            });
-            dn.refresh();
-          }
-        }}
-      />
-      <SchemaSettings.Divider />
-      <SchemaSettings.Remove
-        removeParentsIfNoChildren
-        breakRemoveOn={(s) => {
-          return s['x-component'] === 'Space' || s['x-component'] === 'ActionBar';
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-};

package/src/schema-component/antd/filter/Filter.tsx

@@ -1,42 +0,0 @@
-import { ObjectField as ObjectFieldModel } from '@formily/core';
-import { observer, useField, useFieldSchema } from '@formily/react';
-import React from 'react';
-import { useRequest } from '../../../api-client';
-import { useProps } from '../../hooks/useProps';
-import { FilterContext } from './context';
-import { FilterActionDesigner } from './Filter.Action.Designer';
-import { FilterAction } from './FilterAction';
-import { FilterGroup } from './FilterGroup';
-import { SaveDefaultValue } from './SaveDefaultValue';
-
-const useDef = (options) => {
-  const field = useField<ObjectFieldModel>();
-  return useRequest(() => Promise.resolve({ data: field.dataSource }), options);
-};
-
-export const Filter: any = observer((props: any) => {
-  const { useDataSource = useDef } = props;
-  const { options, dynamicComponent, className } = useProps(props);
-  const field = useField<ObjectFieldModel>();
-  const fieldSchema = useFieldSchema();
-  useDataSource({
-    onSuccess(data) {
-      field.dataSource = data?.data || [];
-    },
-  });
-  return (
-    <div className={className}>
-      <FilterContext.Provider
-        value={{ field, fieldSchema, dynamicComponent, options: options || field.dataSource || [] }}
-      >
-        <FilterGroup {...props} bordered={false} />
-        {/* <pre>{JSON.stringify(field.value, null, 2)}</pre> */}
-      </FilterContext.Provider>
-    </div>
-  );
-});
-
-Filter.SaveDefaultValue = SaveDefaultValue;
-
-Filter.Action = FilterAction;
-Filter.Action.Designer = FilterActionDesigner;

package/src/schema-component/antd/filter/FilterAction.tsx

@@ -1,121 +0,0 @@
-import { css } from '@emotion/css';
-import { createForm, Field, Form } from '@formily/core';
-import { observer, useField, useFieldSchema, useForm } from '@formily/react';
-import { Button, Popover, Space } from 'antd';
-import React, { createContext, useContext, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { FormProvider, SchemaComponent } from '../../core';
-import { useDesignable } from '../../hooks';
-import { useProps } from '../../hooks/useProps';
-import { Action } from '../action';
-
-export const FilterActionContext = createContext<any>(null);
-
-export const FilterAction = observer((props: any) => {
-  const { t } = useTranslation();
-  const field = useField<Field>();
-  const [visible, setVisible] = useState(false);
-  const { designable, dn } = useDesignable();
-  const fieldSchema = useFieldSchema();
-  const form = useMemo<Form>(() => props.form || createForm(), []);
-  const { options, onSubmit, onReset, ...others } = useProps(props);
-  return (
-    <FilterActionContext.Provider value={{ field, fieldSchema, designable, dn }}>
-      <Popover
-        destroyTooltipOnHide
-        placement={'bottomLeft'}
-        visible={visible}
-        onVisibleChange={(visible) => {
-          setVisible(visible);
-        }}
-        trigger={'click'}
-        content={
-          <form>
-            <FormProvider form={form}>
-              <SchemaComponent
-                schema={{
-                  type: 'object',
-                  properties: {
-                    filter: {
-                      type: 'string',
-                      enum: options || field.dataSource,
-                      default: fieldSchema.default,
-                      'x-component': 'Filter',
-                      'x-component-props': {},
-                    },
-                  },
-                }}
-              />
-              <div
-                className={css`
-                  display: flex;
-                  justify-content: flex-end;
-                  width: 100%;
-                `}
-              >
-                <Space>
-                  <SaveConditions />
-                  <Button
-                    onClick={async () => {
-                      await form.reset();
-                      onReset?.(form.values);
-                      field.title = t('Filter');
-                      setVisible(false);
-                    }}
-                  >
-                    {t('Reset')}
-                  </Button>
-                  <Button
-                    type={'primary'}
-                    htmlType={'submit'}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      onSubmit?.(form.values);
-                      setVisible(false);
-                    }}
-                  >
-                    {t('Submit')}
-                  </Button>
-                </Space>
-              </div>
-            </FormProvider>
-          </form>
-        }
-      >
-        <Action {...others} title={field.title} />
-      </Popover>
-    </FilterActionContext.Provider>
-  );
-});
-
-const SaveConditions = () => {
-  const { fieldSchema, field, designable, dn } = useContext(FilterActionContext);
-  const form = useForm();
-  const { t } = useTranslation();
-  if (!designable) {
-    return null;
-  }
-  return (
-    <Button
-      type={'dashed'}
-      className={css`
-        border-color: rgb(241, 139, 98);
-        color: rgb(241, 139, 98);
-      `}
-      onClick={() => {
-        const defaultValue = { ...form.values.filter };
-        fieldSchema.default = defaultValue;
-        dn.emit('patch', {
-          schema: {
-            'x-uid': fieldSchema['x-uid'],
-            default: defaultValue,
-          },
-        });
-        dn.refresh();
-      }}
-    >
-      {t('Save conditions')}
-    </Button>
-  );
-};