@nocobase/client 0.7.0-alpha.8 → 0.7.0-alpha.82

package/es/schema-component/antd/table-v2/TableSelectorDesigner.js

@@ -0,0 +1,215 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { ArrayItems } from '@formily/antd';
+import { useField, useFieldSchema } from '@formily/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useTableSelectorContext } from '../../../block-provider';
+import { useCollection } from '../../../collection-manager';
+import { useCollectionFilterOptions, useSortFields } from '../../../collection-manager/action-hooks';
+import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
+import { useSchemaTemplate } from '../../../schema-templates';
+import { useDesignable } from '../../hooks';
+export var TableSelectorDesigner = function TableSelectorDesigner() {
+  var _fieldSchema$xDecora, _fieldSchema$xDecora$, _fieldSchema$xDecora2, _fieldSchema$xDecora3, _field$decoratorProps, _field$decoratorProps2;
+
+  var _useCollection = useCollection(),
+      name = _useCollection.name,
+      title = _useCollection.title;
+
+  var field = useField();
+  var fieldSchema = useFieldSchema();
+  var dataSource = useCollectionFilterOptions(name);
+  var sortFields = useSortFields(name);
+
+  var _useTableSelectorCont = useTableSelectorContext(),
+      service = _useTableSelectorCont.service;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _useDesignable = useDesignable(),
+      dn = _useDesignable.dn;
+
+  var defaultFilter = (fieldSchema === null || fieldSchema === void 0 ? void 0 : (_fieldSchema$xDecora = fieldSchema['x-decorator-props']) === null || _fieldSchema$xDecora === void 0 ? void 0 : (_fieldSchema$xDecora$ = _fieldSchema$xDecora.params) === null || _fieldSchema$xDecora$ === void 0 ? void 0 : _fieldSchema$xDecora$.filter) || {};
+  var defaultSort = (fieldSchema === null || fieldSchema === void 0 ? void 0 : (_fieldSchema$xDecora2 = fieldSchema['x-decorator-props']) === null || _fieldSchema$xDecora2 === void 0 ? void 0 : (_fieldSchema$xDecora3 = _fieldSchema$xDecora2.params) === null || _fieldSchema$xDecora3 === void 0 ? void 0 : _fieldSchema$xDecora3.sort) || [];
+  var sort = defaultSort === null || defaultSort === void 0 ? void 0 : defaultSort.map(function (item) {
+    return item.startsWith('-') ? {
+      field: item.substring(1),
+      direction: 'desc'
+    } : {
+      field: item,
+      direction: 'asc'
+    };
+  });
+  var template = useSchemaTemplate();
+  var dragSort = field.decoratorProps.dragSort;
+  return /*#__PURE__*/React.createElement(GeneralSchemaDesigner, {
+    template: template,
+    title: title || name,
+    disableInitializer: true
+  }, /*#__PURE__*/React.createElement(SchemaSettings.ModalItem, {
+    title: t('Set the data scope'),
+    schema: {
+      type: 'object',
+      title: t('Set the data scope'),
+      properties: {
+        filter: {
+          default: defaultFilter,
+          // title: '数据范围',
+          enum: dataSource,
+          'x-component': 'Filter',
+          'x-component-props': {}
+        }
+      }
+    },
+    onSubmit: function onSubmit(_ref) {
+      var _service$params, _schema;
+
+      var filter = _ref.filter;
+      var params = field.decoratorProps.params || {};
+      params.filter = filter;
+      field.decoratorProps.params = params;
+      fieldSchema['x-decorator-props']['params'] = params;
+      service.run(_objectSpread(_objectSpread({}, (_service$params = service.params) === null || _service$params === void 0 ? void 0 : _service$params[0]), {}, {
+        filter: filter,
+        page: 1
+      }));
+      dn.emit('patch', {
+        schema: (_schema = {}, _defineProperty(_schema, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema, 'x-decorator-props', fieldSchema['x-decorator-props']), _schema)
+      });
+    }
+  }), !dragSort && /*#__PURE__*/React.createElement(SchemaSettings.ModalItem, {
+    title: t('Set default sorting rules'),
+    components: {
+      ArrayItems: ArrayItems
+    },
+    schema: {
+      type: 'object',
+      title: t('Set default sorting rules'),
+      properties: {
+        sort: {
+          type: 'array',
+          default: sort,
+          'x-component': 'ArrayItems',
+          'x-decorator': 'FormItem',
+          items: {
+            type: 'object',
+            properties: {
+              space: {
+                type: 'void',
+                'x-component': 'Space',
+                properties: {
+                  sort: {
+                    type: 'void',
+                    'x-decorator': 'FormItem',
+                    'x-component': 'ArrayItems.SortHandle'
+                  },
+                  field: {
+                    type: 'string',
+                    enum: sortFields,
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Select',
+                    'x-component-props': {
+                      style: {
+                        width: 260
+                      }
+                    }
+                  },
+                  direction: {
+                    type: 'string',
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Radio.Group',
+                    'x-component-props': {
+                      optionType: 'button'
+                    },
+                    enum: [{
+                      label: t('ASC'),
+                      value: 'asc'
+                    }, {
+                      label: t('DESC'),
+                      value: 'desc'
+                    }]
+                  },
+                  remove: {
+                    type: 'void',
+                    'x-decorator': 'FormItem',
+                    'x-component': 'ArrayItems.Remove'
+                  }
+                }
+              }
+            }
+          },
+          properties: {
+            add: {
+              type: 'void',
+              title: t('Add sort field'),
+              'x-component': 'ArrayItems.Addition'
+            }
+          }
+        }
+      }
+    },
+    onSubmit: function onSubmit(_ref2) {
+      var _schema2, _service$params2;
+
+      var sort = _ref2.sort;
+      var sortArr = sort.map(function (item) {
+        return item.direction === 'desc' ? "-".concat(item.field) : item.field;
+      });
+      var params = field.decoratorProps.params || {};
+      params.sort = sortArr;
+      field.decoratorProps.params = params;
+      fieldSchema['x-decorator-props']['params'] = params;
+      dn.emit('patch', {
+        schema: (_schema2 = {}, _defineProperty(_schema2, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema2, 'x-decorator-props', fieldSchema['x-decorator-props']), _schema2)
+      });
+      service.run(_objectSpread(_objectSpread({}, (_service$params2 = service.params) === null || _service$params2 === void 0 ? void 0 : _service$params2[0]), {}, {
+        sort: sortArr
+      }));
+    }
+  }), /*#__PURE__*/React.createElement(SchemaSettings.SelectItem, {
+    title: t('Records per page'),
+    value: ((_field$decoratorProps = field.decoratorProps) === null || _field$decoratorProps === void 0 ? void 0 : (_field$decoratorProps2 = _field$decoratorProps.params) === null || _field$decoratorProps2 === void 0 ? void 0 : _field$decoratorProps2.pageSize) || 20,
+    options: [{
+      label: '10',
+      value: 10
+    }, {
+      label: '20',
+      value: 20
+    }, {
+      label: '50',
+      value: 50
+    }, {
+      label: '100',
+      value: 100
+    }, {
+      label: '200',
+      value: 200
+    }],
+    onChange: function onChange(pageSize) {
+      var _service$params3, _schema3;
+
+      var params = field.decoratorProps.params || {};
+      params.pageSize = pageSize;
+      field.decoratorProps.params = params;
+      fieldSchema['x-decorator-props']['params'] = params;
+      service.run(_objectSpread(_objectSpread({}, (_service$params3 = service.params) === null || _service$params3 === void 0 ? void 0 : _service$params3[0]), {}, {
+        pageSize: pageSize,
+        page: 1
+      }));
+      dn.emit('patch', {
+        schema: (_schema3 = {}, _defineProperty(_schema3, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema3, 'x-decorator-props', fieldSchema['x-decorator-props']), _schema3)
+      });
+    }
+  }), /*#__PURE__*/React.createElement(SchemaSettings.Divider, null), /*#__PURE__*/React.createElement(SchemaSettings.Remove, {
+    removeParentsIfNoChildren: true,
+    breakRemoveOn: {
+      'x-component': 'Grid'
+    }
+  }));
+};

package/es/schema-component/antd/table-v2/index.js

@@ -0,0 +1,17 @@
+import { Table } from './Table';
+import { TableActionColumnDesigner } from './Table.ActionColumnDesigner';
+import { TableColumn } from './Table.Column';
+import { TableColumnActionBar } from './Table.Column.ActionBar';
+import { TableColumnDecorator } from './Table.Column.Decorator';
+import { TableColumnDesigner } from './Table.Column.Designer';
+import { TableSelector } from './TableSelector';
+export * from './TableBlockDesigner';
+export * from './TableField';
+export * from './TableSelectorDesigner';
+export var TableV2 = Table;
+TableV2.Column = TableColumn;
+TableV2.Column.ActionBar = TableColumnActionBar;
+TableV2.Column.Decorator = TableColumnDecorator;
+TableV2.Column.Designer = TableColumnDesigner;
+TableV2.ActionColumnDesigner = TableActionColumnDesigner;
+TableV2.Selector = TableSelector;

package/es/schema-component/antd/tabs/Tabs.Designer.d.ts

@@ -0,0 +1 @@
+export declare const TabsDesigner: () => JSX.Element;

package/es/schema-component/antd/tabs/Tabs.Designer.js

@@ -0,0 +1,52 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { useField, useFieldSchema } from '@formily/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDesignable } from '../..';
+import { GeneralSchemaDesigner, SchemaSettings } from '../../../';
+export var TabsDesigner = function TabsDesigner() {
+  var field = useField();
+  var fieldSchema = useFieldSchema();
+
+  var _useDesignable = useDesignable(),
+      dn = _useDesignable.dn;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  return /*#__PURE__*/React.createElement(GeneralSchemaDesigner, {
+    disableInitializer: true
+  }, /*#__PURE__*/React.createElement(SchemaSettings.ModalItem, {
+    title: t('Edit'),
+    schema: {
+      type: 'object',
+      title: t('Edit tab'),
+      properties: {
+        title: {
+          title: t('Tab name'),
+          'x-decorator': 'FormItem',
+          'x-component': 'Input',
+          'x-component-props': {}
+        }
+      }
+    },
+    initialValues: {
+      title: field.title
+    },
+    onSubmit: function onSubmit(_ref) {
+      var title = _ref.title;
+
+      if (title) {
+        var _schema;
+
+        fieldSchema.title = title;
+        field.title = title;
+        dn.emit('patch', {
+          schema: (_schema = {}, _defineProperty(_schema, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema, "title", title), _schema)
+        });
+        dn.refresh();
+      }
+    }
+  }), /*#__PURE__*/React.createElement(SchemaSettings.Divider, null), /*#__PURE__*/React.createElement(SchemaSettings.Remove, null));
+};

package/es/schema-component/antd/tabs/Tabs.js

@@ -0,0 +1,47 @@
+var _templateObject;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import { css } from '@emotion/css';
+import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
+import { Tabs as AntdTabs } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import { useSchemaInitializer } from '../../../schema-initializer';
+import { DndContext, SortableItem } from '../../common';
+import { useDesigner } from '../../hooks/useDesigner';
+import { TabsDesigner } from './Tabs.Designer';
+export var Tabs = observer(function (props) {
+  var fieldSchema = useFieldSchema();
+
+  var _useSchemaInitializer = useSchemaInitializer(fieldSchema['x-initializer']),
+      render = _useSchemaInitializer.render;
+
+  return /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(AntdTabs, {
+    tabBarExtraContent: {
+      right: render()
+    }
+  }, fieldSchema.mapProperties(function (schema, key) {
+    return /*#__PURE__*/React.createElement(AntdTabs.TabPane, {
+      tab: /*#__PURE__*/React.createElement(RecursionField, {
+        name: key,
+        schema: schema,
+        onlyRenderSelf: true
+      }),
+      key: key
+    }, /*#__PURE__*/React.createElement(RecursionField, {
+      name: key,
+      schema: schema,
+      onlyRenderProperties: true
+    }));
+  })));
+});
+var designerCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  &:hover {\n    > .general-schema-designer {\n      display: block;\n    }\n  }\n  &.nb-action-link {\n    > .general-schema-designer {\n      top: -10px;\n      bottom: -10px;\n      left: -10px;\n      right: -10px;\n    }\n  }\n  > .general-schema-designer {\n    position: absolute;\n    z-index: 999;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: none;\n    background: rgba(241, 139, 98, 0.06);\n    border: 0;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    pointer-events: none;\n    > .general-schema-designer-icons {\n      position: absolute;\n      right: 2px;\n      top: 2px;\n      line-height: 16px;\n      pointer-events: all;\n      .ant-space-item {\n        background-color: #f18b62;\n        color: #fff;\n        line-height: 16px;\n        width: 16px;\n        padding-left: 1px;\n      }\n    }\n  }\n"])));
+Tabs.TabPane = observer(function (props) {
+  var Designer = useDesigner();
+  var field = useField();
+  return /*#__PURE__*/React.createElement(SortableItem, {
+    className: classNames('nb-action-link', designerCss, props.className)
+  }, props.tab || field.title, /*#__PURE__*/React.createElement(Designer, null));
+});
+Tabs.Designer = TabsDesigner;

package/es/schema-component/antd/tabs/index.js

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

package/es/schema-component/antd/time-picker/ReadPretty.js

@@ -0,0 +1,18 @@
+import { formatMomentValue, usePrefixCls } from '@formily/antd/lib/__builtins__';
+import { isArr } from '@formily/shared';
+import cls from 'classnames';
+import React from 'react';
+export var ReadPretty = function ReadPretty(props) {
+  var placeholder = props.placeholder;
+  var prefixCls = usePrefixCls('description-text', props);
+
+  var getLabels = function getLabels() {
+    var labels = formatMomentValue(props.value, props.format, placeholder);
+    return isArr(labels) ? labels.join('~') : labels;
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls(prefixCls, props.className),
+    style: props.style
+  }, getLabels());
+};

package/es/schema-component/antd/time-picker/TimePicker.js

@@ -0,0 +1,30 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { formatMomentValue, momentable } from '@formily/antd/lib/__builtins__';
+import { connect, mapProps, mapReadPretty } from '@formily/react';
+import { TimePicker as AntdTimePicker } from 'antd';
+import { ReadPretty } from './ReadPretty';
+
+var mapTimeFormat = function mapTimeFormat() {
+  return function (props) {
+    var format = props['format'] || 'HH:mm:ss';
+    var _onChange = props.onChange;
+    return _objectSpread(_objectSpread({}, props), {}, {
+      format: format,
+      value: momentable(props.value, format),
+      onChange: function onChange(value) {
+        if (_onChange) {
+          _onChange(formatMomentValue(value, format) || null);
+        }
+      }
+    });
+  };
+};
+
+export var TimePicker = connect(AntdTimePicker, mapProps(mapTimeFormat()), mapReadPretty(ReadPretty));
+TimePicker.RangePicker = connect(AntdTimePicker.RangePicker, mapProps(mapTimeFormat()), mapReadPretty(ReadPretty));
+export default TimePicker;

package/es/schema-component/antd/time-picker/index.js

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

package/es/schema-component/antd/tree-select/ReadPretty.js

@@ -0,0 +1,70 @@
+import { usePrefixCls } from '@formily/antd/lib/__builtins__';
+import { observer, useField } from '@formily/react';
+import { isArr } from '@formily/shared';
+import { Tag } from 'antd';
+import cls from 'classnames';
+import React from 'react';
+export var ReadPretty = observer(function (props) {
+  var _field$dataSource, _props$treeData;
+
+  var field = useField();
+  var placeholder = props.placeholder;
+  var prefixCls = usePrefixCls('description-tree-select', props);
+  var dataSource = (field === null || field === void 0 ? void 0 : (_field$dataSource = field.dataSource) === null || _field$dataSource === void 0 ? void 0 : _field$dataSource.length) ? field.dataSource : (props === null || props === void 0 ? void 0 : (_props$treeData = props.treeData) === null || _props$treeData === void 0 ? void 0 : _props$treeData.length) ? props.treeData : [];
+
+  var getSelected = function getSelected() {
+    var value = props.value;
+
+    if (props.multiple) {
+      if (props.labelInValue) {
+        return isArr(value) ? value : [];
+      } else {
+        return isArr(value) ? value.map(function (val) {
+          return {
+            label: val,
+            value: val
+          };
+        }) : [];
+      }
+    } else {
+      if (props.labelInValue) {
+        return value ? [value] : [];
+      } else {
+        return value ? [{
+          label: value,
+          value: value
+        }] : [];
+      }
+    }
+  };
+
+  var findLabel = function findLabel(value, dataSource) {
+    for (var i = 0; i < (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length); i++) {
+      var item = dataSource[i];
+
+      if ((item === null || item === void 0 ? void 0 : item.value) === value) {
+        return item === null || item === void 0 ? void 0 : item.label;
+      } else {
+        var childLabel = findLabel(value, item === null || item === void 0 ? void 0 : item.children);
+        if (childLabel) return childLabel;
+      }
+    }
+  };
+
+  var getLabels = function getLabels() {
+    var selected = getSelected();
+    if (!(selected === null || selected === void 0 ? void 0 : selected.length)) return /*#__PURE__*/React.createElement(Tag, null, placeholder);
+    return selected.map(function (_ref, key) {
+      var value = _ref.value,
+          label = _ref.label;
+      return /*#__PURE__*/React.createElement(Tag, {
+        key: key
+      }, findLabel(value, dataSource) || label || placeholder);
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls(prefixCls, props.className),
+    style: props.style
+  }, getLabels());
+});

package/es/schema-component/antd/tree-select/TreeSelect.js

@@ -0,0 +1,19 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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 var TreeSelect = connect(AntdTreeSelect, mapProps({
+  dataSource: 'treeData'
+}, function (props, field) {
+  return _objectSpread(_objectSpread({}, props), {}, {
+    suffixIcon: (field === null || field === void 0 ? void 0 : field['loading']) || (field === null || field === void 0 ? void 0 : field['validating']) ? /*#__PURE__*/React.createElement(LoadingOutlined, null) : props.suffixIcon
+  });
+}), mapReadPretty(ReadPretty));
+export default TreeSelect;

package/es/schema-component/antd/tree-select/index.js

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

package/es/schema-component/antd/upload/ReadPretty.js

@@ -0,0 +1,146 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import DownloadOutlined from '@ant-design/icons/DownloadOutlined';
+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';
+export var ReadPretty = function ReadPretty() {
+  return null;
+};
+
+ReadPretty.Attachment = function (props) {
+  var _images$photoIndex, _images, _images2, _images$photoIndex2;
+
+  var field = useField();
+  var images = toImages(toArr(field.value));
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      photoIndex = _useState2[0],
+      setPhotoIndex = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      visible = _useState4[0],
+      setVisible = _useState4[1];
+
+  var size = props.size;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: cls('ant-upload-picture-card-wrapper nb-upload', size ? "nb-upload-".concat(size) : null)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'ant-upload-list ant-upload-list-picture-card'
+  }, images.map(function (file) {
+    var handleClick = function handleClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      var index = images.indexOf(file);
+
+      if (isImage(file.extname)) {
+        setVisible(true);
+        setPhotoIndex(index);
+      } else {
+        saveAs(file.url, "".concat(file.title).concat(file.extname));
+      }
+    };
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: 'ant-upload-list-picture-card-container'
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: 'ant-upload-list-item-info'
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ant-upload-span"
+    }, /*#__PURE__*/React.createElement("a", {
+      className: "ant-upload-list-item-thumbnail",
+      href: file.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: handleClick
+    }, file.imageUrl && /*#__PURE__*/React.createElement("img", {
+      src: "".concat(file.imageUrl, "?x-oss-process=style/thumbnail"),
+      alt: file.title,
+      className: "ant-upload-list-item-image"
+    })), /*#__PURE__*/React.createElement("a", {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "ant-upload-list-item-name",
+      title: file.title,
+      href: file.url,
+      onClick: handleClick
+    }, file.title))), size !== 'small' && /*#__PURE__*/React.createElement("span", {
+      className: 'ant-upload-list-item-actions'
+    }, /*#__PURE__*/React.createElement(Space, {
+      size: 3
+    }, /*#__PURE__*/React.createElement(Button, {
+      size: 'small',
+      type: 'text',
+      icon: /*#__PURE__*/React.createElement(DownloadOutlined, null),
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        saveAs(file.url, "".concat(file.title).concat(file.extname));
+      }
+    })))));
+  }))), visible && /*#__PURE__*/React.createElement(Lightbox // discourageDownloads={true}
+  , {
+    // discourageDownloads={true}
+    mainSrc: (_images$photoIndex = images[photoIndex]) === null || _images$photoIndex === void 0 ? void 0 : _images$photoIndex.imageUrl,
+    nextSrc: (_images = images[(photoIndex + 1) % images.length]) === null || _images === void 0 ? void 0 : _images.imageUrl,
+    prevSrc: (_images2 = images[(photoIndex + images.length - 1) % images.length]) === null || _images2 === void 0 ? void 0 : _images2.imageUrl,
+    // @ts-ignore
+    onCloseRequest: function onCloseRequest(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setVisible(false);
+    },
+    onMovePrevRequest: function onMovePrevRequest() {
+      return setPhotoIndex((photoIndex + images.length - 1) % images.length);
+    },
+    onMoveNextRequest: function onMoveNextRequest() {
+      return setPhotoIndex((photoIndex + 1) % images.length);
+    },
+    imageTitle: (_images$photoIndex2 = images[photoIndex]) === null || _images$photoIndex2 === void 0 ? void 0 : _images$photoIndex2.title,
+    toolbarButtons: [/*#__PURE__*/React.createElement("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: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var file = images[photoIndex];
+        saveAs(file.url, "".concat(file.title).concat(file.extname));
+      }
+    }, /*#__PURE__*/React.createElement(DownloadOutlined, null))]
+  }));
+};
+
+ReadPretty.Upload = function (props) {
+  var field = useField();
+  return (field.value || []).map(function (item) {
+    return /*#__PURE__*/React.createElement("div", null, item.url ? /*#__PURE__*/React.createElement("a", {
+      target: '_blank',
+      href: item.url
+    }, item.name) : /*#__PURE__*/React.createElement("span", null, item.name));
+  });
+};