iglooform 2.4.18 → 2.4.22

package/es/form/element/index.js

@@ -307,7 +307,9 @@ var Element = function Element(_ref) {
             className: "igloo-element-preview-value",
             children: [error && !!error.length && _jsx(AlertFilled, {
               className: "igloo-element-preview-value-icon"
-            }, void 0), previewFormater ? previewFormater(value, form) : value || '-']
+            }, void 0), _jsx("div", {
+              children: previewFormater ? previewFormater(value, form) : _typeof(value) === 'object' ? JSON.stringify(value) : value
+            }, void 0)]
           }, void 0)]
         }, void 0)
       }), void 0)

package/es/free-form/element/index.js

@@ -262,7 +262,9 @@ var Element = function Element(props) {
             className: "igloo-freeform-element-preview-value",
             children: [error && !!error.length && _jsx(AlertFilled, {
               className: "igloo-freeform-element-preview-value-icon"
-            }, void 0), previewFormater ? previewFormater(value, form) : value || '-']
+            }, void 0), _jsx("div", {
+              children: previewFormater ? previewFormater(value, form) : _typeof(value) === 'object' ? JSON.stringify(value) : value
+            }, void 0)]
           }, void 0)]
         }, void 0)
       }), void 0)

package/es/input/credit-card.js

@@ -214,7 +214,8 @@ function checkCard(value, cardRules) {
 }
 
 IglooCredit.formItemPropsHandler = function (config) {
-  var cardConfig = config.cardConfig;
+  var _config$cardConfig = config.cardConfig,
+      cardConfig = _config$cardConfig === void 0 ? [] : _config$cardConfig;
   return {
     rules: [{
       validator: function validator(_, value) {

package/es/input/expiry-date.js

@@ -280,7 +280,12 @@ IglooExpiryDate.formItemPropsHandler = function (config) {
       validator: function validator(_, value) {
         return checkTime(value, check);
       }
-    }]
+    }],
+    previewFormater: function previewFormater(_ref2) {
+      var year = _ref2.year,
+          month = _ref2.month;
+      return "".concat(month, "/").concat(year);
+    }
   };
 };
 

package/es/locale/zh-TW/messages.json

@@ -70,7 +70,7 @@
   "{canInputNum} characters left": "{canInputNum}剩餘字符",
   "{canInputNum} characters over": "{canInputNum}超出字符",
   "{count} files attached.": "{count}附加文件。",
-  "{currentStep} of {allSteps}": "{allSteps}的{currentStep}",
+  "{currentStep} of {allSteps}": "{currentStep} / {allSteps}",
   "{doneNumber} files imported.": "{doneNumber}導入的文件。",
   "{processingNumber} files in progress...": "{processingNumber}正在進行的文件。。。"
 }

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,40 +130,40 @@ 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,
@@ -125,7 +171,7 @@ var UploadPhoto = function UploadPhoto(props) {
       id = props.id,
       validateField = props.validateField,
       _props$capture = props.capture,
-      capture = _props$capture === void 0 ? true : _props$capture;
+      capture = _props$capture === void 0 ? false : _props$capture;
 
   var _useContext2 = useContext(LocaleContext),
       formatMessage = _useContext2.formatMessage;
@@ -134,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];
@@ -157,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);
       });
     };
@@ -234,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);
@@ -247,7 +333,7 @@ var UploadPhoto = function UploadPhoto(props) {
               type = classifyType(mimeType);
 
               if (!(type === 'unknown')) {
-                _context2.next = 9;
+                _context4.next = 9;
                 break;
               }
 
@@ -256,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;
               }
 
@@ -272,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;
@@ -287,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) {
@@ -350,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;
@@ -416,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;
@@ -430,7 +516,7 @@ var UploadPhoto = function UploadPhoto(props) {
               });
 
               if (!hasError) {
-                _context4.next = 10;
+                _context6.next = 10;
                 break;
               }
 
@@ -443,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);
 
@@ -491,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);
 
@@ -526,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;
               });
@@ -569,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);
     };
   }();
 
@@ -669,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", {
@@ -734,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", {
@@ -808,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, {

package/lib/form/element/index.js

@@ -336,7 +336,9 @@ var Element = function Element(_ref) {
             className: "igloo-element-preview-value",
             children: [error && !!error.length && (0, _jsxRuntime.jsx)(_iglooicon.AlertFilled, {
               className: "igloo-element-preview-value-icon"
-            }, void 0), previewFormater ? previewFormater(value, form) : value || '-']
+            }, void 0), (0, _jsxRuntime.jsx)("div", {
+              children: previewFormater ? previewFormater(value, form) : _typeof(value) === 'object' ? JSON.stringify(value) : value
+            }, void 0)]
           }, void 0)]
         }, void 0)
       }), void 0)

package/lib/free-form/element/index.js

@@ -288,7 +288,9 @@ var Element = function Element(props) {
             className: "igloo-freeform-element-preview-value",
             children: [error && !!error.length && (0, _jsxRuntime.jsx)(_iglooicon.AlertFilled, {
               className: "igloo-freeform-element-preview-value-icon"
-            }, void 0), previewFormater ? previewFormater(value, form) : value || '-']
+            }, void 0), (0, _jsxRuntime.jsx)("div", {
+              children: previewFormater ? previewFormater(value, form) : _typeof(value) === 'object' ? JSON.stringify(value) : value
+            }, void 0)]
           }, void 0)]
         }, void 0)
       }), void 0)

package/lib/input/credit-card.js

@@ -229,7 +229,8 @@ function checkCard(value, cardRules) {
 }
 
 IglooCredit.formItemPropsHandler = function (config) {
-  var cardConfig = config.cardConfig;
+  var _config$cardConfig = config.cardConfig,
+      cardConfig = _config$cardConfig === void 0 ? [] : _config$cardConfig;
   return {
     rules: [{
       validator: function validator(_, value) {

package/lib/input/expiry-date.js

@@ -296,7 +296,12 @@ IglooExpiryDate.formItemPropsHandler = function (config) {
       validator: function validator(_, value) {
         return checkTime(value, check);
       }
-    }]
+    }],
+    previewFormater: function previewFormater(_ref2) {
+      var year = _ref2.year,
+          month = _ref2.month;
+      return "".concat(month, "/").concat(year);
+    }
   };
 };
 

package/lib/locale/zh-TW/messages.json

@@ -70,7 +70,7 @@
   "{canInputNum} characters left": "{canInputNum}剩餘字符",
   "{canInputNum} characters over": "{canInputNum}超出字符",
   "{count} files attached.": "{count}附加文件。",
-  "{currentStep} of {allSteps}": "{allSteps}的{currentStep}",
+  "{currentStep} of {allSteps}": "{currentStep} / {allSteps}",
   "{doneNumber} files imported.": "{doneNumber}導入的文件。",
   "{processingNumber} files in progress...": "{processingNumber}正在進行的文件。。。"
 }

package/lib/upload-photo/index.js

@@ -94,6 +94,52 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 var useBreakpoint = _grid.default.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;
 
@@ -117,40 +163,40 @@ 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,
@@ -158,7 +204,7 @@ var UploadPhoto = function UploadPhoto(props) {
       id = props.id,
       validateField = props.validateField,
       _props$capture = props.capture,
-      capture = _props$capture === void 0 ? true : _props$capture;
+      capture = _props$capture === void 0 ? false : _props$capture;
 
   var _useContext2 = (0, _react.useContext)(_locale.LocaleContext),
       formatMessage = _useContext2.formatMessage;
@@ -167,17 +213,7 @@ var UploadPhoto = function UploadPhoto(props) {
       _useState2 = _slicedToArray(_useState, 1),
       isMobile = _useState2[0];
 
-  var _useState3 = (0, _react.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 = (0, _react.useState)([]),
       _useState4 = _slicedToArray(_useState3, 2),
       files = _useState4[0],
       setFiles = _useState4[1];
@@ -190,14 +226,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);
+    });
+  };
+
+  (0, _react.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 = (0, _react.useMemo)(function () {
     return "igloo-upload-photo-input-".concat(Math.random());
   }, []);
   var uploadIndex = (0, _react.useRef)((value === null || value === void 0 ? void 0 : value.length) ? value.length : 0);
   (0, _react.useEffect)(function () {
     return function () {
-      files.forEach(function (_ref2) {
-        var dataUrl = _ref2.dataUrl;
+      files.forEach(function (_ref4) {
+        var dataUrl = _ref4.dataUrl;
         URL.revokeObjectURL(dataUrl);
       });
     };
@@ -267,12 +353,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);
@@ -280,7 +366,7 @@ var UploadPhoto = function UploadPhoto(props) {
               type = (0, _tools.classifyType)(mimeType);
 
               if (!(type === 'unknown')) {
-                _context2.next = 9;
+                _context4.next = 9;
                 break;
               }
 
@@ -289,11 +375,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;
               }
 
@@ -305,7 +391,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;
@@ -320,7 +406,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) {
@@ -383,63 +469,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;
@@ -449,7 +535,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;
@@ -463,7 +549,7 @@ var UploadPhoto = function UploadPhoto(props) {
               });
 
               if (!hasError) {
-                _context4.next = 10;
+                _context6.next = 10;
                 break;
               }
 
@@ -476,46 +562,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);
 
@@ -524,14 +610,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);
 
@@ -559,19 +645,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;
               });
@@ -602,14 +688,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);
     };
   }();
 
@@ -703,12 +789,12 @@ var UploadPhoto = function UploadPhoto(props) {
       children: (0, _jsxRuntime.jsxs)(_row.default, {
         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 (0, _jsxRuntime.jsxs)(_col.default, {
             span: sampleSpan,
             children: [(0, _jsxRuntime.jsx)("img", {
@@ -768,13 +854,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 (0, _jsxRuntime.jsx)(_badge.default, {
           count: getBadge(status, index, limit),
           children: (0, _jsxRuntime.jsxs)("div", {
@@ -842,10 +928,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 (0, _jsxRuntime.jsx)(_uploadPreview.default, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iglooform",
-  "version": "2.4.18",
+  "version": "2.4.22",
   "scripts": {
     "start": "dumi dev",
     "build-dev": "dumi build",