iglooform 2.4.16 → 2.4.20

package/es/upload-photo/index.js

@@ -61,6 +61,52 @@ import FormContext from '../form-context';
 var useBreakpoint = _Grid.useBreakpoint;
 var prefix = 'igloo-upload-photo';
 
+function ClassifyType(type) {
+  if (type.includes('image')) {
+    return 'image';
+  }
+
+  if (type.includes('video')) {
+    return 'video';
+  }
+
+  if (type.includes('pdf')) {
+    return 'pdf';
+  }
+
+  return 'unknown';
+}
+
+var getFileType = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(src) {
+    var r, contentType;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return fetch(src, {
+              cache: 'force-cache'
+            });
+
+          case 2:
+            r = _context.sent;
+            contentType = r.headers.get('content-type');
+            return _context.abrupt("return", ClassifyType(contentType));
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function getFileType(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
 var UploadPhoto = function UploadPhoto(props) {
   var _classnames3, _classnames4;
 
@@ -84,46 +130,48 @@ var UploadPhoto = function UploadPhoto(props) {
       bizKey = props.bizKey,
       _props$handleUpload = props.handleUpload,
       handleUpload = _props$handleUpload === void 0 ? /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(file) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(file) {
       var formData, response, rst;
-      return regeneratorRuntime.wrap(function _callee$(_context) {
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context.prev = _context.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
               formData = new FormData();
               formData.append('file', file);
               formData.append('biz_key', bizKey);
-              _context.next = 5;
+              _context2.next = 5;
               return fetch(uploadApi, {
                 method: 'post',
                 body: formData
               });
 
             case 5:
-              response = _context.sent;
-              _context.next = 8;
+              response = _context2.sent;
+              _context2.next = 8;
               return response.json();
 
             case 8:
-              rst = _context.sent;
-              return _context.abrupt("return", rst.url);
+              rst = _context2.sent;
+              return _context2.abrupt("return", rst.url);
 
             case 10:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee);
+      }, _callee2);
     }));
 
-    return function (_x) {
-      return _ref.apply(this, arguments);
+    return function (_x2) {
+      return _ref2.apply(this, arguments);
     };
   }() : _props$handleUpload,
       setFieldError = props.setFieldError,
       className = props.className,
       id = props.id,
-      validateField = props.validateField;
+      validateField = props.validateField,
+      _props$capture = props.capture,
+      capture = _props$capture === void 0 ? false : _props$capture;
 
   var _useContext2 = useContext(LocaleContext),
       formatMessage = _useContext2.formatMessage;
@@ -132,17 +180,7 @@ var UploadPhoto = function UploadPhoto(props) {
       _useState2 = _slicedToArray(_useState, 1),
       isMobile = _useState2[0];
 
-  var _useState3 = useState(value.map(function (url, index) {
-    return {
-      url: url,
-      dataUrl: url,
-      status: 'success',
-      type: '',
-      name: "File".concat(index + 1),
-      size: 0,
-      uid: index
-    };
-  })),
+  var _useState3 = useState([]),
       _useState4 = _slicedToArray(_useState3, 2),
       files = _useState4[0],
       setFiles = _useState4[1];
@@ -155,14 +193,64 @@ var UploadPhoto = function UploadPhoto(props) {
   var _useBreakpoint = useBreakpoint(),
       md = _useBreakpoint.md;
 
+  var mapFilesFromValue = function mapFilesFromValue(urls) {
+    var _files = [];
+    Promise.all(urls.map( /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(url, index) {
+        var type;
+        return regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return getFileType(url);
+
+              case 2:
+                type = _context3.sent;
+
+                _files.push({
+                  url: url,
+                  dataUrl: url,
+                  status: 'success',
+                  type: type,
+                  name: "File".concat(index + 1),
+                  size: 0,
+                  uid: index
+                });
+
+              case 4:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3);
+      }));
+
+      return function (_x3, _x4) {
+        return _ref3.apply(this, arguments);
+      };
+    }())).then(function () {
+      return setFiles(_files);
+    });
+  };
+
+  useEffect(function () {
+    if (Array.isArray(value) && value.some(function (url) {
+      return typeof url === 'string' && !files.find(function (file) {
+        return file.url === url;
+      });
+    })) {
+      mapFilesFromValue(value);
+    }
+  }, [value, files]);
   var uploadId = useMemo(function () {
     return "igloo-upload-photo-input-".concat(Math.random());
   }, []);
   var uploadIndex = useRef((value === null || value === void 0 ? void 0 : value.length) ? value.length : 0);
   useEffect(function () {
     return function () {
-      files.forEach(function (_ref2) {
-        var dataUrl = _ref2.dataUrl;
+      files.forEach(function (_ref4) {
+        var dataUrl = _ref4.dataUrl;
         URL.revokeObjectURL(dataUrl);
       });
     };
@@ -232,12 +320,12 @@ var UploadPhoto = function UploadPhoto(props) {
   };
 
   var uploadFile = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(file, currentIndex) {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(file, currentIndex) {
       var uid, dataUrl, name, size, mimeType, type, errorMsg, _errorMsg;
 
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      return regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
               uid = ++uploadIndex.current;
               dataUrl = URL.createObjectURL(file);
@@ -245,7 +333,7 @@ var UploadPhoto = function UploadPhoto(props) {
               type = classifyType(mimeType);
 
               if (!(type === 'unknown')) {
-                _context2.next = 9;
+                _context4.next = 9;
                 break;
               }
 
@@ -254,11 +342,11 @@ var UploadPhoto = function UploadPhoto(props) {
               });
               limitNumError.current = errorMsg;
               setFieldError && setFieldError(errorMsg);
-              return _context2.abrupt("return", Promise.reject(errorMsg));
+              return _context4.abrupt("return", Promise.reject(errorMsg));
 
             case 9:
               if (!(limit && currentIndex > limit)) {
-                _context2.next = 14;
+                _context4.next = 14;
                 break;
               }
 
@@ -270,7 +358,7 @@ var UploadPhoto = function UploadPhoto(props) {
               });
               limitNumError.current = _errorMsg;
               setFieldError && setFieldError(_errorMsg);
-              return _context2.abrupt("return", Promise.reject(_errorMsg));
+              return _context4.abrupt("return", Promise.reject(_errorMsg));
 
             case 14:
               limitNumError.current = undefined;
@@ -285,7 +373,7 @@ var UploadPhoto = function UploadPhoto(props) {
                   uid: uid
                 }]);
               });
-              return _context2.abrupt("return", handleUploadPromise(file, function (url) {
+              return _context4.abrupt("return", handleUploadPromise(file, function (url) {
                 var urls = [];
                 setFiles(function (files) {
                   return files.map(function (f) {
@@ -348,63 +436,63 @@ var UploadPhoto = function UploadPhoto(props) {
 
             case 17:
             case "end":
-              return _context2.stop();
+              return _context4.stop();
           }
         }
-      }, _callee2);
+      }, _callee4);
     }));
 
-    return function uploadFile(_x2, _x3) {
-      return _ref3.apply(this, arguments);
+    return function uploadFile(_x5, _x6) {
+      return _ref5.apply(this, arguments);
     };
   }();
 
   var handleUploadPromise = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(file, onSuccess, onFailed) {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(file, onSuccess, onFailed) {
       var rst, errorMsg;
-      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      return regeneratorRuntime.wrap(function _callee5$(_context5) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context5.prev = _context5.next) {
             case 0:
-              _context3.prev = 0;
-              _context3.next = 3;
+              _context5.prev = 0;
+              _context5.next = 3;
               return handleUpload(file);
 
             case 3:
-              rst = _context3.sent;
+              rst = _context5.sent;
               onSuccess(rst);
-              return _context3.abrupt("return", Promise.resolve(rst));
+              return _context5.abrupt("return", Promise.resolve(rst));
 
             case 8:
-              _context3.prev = 8;
-              _context3.t0 = _context3["catch"](0);
-              errorMsg = _typeof(_context3.t0) === 'object' ? _context3.t0.message : _context3.t0;
+              _context5.prev = 8;
+              _context5.t0 = _context5["catch"](0);
+              errorMsg = _typeof(_context5.t0) === 'object' ? _context5.t0.message : _context5.t0;
               onFailed(errorMsg);
-              return _context3.abrupt("return", Promise.reject(errorMsg));
+              return _context5.abrupt("return", Promise.reject(errorMsg));
 
             case 13:
             case "end":
-              return _context3.stop();
+              return _context5.stop();
           }
         }
-      }, _callee3, null, [[0, 8]]);
+      }, _callee5, null, [[0, 8]]);
     }));
 
-    return function handleUploadPromise(_x4, _x5, _x6) {
-      return _ref4.apply(this, arguments);
+    return function handleUploadPromise(_x7, _x8, _x9) {
+      return _ref6.apply(this, arguments);
     };
   }();
 
   var handleDelete = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(index) {
+    var _ref7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(index) {
       var arr, hasError, rst;
-      return regeneratorRuntime.wrap(function _callee4$(_context4) {
+      return regeneratorRuntime.wrap(function _callee6$(_context6) {
         while (1) {
-          switch (_context4.prev = _context4.next) {
+          switch (_context6.prev = _context6.next) {
             case 0:
               limitNumError.current = null;
               arr = files;
-              _context4.next = 4;
+              _context6.next = 4;
               return setFiles(function (files) {
                 var newArr = files.filter(function (_, i) {
                   return i !== index;
@@ -414,7 +502,7 @@ var UploadPhoto = function UploadPhoto(props) {
               });
 
             case 4:
-              _context4.next = 6;
+              _context6.next = 6;
               return setMasks(function (masks) {
                 return masks.filter(function (_, i) {
                   return i !== index;
@@ -428,7 +516,7 @@ var UploadPhoto = function UploadPhoto(props) {
               });
 
               if (!hasError) {
-                _context4.next = 10;
+                _context6.next = 10;
                 break;
               }
 
@@ -441,46 +529,46 @@ var UploadPhoto = function UploadPhoto(props) {
 
                 return f.url;
               });
-              return _context4.abrupt("return", typeof onChange === 'function' && onChange(rst));
+              return _context6.abrupt("return", typeof onChange === 'function' && onChange(rst));
 
             case 10:
-              typeof onChange === 'function' && onChange(arr.map(function (_ref6) {
-                var url = _ref6.url;
+              typeof onChange === 'function' && onChange(arr.map(function (_ref8) {
+                var url = _ref8.url;
                 return url;
               }));
 
             case 11:
             case "end":
-              return _context4.stop();
+              return _context6.stop();
           }
         }
-      }, _callee4);
+      }, _callee6);
     }));
 
-    return function handleDelete(_x7) {
-      return _ref5.apply(this, arguments);
+    return function handleDelete(_x10) {
+      return _ref7.apply(this, arguments);
     };
   }();
 
   var handleReUpload = /*#__PURE__*/function () {
-    var _ref7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(index) {
+    var _ref9 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(index) {
       var _files$index, originFile, reUpUid, rst, latestFiles, fileListWithError, newList, _rst;
 
-      return regeneratorRuntime.wrap(function _callee5$(_context5) {
+      return regeneratorRuntime.wrap(function _callee7$(_context7) {
         while (1) {
-          switch (_context5.prev = _context5.next) {
+          switch (_context7.prev = _context7.next) {
             case 0:
               _files$index = files[index], originFile = _files$index.originFile, reUpUid = _files$index.uid;
 
               if (originFile) {
-                _context5.next = 3;
+                _context7.next = 3;
                 break;
               }
 
-              return _context5.abrupt("return");
+              return _context7.abrupt("return");
 
             case 3:
-              _context5.next = 5;
+              _context7.next = 5;
               return setFiles(function (files) {
                 var newFiles = _toConsumableArray(files);
 
@@ -489,14 +577,14 @@ var UploadPhoto = function UploadPhoto(props) {
               });
 
             case 5:
-              _context5.prev = 5;
-              _context5.next = 8;
+              _context7.prev = 5;
+              _context7.next = 8;
               return handleUpload(originFile);
 
             case 8:
-              rst = _context5.sent;
+              rst = _context7.sent;
               latestFiles = [];
-              _context5.next = 12;
+              _context7.next = 12;
               return setFiles(function (files) {
                 var newFiles = _toConsumableArray(files);
 
@@ -524,19 +612,19 @@ var UploadPhoto = function UploadPhoto(props) {
                 return url;
               });
               onChange && onChange(fileListWithError);
-              _context5.next = 23;
+              _context7.next = 23;
               break;
 
             case 16:
-              _context5.prev = 16;
-              _context5.t0 = _context5["catch"](5);
+              _context7.prev = 16;
+              _context7.t0 = _context7["catch"](5);
               newList = [];
-              _context5.next = 21;
+              _context7.next = 21;
               return setFiles(function (files) {
                 var newFiles = _toConsumableArray(files);
 
                 newFiles[index].status = 'failed';
-                newFiles[index].errorMsg = _context5.t0;
+                newFiles[index].errorMsg = _context7.t0;
                 newList = newFiles;
                 return newFiles;
               });
@@ -567,14 +655,14 @@ var UploadPhoto = function UploadPhoto(props) {
 
             case 24:
             case "end":
-              return _context5.stop();
+              return _context7.stop();
           }
         }
-      }, _callee5, null, [[5, 16]]);
+      }, _callee7, null, [[5, 16]]);
     }));
 
-    return function handleReUpload(_x8) {
-      return _ref7.apply(this, arguments);
+    return function handleReUpload(_x11) {
+      return _ref9.apply(this, arguments);
     };
   }();
 
@@ -667,12 +755,12 @@ var UploadPhoto = function UploadPhoto(props) {
       children: _jsxs(_Row, {
         gutter: [isMobile ? 16 : 32, 16],
         wrap: true,
-        children: [Boolean(samples === null || samples === void 0 ? void 0 : samples.length) && samples.map(function (_ref8, index) {
+        children: [Boolean(samples === null || samples === void 0 ? void 0 : samples.length) && samples.map(function (_ref10, index) {
           var _classnames, _classnames2;
 
-          var src = _ref8.src,
-              label = _ref8.label,
-              type = _ref8.type;
+          var src = _ref10.src,
+              label = _ref10.label,
+              type = _ref10.type;
           return _jsxs(_Col, {
             span: sampleSpan,
             children: [_jsx("img", {
@@ -708,7 +796,7 @@ var UploadPhoto = function UploadPhoto(props) {
       accept: "image/*,video/*,application/pdf",
       value: [],
       multiple: true,
-      capture: true
+      capture: capture
     }, void 0), _jsxs(_Space, {
       className: "".concat(prefix, "-content"),
       size: [16, 16],
@@ -732,13 +820,13 @@ var UploadPhoto = function UploadPhoto(props) {
             children: buttonText || 'Upload'
           }, void 0)
         }, void 0)]
-      }, void 0), files.map(function (_ref9, index) {
+      }, void 0), files.map(function (_ref11, index) {
         var _classnames5;
 
-        var dataUrl = _ref9.dataUrl,
-            status = _ref9.status,
-            type = _ref9.type,
-            uid = _ref9.uid;
+        var dataUrl = _ref11.dataUrl,
+            status = _ref11.status,
+            type = _ref11.type,
+            uid = _ref11.uid;
         return _jsx(_Badge, {
           count: getBadge(status, index, limit),
           children: _jsxs("div", {
@@ -806,10 +894,10 @@ function checkFileList(value) {
   return Promise.resolve();
 }
 
-UploadPhoto.formItemPropsHandler = function (_ref10) {
-  var limit = _ref10.limit,
-      previewFormater = _ref10.previewFormater,
-      label = _ref10.label;
+UploadPhoto.formItemPropsHandler = function (_ref12) {
+  var limit = _ref12.limit,
+      previewFormater = _ref12.previewFormater,
+      label = _ref12.label;
   return {
     previewFormater: previewFormater || function (value) {
       return _jsx(UploadPreview, {