@vtx/components 4.0.0-beta.6 → 4.0.0-beta.7

package/lib/vtx-upload/index.js

@@ -0,0 +1,474 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VtxUpload = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _viewerjs = _interopRequireDefault(require("viewerjs"));
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
+var _utils = require("@vtx/utils");
+var _debounce = _interopRequireDefault(require("lodash-es/debounce"));
+var _FilePreview = _interopRequireDefault(require("./FilePreview"));
+var _getToken = _interopRequireDefault(require("../utils/getToken.js"));
+var _antdImgCrop = _interopRequireDefault(require("antd-img-crop"));
+var _index = require("./style/index.js");
+var _context = require("antd/es/form/context");
+var _statusUtils = require("antd/es/_util/statusUtils");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _vtxProvider = require("../vtx-provider");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["isDragger", "draggerConfig", "accept", "mode", "viewMode", "showUploadList", "customizedButton", "listType", "onSuccess", "onError", "onRemove", "maxFileSize", "beforeUpload", "maxNum", "flag", "crop", "customDownload", "status"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var debouncedMessage = (0, _debounce.default)(function (msg) {
+  _antd.message.error(msg);
+}, 500);
+
+//文件预览
+var initVPrev = {
+  type: '',
+  //video or file
+  name: '',
+  url: '',
+  downloadUrl: '',
+  visible: false
+};
+var initUrl = {
+  action: '/cloudFile/common/uploadFile',
+  downloadUrl: '/cloudFile/common/downloadFile?id=',
+  thumbnailUrl: '/vortex/rest/cloud/np/file/downloadFileThumbnail?outputQuality=0.5&scale=0.2&id='
+  //previewUrl: '/onlinePreview',
+};
+//禁止上传的文件类型
+var rejectTypes = ['.asp', '.aspx', '.jsp', '.exe', '.cgi', '.asa', '.cer', '.cdx', '.hta'];
+var Dragger = _antd.Upload.Dragger;
+function isSupportThumbnail(type) {
+  if (['image/webp'].includes(type)) {
+    return false;
+  }
+  return true;
+}
+var VtxUpload = exports.VtxUpload = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _window;
+  var intl = (0, _vtxProvider.useIntl)();
+  var _useContext = (0, _react.useContext)(_vtxProvider.VtxProvider),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('upload', props.prefixCls);
+  var _useStyle = (0, _index.useStyle)(prefixCls),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var _React$useContext = _react.default.useContext(_context.FormItemInputContext),
+    contextStatus = _React$useContext.status,
+    hasFeedback = _React$useContext.hasFeedback,
+    isFormItemInput = _React$useContext.isFormItemInput,
+    feedbackIcon = _React$useContext.feedbackIcon;
+  var _props$isDragger = props.isDragger,
+    isDragger = _props$isDragger === void 0 ? false : _props$isDragger,
+    _props$draggerConfig = props.draggerConfig,
+    draggerConfig = _props$draggerConfig === void 0 ? {} : _props$draggerConfig,
+    accept = props.accept,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'multiple' : _props$mode,
+    viewMode = props.viewMode,
+    showUploadList = props.showUploadList,
+    customizedButton = props.customizedButton,
+    _props$listType = props.listType,
+    listType = _props$listType === void 0 ? 'text' : _props$listType,
+    onSuccess = props.onSuccess,
+    onError = props.onError,
+    _onRemove = props.onRemove,
+    _props$maxFileSize = props.maxFileSize,
+    maxFileSize = _props$maxFileSize === void 0 ? 5 * 1024 * 1024 : _props$maxFileSize,
+    _beforeUpload = props.beforeUpload,
+    maxNum = props.maxNum,
+    flag = props.flag,
+    crop = props.crop,
+    customDownload = props.customDownload,
+    customStatus = props.status,
+    rest = _objectWithoutProperties(props, _excluded);
+  var mergedStatus = (0, _statusUtils.getMergedStatus)(contextStatus, customStatus);
+
+  // 是否使用缩略图
+  var useThumbnail = (props.useThumbnail === undefined ? true : props.useThumbnail) && (listType == 'picture' || listType == 'picture-card');
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    fileList = _useState2[0],
+    setFileList = _useState2[1]; //初始化文件列表
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    imageViewer = _useState4[0],
+    setImageViewer = _useState4[1]; //图片预览
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    imageList = _useState6[0],
+    setImageList = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    imageCt = _useState8[0],
+    setImageCt = _useState8[1];
+  var _useSetState = (0, _ahooks.useSetState)(initVPrev),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    vPrev = _useSetState2[0],
+    setVPrev = _useSetState2[1]; //文件预览相关
+
+  // 参数中拼接token
+  function joinToken(str) {
+    if (str.indexOf('token=') === -1 && str.indexOf('?') > -1) {
+      return str.replace('?', "?token=".concat((0, _getToken.default)() || '', "&"));
+    } else if (str.indexOf('?') === -1) {
+      return str + "?token=".concat((0, _getToken.default)() || '');
+    }
+    return str;
+  }
+  var url = {
+    action: props.action || initUrl.action,
+    downloadUrl: joinToken(props.downloadUrl || initUrl.downloadUrl),
+    thumbnailUrl: joinToken((_window = window) !== null && _window !== void 0 && _window.flsPrefix ? "".concat(window.flsPrefix).concat(initUrl.thumbnailUrl) : "".concat(props.thumbnailUrl || initUrl.thumbnailUrl))
+    //previewUrl: props.previewUrl || initUrl.previewUrl,
+  };
+  var action = url.action,
+    downloadUrl = url.downloadUrl,
+    thumbnailUrl = url.thumbnailUrl;
+  (0, _react.useEffect)(function () {
+    setFileList(getSynFileList(props) || []);
+  }, [flag]);
+  (0, _react.useEffect)(function () {
+    if (Array.isArray(fileList)) {
+      // 只有图片的才可以预览，这边需要判断是否是图片
+      var imagelist = [];
+      // 只能通过后缀来判断
+      fileList.map(function (file) {
+        var _file$type;
+        if (((_file$type = file.type) === null || _file$type === void 0 ? void 0 : _file$type.indexOf('image')) > -1) {
+          imagelist.push(file);
+        }
+      });
+      setImageList(imagelist);
+    }
+  }, [fileList]);
+  (0, _react.useEffect)(function () {
+    if (imageCt) {
+      setImageViewer(new _viewerjs.default(imageCt, {}));
+    }
+  }, [imageCt]);
+  var getConfig = function getConfig() {
+    var token = (0, _getToken.default)() || '';
+    var config = _objectSpread(_objectSpread({}, rest), {}, {
+      accept: accept,
+      action: action,
+      fileList: fileList,
+      listType: listType,
+      showUploadList: showUploadList,
+      headers: _objectSpread({
+        Authorization: token ? "Bearer ".concat(token) : ''
+      }, rest.headers),
+      onChange: function onChange(info) {
+        setFileList(info.fileList);
+        if (info.file.response && info.file.response.result === 1) {
+          _antd.message.error(info.file.response.errMsg || "".concat(intl.getMessage('upload.uploadFailed', '上传失败'), "!"));
+          var flt = _toConsumableArray(fileList);
+          flt.pop();
+          setFileList(flt);
+          return;
+        }
+        // 此处根据后台返回的数据结构取得文件ID
+        if (info.file.status !== 'uploading' && info.file.status !== 'removed') {
+          var vtxId = info.file.response && Array.isArray(info.file.response.data) && info.file.response.data.length > 0 ? info.file.response.data[0].id : undefined;
+          var newFileList = info.fileList;
+          var newFile = vtxId ? _objectSpread(_objectSpread({}, info.file), {}, {
+            id: vtxId,
+            url: downloadUrl + vtxId,
+            thumbUrl: useThumbnail ? thumbnailUrl + vtxId : undefined
+          }) : _objectSpread({}, info.file);
+          newFileList = info.fileList.filter(function (item) {
+            // 有vtxId代表上传成功，有item.id代表之前上传成功的
+            if (vtxId || item.id) return true;
+            return false;
+          }).map(function (item) {
+            if (item.uid == info.file.uid) {
+              return _objectSpread(_objectSpread({}, item), {}, {
+                id: vtxId,
+                url: downloadUrl + vtxId,
+                thumbUrl: useThumbnail ? thumbnailUrl + vtxId : undefined
+              });
+            }
+            return item;
+          });
+          if (mode == 'single') {
+            setFileList([newFile]);
+          } else {
+            setFileList(newFileList);
+          }
+          // 更新组件状态
+          // if (mode == 'single' && info.file.status === 'done') {
+          //     setFileList([newFile]);
+          // } else {
+          //     setFileList(newFileList);
+          // }
+
+          // 触发外部方法
+          if (info.file.status === 'done') {
+            if (typeof onSuccess == 'function') {
+              onSuccess(newFile);
+            }
+          } else if (info.file.status === 'error') {
+            if (typeof onError == 'function') {
+              onError(info.file);
+            }
+          }
+        }
+      },
+      onRemove: function onRemove(file) {
+        if (typeof _onRemove == 'function') {
+          return _onRemove(file);
+        }
+      },
+      beforeUpload: function beforeUpload(file, afterFileList) {
+        //限制文件大小
+        if (maxFileSize && typeof maxFileSize === 'number') {
+          var limit = file.size < maxFileSize;
+          if (!limit) {
+            _antd.message.error("".concat(intl.getMessage('upload.pleaseUpload', '请上传')).concat(maxFileSize / 1024 / 1024, "M").concat(intl.getMessage('upload.internalFiles', '以内的文件')));
+            return false;
+          }
+        }
+        //限制不允许上传的文件类型(通过文件名后缀)
+        var pointIndex = file.name ? file.name.lastIndexOf('.') : -1;
+        if (pointIndex > -1) {
+          var fileType = file.name.substring(pointIndex);
+          if (rejectTypes.includes(fileType)) {
+            _antd.message.error(intl.getMessage('upload.pleaseUpload', '不支持该文件类型'));
+            return false;
+          }
+        }
+        // 多选限制文件数量
+        if (typeof maxNum === 'number' && afterFileList.length + fileList.length > maxNum) {
+          // 减少提示错误次数， 思路，防抖 这边有个问题 就是防抖的这个方法 return fasle 不上传
+          debouncedMessage("".concat(intl.getMessage('upload.maximumUploads', '最多上传')).concat(maxNum).concat(intl.getMessage('upload.items', '个')));
+          return false;
+        }
+        if (typeof _beforeUpload === 'function') {
+          return _beforeUpload(file, afterFileList);
+        }
+        return true;
+      },
+      onDownload: function onDownload(file) {
+        (0, _utils.downloadFile)(file.url, {
+          fileName: file.name
+        }, 'blob');
+      }
+    });
+    if (props.onPreview && typeof props.onPreview === 'function') {
+      config.onPreview = props.onPreview;
+    } else {
+      config.onPreview = function (file) {
+        var _file$type2, _file$type3;
+        if (!file.type) {
+          (0, _utils.downloadFile)(downloadUrl + file.id, {
+            fileName: file.name
+          }, 'blob');
+        } else if (((_file$type2 = file.type) === null || _file$type2 === void 0 ? void 0 : _file$type2.indexOf('image')) > -1) {
+          handlePreview(file);
+        } else if (((_file$type3 = file.type) === null || _file$type3 === void 0 ? void 0 : _file$type3.indexOf('video')) > -1) {
+          // 视频
+          setVPrev({
+            type: 'video',
+            name: file.name || intl.getMessage('upload.videoPreview', '视频预览'),
+            url: downloadUrl + file.id,
+            downloadUrl: downloadUrl + file.id,
+            visible: true,
+            customDownload: customDownload
+          });
+        } else {
+          (0, _utils.downloadFile)(downloadUrl + file.id, {
+            fileName: file.name
+          }, 'blob');
+        }
+
+        // TODO 暂无好的文件预览服务，等后续完善,只提供下载
+        // else if (
+        //     file.type == 'application/PDF' ||
+        //     file.type == 'application/vnd.ms-excel' ||
+        //     file.type ==
+        //         'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+        //     file.type == 'application/msword' ||
+        //     file.type ==
+        //         'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+        // ) {
+        //     let url = '';
+        //     if (props.previewUrl) {
+        //         url = `${props.previewUrl}?id=${file.id}&fileName=${file.name}`;
+        //     } else {
+        //         url = `http://183.215.89.162:8012/onlinePreview?url=http://183.136.177.108:8003/cloudFile/common/downloadFile${encodeURIComponent(
+        //             '?id=' + file.id + '&fullfilename=' + file.name.replace(/\s*/g, ''),
+        //         )}`;
+        //     }
+
+        //     setVPrev({
+        //         type: 'file',
+        //         name: file.name || '文件预览',
+        //         url: url,
+        //         downloadUrl: downloadUrl + file.id,
+        //         visible: true,
+        //     });
+        // }
+      };
+    }
+
+    // viewMode
+    if (viewMode) {
+      config.showUploadList = {
+        showRemoveIcon: false,
+        showDownloadIcon: true
+      };
+    }
+    return config;
+  };
+  var handlePreview = function handlePreview(file) {
+    var imageIndex = imageList.map(function (item) {
+      return item.id;
+    }).indexOf(file.id);
+    if (imageIndex == -1) return;
+    imageViewer.update();
+    imageViewer.view(imageIndex);
+  };
+  var getSynFileList = function getSynFileList(props) {
+    var processedFileList = props.fileList || [];
+    // 单文件模式只取第一个
+    if (props.mode == 'single' && processedFileList.length > 1) {
+      processedFileList = [processedFileList[0]];
+    }
+    processedFileList = processedFileList.map(function (item, index) {
+      // 将外部传入的简易文件数组处理成为组件需要的数组结构
+      if (item.name === undefined || item.id === undefined) {
+        // eslint-disable-next-line no-console
+        console.error('文件列表的name和id属性不能为空');
+      }
+      var url = item.url || downloadUrl + item.id,
+        thumbUrl = useThumbnail ? item.thumbUrl || thumbnailUrl + item.id : undefined;
+      if (!isSupportThumbnail(item.type)) {
+        thumbUrl = url;
+      }
+      return _objectSpread(_objectSpread({}, item), {}, {
+        uid: -1 - index,
+        status: 'done',
+        url: url,
+        thumbUrl: thumbUrl
+      });
+    });
+    return processedFileList;
+  };
+  var upload = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Upload, _objectSpread(_objectSpread({}, getConfig()), {}, {
+    ref: ref,
+    className: (0, _classnames.default)(prefixCls, (0, _statusUtils.getStatusClassNames)(prefixCls, mergedStatus, hasFeedback), props.prefixCls),
+    children: viewMode || fileList.length >= maxNum ? null : customizedButton || (listType == 'picture-card' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PlusOutlined, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "ant-upload-text",
+        children: intl.getMessage('import.upload', '上传')
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Button, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.UploadOutlined, {}), intl.getMessage('import.upload', '上传')]
+    }))
+  }));
+  var comp = listType == 'picture-card' && !!crop ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antdImgCrop.default, {
+    rotationSlider: true,
+    children: upload
+  }) : upload;
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [isDragger ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(Dragger, _objectSpread(_objectSpread({}, getConfig()), {}, {
+      ref: ref,
+      children: [draggerConfig !== null && draggerConfig !== void 0 && draggerConfig.img ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: draggerConfig.img,
+        alt: "",
+        style: {
+          maxWidth: 100,
+          maxHeight: 100,
+          marginTop: '3%',
+          marginBottom: '5%'
+        }
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "ant-upload-drag-icon",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.InboxOutlined, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "ant-upload-text",
+        children: (draggerConfig === null || draggerConfig === void 0 ? void 0 : draggerConfig.mainText) || intl.getMessage('upload.clickOrDragUpload', '点击或拖拽上传')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "ant-upload-hint",
+        children: (draggerConfig === null || draggerConfig === void 0 ? void 0 : draggerConfig.subText) || "".concat(intl.getMessage('upload.supportUpload', '支持上传'), " word,excel,png...")
+      })]
+    })) : comp, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        display: 'none'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        ref: function ref(ins) {
+          if (ins) setImageCt(ins);
+        },
+        children: imageList.filter(function (item) {
+          var _item$type;
+          return item.type && ((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.indexOf('image')) > -1;
+        }).map(function (item, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: item.url || downloadUrl + item.id,
+              alt: item.name || "picture-".concat(index + 1)
+            })
+          }, item.uid);
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilePreview.default, _objectSpread({
+      onCancel: function onCancel() {
+        return setVPrev(initVPrev);
+      }
+    }, vPrev))]
+  }));
+});
+VtxUpload.propTypes = {
+  isDragger: _propTypes.default.bool,
+  draggerConfig: _propTypes.default.object,
+  accept: _propTypes.default.string,
+  mode: _propTypes.default.string,
+  viewMode: _propTypes.default.bool,
+  customizedButton: _propTypes.default.node,
+  listType: _propTypes.default.string,
+  action: _propTypes.default.string,
+  downloadUrl: _propTypes.default.string,
+  thumbnailUrl: _propTypes.default.string,
+  previewUrl: _propTypes.default.string,
+  onSuccess: _propTypes.default.func,
+  onError: _propTypes.default.func,
+  onRemove: _propTypes.default.func,
+  onPreview: _propTypes.default.func,
+  customDownload: _propTypes.default.func,
+  maxFileSize: _propTypes.default.number,
+  beforeUpload: _propTypes.default.func,
+  maxNum: _propTypes.default.number,
+  fileList: _propTypes.default.array,
+  flag: _propTypes.default.number,
+  useThumbnail: _propTypes.default.bool,
+  crop: _propTypes.default.bool
+};
+var _default = exports.default = VtxUpload;

package/lib/vtx-upload/style/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyle = useStyle;
+require("viewerjs/dist/viewer.css");
+var _vtxProvider = require("../../vtx-provider");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var genVtxUploadStyle = function genVtxUploadStyle(token) {
+  var componentCls = token.componentCls;
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentCls, {}), "".concat(componentCls, "-status-error"), {
+    '&.ant-upload-wrapper.ant-upload-picture-card-wrapper': {
+      '.ant-upload': {
+        '&.ant-upload-select': {
+          borderColor: token.colorError
+        }
+      }
+    }
+  }), '.vtx-ui-upload-uploadct', {
+    overflow: 'hidden',
+    //upload组件由于float会失去高度
+    '.ant-upload-list-item-info': {
+      '&::before': {
+        height: '0 !important'
+      }
+    }
+  }), '.vtx_ui_upload_onlinepreview', {
+    width: '100%',
+    '.vtx_ui_upload_previewLine': {
+      position: 'relative',
+      padding: '0 8px',
+      color: token.colorPrimary,
+      lineHeight: '25px',
+      cursor: 'pointer',
+      '.vtx_ui_upload_iconHint': {
+        marginRight: '5px',
+        color: '#666'
+      },
+      '.vtx_ui_upload_action_box': {
+        position: 'absolute',
+        top: '2px',
+        right: '8px',
+        display: 'none',
+        '.vtx_ui_upload_action_btn': {
+          marginLeft: '5px',
+          color: '#aaa',
+          '&:hover': {
+            color: '#333'
+          }
+        }
+      },
+      '&:hover': {
+        backgroundColor: '#ecf6fd',
+        '.vtx_ui_upload_action_box': {
+          display: 'inline-block'
+        }
+      }
+    }
+  }), '.vtx-modal-file-maxClass', {
+    '.ant-modal': {
+      top: '0 !important',
+      left: '0 !important',
+      width: '100% !important',
+      height: '100% !important',
+      paddingBottom: '0 !important',
+      overflow: 'hidden',
+      '.ant-modal-content': {
+        height: '100%',
+        '.ant-modal-body': {
+          backgroundColor: '#fbfbfb'
+        }
+      }
+    }
+  });
+};
+function useStyle(prefixCls) {
+  return (0, _vtxProvider.useStyle)(prefixCls, function (token) {
+    var vtxUploadToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    return [genVtxUploadStyle(vtxUploadToken)];
+  });
+}