iglooform 2.4.13 → 2.4.17

package/es/example/index.js

@@ -64,6 +64,9 @@ var Excample = function Excample(_ref) {
   }, {
     label: 'zh-CN',
     value: 'zh-CN'
+  }, {
+    label: 'zh-TW',
+    value: 'zh-TW'
   }];
 
   var _children$props = children.props,

package/es/input/credit-card.js

@@ -88,6 +88,7 @@ var IglooCredit = function IglooCredit(props) {
       _props$cardConfig = props.cardConfig,
       cardConfig = _props$cardConfig === void 0 ? [] : _props$cardConfig,
       formChangeProps = props.onChange,
+      setFieldError = props.setFieldError,
       value = props.value;
 
   var _useState = useState(''),
@@ -147,30 +148,43 @@ var IglooCredit = function IglooCredit(props) {
   function handleOnChange(value, cardRules, formOnChange) {
     var pureNumInput = value.replace(/[^0-9]/gi, '');
 
-    if (pureNumInput.length === formValue.length && !isNaN(Number(value.substr(value.length - 1, 1)))) {
+    if (pureNumInput.length === formValue.length && value[value.length - 1] === '') {
       // 删除了空格,得删除一个数字
       pureNumInput = pureNumInput.substring(0, pureNumInput.length - 1);
     }
 
     setFormValue(pureNumInput);
-    formOnChange && formOnChange(pureNumInput); // 未必是16位
-    // if (pureNumInput.length === 17) {
-    //   return
-    // }
-
     judgeCardType(pureNumInput, cardRules);
-    setSeparateValue(separatePureNum(pureNumInput));
-  } // 处理初始化
+    setSeparateValue(separatePureNum(pureNumInput)); // 空值校验
+
+    if (!pureNumInput) {
+      formOnChange && formOnChange(pureNumInput);
+      return;
+    }
+
+    for (var i = 0; i < cardRules.length; i++) {
+      var reg = cardRules[i].reg;
+      var regObj = new RegExp(reg);
 
+      if (regObj.test(pureNumInput)) {
+        formOnChange && formOnChange(pureNumInput);
+        return;
+      }
+    }
+
+    setFieldError && setFieldError(formatMessage({
+      id: 'Credit card must be {typeNames} or {finalName}',
+      values: getErrorMessage(cardRules)
+    }));
+  }
 
   useEffect(function () {
     if (value) {
       handleOnChange(value, [].concat(_toConsumableArray(cardConfig), defaultCheck), formChangeProps);
     }
-  }, []);
+  }, [value]);
   return _jsx(_Input, _objectSpread(_objectSpread({}, omit(props, [].concat(_toConsumableArray(formMethods), ['cardConfig']))), {}, {
     suffix: cardIcon,
-    // type="number"
     className: classnames(className, 'igloo-input', 'igloo-input-credit-card'),
     value: inputSeparate,
     onChange: function onChange(e) {

package/es/input/expiry-date.js

@@ -67,8 +67,12 @@ var IglooExpiryDate = function IglooExpiryDate(props) {
   var onChangeProps = props.onChange,
       setFieldError = props.setFieldError,
       _props$value = props.value,
-      value = _props$value === void 0 ? {} : _props$value,
-      disabled = props.disabled;
+      value = _props$value === void 0 ? {
+    year: undefined,
+    month: undefined
+  } : _props$value,
+      disabled = props.disabled,
+      check = props.check;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -80,11 +84,6 @@ var IglooExpiryDate = function IglooExpiryDate(props) {
   var secondInput = useRef(null);
   var formatDeleteSpace = dateFormater.replace(/\s+/g, '');
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      everInputAll = _useState4[0],
-      setEverInputAll = _useState4[1];
-
   var _dealFormat = dealFormat(formatDeleteSpace),
       _dealFormat2 = _slicedToArray(_dealFormat, 2),
       timeInputArr = _dealFormat2[0],
@@ -95,29 +94,34 @@ var IglooExpiryDate = function IglooExpiryDate(props) {
 
   var inputValueRef = useRef({});
 
-  var _useState5 = useState({}),
-      _useState6 = _slicedToArray(_useState5, 2),
-      inputValue = _useState6[0],
-      setInput = _useState6[1];
+  var _useState3 = useState({}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      inputValue = _useState4[0],
+      setInput = _useState4[1];
 
   useEffect(function () {
     if (!value) return;
     setInput(value);
     inputValueRef.current = value;
-  }, []);
+  }, [value.year, value.month]);
   useEffect(function () {
+    if (JSON.stringify(inputValue) === '{}') return;
     var _inputValueRef$curren = inputValueRef.current,
         year = _inputValueRef$curren.year,
-        month = _inputValueRef$curren.month; // 不管值如何 统一交给rule校验
-
-    var allGet = year && month ? year.length === 2 && month.length === 2 : false;
-    if (!everInputAll && allGet) setEverInputAll(true);
-
-    if (everInputAll) {
-      onChangeProps && onChangeProps({
-        year: year,
-        month: month
-      });
+        month = _inputValueRef$curren.month;
+    var value = {
+      year: year,
+      month: month
+    };
+    var userCheck = check ? check(value) : true;
+    var compCheck = year && month ? year.length === 2 && month.length === 2 && Number(month) <= 12 : false;
+
+    if (userCheck && compCheck) {
+      onChangeProps && onChangeProps(value);
+    } else {
+      setFieldError && setFieldError(formatMessage({
+        id: 'Please enter a valid date.'
+      }));
     }
   }, [inputValue]);
 

package/es/input/input-date.js

@@ -30,7 +30,7 @@ import { LocaleContext } from '../locale';
 import classnames from 'classnames';
 import moment from 'moment';
 import './style/index';
-var dateFormater = 'DD / MM / YYYY'; // momentjs format中能出现的合法字符
+var dateFormat = 'DD / MM / YYYY'; // momentjs format中能出现的合法字符
 
 var momentLetterArr = ['A', 'a', 'd', 'D', 'H', 'h', 'm', 'M', 'Q', 's', 'w', 'X', 'Y', ' ']; // 对于每一个input的输入做一个简单的时间限制
 
@@ -72,7 +72,7 @@ var getTextWidth = function getTextWidth(str) {
 var IglooInputDate = function IglooInputDate(props) {
   // format除去空格
   var _props$format = props.format,
-      format = _props$format === void 0 ? dateFormater : _props$format,
+      format = _props$format === void 0 ? dateFormat : _props$format,
       onChangeProps = props.onChange,
       setFieldError = props.setFieldError,
       disabled = props.disabled,
@@ -94,11 +94,6 @@ var IglooInputDate = function IglooInputDate(props) {
       inputValue = _useState4[0],
       setInput = _useState4[1];
 
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      everInputAll = _useState6[0],
-      setEverInputAll = _useState6[1];
-
   var formatDeleteSpace = format.replace(/\s+/g, '');
 
   var _dealFormat = dealFormat(formatDeleteSpace),
@@ -110,24 +105,23 @@ var IglooInputDate = function IglooInputDate(props) {
       formatMessage = _useContext.formatMessage;
 
   useEffect(function () {
-    var _dealFormat3 = dealFormat(formatDeleteSpace),
-        _dealFormat4 = _slicedToArray(_dealFormat3, 2),
-        _ = _dealFormat4[0],
-        delimiter = _dealFormat4[1];
-
     if (!value) return;
-    var init = value.replace(/\s+/g, '').split(delimiter);
+    var init = value.split(delimiter);
     setInput(init);
     inputValueRef.current = init;
-  }, []);
+  }, [value]);
   useEffect(function () {
-    var currentInput = inputValueRef.current.join(delimiter); // 不管值如何 统一交给rule校验
-
-    var allGet = currentInput.length === formatDeleteSpace.length;
-    if (!everInputAll && allGet) setEverInputAll(true);
-
-    if (everInputAll || allGet) {
-      onChangeProps && onChangeProps(allGet ? moment(currentInput, formatDeleteSpace).format(format) : 'notValid');
+    if (!inputValue.length) return;
+    var currentInput = inputValueRef.current.join(delimiter);
+    var available = moment(currentInput.replace(/\s+/g, ''), formatDeleteSpace, true).isValid();
+    var value = moment(currentInput, formatDeleteSpace).format(format);
+
+    if (available) {
+      onChangeProps && onChangeProps(value);
+    } else {
+      setFieldError && setFieldError(formatMessage({
+        id: 'Please enter a valid date.'
+      }));
     }
   }, [inputValue]);
 
@@ -214,7 +208,7 @@ var IglooInputDate = function IglooInputDate(props) {
           className: "igloo-input-date-picker-input",
           placeholder: item,
           ref: ref,
-          value: inputValue[index],
+          value: (inputValue[index] || '').replace(/\s+/g, ''),
           onBlur: function onBlur(e) {
             return autoZero(e.target.value, inputValueRef.current, index, item);
           },
@@ -239,7 +233,7 @@ var IglooInputDate = function IglooInputDate(props) {
             ref: ref,
             bordered: false,
             maxLength: item.length,
-            value: inputValue[index],
+            value: (inputValue[index] || '').replace(/\s+/g, ''),
             onBlur: function onBlur(e) {
               return autoZero(e.target.value, inputValueRef.current, index, item);
             },
@@ -275,7 +269,7 @@ function checkTime(value, format) {
 
 IglooInputDate.formItemPropsHandler = function (config) {
   var _config$format = config.format,
-      format = _config$format === void 0 ? dateFormater : _config$format;
+      format = _config$format === void 0 ? dateFormat : _config$format;
   return {
     rules: [{
       validator: function validator(_, value) {

package/es/input/phone-number.js

@@ -14,7 +14,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useContext } from 'react';
+import { useState, useContext, useEffect } from 'react';
 import classnames from 'classnames';
 import invariant from 'invariant';
 import Select from '../select';
@@ -28,7 +28,6 @@ var PhoneNumber = function PhoneNumber(_ref) {
       disabled = _ref.disabled,
       value = _ref.value,
       formChangeProps = _ref.onChange,
-      setFieldValue = _ref.setFieldValue,
       style = _ref.style;
 
   var _useContext = useContext(LocaleContext),
@@ -50,6 +49,9 @@ var PhoneNumber = function PhoneNumber(_ref) {
       number = _useState4[0],
       setNumber = _useState4[1];
 
+  useEffect(function () {
+    setNumber(value ? value.phoneNumber : undefined);
+  }, [value]);
   var leftPart = Array.isArray(areaCode) ? _jsx(Select, {
     disabled: disabled,
     onChange: function onChange(e) {
@@ -78,7 +80,7 @@ var PhoneNumber = function PhoneNumber(_ref) {
     }, className),
     children: [leftPart, _jsx(_Input, {
       type: "tel",
-      defaultValue: number,
+      value: number,
       onChange: function onChange(e) {
         setNumber(e.target.value);
         formChangeProps(e.target.value ? {

package/es/locale/locale-provider.js

@@ -15,11 +15,13 @@ import zh from './zh-CN';
 import id from './id-ID';
 import vi from './vi-VN';
 import th from './th-TH';
+import zhTW from './zh-TW';
 import antdId from 'antd/es/locale/id_ID';
 import antdEn from 'antd/es/locale/en_US';
 import antdZh from 'antd/es/locale/zh_CN';
 import antdVi from 'antd/es/locale/vi_VN';
 import antdTH from 'antd/es/locale/th_TH';
+import antdZhTw from 'antd/es/locale/zh_TW';
 import antdDefault from 'antd/es/locale/default';
 import { staticLang } from './format-message';
 export var locales = {
@@ -27,14 +29,16 @@ export var locales = {
   'id-ID': id,
   'zh-CN': zh,
   'vi-VN': vi,
-  'th-TH': th
+  'th-TH': th,
+  'zh-TW': zhTW
 };
 var antdLocale = {
   'en-US': _objectSpread(_objectSpread({}, antdDefault), antdEn),
   'id-ID': _objectSpread(_objectSpread({}, antdDefault), antdId),
   'zh-CN': _objectSpread(_objectSpread({}, antdDefault), antdZh),
   'vi-VN': _objectSpread(_objectSpread({}, antdDefault), antdVi),
-  'th-TH': _objectSpread(_objectSpread({}, antdDefault), antdTH)
+  'th-TH': _objectSpread(_objectSpread({}, antdDefault), antdTH),
+  'zh-TW': _objectSpread(_objectSpread({}, antdDefault), antdZhTw)
 };
 
 var LocaleProvider = function LocaleProvider(_ref) {

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

@@ -0,0 +1,76 @@
+{
+  "1 file attached.": "附加1個文件。",
+  "1 file imported.": "導入1文件。",
+  "1 file in progress...": "1文件正在進行中......",
+  "Accept": "接受",
+  "Action": "行動",
+  "Add": "添加",
+  "Apply": "申請",
+  "Apply Columns": "申請專欄",
+  "Cancel": "取消",
+  "Clear All": "清除所有",
+  "Click to cancel sorting": "點擊取消排序",
+  "Click to sort ascending": "點擊排序升序",
+  "Click to sort descending": "點擊排序降序",
+  "Close Result Panel": "關閉結果面板",
+  "Continue": "繼續",
+  "Credit card must be {typeNames} or {finalName}": "信用卡必須是{typeNames}或{finalName}",
+  "Custom": "習慣",
+  "Customize Columns": "自定義列",
+  "Data Importing Queue": "數據導入隊列",
+  "Data Processed": "數據已處理",
+  "Data Processing...": "數據處理中。。。",
+  "Date": "日期",
+  "Drag and drop a file here": "拖放文件至此",
+  "Edit": "編輯",
+  "Error Report": "錯誤報告",
+  "Filter": "篩選",
+  "I declare that the statements I have described above are true. I further declare that the loss occured was accidental, without planning or consensus with other parties.": "我聲明我上面描述的陳述是真的。我進一步宣布發生損失是偶然的，沒有規劃或與其他方的共識。",
+  "Import": "導入",
+  "It is recommended to select no more than {colMax} metrics to ensure the default visibility of each column input.": "建議選擇不超過{colMax}指標以確保每個列輸入的默認可見性。",
+  "Last 7 Days": "過去7天",
+  "Last Day": "過去1天",
+  "Last Month": "上個月",
+  "Log in": "登錄",
+  "Next": "下一個",
+  "No preview for this file. Only support image, video or PDF file.": "不支持預覽此文件。只支持圖像，視頻或PDF文件。",
+  "Numbers only, please omit \" \" or \"-\".": "只有數字，請省略“”或“ - ”。",
+  "OK": "好",
+  "Once you’re happy with the above, and you’ve checked the declaration, please go ahead and submit your claim.": "一旦您對上述內容感到滿意，您已檢查聲明，請繼續並提交您的索賠。",
+  "Optional": "可選項",
+  "Please enter a valid date.": "請輸入有效的日期。",
+  "Please enter a valid time.": "請輸入有效的時間。",
+  "Please select": "請選擇",
+  "Please select a file type": "請選擇文件類型",
+  "Please take a moment to review what you’ve told us above.": "請花點時間查看您在上面提供給我們的內容。",
+  "Previous": "以前的",
+  "Processing": "處理中",
+  "Processing progress cannot be updated at the moment. Don’t worry! All your file data are still in progress.": "此刻無法更新處理進度。別擔心！您的所有文件數據仍在進行中。",
+  "Quantity of files should be less than {limit}": "文件的數量應小於{limit}",
+  "Reject": "拒絕",
+  "Remove": "消除",
+  "Resend OTP": "重新發送OTP.",
+  "Resend in": "重新發送",
+  "Reset All Filters": "重置所有過濾器",
+  "Result": "結果",
+  "Result: Success {success_num}; Error {fail_num}": "結果：成功{success_num};錯誤{fail_num}",
+  "Rows per page": "每頁行數",
+  "Select All": "全選",
+  "Send OTP": "發送OTP.",
+  "Submit": "提交",
+  "The file type is not supported.": "不支持文件類型。",
+  "This Month": "本月",
+  "Unselect All": "全部取消選擇",
+  "Uploading": "上傳",
+  "We support CSV or XLSX files (less than 20M each).": "我們支持CSV或XLSX文件（小於20M）。",
+  "Yes, Close": "是的，關閉",
+  "browse": "瀏覽",
+  "or": "或者",
+  "{beginIndex}-{endIndex} of {total}": "{beginIndex}  -  {endIndex} 從 {total}",
+  "{canInputNum} characters left": "{canInputNum}剩餘字符",
+  "{canInputNum} characters over": "{canInputNum}超出字符",
+  "{count} files attached.": "{count}附加文件。",
+  "{currentStep} of {allSteps}": "{allSteps}的{currentStep}",
+  "{doneNumber} files imported.": "{doneNumber}導入的文件。",
+  "{processingNumber} files in progress...": "{processingNumber}正在進行的文件。。。"
+}

package/es/locale/zh-TW.d.ts

@@ -0,0 +1,2 @@
+declare const messages: any;
+export default messages;

package/es/locale/zh-TW.js

@@ -0,0 +1,3 @@
+var messages = require('./zh-TW/messages.json');
+
+export default messages;

package/lib/example/index.js

@@ -86,6 +86,9 @@ var Excample = function Excample(_ref) {
   }, {
     label: 'zh-CN',
     value: 'zh-CN'
+  }, {
+    label: 'zh-TW',
+    value: 'zh-TW'
   }];
 
   var _children$props = children.props,

package/lib/input/credit-card.js

@@ -103,6 +103,7 @@ var IglooCredit = function IglooCredit(props) {
       _props$cardConfig = props.cardConfig,
       cardConfig = _props$cardConfig === void 0 ? [] : _props$cardConfig,
       formChangeProps = props.onChange,
+      setFieldError = props.setFieldError,
       value = props.value;
 
   var _useState = (0, _react.useState)(''),
@@ -162,30 +163,43 @@ var IglooCredit = function IglooCredit(props) {
   function handleOnChange(value, cardRules, formOnChange) {
     var pureNumInput = value.replace(/[^0-9]/gi, '');
 
-    if (pureNumInput.length === formValue.length && !isNaN(Number(value.substr(value.length - 1, 1)))) {
+    if (pureNumInput.length === formValue.length && value[value.length - 1] === '') {
       // 删除了空格,得删除一个数字
       pureNumInput = pureNumInput.substring(0, pureNumInput.length - 1);
     }
 
     setFormValue(pureNumInput);
-    formOnChange && formOnChange(pureNumInput); // 未必是16位
-    // if (pureNumInput.length === 17) {
-    //   return
-    // }
-
     judgeCardType(pureNumInput, cardRules);
-    setSeparateValue(separatePureNum(pureNumInput));
-  } // 处理初始化
+    setSeparateValue(separatePureNum(pureNumInput)); // 空值校验
+
+    if (!pureNumInput) {
+      formOnChange && formOnChange(pureNumInput);
+      return;
+    }
+
+    for (var i = 0; i < cardRules.length; i++) {
+      var reg = cardRules[i].reg;
+      var regObj = new RegExp(reg);
 
+      if (regObj.test(pureNumInput)) {
+        formOnChange && formOnChange(pureNumInput);
+        return;
+      }
+    }
+
+    setFieldError && setFieldError(formatMessage({
+      id: 'Credit card must be {typeNames} or {finalName}',
+      values: getErrorMessage(cardRules)
+    }));
+  }
 
   (0, _react.useEffect)(function () {
     if (value) {
       handleOnChange(value, [].concat(_toConsumableArray(cardConfig), defaultCheck), formChangeProps);
     }
-  }, []);
+  }, [value]);
   return (0, _jsxRuntime.jsx)(_input.default, _objectSpread(_objectSpread({}, (0, _omit.default)(props, [].concat(_toConsumableArray(_formMethods.default), ['cardConfig']))), {}, {
     suffix: cardIcon,
-    // type="number"
     className: (0, _classnames.default)(className, 'igloo-input', 'igloo-input-credit-card'),
     value: inputSeparate,
     onChange: function onChange(e) {

package/lib/input/expiry-date.js

@@ -83,8 +83,12 @@ var IglooExpiryDate = function IglooExpiryDate(props) {
   var onChangeProps = props.onChange,
       setFieldError = props.setFieldError,
       _props$value = props.value,
-      value = _props$value === void 0 ? {} : _props$value,
-      disabled = props.disabled;
+      value = _props$value === void 0 ? {
+    year: undefined,
+    month: undefined
+  } : _props$value,
+      disabled = props.disabled,
+      check = props.check;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -96,11 +100,6 @@ var IglooExpiryDate = function IglooExpiryDate(props) {
   var secondInput = (0, _react.useRef)(null);
   var formatDeleteSpace = dateFormater.replace(/\s+/g, '');
 
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      everInputAll = _useState4[0],
-      setEverInputAll = _useState4[1];
-
   var _dealFormat = dealFormat(formatDeleteSpace),
       _dealFormat2 = _slicedToArray(_dealFormat, 2),
       timeInputArr = _dealFormat2[0],
@@ -111,29 +110,34 @@ var IglooExpiryDate = function IglooExpiryDate(props) {
 
   var inputValueRef = (0, _react.useRef)({});
 
-  var _useState5 = (0, _react.useState)({}),
-      _useState6 = _slicedToArray(_useState5, 2),
-      inputValue = _useState6[0],
-      setInput = _useState6[1];
+  var _useState3 = (0, _react.useState)({}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      inputValue = _useState4[0],
+      setInput = _useState4[1];
 
   (0, _react.useEffect)(function () {
     if (!value) return;
     setInput(value);
     inputValueRef.current = value;
-  }, []);
+  }, [value.year, value.month]);
   (0, _react.useEffect)(function () {
+    if (JSON.stringify(inputValue) === '{}') return;
     var _inputValueRef$curren = inputValueRef.current,
         year = _inputValueRef$curren.year,
-        month = _inputValueRef$curren.month; // 不管值如何 统一交给rule校验
-
-    var allGet = year && month ? year.length === 2 && month.length === 2 : false;
-    if (!everInputAll && allGet) setEverInputAll(true);
-
-    if (everInputAll) {
-      onChangeProps && onChangeProps({
-        year: year,
-        month: month
-      });
+        month = _inputValueRef$curren.month;
+    var value = {
+      year: year,
+      month: month
+    };
+    var userCheck = check ? check(value) : true;
+    var compCheck = year && month ? year.length === 2 && month.length === 2 && Number(month) <= 12 : false;
+
+    if (userCheck && compCheck) {
+      onChangeProps && onChangeProps(value);
+    } else {
+      setFieldError && setFieldError(formatMessage({
+        id: 'Please enter a valid date.'
+      }));
     }
   }, [inputValue]);
 

package/lib/input/input-date.js

@@ -47,7 +47,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var dateFormater = 'DD / MM / YYYY'; // momentjs format中能出现的合法字符
+var dateFormat = 'DD / MM / YYYY'; // momentjs format中能出现的合法字符
 
 var momentLetterArr = ['A', 'a', 'd', 'D', 'H', 'h', 'm', 'M', 'Q', 's', 'w', 'X', 'Y', ' ']; // 对于每一个input的输入做一个简单的时间限制
 
@@ -89,7 +89,7 @@ var getTextWidth = function getTextWidth(str) {
 var IglooInputDate = function IglooInputDate(props) {
   // format除去空格
   var _props$format = props.format,
-      format = _props$format === void 0 ? dateFormater : _props$format,
+      format = _props$format === void 0 ? dateFormat : _props$format,
       onChangeProps = props.onChange,
       setFieldError = props.setFieldError,
       disabled = props.disabled,
@@ -111,11 +111,6 @@ var IglooInputDate = function IglooInputDate(props) {
       inputValue = _useState4[0],
       setInput = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      everInputAll = _useState6[0],
-      setEverInputAll = _useState6[1];
-
   var formatDeleteSpace = format.replace(/\s+/g, '');
 
   var _dealFormat = dealFormat(formatDeleteSpace),
@@ -127,24 +122,23 @@ var IglooInputDate = function IglooInputDate(props) {
       formatMessage = _useContext.formatMessage;
 
   (0, _react.useEffect)(function () {
-    var _dealFormat3 = dealFormat(formatDeleteSpace),
-        _dealFormat4 = _slicedToArray(_dealFormat3, 2),
-        _ = _dealFormat4[0],
-        delimiter = _dealFormat4[1];
-
     if (!value) return;
-    var init = value.replace(/\s+/g, '').split(delimiter);
+    var init = value.split(delimiter);
     setInput(init);
     inputValueRef.current = init;
-  }, []);
+  }, [value]);
   (0, _react.useEffect)(function () {
-    var currentInput = inputValueRef.current.join(delimiter); // 不管值如何 统一交给rule校验
-
-    var allGet = currentInput.length === formatDeleteSpace.length;
-    if (!everInputAll && allGet) setEverInputAll(true);
-
-    if (everInputAll || allGet) {
-      onChangeProps && onChangeProps(allGet ? (0, _moment.default)(currentInput, formatDeleteSpace).format(format) : 'notValid');
+    if (!inputValue.length) return;
+    var currentInput = inputValueRef.current.join(delimiter);
+    var available = (0, _moment.default)(currentInput.replace(/\s+/g, ''), formatDeleteSpace, true).isValid();
+    var value = (0, _moment.default)(currentInput, formatDeleteSpace).format(format);
+
+    if (available) {
+      onChangeProps && onChangeProps(value);
+    } else {
+      setFieldError && setFieldError(formatMessage({
+        id: 'Please enter a valid date.'
+      }));
     }
   }, [inputValue]);
 
@@ -231,7 +225,7 @@ var IglooInputDate = function IglooInputDate(props) {
           className: "igloo-input-date-picker-input",
           placeholder: item,
           ref: ref,
-          value: inputValue[index],
+          value: (inputValue[index] || '').replace(/\s+/g, ''),
           onBlur: function onBlur(e) {
             return autoZero(e.target.value, inputValueRef.current, index, item);
           },
@@ -256,7 +250,7 @@ var IglooInputDate = function IglooInputDate(props) {
             ref: ref,
             bordered: false,
             maxLength: item.length,
-            value: inputValue[index],
+            value: (inputValue[index] || '').replace(/\s+/g, ''),
             onBlur: function onBlur(e) {
               return autoZero(e.target.value, inputValueRef.current, index, item);
             },
@@ -292,7 +286,7 @@ function checkTime(value, format) {
 
 IglooInputDate.formItemPropsHandler = function (config) {
   var _config$format = config.format,
-      format = _config$format === void 0 ? dateFormater : _config$format;
+      format = _config$format === void 0 ? dateFormat : _config$format;
   return {
     rules: [{
       validator: function validator(_, value) {

package/lib/input/phone-number.js

@@ -44,7 +44,6 @@ var PhoneNumber = function PhoneNumber(_ref) {
       disabled = _ref.disabled,
       value = _ref.value,
       formChangeProps = _ref.onChange,
-      setFieldValue = _ref.setFieldValue,
       style = _ref.style;
 
   var _useContext = (0, _react.useContext)(_locale.LocaleContext),
@@ -66,6 +65,9 @@ var PhoneNumber = function PhoneNumber(_ref) {
       number = _useState4[0],
       setNumber = _useState4[1];
 
+  (0, _react.useEffect)(function () {
+    setNumber(value ? value.phoneNumber : undefined);
+  }, [value]);
   var leftPart = Array.isArray(areaCode) ? (0, _jsxRuntime.jsx)(_select.default, {
     disabled: disabled,
     onChange: function onChange(e) {
@@ -94,7 +96,7 @@ var PhoneNumber = function PhoneNumber(_ref) {
     }, className),
     children: [leftPart, (0, _jsxRuntime.jsx)(_input.default, {
       type: "tel",
-      defaultValue: number,
+      value: number,
       onChange: function onChange(e) {
         setNumber(e.target.value);
         formChangeProps(e.target.value ? {

package/lib/locale/locale-provider.js

@@ -25,6 +25,8 @@ var _viVN = _interopRequireDefault(require("./vi-VN"));
 
 var _thTH = _interopRequireDefault(require("./th-TH"));
 
+var _zhTW = _interopRequireDefault(require("./zh-TW"));
+
 var _id_ID = _interopRequireDefault(require("antd/es/locale/id_ID"));
 
 var _en_US = _interopRequireDefault(require("antd/es/locale/en_US"));
@@ -35,6 +37,8 @@ var _vi_VN = _interopRequireDefault(require("antd/es/locale/vi_VN"));
 
 var _th_TH = _interopRequireDefault(require("antd/es/locale/th_TH"));
 
+var _zh_TW = _interopRequireDefault(require("antd/es/locale/zh_TW"));
+
 var _default2 = _interopRequireDefault(require("antd/es/locale/default"));
 
 var _formatMessage = require("./format-message");
@@ -52,7 +56,8 @@ var locales = {
   'id-ID': _idID.default,
   'zh-CN': _zhCN.default,
   'vi-VN': _viVN.default,
-  'th-TH': _thTH.default
+  'th-TH': _thTH.default,
+  'zh-TW': _zhTW.default
 };
 exports.locales = locales;
 var antdLocale = {
@@ -60,7 +65,8 @@ var antdLocale = {
   'id-ID': _objectSpread(_objectSpread({}, _default2.default), _id_ID.default),
   'zh-CN': _objectSpread(_objectSpread({}, _default2.default), _zh_CN.default),
   'vi-VN': _objectSpread(_objectSpread({}, _default2.default), _vi_VN.default),
-  'th-TH': _objectSpread(_objectSpread({}, _default2.default), _th_TH.default)
+  'th-TH': _objectSpread(_objectSpread({}, _default2.default), _th_TH.default),
+  'zh-TW': _objectSpread(_objectSpread({}, _default2.default), _zh_TW.default)
 };
 
 var LocaleProvider = function LocaleProvider(_ref) {

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

@@ -0,0 +1,76 @@
+{
+  "1 file attached.": "附加1個文件。",
+  "1 file imported.": "導入1文件。",
+  "1 file in progress...": "1文件正在進行中......",
+  "Accept": "接受",
+  "Action": "行動",
+  "Add": "添加",
+  "Apply": "申請",
+  "Apply Columns": "申請專欄",
+  "Cancel": "取消",
+  "Clear All": "清除所有",
+  "Click to cancel sorting": "點擊取消排序",
+  "Click to sort ascending": "點擊排序升序",
+  "Click to sort descending": "點擊排序降序",
+  "Close Result Panel": "關閉結果面板",
+  "Continue": "繼續",
+  "Credit card must be {typeNames} or {finalName}": "信用卡必須是{typeNames}或{finalName}",
+  "Custom": "習慣",
+  "Customize Columns": "自定義列",
+  "Data Importing Queue": "數據導入隊列",
+  "Data Processed": "數據已處理",
+  "Data Processing...": "數據處理中。。。",
+  "Date": "日期",
+  "Drag and drop a file here": "拖放文件至此",
+  "Edit": "編輯",
+  "Error Report": "錯誤報告",
+  "Filter": "篩選",
+  "I declare that the statements I have described above are true. I further declare that the loss occured was accidental, without planning or consensus with other parties.": "我聲明我上面描述的陳述是真的。我進一步宣布發生損失是偶然的，沒有規劃或與其他方的共識。",
+  "Import": "導入",
+  "It is recommended to select no more than {colMax} metrics to ensure the default visibility of each column input.": "建議選擇不超過{colMax}指標以確保每個列輸入的默認可見性。",
+  "Last 7 Days": "過去7天",
+  "Last Day": "過去1天",
+  "Last Month": "上個月",
+  "Log in": "登錄",
+  "Next": "下一個",
+  "No preview for this file. Only support image, video or PDF file.": "不支持預覽此文件。只支持圖像，視頻或PDF文件。",
+  "Numbers only, please omit \" \" or \"-\".": "只有數字，請省略“”或“ - ”。",
+  "OK": "好",
+  "Once you’re happy with the above, and you’ve checked the declaration, please go ahead and submit your claim.": "一旦您對上述內容感到滿意，您已檢查聲明，請繼續並提交您的索賠。",
+  "Optional": "可選項",
+  "Please enter a valid date.": "請輸入有效的日期。",
+  "Please enter a valid time.": "請輸入有效的時間。",
+  "Please select": "請選擇",
+  "Please select a file type": "請選擇文件類型",
+  "Please take a moment to review what you’ve told us above.": "請花點時間查看您在上面提供給我們的內容。",
+  "Previous": "以前的",
+  "Processing": "處理中",
+  "Processing progress cannot be updated at the moment. Don’t worry! All your file data are still in progress.": "此刻無法更新處理進度。別擔心！您的所有文件數據仍在進行中。",
+  "Quantity of files should be less than {limit}": "文件的數量應小於{limit}",
+  "Reject": "拒絕",
+  "Remove": "消除",
+  "Resend OTP": "重新發送OTP.",
+  "Resend in": "重新發送",
+  "Reset All Filters": "重置所有過濾器",
+  "Result": "結果",
+  "Result: Success {success_num}; Error {fail_num}": "結果：成功{success_num};錯誤{fail_num}",
+  "Rows per page": "每頁行數",
+  "Select All": "全選",
+  "Send OTP": "發送OTP.",
+  "Submit": "提交",
+  "The file type is not supported.": "不支持文件類型。",
+  "This Month": "本月",
+  "Unselect All": "全部取消選擇",
+  "Uploading": "上傳",
+  "We support CSV or XLSX files (less than 20M each).": "我們支持CSV或XLSX文件（小於20M）。",
+  "Yes, Close": "是的，關閉",
+  "browse": "瀏覽",
+  "or": "或者",
+  "{beginIndex}-{endIndex} of {total}": "{beginIndex}  -  {endIndex} 從 {total}",
+  "{canInputNum} characters left": "{canInputNum}剩餘字符",
+  "{canInputNum} characters over": "{canInputNum}超出字符",
+  "{count} files attached.": "{count}附加文件。",
+  "{currentStep} of {allSteps}": "{allSteps}的{currentStep}",
+  "{doneNumber} files imported.": "{doneNumber}導入的文件。",
+  "{processingNumber} files in progress...": "{processingNumber}正在進行的文件。。。"
+}

package/lib/locale/zh-TW.d.ts

@@ -0,0 +1,2 @@
+declare const messages: any;
+export default messages;

package/lib/locale/zh-TW.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var messages = require('./zh-TW/messages.json');
+
+var _default = messages;
+exports.default = _default;

package/package.json

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