linkmore-design 1.0.67 → 1.0.70

package/es/LmUpload/UploadList/ItemPictureCard.js

@@ -1,18 +1,84 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useMemo, useState } from 'react';
 import cn from 'classnames';
-import { IconFont, Image } from 'linkmore-design'; // 图片列表项
+import { IconFont, Image } from 'linkmore-design';
+
+var renderThumb = function renderThumb(file) {
+  switch (file.fileExtension) {
+    case '':
+      return /*#__PURE__*/React.createElement(IconFont, {
+        type: "lmweb-folder-fill"
+      });
+
+    case 'jpeg':
+    case 'png':
+    case 'jpg':
+      return /*#__PURE__*/React.createElement("div", {
+        className: "lm_upload_item_error"
+      }, /*#__PURE__*/React.createElement(IconFont, {
+        type: "lmweb-image"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "lm_upload_item_name"
+      }, file.realFileName));
+
+    case 'doc':
+    case 'docx':
+      return /*#__PURE__*/React.createElement(IconFont, {
+        type: "lmweb-file-word"
+      });
+
+    case 'ppt':
+    case 'pptx':
+      return /*#__PURE__*/React.createElement(IconFont, {
+        type: "lmweb-file-ppt"
+      });
+
+    case 'xls':
+    case 'xlsx':
+      return /*#__PURE__*/React.createElement(IconFont, {
+        type: "lmweb-file-excel"
+      });
+
+    case 'pdf':
+      return /*#__PURE__*/React.createElement(IconFont, {
+        type: "lmweb-file-pdf"
+      });
+
+    default:
+      return /*#__PURE__*/React.createElement(IconFont, {
+        type: "lmweb-file-text"
+      });
+  }
+}; // 图片列表项
+
 
 var PictureItem = function PictureItem(_ref) {
   var file = _ref.file,
       instance = _ref.instance;
-  var size = instance.size;
+  var size = instance.size,
+      remove = instance.remove,
+      preview = instance.preview;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isError = _useState2[0],
-      setIsError = _useState2[1]; // 重置尺寸大小
+      setIsError = _useState2[1]; // 文件信息重组
+
+
+  var resetFile = useMemo(function () {
+    var fileExtension = file.realFileName.replace(/.*\./, '').toLowerCase();
+    return Object.assign(Object.assign({}, file), {
+      fileExtension: fileExtension
+    });
+  }, [file]); // 预览小图
+
+  var thumbUrl = useMemo(function () {
+    return "".concat(file.url, "?x-oss-process=image/resize,w_").concat(size);
+  }, [file.url, size]); // 根据文件名后缀判断
 
+  var isImg = useMemo(function () {
+    return ['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(resetFile.fileExtension);
+  }, [resetFile]); // 重置尺寸大小
 
   var resetSize = useMemo(function () {
     var width = size - 16;
@@ -31,33 +97,33 @@ var PictureItem = function PictureItem(_ref) {
       width: size
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'lm_upload_item_thumb'
-  }, isError ? /*#__PURE__*/React.createElement("div", {
-    className: 'lm_upload_item_error'
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lmweb-image"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: 'lm_upload_item_name'
-  }, file.fileName)) : /*#__PURE__*/React.createElement(Image, {
+    className: "lm_upload_item_thumb"
+  }, isError || !isImg ? renderThumb(resetFile) : /*#__PURE__*/React.createElement(Image, {
     width: resetSize.width,
     height: resetSize.width,
-    src: file.url,
+    src: thumbUrl,
     onError: function onError() {
       return setIsError(true);
     }
   })), /*#__PURE__*/React.createElement("div", {
-    className: 'lm_upload_item_mask'
+    className: "lm_upload_item_mask"
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'lm_upload_item_action'
+    className: "lm_upload_item_action"
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'action_preview'
+    className: "action_preview",
+    onClick: function onClick() {
+      return preview(file);
+    }
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "lmweb-eye",
     style: {
       fontSize: size > 48 ? 16 : 12
     }
   })), /*#__PURE__*/React.createElement("div", {
-    className: 'action_delete'
+    className: "action_delete",
+    onClick: function onClick() {
+      return remove(file);
+    }
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "lmweb-delete",
     style: {

package/es/LmUpload/UploadList/ItemText.d.ts

@@ -1,4 +1,5 @@
-declare const TextItem: ({ file }: {
+declare const TextItem: ({ file, instance }: {
     file: any;
+    instance: any;
 }) => JSX.Element;
 export default TextItem;

package/es/LmUpload/UploadList/ItemText.js

@@ -1,22 +1,28 @@
 import * as React from 'react';
+import cn from 'classnames';
 import { IconFont } from 'linkmore-design';
 
 var TextItem = function TextItem(_ref) {
-  var file = _ref.file;
+  var file = _ref.file,
+      instance = _ref.instance;
+  var remove = instance.remove;
   return /*#__PURE__*/React.createElement("div", {
-    className: 'lm_upload_item lm_upload_item_text'
+    className: cn('lm_upload_item lm_upload_item_text', file.status === 'error' && 'error')
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'text_left'
+    className: "text_left"
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'prefix'
+    className: "prefix"
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "lmweb-attachment"
   })), /*#__PURE__*/React.createElement("div", {
-    className: 'lm_upload_item_name'
+    className: "lm_upload_item_name"
   }, file.fileName)), /*#__PURE__*/React.createElement("div", {
-    className: 'text_right lm_upload_item_text_action'
+    className: "text_right lm_upload_item_text_action"
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'action_delete'
+    className: "action_delete",
+    onClick: function onClick() {
+      return remove(file);
+    }
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "lmweb-delete"
   }))));

package/es/LmUpload/UploadList/RenderItem.d.ts

@@ -1,6 +1,2 @@
-export interface RenderCellProps<T = any> {
-    type?: string;
-    instance: any;
-}
-declare const RenderCell: (props: RenderCellProps) => any;
+declare const RenderCell: (props: any) => any;
 export default RenderCell;

package/es/LmUpload/UploadList/RenderItem.js

@@ -21,9 +21,9 @@ var RenderCell = function RenderCell(props) {
       resetProsp = __rest(props, ["type"]);
 
   var types = {
-    'text': TextItem,
-    'picture': PictureItem,
-    'card': PictureCardItem
+    text: TextItem,
+    picture: PictureItem,
+    card: PictureCardItem
   };
   return render(types[type] || PictureItem, resetProsp);
 };

package/es/LmUpload/UploadList/index.d.ts

@@ -1,4 +1,5 @@
-declare const LmUploadList: ({ instance }: {
+import React from 'react';
+declare const _default: React.MemoExoticComponent<({ instance }: {
     instance: any;
-}) => any;
-export default LmUploadList;
+}) => JSX.Element>;
+export default _default;

package/es/LmUpload/UploadList/index.js

@@ -1,21 +1,28 @@
+import React from 'react';
 import { render } from '../utils';
 import RenderItem from './RenderItem';
 
 var LmUploadList = function LmUploadList(_ref) {
   var instance = _ref.instance;
-  var state = instance.state,
+
+  var _a, _b;
+
+  var uid = instance.uid,
+      getFileList = instance.getFileList,
       itemRender = instance.itemRender,
-      listType = instance.listType;
-  var fileList = state.fileList;
-  return fileList.map(function (file, idx) {
+      listType = instance.listType,
+      showUploadList = instance.showUploadList;
+  if (!showUploadList) return null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (_b = (_a = getFileList()) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) {
+    return a.seq - b.seq;
+  })) === null || _b === void 0 ? void 0 : _b.map(function (file, idx) {
     return render(itemRender || RenderItem, {
       type: listType,
-      key: idx,
+      key: file[uid] || idx,
       file: file,
-      fileList: fileList,
       instance: instance
     });
-  });
+  }));
 };
 
-export default LmUploadList;
+export default /*#__PURE__*/React.memo(LmUploadList);

package/es/LmUpload/body/Progress.d.ts

@@ -0,0 +1,4 @@
+declare const Progress: ({ instance }: {
+    instance: any;
+}) => JSX.Element;
+export default Progress;

package/es/LmUpload/body/Progress.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+var Progress = function Progress(_ref) {
+  var instance = _ref.instance;
+  var state = instance.state;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "lm_upload_progress"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "line",
+    style: {
+      width: "".concat(state.percent || 0, "%")
+    }
+  }));
+};
+
+export default Progress;

package/es/LmUpload/body/UploadCore.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import UploadPicture from './UploadPicture'; // 上传核心
 // 渲染上传区域样式, 仅用于触发上传事件
 // type: 'card' 图片 | 'drag' 拖拽
@@ -8,32 +8,39 @@ var UploadCore = function UploadCore(_ref) {
   var inputRef = React.useRef(null);
   var accept = instance.accept,
       children = instance.children,
-      beforeUpload = instance.beforeUpload; // 点击事件触发文件上传
+      beforeUpload = instance.beforeUpload,
+      getUploadStatus = instance.getUploadStatus,
+      getIsMaxCount = instance.getIsMaxCount; // 点击事件触发文件上传
 
   var handleClick = function handleClick() {
     var _a;
 
+    var isUploading = getUploadStatus().uploading;
+    if (isUploading) return;
     (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+  }; // 上传触发事件
+
+
+  var uploadChange = function uploadChange(e) {
+    var _a;
+
+    beforeUpload === null || beforeUpload === void 0 ? void 0 : beforeUpload(e);
+
+    if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) {
+      inputRef.current.value = '';
+    }
   };
 
   var inputConfig = {
-    type: "file",
+    type: 'file',
     accept: accept,
     title: '',
-    onChange: function onChange(e) {
-      var _a;
-
-      beforeUpload === null || beforeUpload === void 0 ? void 0 : beforeUpload(e);
-
-      if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) {
-        inputRef.current.value = '';
-      }
-    },
+    onChange: uploadChange,
     style: {
       display: 'none'
     }
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return !getIsMaxCount() && /*#__PURE__*/React.createElement("div", {
     onClick: handleClick,
     className: "lm_upload_core"
   }, children || /*#__PURE__*/React.createElement(UploadPicture, {

package/es/LmUpload/body/UploadPicture.js

@@ -1,27 +1,35 @@
 import * as React from 'react';
-import { IconFont } from 'linkmore-design'; // 预设卡片上传样式
+import { IconFont } from 'linkmore-design';
+import Progress from './Progress'; // 预设卡片上传样式
 
 var uploadPicture = function uploadPicture(_ref) {
   var instance = _ref.instance;
-  var size = instance.size;
+  var size = instance.size,
+      getUploadStatus = instance.getUploadStatus; // 是否上传中状态
+
+  var isUploading = React.useMemo(function () {
+    return getUploadStatus().uploading;
+  }, [getUploadStatus]);
   return /*#__PURE__*/React.createElement("div", {
-    className: 'lm_upload_core_picture',
+    className: "lm_upload_core_picture",
     style: {
       height: size,
       width: size
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'lm_upload_core_picture_action'
-  }, /*#__PURE__*/React.createElement("div", {
-    className: 'action_plus'
+    className: "lm_upload_core_picture_action"
+  }, !isUploading && /*#__PURE__*/React.createElement("div", {
+    className: "action_plus"
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "lmweb-plus",
     style: {
       fontSize: size > 48 ? 16 : 12
     }
   })), /*#__PURE__*/React.createElement("div", {
-    className: 'tip'
-  }, "\u4E0A\u4F20")));
+    className: "tip"
+  }, "\u4E0A\u4F20"), isUploading && /*#__PURE__*/React.createElement(Progress, {
+    instance: instance
+  })));
 };
 
 export default uploadPicture;

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

@@ -4,10 +4,18 @@ declare const useCoreOptions: ({ state, dispatch, props }: {
     props: any;
 }) => {
     CoreMethods: {
+        getIsMaxCount: () => boolean;
         beforeUpload: (e: any) => false | import("../../message").MessageType;
+        getUploadStatus: () => {
+            uploading: boolean;
+        };
+        remove: (file: any) => Promise<void>;
+        preview: (file: any) => void;
+        download: (file: any) => void;
     };
     RefMethods: {
         getState: () => any;
+        getFileList: () => any;
     };
 };
 export default useCoreOptions;