linkmore-design 1.0.84 → 1.0.87

package/lib/LmUpload/LmUpload.js

@@ -27,24 +27,41 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 
 var LmUpload = function LmUpload(_a, ref) {
-  var fileConfig = _a.fileConfig,
+  var _fileConfig = _a.fileConfig,
+      fileNames = _a.fileNames,
       components = _a.components,
       _ossConfig = _a.ossConfig,
-      resetProps = __rest(_a, ["fileConfig", "components", "ossConfig"]);
+      resetProps = __rest(_a, ["fileConfig", "fileNames", "components", "ossConfig"]);
 
   var defaultRef = (0, _react.useRef)(null); // 仅在初始化触发一次
 
   var initConfig = (0, _react.useMemo)(function () {
     return {
-      // 文件配置单独存储
-      // fileConfig: {
-      //   size: 10,
-      //   type: ['jpg', 'jpeg', 'png'],
-      //   maxCount: 99,
-      //   ...(fileConfig || {}),
-      // },
-      // 读取字段配置
-      fileNames: {
+      // 文件参数配置: 存储时的数据
+      fileConfig: function fileConfig(fileConfigProps) {
+        var file = fileConfigProps.file,
+            timestamp = fileConfigProps.timestamp,
+            fileName = fileConfigProps.fileName,
+            filePath = fileConfigProps.filePath,
+            shortlink = fileConfigProps.shortlink,
+            url = fileConfigProps.url;
+        return Object.assign({
+          uid: timestamp,
+          fileTypeCode: file.type,
+          fileTypeName: file.type,
+          fileName: fileName,
+          realFileName: file.name,
+          fileSize: file.size,
+          internalUrl: shortlink,
+          externalUrl: shortlink,
+          filePath: filePath,
+          seq: 0,
+          url: url,
+          status: 'done'
+        }, _fileConfig === null || _fileConfig === void 0 ? void 0 : _fileConfig(fileConfigProps));
+      },
+      // 读取字段配置: 读取存储的参数字段
+      fileNames: Object.assign({
         uid: 'uid',
         fileTypeCode: 'fileTypeCode',
         fileTypeName: 'fileTypeName',
@@ -55,32 +72,31 @@ var LmUpload = function LmUpload(_a, ref) {
         externalUrl: 'externalUrl',
         filePath: 'filePath',
         seq: 'seq',
-        url: 'url'
-      },
+        url: 'url',
+        status: 'status'
+      }, fileNames),
       // 初始化
       components: Object.assign({
         wrapper: null
       }, components || {})
     };
   }, []);
-  var defaultProps = {
+  var defaultProps = Object.assign({
+    size: 100,
+    fileSize: 10,
     uid: 'uid',
-    fileList: null,
-    type: ['jpg', 'jpeg', 'png'],
     accept: '',
-    fileSize: 10,
+    type: ['jpg', 'jpeg', 'png'],
     listType: 'card',
-    size: 100,
+    readOnly: false,
     disabled: false,
-    maxCount: null,
     showUploadList: true,
-    children: null,
+    fileList: null,
     defaultFileList: [],
+    limit: null,
+    maxCount: null,
+    children: null,
     itemRender: null,
-    readOnly: false,
-    onRemove: function onRemove() {
-      return true;
-    },
     enabledOss: false,
     // oss配置
     ossConfig: function ossConfig() {
@@ -93,11 +109,15 @@ var LmUpload = function LmUpload(_a, ref) {
         bucket: 'linkmore-scm-test',
         shortlink: 'https://linkmore-scm-test.oss-cn-hangzhou.aliyuncs.com'
       }, typeof _ossConfig === 'function' ? _ossConfig() : _ossConfig);
+    },
+    // 根据返回值决定是否可删除
+    onRemove: function onRemove() {
+      return true;
     }
-  };
+  }, resetProps);
   return /*#__PURE__*/_react.default.createElement(_UploadRoot.default, Object.assign({
     ref: ref || defaultRef
-  }, initConfig, defaultProps, resetProps));
+  }, initConfig, defaultProps));
 };
 
 var _default = /*#__PURE__*/(0, _react.forwardRef)(LmUpload);

package/lib/LmUpload/UploadList/ItemPicture.js

@@ -22,9 +22,10 @@ var PictureItem = function PictureItem(_ref) {
   var readOnly = instance.readOnly,
       remove = instance.remove,
       preview = instance.preview,
-      download = instance.download;
+      download = instance.download,
+      fileNames = instance.fileNames;
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)('lm_upload_item lm_upload_item_picture', file.status === 'error' && 'error')
+    className: (0, _classnames.default)('lm_upload_item lm_upload_item_picture', file[fileNames.status] === 'error' && 'lm_upload_item_error')
   }, /*#__PURE__*/React.createElement("div", {
     className: "picture_left"
   }, /*#__PURE__*/React.createElement("div", {
@@ -33,14 +34,14 @@ var PictureItem = function PictureItem(_ref) {
       return preview(file);
     }
   }, /*#__PURE__*/React.createElement("img", {
-    src: file.url,
+    src: file[fileNames.url],
     alt: ""
   })), /*#__PURE__*/React.createElement("div", {
     className: "lm_upload_item_name",
     onClick: function onClick() {
       return download(file);
     }
-  }, file.fileName)), !readOnly && /*#__PURE__*/React.createElement("div", {
+  }, file[fileNames.fileName])), !readOnly && /*#__PURE__*/React.createElement("div", {
     className: "picture_right lm_upload_item_action"
   }, /*#__PURE__*/React.createElement("div", {
     className: "action_delete",

package/lib/LmUpload/UploadList/ItemPictureCard.js

@@ -28,13 +28,22 @@ var renderThumb = function renderThumb(file) {
     case 'png':
     case 'jpg':
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "lm_upload_item_error"
+        className: "lm_upload_item_thumb_error"
       }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
         type: "lmweb-image"
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: "lm_upload_item_name"
       }, file.realFileName));
 
+    case 'mp4':
+    case 'm2v':
+    case 'mkv':
+    case 'ogm':
+    case 'webm':
+      return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+        type: "lmweb-video"
+      });
+
     case 'doc':
     case 'docx':
       return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
@@ -72,24 +81,29 @@ var PictureItem = function PictureItem(_ref) {
   var readOnly = instance.readOnly,
       size = instance.size,
       remove = instance.remove,
-      preview = instance.preview;
+      preview = instance.preview,
+      getFileFields = instance.getFileFields;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isError = _useState2[0],
-      setIsError = _useState2[1]; // 文件信息重组
+      setIsError = _useState2[1]; // 文件信息重组 获取文件名称 => 截取后缀文件名
 
 
   var resetFile = (0, _react.useMemo)(function () {
-    var fileExtension = file.realFileName.replace(/.*\./, '').toLowerCase();
-    return Object.assign(Object.assign({}, file), {
+    var fileParams = getFileFields(file);
+    var realFileName = fileParams.realFileName,
+        fileName = fileParams.fileName,
+        filename = fileParams.filename;
+    var fileExtension = (realFileName || fileName || filename).replace(/.*\./, '').toLowerCase();
+    return Object.assign(Object.assign({}, fileParams), {
       fileExtension: fileExtension
     });
-  }, [file]); // 预览小图
+  }, [getFileFields, file]); // 预览小图
 
   var thumbUrl = (0, _react.useMemo)(function () {
-    return "".concat(file.url, "?x-oss-process=image/resize,w_").concat(size);
-  }, [file.url, size]); // 根据文件名后缀判断
+    return "".concat(resetFile.url, "?x-oss-process=image/resize,w_").concat(size);
+  }, [resetFile.url, size]); // 根据文件名后缀判断
 
   var isImg = (0, _react.useMemo)(function () {
     return ['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(resetFile.fileExtension);
@@ -98,7 +112,7 @@ var PictureItem = function PictureItem(_ref) {
   var resetSize = (0, _react.useMemo)(function () {
     var width = size - 16;
     var padding = size > 60 ? 8 : 4;
-    var fontSize = size > 60 ? 16 : 14;
+    var fontSize = size > 60 ? 16 : 12;
     return {
       width: width,
       padding: padding,
@@ -106,7 +120,7 @@ var PictureItem = function PictureItem(_ref) {
     };
   }, [size]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('lm_upload_item', 'lm_upload_item_card', isError && 'error'),
+    className: (0, _classnames.default)('lm_upload_item', 'lm_upload_item_card', isError && 'lm_upload_item_error'),
     style: {
       height: size,
       width: size
@@ -132,7 +146,7 @@ var PictureItem = function PictureItem(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
     type: "lmweb-eye",
     style: {
-      fontSize: size > 48 ? 16 : 12
+      fontSize: resetSize.fontSize
     }
   })), !readOnly && /*#__PURE__*/_react.default.createElement("div", {
     className: "action_delete",
@@ -142,7 +156,7 @@ var PictureItem = function PictureItem(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
     type: "lmweb-delete",
     style: {
-      fontSize: size > 48 ? 16 : 12
+      fontSize: resetSize.fontSize
     }
   })))));
 };

package/lib/LmUpload/UploadList/ItemText.js

@@ -19,9 +19,10 @@ var TextItem = function TextItem(_ref) {
   var file = _ref.file,
       instance = _ref.instance;
   var readOnly = instance.readOnly,
-      remove = instance.remove;
+      remove = instance.remove,
+      fileNames = instance.fileNames;
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)('lm_upload_item lm_upload_item_text', file.status === 'error' && 'error')
+    className: (0, _classnames.default)('lm_upload_item lm_upload_item_text', file[fileNames.status] === 'error' && 'lm_upload_item_error')
   }, /*#__PURE__*/React.createElement("div", {
     className: "text_left"
   }, /*#__PURE__*/React.createElement("div", {
@@ -30,7 +31,7 @@ var TextItem = function TextItem(_ref) {
     type: "lmweb-attachment"
   })), /*#__PURE__*/React.createElement("div", {
     className: "lm_upload_item_name"
-  }, file.fileName)), !readOnly && /*#__PURE__*/React.createElement("div", {
+  }, file[fileNames.fileName])), !readOnly && /*#__PURE__*/React.createElement("div", {
     className: "text_right lm_upload_item_text_action"
   }, /*#__PURE__*/React.createElement("div", {
     className: "action_delete",

package/lib/LmUpload/body/UploadCore.js

@@ -45,7 +45,7 @@ var UploadCore = function UploadCore(_ref) {
     if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) {
       inputRef.current.value = '';
     }
-  }, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value]);
+  }, [beforeUpload, (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value]);
   var inputConfig = {
     type: 'file',
     accept: accept,

package/lib/LmUpload/fns/index.d.ts

@@ -5,6 +5,7 @@ declare const useCoreOptions: ({ state, dispatch, props }: {
 }) => {
     CoreMethods: {
         getIsMaxCount: () => boolean;
+        getFileFields: (fileParams: any) => {};
         beforeUpload: (e: any) => false | import("../../message").MessageType;
         getUploadStatus: () => {
             uploading: boolean;

package/lib/LmUpload/fns/index.js

@@ -69,13 +69,38 @@ var useCoreOptions = function useCoreOptions(_ref) {
     return {
       uploading: uploading
     };
-  }, [state.percent]); // 获取是否达到最大上传数量
+  }, [state.percent]); // 获取文件字段值
+
+  var getFileFields = (0, _react.useCallback)(function (fileParams) {
+    var fileNames = props.fileNames;
+    var obj = {};
+    Object.entries(fileNames).forEach(function (v) {
+      var itemKey = v[0];
+      var itemValue = v[1];
+
+      if (fileParams[itemKey]) {
+        obj[itemKey] = fileParams[itemValue];
+      }
+    });
+    return obj;
+  }, [props]); // 获取是否达到最大上传数量
 
   var getIsMaxCount = (0, _react.useCallback)(function () {
-    return typeof props.maxCount === 'number' && !(getFileList().length < props.maxCount);
-  }, [getFileList, props.maxCount]); // 上传完成: File, fileParams
+    var maxCount = props.maxCount,
+        limit = props.limit;
+    var flag = false;
+    var num = maxCount || limit;
+
+    if (num && typeof num === 'number') {
+      flag = !(getFileList().length < num);
+    }
+
+    return flag;
+  }, [getFileList, props]); // 上传成功事件: File, fileParams
+
+  var uploadSuccess = (0, _react.useCallback)(function (file, params, ossCallBack) {
+    var _a;
 
-  var uploadDone = (0, _react.useCallback)(function (file, params, ossCallBack) {
     var fileList = [params].concat((0, _toConsumableArray2.default)(getFileList()));
     dispatch({
       type: 'changeFileList',
@@ -86,18 +111,25 @@ var useCoreOptions = function useCoreOptions(_ref) {
       percent: null
     }); // 上传事件：抛出 file: 文件  filelist: 文件列表 event: 上传进度信息
 
+    (_a = props.onSuccess) === null || _a === void 0 ? void 0 : _a.call(props, {
+      file: file,
+      fileList: fileList
+    });
     onChange === null || onChange === void 0 ? void 0 : onChange({
       file: file,
       fileList: fileList
     });
     ossCallBack === null || ossCallBack === void 0 ? void 0 : ossCallBack(params);
-  }, [getFileList]); // 上传进度事件
+  }, [getFileList, props.onSuccess, onChange, dispatch]); // 上传进度事件
 
   var uploadProgress = (0, _react.useCallback)(function (file, _ref2) {
     var progress = _ref2.progress,
         checkPoint = _ref2.checkPoint,
         result = _ref2.result;
-    onChange({
+
+    var _a;
+
+    var params = {
       file: file,
       fileList: getFileList(),
       event: {
@@ -106,23 +138,43 @@ var useCoreOptions = function useCoreOptions(_ref) {
         result: result,
         status: typeof progress !== 'number' ? 'done' : 'uploading'
       }
-    });
+    };
+    (_a = props.onProgress) === null || _a === void 0 ? void 0 : _a.call(props, params);
+    onChange === null || onChange === void 0 ? void 0 : onChange(params);
     dispatch({
       type: 'changePercent',
       percent: Number((progress * 100).toFixed(2))
     });
-  }, [getFileList]); // 上传至ali-oss
+  }, [getFileList, props.onProgress, onChange, dispatch]); // 上传失败事件
+
+  var uploadError = (0, _react.useCallback)(function (_ref3) {
+    var error = _ref3.error,
+        file = _ref3.file;
+    console.log('上传报错:', error);
+    props.onError ? props.onError({
+      error: error,
+      file: file,
+      fileList: getFileList()
+    }) : _linkmoreDesign.message.warning('文件上传失败!', 1.5);
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      file: file,
+      fileList: getFileList(),
+      event: {
+        status: 'error'
+      }
+    });
+  }, [props.onError, getFileList, onChange]); // 上传至ali-oss
 
   var uploadOss = (0, _react.useCallback)(function (file) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var _a, _ossConfig, _ossConfig$dir, dir, shortlink, _ossConfig$region, region, accessKeyId, accessKeySecret, stsToken, _ossConfig$bucket, bucket, ossCallBack, client, timestamp, fileName, pathName, url, seq, params;
+      var _ossConfig, _ossConfig$dir, filePath, shortlink, _ossConfig$region, region, accessKeyId, accessKeySecret, stsToken, _ossConfig$bucket, bucket, ossCallBack, client, timestamp, fileName, pathName, url, params;
 
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               _context.prev = 0;
-              _ossConfig = ossConfig(), _ossConfig$dir = _ossConfig.dir, dir = _ossConfig$dir === void 0 ? '/BizFile/4595/Supplier/' : _ossConfig$dir, shortlink = _ossConfig.shortlink, _ossConfig$region = _ossConfig.region, region = _ossConfig$region === void 0 ? 'oss-cn-hangzhou' : _ossConfig$region, accessKeyId = _ossConfig.accessKeyId, accessKeySecret = _ossConfig.accessKeySecret, stsToken = _ossConfig.stsToken, _ossConfig$bucket = _ossConfig.bucket, bucket = _ossConfig$bucket === void 0 ? 'linkmore-scm-test' : _ossConfig$bucket, ossCallBack = _ossConfig.ossCallBack;
+              _ossConfig = ossConfig(), _ossConfig$dir = _ossConfig.dir, filePath = _ossConfig$dir === void 0 ? '/BizFile/4595/Supplier/' : _ossConfig$dir, shortlink = _ossConfig.shortlink, _ossConfig$region = _ossConfig.region, region = _ossConfig$region === void 0 ? 'oss-cn-hangzhou' : _ossConfig$region, accessKeyId = _ossConfig.accessKeyId, accessKeySecret = _ossConfig.accessKeySecret, stsToken = _ossConfig.stsToken, _ossConfig$bucket = _ossConfig.bucket, bucket = _ossConfig$bucket === void 0 ? 'linkmore-scm-test' : _ossConfig$bucket, ossCallBack = _ossConfig.ossCallBack;
               client = new _aliOss.default({
                 region: region,
                 accessKeyId: accessKeyId,
@@ -132,7 +184,7 @@ var useCoreOptions = function useCoreOptions(_ref) {
               });
               timestamp = Date.now();
               fileName = "".concat(timestamp, "-").concat(file.name);
-              pathName = dir.slice(-1) === '/' ? "".concat(dir).concat(fileName) : "".concat(dir, "/").concat(fileName);
+              pathName = filePath.slice(-1) === '/' ? "".concat(filePath).concat(fileName) : "".concat(filePath, "/").concat(fileName);
               url = "".concat(shortlink).concat(pathName) || '';
               _context.next = 9;
               return client.multipartUpload(pathName, file, {
@@ -150,53 +202,44 @@ var useCoreOptions = function useCoreOptions(_ref) {
               });
 
             case 9:
-              seq = (((_a = state.fileList) === null || _a === void 0 ? void 0 : _a.length) || 0) + 1;
-              params = {
-                uid: timestamp,
-                fileTypeCode: file.type,
-                fileTypeName: file.type,
+              params = props.fileConfig({
+                file: file,
+                timestamp: timestamp,
                 fileName: fileName,
-                realFileName: file.name,
-                fileSize: file.size,
-                internalUrl: 'internalUrl',
-                externalUrl: 'externalUrl',
-                filePath: dir,
-                seq: seq,
+                filePath: filePath,
+                shortlink: shortlink,
                 url: url
-              };
-              uploadDone(file, params, ossCallBack);
-              _context.next = 18;
+              });
+              uploadSuccess(file, params, ossCallBack);
+              _context.next = 16;
               break;
 
-            case 14:
-              _context.prev = 14;
+            case 13:
+              _context.prev = 13;
               _context.t0 = _context["catch"](0);
-              console.log('上传报错:', _context.t0);
-              onChange === null || onChange === void 0 ? void 0 : onChange({
-                file: file,
-                fileList: getFileList(),
-                event: {
-                  status: 'error'
-                }
+              uploadError({
+                error: _context.t0,
+                file: file
               });
 
-            case 18:
+            case 16:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 14]]);
+      }, _callee, null, [[0, 13]]);
     }));
-  }, [ossConfig, uploadDone, uploadProgress, getFileList]);
+  }, [ossConfig, uploadProgress, props.fileConfig, uploadSuccess, uploadError]); // 自定义使用外部上传
+
   var customUpload = (0, _react.useCallback)(function (file) {
     var _a;
 
     (_a = props.fileUpload) === null || _a === void 0 ? void 0 : _a.call(props, {
       file: file,
       value: getFileList(),
-      onChange: uploadDone
+      onChange: uploadSuccess
     });
-  }, [props.fileUpload, getFileList, uploadDone]); // 上传前的检测
+  }, [props.fileUpload, getFileList, uploadSuccess]); // 上传前的检测
 
   var beforeUpload = (0, _react.useCallback)(function (e) {
     var files = e.target.files; // 循环文件检查是否存在不符合要求的文件
@@ -223,20 +266,20 @@ var useCoreOptions = function useCoreOptions(_ref) {
 
   var remove = (0, _react.useCallback)(function (file) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-      var _b, _c, res, fileList;
+      var _a, _b, res, fileList;
 
       return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
               _context2.next = 2;
-              return (_b = props.onRemove) === null || _b === void 0 ? void 0 : _b.call(props, file);
+              return (_a = props.onRemove) === null || _a === void 0 ? void 0 : _a.call(props, file);
 
             case 2:
               res = _context2.sent;
 
               if (res) {
-                fileList = (_c = getFileList()) === null || _c === void 0 ? void 0 : _c.filter(function (v) {
+                fileList = (_b = getFileList()) === null || _b === void 0 ? void 0 : _b.filter(function (v) {
                   return v[uid] !== file[uid];
                 });
                 dispatch({
@@ -256,21 +299,22 @@ var useCoreOptions = function useCoreOptions(_ref) {
         }
       }, _callee2);
     }));
-  }, [props.onRemove, getFileList, uid]); // 点击文件链接或预览图标时的回调
+  }, [props.onRemove, getFileList, onChange, dispatch, uid]); // 点击文件链接或预览图标时的回调
 
   var preview = (0, _react.useCallback)(function (file) {
     var _a;
 
     (_a = props.onPreview) === null || _a === void 0 ? void 0 : _a.call(props, file);
-  }, []); // 点击下载文件时的回调
+  }, [props.onPreview]); // 点击下载文件时的回调
 
   var download = (0, _react.useCallback)(function (file) {
     var _a;
 
     (_a = props.onDownload) === null || _a === void 0 ? void 0 : _a.call(props, file);
-  }, []);
+  }, [props.onDownload]);
   var CoreMethods = {
     getIsMaxCount: getIsMaxCount,
+    getFileFields: getFileFields,
     beforeUpload: beforeUpload,
     getUploadStatus: getUploadStatus,
     remove: remove,