fan-standard-comp 3.1.4 → 3.1.6

package/es/FormComp/FieldComponent/style/index.less

@@ -0,0 +1,120 @@
+@root-entry-name: default;
+@import (reference) '~antd/es/style/themes/index';
+
+.refactor-tree-select {
+  position: relative;
+  .ant-select {
+    z-index: 2;
+    .ant-select-selector {
+      background: transparent;
+    }
+    .ant-select-selection-item {
+      //opacity: 0;
+      display: none;
+    }
+    &.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+      background: transparent;
+    }
+
+    //.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) ~ .refactor-tree-select-extra{
+    //}
+  }
+  &.refactor-disabled .refactor-tree-select-extra {
+    background: @disabled-bg;
+    color: @disabled-color;
+  }
+  .refactor-tree-select-extra {
+    width: 100%;
+    background: @component-background;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: @input-height-base;
+    z-index: 1;
+    padding: 1px 22px 1px 8px;
+    line-height: 30px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.spec-uploader-viewonly {
+  display: inline-block;
+  width: 100%;
+  &:after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+  .spec-uploader-viewonly-item {
+    float: left;
+    width: 100px;
+    height: 100px;
+    padding: @padding-xs;
+    margin-right: @padding-xs;
+    margin-bottom: @padding-xs;
+    border: 1px solid @border-color-base;
+    border-radius: @border-radius-sm;
+    line-height: 88px;
+    text-align: center;
+    background: transparent;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .ant-image +.ant-image{
+    margin-left: 5px;
+  }
+}
+
+// 下拉树只读列表
+.tree-select-viewonly-list {
+  position: relative;
+  width: 100%;
+  border: 1px solid fade(@border-color-split, 60%);
+  border-radius: @border-radius-sm;
+  padding: @padding-xs @padding-sm;
+  &.collapsed {
+    padding-bottom: 28px;
+  }
+  .tree-select-viewonly-item b {
+    font-size: 18px;
+  }
+  .toggle-icon {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    font-size: @font-size-sm;
+    cursor: pointer;
+    color: @text-color-secondary;
+    //color:  color(~`colorPalette('@{text-color-secondary}', 3) `);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(fade(@component-background, 0)), to(@component-background));
+    background-image: -webkit-linear-gradient(top, fade(@component-background, 0), @component-background);
+    background-image: linear-gradient(-180deg, fade(@component-background, 0), @component-background);
+    &:hover {
+      color: @primary-color;
+    }
+  }
+}
+
+.checkbox-viewonly-item{
+  display: inline ;
+}
+
+
+.upload-viewonly {
+ .ant-upload-select.ant-upload-disabled {
+   display: none;
+ }
+}
+
+.form-item-view-only .ant-form-item-control-input-content {
+  word-break: break-all;
+}

package/es/FormComp/RenderItemGroup/index.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+import { FieldComponentProps } from '../FieldComponent';
+export interface FieldsItemProps extends FieldComponentProps {
+    label?: string | React.ReactNode;
+    description?: string;
+    isHide?: (fields?: any, form?: any, fieldStatus?: string) => boolean | boolean;
+    customRender?: (form?: any, data?: FieldsItemProps, fieldStatus?: string) => React.ReactNode;
+    colSpan?: number;
+    display?: string | object;
+    protoFormItem?: object;
+    preExtra?: (config?: any, form?: any) => React.ReactNode;
+    extra?: (config?: any, form?: any) => React.ReactNode;
+    rules?: any;
+    fieldOptions?: any;
+    size?: 'large' | 'middle' | 'small' | string;
+    componentStyle?: React.CSSProperties;
+}
+interface layoutProps {
+    labelCol?: any;
+    wrapperCol?: any;
+}
+interface displayLayoutProps extends layoutProps {
+    side?: layoutProps;
+    block?: layoutProps;
+}
+interface ItemGroupProps {
+    itemGroup: any | FieldsItemProps[];
+    size?: string;
+    fieldStatus?: 'default' | 'viewOnly' | 'disabled';
+    fieldSize?: 'large' | 'middle' | 'small' | any;
+    displayLayout?: displayLayoutProps;
+    form?: any;
+    layout?: string;
+    doUpdateFormFields?: () => void;
+}
+declare const RenderItemGroup: (props: ItemGroupProps) => any;
+export default RenderItemGroup;

package/es/FormComp/RenderItemGroup/index.js

@@ -0,0 +1,234 @@
+import "antd/es/row/style";
+import _Row from "antd/es/row";
+import "antd/es/tooltip/style";
+import _Tooltip from "antd/es/tooltip";
+import "antd/es/col/style";
+import _Col from "antd/es/col";
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+import React from "react";
+import { general } from '../../data';
+import Field from '../FieldComponent';
+import SpecIcon from '../../SpecIcon';
+var FormItem = _Form.Item;
+
+var RenderItemGroup = function RenderItemGroup(props) {
+  var itemGroup = props.itemGroup,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'md' : _props$size,
+      _props$fieldStatus = props.fieldStatus,
+      fieldStatus = _props$fieldStatus === void 0 ? 'default' : _props$fieldStatus,
+      _props$fieldSize = props.fieldSize,
+      fieldSize = _props$fieldSize === void 0 ? 'middle' : _props$fieldSize,
+      displayLayout = props.displayLayout,
+      form = props.form,
+      doUpdateFormFields = props.doUpdateFormFields,
+      _props$layout = props.layout,
+      layout = _props$layout === void 0 ? "horizontal" : _props$layout;
+
+  var setColSpan = function setColSpan(display, modalSize) {
+    if (_typeof(display) === 'object' || display === 'block' || modalSize === 'xs' || modalSize === 'sm') {
+      return 24;
+    }
+
+    if (modalSize === 'lg' || modalSize === 'xlg') {
+      return 8;
+    }
+
+    return 12;
+  };
+
+  var updateFormFields = function updateFormFields() {
+    // if (newVal) form && form.setFieldsValue({ ...newVal })
+    if (doUpdateFormFields) doUpdateFormFields(); // 用于触发更新表单实例赋值
+  }; // useEffect(() => {
+  //   // updateFormFields()
+  // }, [form])
+  // 渲染隐藏指定控件
+
+
+  var itemIsHide = function itemIsHide(isHide, getFieldsValue, FormInstance) {
+    if (typeof isHide === 'function') {
+      return isHide(getFieldsValue, FormInstance, fieldStatus);
+    }
+
+    return isHide || false;
+  }; // 渲染表单控件
+
+
+  var renderFormField = function renderFormField(field) {
+    var componentStyle = field.componentStyle,
+        extra = field.extra,
+        preExtra = field.preExtra; // 当前可传参的配置值
+    // 带前缀或后缀控件渲染
+
+    if (preExtra || extra) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, preExtra ? preExtra(field, form) : '', /*#__PURE__*/React.createElement(FormItem, {
+        noStyle: true,
+        rules: field.rules || (field.fieldOptions ? field.fieldOptions.rules : []),
+        name: field.filedName
+      }, /*#__PURE__*/React.createElement(Field, Object.assign({}, field, {
+        onChange: function onChange(eOrValue) {
+          updateFormFields();
+
+          for (var _len = arguments.length, otherParams = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+            otherParams[_key - 1] = arguments[_key];
+          }
+
+          if (field.onChange) field.onChange.apply(field, [eOrValue].concat(otherParams));
+        },
+        fieldStatus: field.fieldStatus || fieldStatus,
+        size: field.protoConfig && field.protoConfig.size || field.size || fieldSize,
+        style: componentStyle || Object.assign({}, general.formItemStyle.wide)
+      }))), extra ? extra(field, form) : '');
+    } else {
+      return /*#__PURE__*/React.createElement(Field, Object.assign({}, field, {
+        onChange: function onChange(eOrValue) {
+          // let updateValue = val
+          // if (field.type === 'input' || field.type === 'textarea' || field.type === 'radio' || field.type === 'password') {
+          //   updateValue = val.target.value
+          // }
+          // updateFormFields({ [field.filedName]: updateValue })
+          updateFormFields(); // if (field.onChange) field.onChange(val, form)
+
+          for (var _len2 = arguments.length, otherParams = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+            otherParams[_key2 - 1] = arguments[_key2];
+          }
+
+          if (field.onChange) field.onChange.apply(field, [eOrValue].concat(otherParams));
+        },
+        fieldStatus: field.fieldStatus || fieldStatus,
+        size: field.protoConfig && field.protoConfig.size || field.size || fieldSize,
+        style: componentStyle || Object.assign({}, general.formItemStyle.wide)
+      }));
+    }
+  };
+
+  var renderColFormItem = function renderColFormItem(item, index, formLayout) {
+    var label = item.label,
+        description = item.description,
+        type = item.type,
+        customRender = item.customRender,
+        filedName = item.filedName; // 当前可传参的配置值
+
+    if (layout === "horizontal") {
+      return /*#__PURE__*/React.createElement(_Col, {
+        key: index,
+        span: item.colSpan || setColSpan(item.display, size)
+      }, /*#__PURE__*/React.createElement(FormItem, Object.assign({
+        name: type !== 'custom' && filedName,
+        className: fieldStatus === 'viewOnly' ? 'form-item-view-only' : '',
+        label: description ? /*#__PURE__*/React.createElement("span", null, label, /*#__PURE__*/React.createElement(_Tooltip, {
+          title: description
+        }, /*#__PURE__*/React.createElement(SpecIcon, {
+          name: "info"
+        }))) : label,
+        rules: item.preExtra || item.extra ? [] : item.rules || (item.fieldOptions ? item.fieldOptions.rules : []),
+        required: item.rules && item.rules.filter(function (rItem) {
+          return rItem.required;
+        }).length > 0
+      }, formLayout, item.protoFormItem), type === 'custom' && customRender ? customRender(form, Object.assign({}, item), fieldStatus) : renderFormField(Object.assign({}, item))));
+    } else {
+      return /*#__PURE__*/React.createElement(FormItem, Object.assign({
+        key: index,
+        name: type !== 'custom' && filedName,
+        className: fieldStatus === 'viewOnly' ? 'form-item-view-only' : '',
+        label: description ? /*#__PURE__*/React.createElement("span", null, label, /*#__PURE__*/React.createElement(_Tooltip, {
+          title: description
+        }, /*#__PURE__*/React.createElement(SpecIcon, {
+          name: "info"
+        }))) : label,
+        rules: item.rules || (item.fieldOptions ? item.fieldOptions.rules : [])
+      }, formLayout, item.protoFormItem), type === 'custom' && customRender ? customRender(form, Object.assign({}, item), fieldStatus) : renderFormField(Object.assign({}, item)));
+    }
+  }; // 渲染表单控件列表
+
+
+  var renderItemGroupNode = function renderItemGroupNode() {
+    return itemGroup.map(function (item, index) {
+      var label = item.label,
+          isHide = item.isHide,
+          type = item.type,
+          _item$display = item.display,
+          display = _item$display === void 0 ? 'side' : _item$display; // 当前可传参的配置值
+
+      var formLayout = {}; // if (displayLayout) {
+      //   // 如果未配置，则使用以下配置值
+      //   formLayout = { ...displayLayout }
+      // }
+      // 优先级 displayLayout.side > displayLayout > general
+      // 优先级：若有displayLayout.block 则直接使用 general > displayLayout
+
+      formLayout = (displayLayout === null || displayLayout === void 0 ? void 0 : displayLayout.side) || ((displayLayout === null || displayLayout === void 0 ? void 0 : displayLayout.block) ? general.modalSize[size].formLayout : !displayLayout || JSON.stringify(displayLayout) === '{}' ? general.modalSize[size].formLayout : displayLayout);
+
+      if (item.hasOwnProperty('display')) {
+        if (typeof display === 'string') {
+          if (display === 'block') {
+            formLayout = (displayLayout === null || displayLayout === void 0 ? void 0 : displayLayout.block) || general.modalSize[size].formBlockLayout;
+          } else {// 使用默认
+            // formLayout = displayLayout?.side || (displayLayout?.block ? general.modalSize[size].formLayout : displayLayout) || general.modalSize[size].formLayout
+          }
+        } else {
+          formLayout = item.display; // 对象类型传值如： {labelCol: {span: 3},wrapperCol: {span: 8}} 优先级最高
+        }
+      } // 当布局为 'vertical'或'inline'时，不配置栅格结构
+
+
+      if (layout !== 'horizontal') {
+        formLayout = {};
+      } // title标题或html渲染
+
+
+      if (type === 'title' || type === 'html') {
+        return /*#__PURE__*/React.createElement(FormItem, {
+          key: index,
+          noStyle: true,
+          shouldUpdate: true
+        }, function (FormInstance) {
+          var _a; // isHide 返回为true则隐藏当前控件
+
+
+          return !itemIsHide(isHide, FormInstance.getFieldValue(), FormInstance) ? /*#__PURE__*/React.createElement(_Col, {
+            span: item.colSpan || 24
+          }, type === 'title' ? /*#__PURE__*/React.createElement("h3", Object.assign({
+            className: "modalPanelTitle ".concat((_a = item === null || item === void 0 ? void 0 : item.protoConfig) === null || _a === void 0 ? void 0 : _a.className)
+          }, item.protoConfig), label) : label) : /*#__PURE__*/React.createElement(React.Fragment, null, null);
+        });
+      } // 判断是否强制重新渲染表单
+
+
+      if (item.protoFormItem && item.protoFormItem.shouldUpdate) {
+        return /*#__PURE__*/React.createElement(FormItem, {
+          key: index,
+          noStyle: true,
+          shouldUpdate: item.protoFormItem.shouldUpdate
+        }, function (FormInstance) {
+          // isHide 返回为true则隐藏当前控件
+          return !itemIsHide(isHide, FormInstance.getFieldValue(), FormInstance) ? renderColFormItem(item, index, formLayout) : null;
+        });
+      }
+
+      return renderColFormItem(item, index, formLayout);
+    });
+  }; // itemGroup = Array 则按以下结构渲染
+
+
+  if (itemGroup && Array.isArray(itemGroup)) {
+    // 布局配置为'vertical或inline'
+    if (layout !== 'horizontal') {
+      return renderItemGroupNode();
+    } // 布局配置为horizontal
+
+
+    return /*#__PURE__*/React.createElement(_Row, null, renderItemGroupNode());
+  }
+  /* itemGroup = ReactNode则直接返回 */
+
+
+  return itemGroup;
+};
+
+export default RenderItemGroup;

package/es/FormComp/Uploader/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface UploaderProps {
+    extraExt?: string;
+    accept?: string;
+    fileList?: any[];
+    fileType?: string;
+    className?: string;
+    isOnly?: boolean;
+    children?: React.ReactNode;
+    onChange?: (file?: any) => void;
+    value?: any;
+    size?: number;
+    modalSize?: string;
+    onPreview?: (file?: any) => any;
+    beforeUpload?: (file: any, fileList: any) => any;
+    limit?: number;
+    modalConfig?: any;
+    modalZIndex?: number;
+}
+declare const Uploader: React.ForwardRefExoticComponent<UploaderProps & React.RefAttributes<unknown>>;
+export default Uploader;

package/es/FormComp/Uploader/index.js

@@ -0,0 +1,277 @@
+import "antd/es/upload/style";
+import _Upload from "antd/es/upload";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import "antd/es/message/style";
+import _message from "antd/es/message";
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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 { __awaiter } from "tslib";
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import { getAccept, getBase64 } from "./util"; // import RcUpload from 'rc-upload';
+
+import StandardModal from "../../StandardModal";
+var Uploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var accept = props.accept,
+      extraExt = props.extraExt,
+      fileType = props.fileType,
+      className = props.className,
+      isOnly = props.isOnly,
+      children = props.children,
+      onChange = props.onChange,
+      value = props.value,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 2 * 1024 * 1024 : _props$size,
+      _props$modalSize = props.modalSize,
+      modalSize = _props$modalSize === void 0 ? 'md' : _props$modalSize,
+      _props$modalConfig = props.modalConfig,
+      modalConfig = _props$modalConfig === void 0 ? {} : _props$modalConfig,
+      onPreview = props.onPreview,
+      beforeUpload = props.beforeUpload,
+      limit = props.limit; // 图片预览数据
+
+  var _useState = useState({
+    visible: false,
+    url: ''
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      showConfig = _useState2[0],
+      setShowConfig = _useState2[1]; // 用于展示的缩略图
+
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      fileList = _useState4[0],
+      setFileList = _useState4[1];
+
+  useEffect(function () {
+    if (!value) {
+      setFileList([]);
+      return;
+    }
+
+    var S4 = function S4() {
+      return ((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
+    };
+
+    if (Object.prototype.toString.call(value) === '[object Array]') {
+      setFileList(value.map(function (file, index) {
+        file.uid = file.uid || "".concat(S4(), "-").concat(S4());
+        file.url = file.downloadUrl || file.url;
+        file.status = 'done';
+        return file;
+      }));
+      return;
+    }
+
+    if (Object.prototype.toString.call(value) === '[object Object]') {
+      setFileList([Object.assign({
+        uid: "".concat(S4(), "-").concat(S4()),
+        url: value.downloadUrl || value.url,
+        status: 'done'
+      }, value)]);
+      return;
+    }
+
+    if (Object.prototype.toString.call(value) === '[object String]') {
+      setFileList([{
+        uid: "".concat(S4(), "-").concat(S4()),
+        url: value,
+        name: '附件',
+        status: 'done'
+      }]);
+      return;
+    }
+  }, [value]);
+  var splitAccept = useMemo(function () {
+    var res = getAccept(fileType);
+
+    if (extraExt) {
+      res = res + ',' + extraExt;
+    }
+
+    if (accept) {
+      res = res + ',' + accept;
+    }
+
+    return res;
+  }, [fileType, extraExt]); // 点击文件链接或预览图标时的回调
+
+  var handlePreview = useCallback(function (file) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var res;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(!file.url && !file.preview)) {
+                _context.next = 5;
+                break;
+              }
+
+              _context.next = 3;
+              return getBase64(file.originFileObj);
+
+            case 3:
+              res = _context.sent;
+
+              if (res && res.status === 'success') {
+                file.preview = res.url;
+              }
+
+            case 5:
+              setShowConfig({
+                visible: true,
+                url: file.url || file.preview
+              });
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  }, [setShowConfig]); // 检查文件是否规范
+
+  var handleCheck = useCallback(function (file) {
+    var isLtSize = file.size < size;
+
+    if (!isLtSize) {
+      _message.error("\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7".concat(Math.round(size / 1024 / 1024 * 100) / 100, "MB!"));
+
+      return false;
+    }
+
+    return true;
+  }, [fileType, size]);
+  var handleChange = useCallback(function (res) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var isOk, result, list;
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(res.file.status === 'removed')) {
+                _context2.next = 4;
+                break;
+              }
+
+              setFileList(res.fileList);
+              onChange && onChange(isOnly ? res.fileList[0] && res.fileList[0].originFileObj : res.fileList);
+              return _context2.abrupt("return");
+
+            case 4:
+              isOk = handleCheck(res.file);
+
+              if (isOk) {
+                list = res.fileList.map(function (file) {
+                  if (!file.url) {
+                    file.url = file.thumbUrl;
+                  }
+
+                  return file;
+                });
+                result = _toConsumableArray(list);
+                setFileList(list);
+                onChange && onChange(isOnly ? result[0] && result[0].originFileObj : result);
+              }
+
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+  }, [isOnly, handleCheck]); // 渲染预览窗口
+
+  var renderPreviewComponent = useMemo(function () {
+    if (fileType === 'image' || fileType === 'svg') {
+      var visible = showConfig.visible,
+          url = showConfig.url;
+      return /*#__PURE__*/React.createElement(StandardModal, Object.assign({
+        visible: visible,
+        hideFooter: true,
+        onCancel: function onCancel() {
+          return setShowConfig({
+            visible: false,
+            url: ''
+          });
+        },
+        size: modalSize
+      }, modalConfig), /*#__PURE__*/React.createElement("div", {
+        style: {
+          textAlign: 'center'
+        }
+      }, /*#__PURE__*/React.createElement("img", {
+        style: {
+          maxWidth: '100%'
+        },
+        src: url,
+        alt: ""
+      })));
+    }
+
+    return null;
+  }, [fileType, showConfig]);
+  var renderChildrenComponent = useMemo(function () {
+    var renderButton = function renderButton() {
+      if (fileType === 'image' || fileType === 'svg') {
+        return /*#__PURE__*/React.createElement("div", {
+          className: 'spec-uploader-control'
+        }, /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("div", {
+          className: "ant-upload-text"
+        }, "\u70B9\u51FB\u9009\u62E9"));
+      }
+
+      return /*#__PURE__*/React.createElement(_Button, {
+        className: 'spec-uploader-button'
+      }, /*#__PURE__*/React.createElement(PlusOutlined, null), "\u70B9\u51FB\u9009\u62E9");
+    };
+
+    if (children) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, " ", children, " ");
+    }
+
+    if (isOnly && fileList.length === 1 || limit && fileList.length === limit) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, renderButton());
+  }, [fileType, isOnly, children, fileList, limit]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Upload, Object.assign({}, props, {
+    ref: ref,
+    accept: splitAccept,
+    fileList: fileList,
+    listType: fileType === 'image' || fileType === 'svg' ? 'picture-card' : 'text',
+    className: "spec-uploader ".concat(className),
+    onPreview: onPreview ? onPreview : fileType === 'image' || fileType === 'svg' ? handlePreview : function () {},
+    beforeUpload: beforeUpload ? beforeUpload : function () {
+      return false;
+    },
+    onChange: handleChange
+  }), renderChildrenComponent), renderPreviewComponent);
+}); // as IUploader
+
+export default Uploader;