@arco-design/mobile-react 2.31.2 → 2.31.3

package/umd/form/form-item.js

@@ -1,22 +1,21 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "@babel/runtime/helpers/objectWithoutPropertiesLoose", "@babel/runtime/helpers/inheritsLoose", "react", "@arco-design/mobile-utils", "./form-item-context", "../context-provider", "./type", "./utils"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "@babel/runtime/helpers/objectWithoutPropertiesLoose", "@babel/runtime/helpers/inheritsLoose", "react", "@arco-design/mobile-utils", "es6-promise", "./form-item-context", "../context-provider", "./type", "./utils", "./linked-container"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("@babel/runtime/helpers/objectWithoutPropertiesLoose"), require("@babel/runtime/helpers/inheritsLoose"), require("react"), require("@arco-design/mobile-utils"), require("./form-item-context"), require("../context-provider"), require("./type"), require("./utils"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("@babel/runtime/helpers/objectWithoutPropertiesLoose"), require("@babel/runtime/helpers/inheritsLoose"), require("react"), require("@arco-design/mobile-utils"), require("es6-promise"), require("./form-item-context"), require("../context-provider"), require("./type"), require("./utils"), require("./linked-container"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.objectWithoutPropertiesLoose, global.inheritsLoose, global.react, global.mobileUtils, global.formItemContext, global.contextProvider, global.type, global.utils);
+    factory(mod.exports, global._extends, global.objectWithoutPropertiesLoose, global.inheritsLoose, global.react, global.mobileUtils, global.es6Promise, global.formItemContext, global.contextProvider, global.type, global.utils, global.linkedContainer);
     global.formItem = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _objectWithoutPropertiesLoose2, _inheritsLoose2, _react, _mobileUtils, _formItemContext, _contextProvider, _type, _utils) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _objectWithoutPropertiesLoose2, _inheritsLoose2, _react, _mobileUtils, _es6Promise, _formItemContext, _contextProvider, _type, _utils, _linkedContainer) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
   _exports.__esModule = true;
-  _exports.DefaultPickerLinkedContainer = DefaultPickerLinkedContainer;
   _exports.default = void 0;
   _extends2 = _interopRequireDefault(_extends2);
   _objectWithoutPropertiesLoose2 = _interopRequireDefault(_objectWithoutPropertiesLoose2);
@@ -28,21 +27,6 @@
 
   function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-  function DefaultPickerLinkedContainer(_ref) {
-    var value = _ref.value;
-
-    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
-        prefixCls = _useContext.prefixCls,
-        locale = _useContext.locale;
-
-    var className = prefixCls + "-form-picker-link-container";
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: className
-    }, value && value.length ? value.join('-') : /*#__PURE__*/_react.default.createElement("span", {
-      className: className + "-placeholder"
-    }, locale == null ? void 0 : locale.Form.pickerDefaultHint));
-  }
-
   var FormItemInner = /*#__PURE__*/function (_PureComponent) {
     (0, _inheritsLoose2.default)(FormItemInner, _PureComponent);
 
@@ -56,14 +40,14 @@
       _this._errors = [];
       _this._touched = false;
 
-      _this.onValueChange = function (preStore, curStore) {
+      _this.onValueChange = function (curValue, preValue) {
         _this._touched = true;
         var shouldUpdate = _this.props.shouldUpdate;
 
         if (typeof shouldUpdate === 'function') {
           shouldUpdate({
-            preStore: preStore,
-            curStore: curStore
+            preValue: preValue,
+            curValue: curValue
           }) && _this.forceUpdate();
           return;
         }
@@ -96,7 +80,7 @@
           var fieldValidator = new _mobileUtils.Validator((_Validator = {}, _Validator[field] = rules, _Validator), {
             validateMessages: validateMessages
           });
-          return new Promise(function (resolve) {
+          return new _es6Promise.Promise(function (resolve) {
             var _fieldValidator$valid;
 
             fieldValidator.validate((_fieldValidator$valid = {}, _fieldValidator$valid[field] = value, _fieldValidator$valid), function (errorsMap) {
@@ -122,7 +106,7 @@
           });
         }
 
-        return Promise.resolve({
+        return _es6Promise.Promise.resolve({
           errors: [],
           warnings: [],
           value: value,
@@ -273,9 +257,10 @@
             currentTs: getFieldValue(field),
             onChange: this.innerTriggerFunctionWithValueFirst,
             disabled: this.props.disabled,
-            renderLinkedContainer: ((_children$props7 = children.props) == null ? void 0 : _children$props7.renderLinkedContainer) || function (val) {
-              return /*#__PURE__*/_react.default.createElement(DefaultPickerLinkedContainer, {
-                value: val
+            renderLinkedContainer: ((_children$props7 = children.props) == null ? void 0 : _children$props7.renderLinkedContainer) || function (ts, types) {
+              return /*#__PURE__*/_react.default.createElement(_linkedContainer.DefaultDatePickerLinkedContainer, {
+                ts: ts,
+                types: types
               });
             }
           };
@@ -287,7 +272,7 @@
             onChange: this.innerTriggerFunctionWithValueFirst,
             disabled: this.props.disabled,
             renderLinkedContainer: ((_children$props8 = children.props) == null ? void 0 : _children$props8.renderLinkedContainer) || function (val) {
-              return /*#__PURE__*/_react.default.createElement(DefaultPickerLinkedContainer, {
+              return /*#__PURE__*/_react.default.createElement(_linkedContainer.DefaultPickerLinkedContainer, {
                 value: val
               });
             }
@@ -355,12 +340,12 @@
         className = _props$className === void 0 ? '' : _props$className,
         rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
-    var _useContext2 = (0, _react.useContext)(_contextProvider.GlobalContext),
-        prefixCls = _useContext2.prefixCls;
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        prefixCls = _useContext.prefixCls;
 
-    var _useContext3 = (0, _react.useContext)(_formItemContext.FormItemContext),
-        layout = _useContext3.layout,
-        propsDisabled = _useContext3.disabled;
+    var _useContext2 = (0, _react.useContext)(_formItemContext.FormItemContext),
+        layout = _useContext2.layout,
+        propsDisabled = _useContext2.disabled;
 
     var _useState = (0, _react.useState)(null),
         errors = _useState[0],

package/umd/form/index.js

@@ -50,6 +50,7 @@
         onSubmitFailed = props.onSubmitFailed,
         disabled = props.disabled;
     var domRef = (0, _react.useRef)(null);
+    var initRef = (0, _react.useRef)(false);
 
     var _useForm = (0, _useForm2.default)(formInstance),
         form = _useForm[0];
@@ -63,9 +64,12 @@
       onSubmit: onSubmit,
       onSubmitFailed: onSubmitFailed
     });
-    (0, _react.useEffect)(function () {
+
+    if (!initRef.current) {
       setInitialValues(initialValues || {});
-    }, []);
+      initRef.current = true;
+    }
+
     (0, _react.useImperativeHandle)(ref, function () {
       return {
         dom: domRef.current,

package/umd/form/linked-container.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare function DefaultPickerLinkedContainer({ value }: {
+    value: (string | number)[];
+}): JSX.Element;
+export declare function DefaultDatePickerLinkedContainer({ ts, types }: {
+    ts: number;
+    types: string[];
+}): JSX.Element;

package/umd/form/linked-container.js

@@ -0,0 +1,78 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../date-picker/helper", "../context-provider"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../date-picker/helper"), require("../context-provider"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.helper, global.contextProvider);
+    global.linkedContainer = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _helper, _contextProvider) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.DefaultDatePickerLinkedContainer = DefaultDatePickerLinkedContainer;
+  _exports.DefaultPickerLinkedContainer = DefaultPickerLinkedContainer;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireWildcard(_react);
+
+  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+  function DefaultPickerLinkedContainer(_ref) {
+    var value = _ref.value;
+
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        prefixCls = _useContext.prefixCls,
+        locale = _useContext.locale;
+
+    var className = prefixCls + "-form-picker-link-container";
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, value && value.length ? value.join('-') : /*#__PURE__*/_react.default.createElement("span", {
+      className: className + "-placeholder"
+    }, locale == null ? void 0 : locale.Form.pickerDefaultHint));
+  }
+
+  function DefaultDatePickerLinkedContainer(_ref2) {
+    var ts = _ref2.ts,
+        types = _ref2.types;
+
+    var _useContext2 = (0, _react.useContext)(_contextProvider.GlobalContext),
+        prefixCls = _useContext2.prefixCls,
+        locale = _useContext2.locale;
+
+    var className = prefixCls + "-form-picker-link-container";
+    var dateTimeStr = (0, _react.useMemo)(function () {
+      return formatDateTimeStr(ts, types);
+    }, [ts, types]);
+
+    function formatDateTimeStr(timestamp, itemTypes) {
+      var dateObj = (0, _helper.convertTsToDateObj)(timestamp);
+      var validDateObj = Object.keys(dateObj).reduce(function (acc, key) {
+        var _ref3;
+
+        return (0, _extends2.default)({}, acc, itemTypes.includes(key) ? (_ref3 = {}, _ref3[key] = (0, _mobileUtils.formatDateNumber)(dateObj[key]), _ref3) : {});
+      }, {});
+      var dateStr = [validDateObj.year, validDateObj.month, validDateObj.date].filter(function (v) {
+        return v;
+      }).join('-');
+      var timeStr = [validDateObj.hour, validDateObj.minute, validDateObj.second].filter(function (v) {
+        return v;
+      }).join(':');
+      return dateStr + " " + timeStr;
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, ts ? dateTimeStr : /*#__PURE__*/_react.default.createElement("span", {
+      className: className + "-placeholder"
+    }, locale == null ? void 0 : locale.Form.pickerDefaultHint));
+  }
+});

package/umd/form/style/index.less

@@ -39,14 +39,14 @@
     }
     &-item-control {
         padding: 16px 0;
-        .arco-input-wrap, .arco-input {
+        .@{prefix}-input-wrap, .@{prefix}-input {
             padding: 0;
         }
         &-wrapper {
             width: 100%;
             flex: 1;
             position: relative;
-            .arco-input-wrap {
+            .@{prefix}-input-wrap {
                 .use-var(height, input-text-line-height);
             }
         }
@@ -75,7 +75,7 @@
 
     &-item.@{prefix}-form-item-vertical {
         display: block;
-        .arco-input-wrap {
+        .@{prefix}-input-wrap {
             .set-prop-with-rtl(padding-left, 0);
         }
         .@{prefix}-form-label-item {

package/umd/form/type.d.ts

@@ -1,5 +1,6 @@
 import { IRules } from '@arco-design/mobile-utils';
 import { ReactNode } from 'react';
+import { Promise } from 'es6-promise';
 export declare type FieldValue = any;
 export declare type FieldItem = Record<string, any>;
 export declare type ILayout = 'horizontal' | 'vertical' | 'inline';
@@ -169,19 +170,14 @@ export interface IFormInstance {
      * 校验所有表单项
      * @en Validate all fields
      */
-    validateFields: () => Promise<FieldItem>;
+    validateFields: () => Promise<IFieldError[]>;
     /**
      * 提交表单
      * @en Submit all fields
      */
     submit: () => void;
 }
-export declare type InternalFormInstance = Omit<IFormInstance, 'validateFields'> & {
-    /**
-     * 校验所有表单项
-     * @en Validate all fields
-     */
-    validateFields: () => Promise<FieldItem>;
+export declare type InternalFormInstance = IFormInstance & {
     /**
      * 获取内部方法
      * @en Get internal methods
@@ -223,8 +219,8 @@ export interface IFormItemContext {
     validateMessages?: Record<string, unknown>;
 }
 export declare type IShouldUpdateFunc = (data: {
-    preStore: FieldItem;
-    curStore: FieldItem;
+    preValue: any;
+    curValue: any;
 }) => boolean;
 export interface FormItemProps {
     /**
@@ -272,7 +268,7 @@ export interface FormItemProps {
      * 表单项是否刷新
      * @en Form item is updated
      */
-    shouldUpdate?: boolean | IShouldUpdateFunc;
+    shouldUpdate?: IShouldUpdateFunc;
     /**
      * 表单项规则
      * @en Form item rules
@@ -327,7 +323,7 @@ export interface IFormItemInnerProps {
      * 表单项是否刷新
      * @en Form item is updated
      */
-    shouldUpdate?: boolean | IShouldUpdateFunc;
+    shouldUpdate?: IShouldUpdateFunc;
     /**
      * 表单项下方节点
      * @en Form item extra node

package/umd/form/useForm.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/regenerator", "@babel/runtime/helpers/asyncToGenerator", "@babel/runtime/helpers/extends", "react"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "react", "es6-promise"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/regenerator"), require("@babel/runtime/helpers/asyncToGenerator"), require("@babel/runtime/helpers/extends"), require("react"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("es6-promise"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.regenerator, global.asyncToGenerator, global._extends, global.react);
+    factory(mod.exports, global._extends, global.react, global.es6Promise);
     global.useForm = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _regenerator, _asyncToGenerator2, _extends5, _react) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends6, _react, _es6Promise) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -18,9 +18,7 @@
   _exports.__esModule = true;
   _exports.default = useForm;
   _exports.defaultFormDataMethods = void 0;
-  _regenerator = _interopRequireDefault(_regenerator);
-  _asyncToGenerator2 = _interopRequireDefault(_asyncToGenerator2);
-  _extends5 = _interopRequireDefault(_extends5);
+  _extends6 = _interopRequireDefault(_extends6);
 
   /* eslint-disable no-console */
   var defaultFunc = function defaultFunc() {};
@@ -67,40 +65,41 @@
     this._callbacks = {};
 
     this.setFieldsValue = function (values) {
-      _this._formData = (0, _extends5.default)({}, _this._formData, values);
+      var oldValues = Object.keys(values).reduce(function (acc, key) {
+        var _extends2;
 
-      _this.notifyField(values);
+        return (0, _extends6.default)({}, acc, (_extends2 = {}, _extends2[key] = _this.getFieldValue(key), _extends2));
+      }, {});
+      _this._formData = (0, _extends6.default)({}, _this._formData, values);
+      var onValuesChange = _this._callbacks.onValuesChange;
+      onValuesChange && onValuesChange(values, _this._formData);
 
-      Object.keys(values).forEach(function (key) {
-        if (key in _this._fieldsList) {
-          var _this$_fieldsList$key;
+      _this.notifyField(values, oldValues);
 
-          (_this$_fieldsList$key = _this._fieldsList[key]) == null ? void 0 : _this$_fieldsList$key.onValueChange();
-        }
-      });
       return true;
     };
 
     this.setFieldValue = function (name, value) {
-      var _extends2, _onValuesChange, _this$notifyField;
+      var _oldValues, _extends3, _onValuesChange, _this$notifyField;
 
-      _this._formData = (0, _extends5.default)({}, _this._formData, (_extends2 = {}, _extends2[name] = value, _extends2));
+      var oldValues = (_oldValues = {}, _oldValues[name] = _this.getFieldValue(name), _oldValues);
+      _this._formData = (0, _extends6.default)({}, _this._formData, (_extends3 = {}, _extends3[name] = value, _extends3));
       var onValuesChange = _this._callbacks.onValuesChange;
       onValuesChange && onValuesChange((_onValuesChange = {}, _onValuesChange[name] = value, _onValuesChange), _this._formData);
 
-      _this.notifyField((_this$notifyField = {}, _this$notifyField[name] = value, _this$notifyField));
+      _this.notifyField((_this$notifyField = {}, _this$notifyField[name] = value, _this$notifyField), oldValues);
 
       return true;
     };
 
-    this.notifyField = function (values) {
+    this.notifyField = function (values, oldValues) {
       Object.keys(values).map(function (fieldName) {
         var _this$_fieldsList;
 
         var fieldObj = ((_this$_fieldsList = _this._fieldsList) == null ? void 0 : _this$_fieldsList[fieldName]) || null;
 
         if (fieldObj) {
-          fieldObj.onValueChange(values[fieldName]);
+          fieldObj.onValueChange(values[fieldName], oldValues[fieldName]);
         }
       });
     };
@@ -165,11 +164,11 @@
       var initialValue = self.props.initialValue;
 
       if (initialValue !== undefined && name) {
-        var _extends3, _extends4;
+        var _extends4, _extends5;
 
-        _this._initialValues = (0, _extends5.default)({}, _this._initialValues, (_extends3 = {}, _extends3[name] = initialValue, _extends3));
+        _this._initialValues = (0, _extends6.default)({}, _this._initialValues, (_extends4 = {}, _extends4[name] = initialValue, _extends4));
 
-        _this.setFieldsValue((0, _extends5.default)({}, _this._formData, (_extends4 = {}, _extends4[name] = initialValue, _extends4)));
+        _this.setFieldsValue((0, _extends6.default)({}, _this._formData, (_extends5 = {}, _extends5[name] = initialValue, _extends5)));
       }
 
       return function () {
@@ -181,7 +180,7 @@
     };
 
     this.setInitialValues = function (initVal) {
-      _this._initialValues = (0, _extends5.default)({}, initVal || {});
+      _this._initialValues = (0, _extends6.default)({}, initVal || {});
 
       _this.setFieldsValue(initVal);
     };
@@ -198,8 +197,8 @@
           return errors;
         }));
       });
-      var summaryPromise = new Promise(function (resolve, reject) {
-        Promise.all(promiseList).then(function (res) {
+      var summaryPromise = new _es6Promise.Promise(function (resolve, reject) {
+        _es6Promise.Promise.all(promiseList).then(function (res) {
           var errorResults = res.filter(function (item) {
             var _item$errors;
 
@@ -216,31 +215,20 @@
       return summaryPromise;
     };
 
-    this.submit = /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _this.validateFields().then(function (result) {
-                var onSubmit = _this._callbacks.onSubmit;
-                onSubmit == null ? void 0 : onSubmit(_this._formData, result);
-              }).catch(function (e) {
-                var onSubmitFailed = _this._callbacks.onSubmitFailed;
-
-                if (!onSubmitFailed) {
-                  return;
-                }
-
-                onSubmitFailed(_this._formData, e);
-              });
-
-            case 1:
-            case "end":
-              return _context.stop();
-          }
+    this.submit = function () {
+      _this.validateFields().then(function (result) {
+        var onSubmit = _this._callbacks.onSubmit;
+        onSubmit == null ? void 0 : onSubmit(_this._formData, result);
+      }).catch(function (e) {
+        var onSubmitFailed = _this._callbacks.onSubmitFailed;
+
+        if (!onSubmitFailed) {
+          return;
         }
-      }, _callee);
-    }));
+
+        onSubmitFailed(_this._formData, e);
+      });
+    };
 
     this.setCallbacks = function (callbacks) {
       _this._callbacks = callbacks;

package/umd/picker/index.js

@@ -129,7 +129,7 @@
       (0, _mobileUtils.nextTick)(function () {
         setLinkArgs(getCurrentValueData());
       });
-    }, []);
+    }, [value]);
 
     function hidePicker(scene) {
       setLinkVisible(false);