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

package/src/schema-component/antd/time-picker/TimePicker.tsx

@@ -1,37 +0,0 @@
-import { formatMomentValue, momentable } from '@formily/antd/lib/__builtins__';
-import { connect, mapProps, mapReadPretty } from '@formily/react';
-import { TimePicker as AntdTimePicker } from 'antd';
-import { TimePickerProps as AntdTimePickerProps, TimeRangePickerProps } from 'antd/lib/time-picker';
-import moment from 'moment';
-import { ReadPretty } from './ReadPretty';
-
-type ComposedTimePicker = React.FC<AntdTimePickerProps> & {
-  RangePicker?: React.FC<TimeRangePickerProps>;
-};
-
-const mapTimeFormat = function () {
-  return (props: any) => {
-    const format = props['format'] || 'HH:mm:ss';
-    const onChange = props.onChange;
-    return {
-      ...props,
-      format,
-      value: momentable(props.value, format),
-      onChange: (value: moment.Moment | moment.Moment[]) => {
-        if (onChange) {
-          onChange(formatMomentValue(value, format) || null);
-        }
-      },
-    };
-  };
-};
-
-export const TimePicker: ComposedTimePicker = connect(
-  AntdTimePicker,
-  mapProps(mapTimeFormat()),
-  mapReadPretty(ReadPretty),
-);
-
-TimePicker.RangePicker = connect(AntdTimePicker.RangePicker, mapProps(mapTimeFormat()), mapReadPretty(ReadPretty));
-
-export default TimePicker;

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

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

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

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

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

@@ -1,18 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# TimePicker
-
-## Examples
-
-### TimePicker
-
-<code src="./demos/demo1.tsx" />
-
-### Time Range Picker
-
-<code src="./demos/demo2.tsx" />

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

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

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

@@ -1,56 +0,0 @@
-import { usePrefixCls } from '@formily/antd/lib/__builtins__';
-import { Field } from '@formily/core';
-import { observer, useField } from '@formily/react';
-import { isArr } from '@formily/shared';
-import { Tag } from 'antd';
-import { TreeSelectProps } from 'antd/lib/tree-select';
-import cls from 'classnames';
-import React from 'react';
-
-export const ReadPretty: React.FC<TreeSelectProps<any>> = observer((props) => {
-  const field = useField<Field>();
-  const { placeholder } = props;
-  const prefixCls = usePrefixCls('description-tree-select', props);
-  const dataSource = field?.dataSource?.length ? field.dataSource : props?.treeData?.length ? props.treeData : [];
-  const getSelected = () => {
-    const value = props.value;
-    if (props.multiple) {
-      if (props.labelInValue) {
-        return isArr(value) ? value : [];
-      } else {
-        return isArr(value) ? value.map((val) => ({ label: val, value: val })) : [];
-      }
-    } else {
-      if (props.labelInValue) {
-        return value ? [value] : [];
-      } else {
-        return value ? [{ label: value, value }] : [];
-      }
-    }
-  };
-
-  const findLabel = (value: any, dataSource: any[]) => {
-    for (let i = 0; i < dataSource?.length; i++) {
-      const item = dataSource[i];
-      if (item?.value === value) {
-        return item?.label;
-      } else {
-        const childLabel = findLabel(value, item?.children);
-        if (childLabel) return childLabel;
-      }
-    }
-  };
-
-  const getLabels = () => {
-    const selected = getSelected();
-    if (!selected?.length) return <Tag>{placeholder}</Tag>;
-    return selected.map(({ value, label }, key) => {
-      return <Tag key={key}>{findLabel(value, dataSource) || label || placeholder}</Tag>;
-    });
-  };
-  return (
-    <div className={cls(prefixCls, props.className)} style={props.style}>
-      {getLabels()}
-    </div>
-  );
-});

package/src/schema-component/antd/tree-select/TreeSelect.tsx

@@ -1,23 +0,0 @@
-import { LoadingOutlined } from '@ant-design/icons';
-import { connect, mapProps, mapReadPretty } from '@formily/react';
-import { TreeSelect as AntdTreeSelect } from 'antd';
-import React from 'react';
-import { ReadPretty } from './ReadPretty';
-
-export const TreeSelect: any = connect(
-  AntdTreeSelect,
-  mapProps(
-    {
-      dataSource: 'treeData',
-    },
-    (props, field) => {
-      return {
-        ...props,
-        suffixIcon: field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffixIcon,
-      };
-    },
-  ),
-  mapReadPretty(ReadPretty),
-);
-
-export default TreeSelect;

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

@@ -1,85 +0,0 @@
-/**
- * title: TreeSelect
- */
-import { FormItem } from '@formily/antd';
-import { SchemaComponent, SchemaComponentProvider, TreeSelect } from '@nocobase/client';
-import React from 'react';
-
-const dataSource = [
-  {
-    label: '选项1',
-    value: 1,
-    children: [
-      {
-        label: 'Child Node1',
-        value: '0-0-0',
-      },
-      {
-        label: 'Child Node2',
-        value: '0-0-1',
-      },
-      {
-        label: 'Child Node3',
-        value: '0-0-2',
-      },
-    ],
-  },
-  {
-    label: '选项2',
-    value: 2,
-    children: [
-      {
-        label: 'Child Node1',
-        value: '0-1-0',
-      },
-      {
-        label: 'Child Node2',
-        value: '0-1-1',
-      },
-      {
-        label: 'Child Node3',
-        value: '0-1-2',
-      },
-    ],
-  },
-];
-const schema = {
-  type: 'object',
-  properties: {
-    input: {
-      type: 'string',
-      title: `Editable`,
-      'x-decorator': 'FormItem',
-      'x-component': 'TreeSelect',
-      'x-component-props': {
-        treeData: 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': 'TreeSelect',
-      'x-component-props': {
-        treeData: dataSource,
-      },
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ TreeSelect, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};

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

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

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

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

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

@@ -1,146 +0,0 @@
-import DownloadOutlined from '@ant-design/icons/DownloadOutlined';
-import { Field } from '@formily/core';
-import { useField } from '@formily/react';
-import { Button, Space } from 'antd';
-import cls from 'classnames';
-import { saveAs } from 'file-saver';
-import React, { useState } from 'react';
-import Lightbox from 'react-image-lightbox';
-import { isImage, toArr, toImages } from './shared';
-import type { UploadProps } from './type';
-
-type Composed = React.FC<UploadProps> & {
-  Upload?: React.FC<UploadProps>;
-  Attachment?: React.FC<UploadProps>;
-};
-
-export const ReadPretty: Composed = () => null;
-
-ReadPretty.Attachment = (props: UploadProps) => {
-  const field = useField<Field>();
-  const images = toImages(toArr(field.value));
-  const [photoIndex, setPhotoIndex] = useState(0);
-  const [visible, setVisible] = useState(false);
-  const { size } = props;
-  return (
-    <div>
-      <div className={cls('ant-upload-picture-card-wrapper nb-upload', size ? `nb-upload-${size}` : null)}>
-        <div className={'ant-upload-list ant-upload-list-picture-card'}>
-          {images.map((file) => {
-            const handleClick = (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              const index = images.indexOf(file);
-              if (isImage(file.extname)) {
-                setVisible(true);
-                setPhotoIndex(index);
-              } else {
-                saveAs(file.url, `${file.title}${file.extname}`);
-              }
-            };
-            return (
-              <div className={'ant-upload-list-picture-card-container'}>
-                <div className="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card">
-                  <div className={'ant-upload-list-item-info'}>
-                    <span className="ant-upload-span">
-                      <a
-                        className="ant-upload-list-item-thumbnail"
-                        href={file.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        onClick={handleClick}
-                      >
-                        {file.imageUrl && (
-                          <img
-                            src={`${file.imageUrl}?x-oss-process=style/thumbnail`}
-                            alt={file.title}
-                            className="ant-upload-list-item-image"
-                          />
-                        )}
-                      </a>
-                      <a
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="ant-upload-list-item-name"
-                        title={file.title}
-                        href={file.url}
-                        onClick={handleClick}
-                      >
-                        {file.title}
-                      </a>
-                    </span>
-                  </div>
-                  {size !== 'small' && (
-                    <span className={'ant-upload-list-item-actions'}>
-                      <Space size={3}>
-                        <Button
-                          size={'small'}
-                          type={'text'}
-                          icon={<DownloadOutlined />}
-                          onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            saveAs(file.url, `${file.title}${file.extname}`);
-                          }}
-                        />
-                      </Space>
-                    </span>
-                  )}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-      {visible && (
-        <Lightbox
-          // discourageDownloads={true}
-          mainSrc={images[photoIndex]?.imageUrl}
-          nextSrc={images[(photoIndex + 1) % images.length]?.imageUrl}
-          prevSrc={images[(photoIndex + images.length - 1) % images.length]?.imageUrl}
-          // @ts-ignore
-          onCloseRequest={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setVisible(false);
-          }}
-          onMovePrevRequest={() => setPhotoIndex((photoIndex + images.length - 1) % images.length)}
-          onMoveNextRequest={() => setPhotoIndex((photoIndex + 1) % images.length)}
-          imageTitle={images[photoIndex]?.title}
-          toolbarButtons={[
-            <button
-              style={{ fontSize: 22, background: 'none', lineHeight: 1 }}
-              type="button"
-              aria-label="Zoom in"
-              title="Zoom in"
-              className="ril-zoom-in ril__toolbarItemChild ril__builtinButton"
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                const file = images[photoIndex];
-                saveAs(file.url, `${file.title}${file.extname}`);
-              }}
-            >
-              <DownloadOutlined />
-            </button>,
-          ]}
-        />
-      )}
-    </div>
-  );
-};
-
-ReadPretty.Upload = (props) => {
-  const field = useField<Field>();
-  return (field.value || []).map((item) => (
-    <div>
-      {item.url ? (
-        <a target={'_blank'} href={item.url}>
-          {item.name}
-        </a>
-      ) : (
-        <span>{item.name}</span>
-      )}
-    </div>
-  ));
-};

package/src/schema-component/antd/upload/Upload.tsx

@@ -1,209 +0,0 @@
-import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
-import DownloadOutlined from '@ant-design/icons/DownloadOutlined';
-import PlusOutlined from '@ant-design/icons/PlusOutlined';
-import { usePrefixCls } from '@formily/antd/lib/__builtins__';
-import { connect, mapProps, mapReadPretty } from '@formily/react';
-import { Button, Progress, Space, Upload as AntdUpload } from 'antd';
-import cls from 'classnames';
-import { saveAs } from 'file-saver';
-import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import Lightbox from 'react-image-lightbox';
-import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
-import { ReadPretty } from './ReadPretty';
-import { isImage, toArr, toFileList, toItem, toValue, useUploadProps } from './shared';
-import './style.less';
-import type { ComposedUpload, DraggerProps, UploadProps } from './type';
-
-export const Upload: ComposedUpload = connect(
-  (props: UploadProps) => {
-    return <AntdUpload {...useUploadProps(props)} />;
-  },
-  mapProps({
-    value: 'fileList',
-  }),
-  mapReadPretty(ReadPretty.Upload),
-);
-
-Upload.Attachment = connect((props: UploadProps) => {
-  const { disabled, multiple, value, onChange } = props;
-  const [fileList, setFileList] = useState([]);
-  const [sync, setSync] = useState(true);
-  const images = fileList;
-  const [photoIndex, setPhotoIndex] = useState(0);
-  const [visible, setVisible] = useState(false);
-  const { t } = useTranslation();
-  useEffect(() => {
-    if (sync) {
-      setFileList(toFileList(value));
-    }
-  }, [value, sync]);
-  const uploadProps = useUploadProps({ ...props });
-  return (
-    <div>
-      <div className={cls('ant-upload-picture-card-wrapper nb-upload')}>
-        <div className={'ant-upload-list ant-upload-list-picture-card'}>
-          {fileList.map((file) => {
-            const handleClick = (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              const index = fileList.indexOf(file);
-              if (isImage(file.extname)) {
-                setVisible(true);
-                setPhotoIndex(index);
-              } else {
-                saveAs(file.url, `${file.title}${file.extname}`);
-              }
-            };
-            return (
-              <div className={'ant-upload-list-picture-card-container'}>
-                <div className="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card">
-                  <div className={'ant-upload-list-item-info'}>
-                    <span className="ant-upload-span">
-                      <a
-                        className="ant-upload-list-item-thumbnail"
-                        href={file.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        onClick={handleClick}
-                      >
-                        {file.imageUrl && (
-                          <img src={file.imageUrl} alt={file.title} className="ant-upload-list-item-image" />
-                        )}
-                      </a>
-                      <a
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="ant-upload-list-item-name"
-                        title={file.title}
-                        href={file.url}
-                        onClick={handleClick}
-                      >
-                        {file.status === 'uploading' ? t('Uploading') : file.title}
-                      </a>
-                    </span>
-                  </div>
-                  <span className={'ant-upload-list-item-actions'}>
-                    <Space size={3}>
-                      <Button
-                        size={'small'}
-                        type={'text'}
-                        icon={<DownloadOutlined />}
-                        onClick={() => {
-                          saveAs(file.url, `${file.title}${file.extname}`);
-                        }}
-                      />
-                      {!disabled && (
-                        <Button
-                          size={'small'}
-                          type={'text'}
-                          icon={<DeleteOutlined />}
-                          onClick={() => {
-                            setSync(false);
-                            setFileList((prevFileList) => {
-                              if (!multiple) {
-                                onChange(null);
-                                return [];
-                              }
-                              const index = prevFileList.indexOf(file);
-                              prevFileList.splice(index, 1);
-                              onChange(toValue([...prevFileList]));
-                              return [...prevFileList];
-                            });
-                          }}
-                        />
-                      )}
-                    </Space>
-                  </span>
-                  {file.status === 'uploading' && (
-                    <div className={'ant-upload-list-item-progress'}>
-                      <Progress strokeWidth={2} type={'line'} showInfo={false} percent={file.percent} />
-                    </div>
-                  )}
-                </div>
-              </div>
-            );
-          })}
-          {!disabled && (multiple || toArr(value).length < 1) && (
-            <div className={'ant-upload-list-picture-card-container'}>
-              <AntdUpload
-                {...uploadProps}
-                disabled={disabled}
-                multiple={multiple}
-                listType={'picture-card'}
-                fileList={fileList}
-                onChange={(info) => {
-                  setSync(false);
-                  if (multiple) {
-                    if (info.file.status === 'done') {
-                      onChange(toValue(info.fileList));
-                    }
-                    setFileList(info.fileList.map(toItem));
-                  } else {
-                    if (info.file.status === 'done') {
-                      // TODO(BUG): object 的联动有问题，不响应，折中的办法先置空再赋值
-                      onChange(null);
-                      onChange(info.file?.response?.data);
-                    }
-                    setFileList([toItem(info.file)]);
-                  }
-                }}
-                showUploadList={false}
-              >
-                {!disabled && (multiple || toArr(value).length < 1) && (
-                  <span>
-                    <PlusOutlined />
-                    <br /> {t('Upload')}
-                  </span>
-                )}
-              </AntdUpload>
-            </div>
-          )}
-        </div>
-      </div>
-      {visible && (
-        <Lightbox
-          // discourageDownloads={true}
-          mainSrc={images[photoIndex]?.imageUrl}
-          nextSrc={images[(photoIndex + 1) % images.length]?.imageUrl}
-          prevSrc={images[(photoIndex + images.length - 1) % images.length]?.imageUrl}
-          onCloseRequest={() => setVisible(false)}
-          onMovePrevRequest={() => setPhotoIndex((photoIndex + images.length - 1) % images.length)}
-          onMoveNextRequest={() => setPhotoIndex((photoIndex + 1) % images.length)}
-          imageTitle={images[photoIndex]?.title}
-          toolbarButtons={[
-            <button
-              style={{ fontSize: 22, background: 'none', lineHeight: 1 }}
-              type="button"
-              aria-label="Zoom in"
-              title="Zoom in"
-              className="ril-zoom-in ril__toolbarItemChild ril__builtinButton"
-              onClick={(e) => {
-                e.preventDefault();
-                const file = images[photoIndex];
-                saveAs(file.url, `${file.title}${file.extname}`);
-              }}
-            >
-              <DownloadOutlined />
-            </button>,
-          ]}
-        />
-      )}
-    </div>
-  );
-}, mapReadPretty(ReadPretty.Attachment));
-
-Upload.Dragger = connect(
-  (props: DraggerProps) => {
-    return (
-      <div className={usePrefixCls('upload-dragger')}>
-        <AntdUpload.Dragger {...useUploadProps(props)} />
-      </div>
-    );
-  },
-  mapProps({
-    value: 'fileList',
-  }),
-);
-
-export default Upload;