fan-standard-comp 3.2.2 → 3.2.3

package/lib/FormComp/Uploader/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("antd/es/upload/style");
-var _upload = _interopRequireDefault(require("antd/es/upload"));
 require("antd/es/button/style");
 var _button = _interopRequireDefault(require("antd/es/button"));
+require("antd/es/upload/style");
+var _upload = _interopRequireDefault(require("antd/es/upload"));
 require("antd/es/message/style");
 var _message2 = _interopRequireDefault(require("antd/es/message"));
 var _tslib = require("tslib");
@@ -17,6 +17,7 @@ var _icons = require("@ant-design/icons");
 var _util = require("./util");
 require("./style/index.less");
 var _ImagePreview = _interopRequireDefault(require("../../ImageGallery/ImagePreview"));
+var _antdImgCrop = _interopRequireDefault(require("antd-img-crop"));
 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 && {}.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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -44,7 +45,12 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     size = _props$size === void 0 ? 2 * 1024 * 1024 : _props$size,
     onPreview = props.onPreview,
     beforeUpload = props.beforeUpload,
-    limit = props.limit;
+    limit = props.limit,
+    maxCount = props.maxCount,
+    viewOnly = props.viewOnly,
+    crop = props.crop,
+    cropConfig = props.cropConfig,
+    otherProps = (0, _tslib.__rest)(props, ["accept", "extraExt", "fileType", "className", "isOnly", "children", "onChange", "value", "size", "onPreview", "beforeUpload", "limit", "maxCount", "viewOnly", "crop", "cropConfig"]);
   // 图片预览数据
   // const [showConfig, setShowConfig] = useState({ visible: false, url: '' })
   // 用于展示的缩略图
@@ -61,6 +67,26 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     previewCurrent = _useState6[0],
     setPreviewerCurrent = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    cropFile = _useState8[0],
+    setCropFile = _useState8[1]; // 存储裁剪的图片file信息
+  var maxCountLimit = (0, _react.useMemo)(function () {
+    if (isOnly) {
+      return 1;
+    }
+    return maxCount || limit;
+  }, [isOnly, limit, maxCount]);
+  var splitAccept = (0, _react.useMemo)(function () {
+    var res = (0, _util.getAccept)(fileType);
+    if (extraExt) {
+      res = res + ',' + extraExt;
+    }
+    if (accept) {
+      res = res + ',' + accept;
+    }
+    return res;
+  }, [fileType, extraExt]);
   (0, _react.useEffect)(function () {
     if (!value) {
       setUploaderFileList([]);
@@ -75,7 +101,7 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         file.uid = file.uid || "".concat(S4(), "-").concat(S4());
         file.url = file.downloadUrl || file.url;
         file.status = 'done';
-        file.previewUrl = file.downloadUrl || file.url; // 给预览地址
+        file.previewUrl = file.previewUrl || file.downloadUrl || file.url; // 给预览地址
         return file;
       }));
       return;
@@ -86,7 +112,7 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         uid: "".concat(S4(), "-").concat(S4()),
         url: value.downloadUrl || value.url,
         status: 'done',
-        previewUrl: value.downloadUrl || value.url
+        previewUrl: value.previewUrl || value.downloadUrl || value.url
       }, value)]);
       /* eslint-enable no-multi-spaces */
       return;
@@ -102,16 +128,6 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return;
     }
   }, [value]);
-  var splitAccept = (0, _react.useMemo)(function () {
-    var res = (0, _util.getAccept)(fileType);
-    if (extraExt) {
-      res = res + ',' + extraExt;
-    }
-    if (accept) {
-      res = res + ',' + accept;
-    }
-    return res;
-  }, [fileType, extraExt]);
   // 点击文件链接或预览图标时的回调
   var handlePreview = (0, _react.useCallback)(function (file, files) {
     return (0, _tslib.__awaiter)(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
@@ -119,10 +135,10 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            _context.next = 2;
-            return fileListPreviewer(_toConsumableArray(files));
-          case 2:
-            pList = _context.sent;
+            // 方式一：直接全部转换成base64后再打开预览（问题：会出现时间过长）
+            // const pList: any = await fileListPreviewer([...files])
+            // 方式三：上传时已经转换过
+            pList = _toConsumableArray(files);
             setUploaderFileList(pList);
             setPreviewerCurrent(pList.findIndex(function (item) {
               return item.uid === file.uid;
@@ -156,7 +172,7 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
             // console.log('file', file.uid)
             // const previewItem = pList.find((item: FileTypeProps) => item.uid === file.uid)
             // setShowConfig({ visible: true, url: previewItem.previewUrl })
-          case 6:
+          case 4:
           case "end":
             return _context.stop();
         }
@@ -164,17 +180,17 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }));
   }, []);
   // 检查文件是否规范
-  var handleCheck = (0, _react.useCallback)(function (file) {
-    var isLtSize = file.size < size;
-    if (!isLtSize) {
-      _message2.default.error("\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7".concat(Math.round(size / 1024 / 1024 * 100) / 100, "MB!"));
-      return false;
-    }
-    return true;
-  }, [fileType, size]);
+  // const handleCheck = useCallback((file: any) => {
+  //   const isLtSize = file.size < size;
+  //   if (!isLtSize) {
+  //     message.error(`文件大小不能超过${Math.round(((size / 1024) / 1024) * 100) / 100}MB!`);
+  //     return false;
+  //   }
+  //   return true;
+  // }, [fileType, size])
   var handleChange = (0, _react.useCallback)(function (res) {
     return (0, _tslib.__awaiter)(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-      var isOk, result, list;
+      var result, fileRes, matchAddIndex, matchAdd;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -183,99 +199,123 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
               break;
             }
             setUploaderFileList(res.fileList);
-            onChange && onChange(isOnly ? res.fileList[0] && res.fileList[0].originFileObj : res.fileList);
+            // onChange && onChange(isOnly ? res.fileList[0] && res.fileList[0].originFileObj : res.fileList)
+            onChange && onChange(res.fileList, res);
             return _context2.abrupt("return");
           case 4:
-            isOk = handleCheck(res.file);
-            if (isOk) {
-              list = res.fileList.map(function (file) {
-                if (!file.previewUrl) {
-                  console.log('无预览URL', file);
-                }
-                // if (!file.url) {
-                //   file.url = file.thumbUrl
-                // }
-                return file;
-              }); // const previewUrls = ( res.fileList || []).map((item: any) => {
-              //   return getPreviewInfo(item)
-              // });
-              // let resultList = await Promise.all(previewUrls).catch((err) => {
-              //   console.log('Promise.all==>转换base64失败', err)
-              // })
-              result = _toConsumableArray(list || []);
-              setUploaderFileList(result);
-              onChange && onChange(isOnly ? result[0] && result[0].originFileObj : result);
+            result = []; // 裁剪模式下，把裁剪后的文件信息传过来
+            if (crop && cropFile) {
+              res.file = cropFile;
             }
-          case 6:
+            _context2.next = 8;
+            return (0, _util.getBase64)(res.file);
+          case 8:
+            fileRes = _context2.sent;
+            matchAddIndex = res.fileList.findIndex(function (item) {
+              return item.uid === res.file.uid;
+            });
+            matchAdd = res.fileList[matchAddIndex];
+            matchAdd.previewUrl = fileRes === null || fileRes === void 0 ? void 0 : fileRes.url; // 预览URL
+            if (crop && cropFile) {
+              // 将当前裁剪后的文件传出来
+              matchAdd.originFileObj = res.file;
+              matchAdd.size = res.file.size;
+              matchAdd.lastModified = res.file.lastModified;
+              matchAdd.lastModifiedDate = res.file.lastModifiedDate;
+            }
+            res.fileList.splice(matchAddIndex, 1, matchAdd);
+            result = _toConsumableArray(res.fileList || []);
+            setUploaderFileList(result);
+            setCropFile(null);
+            onChange && onChange(isOnly ? result[0] && result[0].originFileObj : result, res);
+            // const isOk = handleCheck(res.file)
+            // if (isOk) {
+            //   let result: any = []
+            //   const fileRes = await getBase64(res.file)
+            //   const matchAddIndex = res.fileList.findIndex((item: any) => item.uid === res.file.uid)
+            //   const matchAdd = res.fileList[matchAddIndex]
+            //   console.log('matchAdd', matchAdd, maxCountLimit)
+            //   matchAdd.previewUrl = fileRes?.url
+            //   res.fileList.splice(matchAddIndex, 1, matchAdd)
+            //   result = [...(res.fileList || [])]
+            //   setUploaderFileList(result)
+            //   onChange && onChange(isOnly ? result[0] && result[0].originFileObj : result, res)
+            // }
+          case 18:
           case "end":
             return _context2.stop();
         }
       }, _callee2);
     }));
-  }, [isOnly, handleCheck, uploaderFileList]);
-  var getPreviewInfo = function getPreviewInfo(file) {
-    return new Promise(function (resolve, reject) {
-      return (0, _tslib.__awaiter)(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-        var res;
-        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              if (!(!file.url && !file.previewUrl)) {
-                _context3.next = 8;
-                break;
-              }
-              _context3.next = 3;
-              return (0, _util.getBase64)(file.originFileObj);
-            case 3:
-              res = _context3.sent;
-              if (res && res.status === 'success') {
-                file.previewUrl = res.url;
-              }
-              // console.log('转换成功', file)
-              resolve(Object.assign({}, file));
-              _context3.next = 10;
-              break;
-            case 8:
-              if (!file.previewUrl) {
-                file.previewUrl = file.url;
-              }
-              // 已经转换过,无需再转换
-              // console.log('已经转换过,无需再转换', file)
-              resolve(Object.assign({}, file));
-            case 10:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3);
-      }));
-    });
+  }, [isOnly, uploaderFileList, maxCountLimit, crop, cropFile]);
+  //
+  // const getPreviewInfo = (file: any) => {
+  //   return new Promise(async (resolve, reject) => {
+  //     if (!file.url && !file.previewUrl) {
+  //       const res = await getBase64(file.originFileObj);
+  //       if (res && res.status === 'success') {
+  //         file.previewUrl = res.url;
+  //       }
+  //       // console.log('转换成功', file)
+  //       resolve({ ...file })
+  //     } else {
+  //       if (!file.previewUrl) {
+  //         file.previewUrl = file.url
+  //       }
+  //       // 已经转换过,无需再转换
+  //       // console.log('已经转换过,无需再转换', file)
+  //       resolve({ ...file })
+  //     }
+  //   })
+  // }
+  // const fileListPreviewer = async (files?: any) => {
+  //   const previewUrls = (files || []).map((item: any) => {
+  //     return getPreviewInfo(item)
+  //   });
+  //   let resultList = await Promise.all(previewUrls).catch((err) => {
+  //     console.log('Promise.all==>转换base64失败', err)
+  //   });
+  //   return resultList
+  // }
+  var handleClose = function handleClose() {
+    setShowPreview(false);
   };
-  var fileListPreviewer = function fileListPreviewer(files) {
-    return (0, _tslib.__awaiter)(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-      var previewUrls, resultList;
-      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
+  var handleBeforeUpload = (0, _react.useCallback)(function (file) {
+    return (0, _tslib.__awaiter)(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+      var isLtSize;
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
-            previewUrls = (files || []).map(function (item) {
-              return getPreviewInfo(item);
-            });
-            _context4.next = 3;
-            return Promise.all(previewUrls).catch(function (err) {
-              console.log('Promise.all==>转换base64失败', err);
-            });
-          case 3:
-            resultList = _context4.sent;
-            return _context4.abrupt("return", resultList);
-          case 5:
+            //限制图片 格式、size、分辨率
+            // const isJPG = file.type === 'image/jpeg';
+            // const isJPEG = file.type === 'image/jpeg';
+            // const isGIF = file.type === 'image/gif';
+            // const isPNG = file.type === 'image/png';
+            // if (!(isJPG || isJPEG || isGIF || isPNG)) {
+            //   message.error("上传图片的格式不正确，不是JPG、JPEG、GIF、PNG");
+            //   return false;
+            // }
+            isLtSize = file.size < size;
+            if (isLtSize) {
+              _context3.next = 4;
+              break;
+            }
+            _message2.default.error("\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7".concat(Math.round(size / 1024 / 1024 * 100) / 100, "MB!"));
+            // 如果直接返回false或者true,还是会触发额外的onChange，所以需要改成 Upload.LIST_IGNORE
+            return _context3.abrupt("return", _upload.default.LIST_IGNORE);
+          case 4:
+            // 存储裁剪后的文件信息（只有fileType=image，且在单选情况下才可以）
+            if (crop && fileType === 'image') {
+              setCropFile(file);
+            }
+            return _context3.abrupt("return", false);
+          case 6:
           case "end":
-            return _context4.stop();
+            return _context3.stop();
         }
-      }, _callee4);
+      }, _callee3);
     }));
-  };
-  var handleClose = function handleClose() {
-    setShowPreview(false);
-  };
+  }, [fileType, size, crop]);
   // 渲染预览窗口
   /* const renderPreviewComponent = useMemo(
      () => {
@@ -298,7 +338,7 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    )*/
   var renderChildrenComponent = (0, _react.useMemo)(function () {
     var renderButton = function renderButton() {
-      if (fileType === 'image' || fileType === 'svg') {
+      if (fileType === 'image' || fileType === 'svg' || fileType === 'video') {
         return /*#__PURE__*/_react.default.createElement("div", {
           className: 'spec-uploader-control'
         }, /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, null), /*#__PURE__*/_react.default.createElement("div", {
@@ -309,28 +349,33 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         className: 'spec-uploader-button'
       }, /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, null), "\u70B9\u51FB\u9009\u62E9");
     };
-    if (isOnly && uploaderFileList.length === 1 || limit && uploaderFileList.length === limit) {
+    if (maxCountLimit && uploaderFileList.length === maxCountLimit) {
       return null;
     }
     if (children) {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", children, " ");
     }
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderButton());
-  }, [fileType, isOnly, children, uploaderFileList, limit]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_upload.default, Object.assign({}, props, {
-    ref: ref,
-    accept: splitAccept,
-    fileList: uploaderFileList,
-    listType: fileType === 'image' || fileType === 'svg' ? 'picture-card' : 'text',
-    className: "spec-uploader ".concat(className),
-    onPreview: onPreview ? onPreview : fileType === 'image' || fileType === 'svg' ? function (file) {
-      return handlePreview(file, uploaderFileList);
-    } : function () {},
-    beforeUpload: beforeUpload ? beforeUpload : function () {
-      return false;
-    },
-    onChange: handleChange
-  }), renderChildrenComponent), (fileType === 'image' || fileType === 'svg') && showPreview && /*#__PURE__*/_react.default.createElement(_ImagePreview.default, {
+  }, [fileType, children, uploaderFileList, maxCountLimit]);
+  var RenderUpload = function RenderUpload() {
+    return /*#__PURE__*/_react.default.createElement(_upload.default, Object.assign({}, otherProps, {
+      disabled: otherProps.disabled || viewOnly,
+      maxCount: maxCountLimit,
+      ref: ref,
+      accept: splitAccept,
+      fileList: uploaderFileList,
+      listType: fileType === 'image' || fileType === 'svg' ? 'picture-card' : 'text',
+      className: "spec-uploader ".concat(className),
+      onPreview: onPreview ? onPreview : fileType === 'image' || fileType === 'svg' ? function (file) {
+        return handlePreview(file, uploaderFileList);
+      } : function () {},
+      beforeUpload: beforeUpload ? beforeUpload : handleBeforeUpload,
+      onChange: handleChange
+    }), viewOnly ? null : renderChildrenComponent);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null,
+  // multiple 情况下不可用
+  !(otherProps === null || otherProps === void 0 ? void 0 : otherProps.multiple) && fileType === 'image' && crop ? /*#__PURE__*/_react.default.createElement(_antdImgCrop.default, Object.assign({}, cropConfig || {}), RenderUpload()) : RenderUpload(), (fileType === 'image' || fileType === 'svg') && showPreview && /*#__PURE__*/_react.default.createElement(_ImagePreview.default, {
     hasThumbnail: true,
     open: showPreview,
     onClose: handleClose,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fan-standard-comp",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "FZ standard-comp,basic of antd4.0 and custom component.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
     "package:build:publish": "father-build && webpack && npm version patch && npm publish",
     "package:build:no-dist:publish": "father-build && npm version patch && npm publish",
     "build:package:to-rgz": "npm run package:build && node copyPackage.js && npm run package-to-tgz",
-    "package-to-tgz": "tar -czf fan-standard-comp-3.2.2-beta.1.tgz package && yarn"
+    "package-to-tgz": "tar -czf fan-standard-comp-3.2.3-beta.1.tgz package"
   },
   "author": "shomychen",
   "license": "ISC",
@@ -44,6 +44,7 @@
     "@babel/helper-define-map": "^7.18.6",
     "@babel/helper-hoist-variables": "^7.24.7",
     "ant-design-draggable-modal": "^1.0.0",
+    "antd-img-crop": "^4.23.0",
     "css-loader": "3.6.0",
     "file-loader": "6.2.0",
     "less-loader": "5.0.0",