@arco-design/mobile-react 2.24.2 → 2.25.1

package/cjs/form/type.d.ts

@@ -0,0 +1,371 @@
+import { IRules } from '@arco-design/mobile-utils';
+import { ReactNode } from 'react';
+export declare type FieldValue = any;
+export declare type FieldItem = Record<string, any>;
+export declare type ILayout = 'horizontal' | 'vertical' | 'inline';
+export declare enum FormInternalComponentType {
+    Input = "Input",
+    Textarea = "Textarea",
+    Checkbox = "Checkbox",
+    CheckboxGroup = "CheckboxGroup",
+    DatePicker = "DatePicker",
+    Picker = "Picker",
+    Radio = "Radio",
+    RadioGroup = "RadioGroup",
+    Slider = "Slider",
+    Switch = "Switch",
+    ImagePicker = "ImagePicker",
+    Rate = "Rate",
+    Stepper = "Stepper"
+}
+export interface FormProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 表单项布局
+     * @en Form item layout
+     * @default "horizontal"
+     */
+    layout?: 'horizontal' | 'vertical' | 'inline';
+    /**
+     * 表单实例
+     * @en Form instance
+     */
+    form?: IFormInstance;
+    /**
+     * 表单初始数据
+     * @en Form initial value
+     */
+    initialValues?: FieldItem;
+    children: React.ReactNodeArray | ReactNode;
+    /**
+     * 表单项数据变化时的回调
+     * @en Callback when the form item value changes
+     */
+    onValuesChange?: Callbacks['onValuesChange'];
+    /**
+     * 表单项数据变化时的回调
+     * @en Callback when the form is submitted
+     */
+    onSubmit?: Callbacks['onSubmit'];
+    /**
+     * 表单项数据变化时的回调
+     * @en Callback when the form is submitted failed
+     */
+    onSubmitFailed?: Callbacks['onSubmitFailed'];
+    /**
+     * 表单禁止输入
+     * @en disable all form items
+     */
+    disabled?: boolean;
+}
+export interface IFieldError {
+    value?: FieldValue;
+    errors?: ReactNode[];
+    warnings?: ReactNode[];
+    field?: string;
+    dom?: HTMLDivElement | null;
+}
+export interface IFormDataMethods {
+    /**
+     * 设置多个表单项值
+     * @en Set multiple field value
+     */
+    setFieldsValue: (values: FieldItem) => boolean;
+    /**
+     * 设置单个表单项值
+     * @en Set field value
+     */
+    setFieldValue: (name: string, value: FieldValue) => boolean;
+    /**
+     * 获取多个表单项值
+     * @en Get multiple field value
+     */
+    getFieldsValue: (names?: string[]) => FieldItem;
+    /**
+     * 获取单个表单项值
+     * @en Get field value
+     */
+    getFieldValue: (name: string) => FieldValue;
+    /**
+     * 注册表单项
+     * @en Register field
+     */
+    registerField: (name: string, self: ReactNode) => () => void;
+}
+export declare enum ValidateStatus {
+    Init = "init",
+    Error = "error",
+    Warning = "warning",
+    Validating = "validating",
+    Success = "success"
+}
+export interface Callbacks {
+    /**
+     * 表单项数据变化时的回调
+     * @en Callback when the form item value changes
+     */
+    onValuesChange?: (changedValues: FieldValue, values: FieldValue) => void;
+    /**
+     * 表单项数据变化时的回调
+     * @en Callback when the form is submitted
+     */
+    onSubmit?: (values: FieldValue, otherInfo?: IFieldError[]) => void;
+    /**
+     * 表单项数据变化时的回调
+     * @en Callback when the form is submitted failed
+     */
+    onSubmitFailed?: (values: FieldValue, errorInfo: IFieldError[] | Error) => void;
+}
+export interface InternalHooks {
+    /**
+     * 注册表单项
+     * @en Register field
+     */
+    registerField: (name: string, self: ReactNode) => () => void;
+    setInitialValues: (values: FieldItem) => void;
+    setCallbacks: (callbacks: Callbacks) => void;
+}
+export interface IFormInstance {
+    /**
+     * 获取单个表单项值
+     * @en Get field value
+     */
+    getFieldValue: (name: string) => FieldValue;
+    /**
+     * 获取多个表单项值
+     * @en Get multiple field value
+     */
+    getFieldsValue(name?: string[]): FieldItem;
+    /**
+     * 获取单个表单项的错误
+     * @en Get field errors
+     */
+    getFieldError(name: string): ReactNode[];
+    /**
+     * 重置表单项
+     * @en Reset fields
+     */
+    resetFields: () => void;
+    /**
+     * 设置多个表单项值
+     * @en Set multiple field value
+     */
+    setFieldsValue: (value: FieldItem) => void;
+    /**
+     * 校验所有表单项
+     * @en Validate all fields
+     */
+    validateFields: () => Promise<FieldItem>;
+    /**
+     * 提交表单
+     * @en Submit all fields
+     */
+    submit: () => void;
+}
+export declare type InternalFormInstance = Omit<IFormInstance, 'validateFields'> & {
+    /**
+     * 校验所有表单项
+     * @en Validate all fields
+     */
+    validateFields: () => Promise<FieldItem>;
+    /**
+     * 获取内部方法
+     * @en Get internal methods
+     */
+    getInternalHooks: () => InternalHooks;
+};
+export interface FormRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLFormElement | null;
+    /**
+     * Form对象实例
+     * @en Form object instance
+     */
+    form: IFormInstance;
+}
+export interface IFormItemContext {
+    /**
+     * Form对象实例
+     * @en Form object instance
+     */
+    form: InternalFormInstance;
+    /**
+     * 表单布局方式
+     * @en Form layout
+     */
+    layout: 'horizontal' | 'vertical' | 'inline';
+    /**
+     * 表单是否禁用
+     * @en Whether form is disabled
+     */
+    disabled?: boolean;
+    /**
+     * 表单校验项定义
+     * @en Validating message of form
+     */
+    validateMessages?: Record<string, unknown>;
+}
+export declare type IShouldUpdateFunc = (data: {
+    preStore: FieldItem;
+    curStore: FieldItem;
+}) => boolean;
+export interface FormItemProps {
+    /**
+     * 表单项名
+     * @en The form item name
+     */
+    label: ReactNode;
+    /**
+     * 表单项Stylesheet
+     * @en The form item stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 表单项样式
+     * @en The form item class name
+     */
+    className?: string;
+    /**
+     * 表单项字段
+     * @en Form item field
+     */
+    field: string;
+    /**
+     * 表单项是否必填
+     * @en Whether Form item is required
+     */
+    required?: boolean;
+    /**
+     * 表单项是否禁用
+     * @en Whether Form item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * 表单项布局
+     * @en Form item layout
+     * @default "horizontal"
+     */
+    layout?: 'horizontal' | 'vertical' | 'inline';
+    /**
+     * 表单项子节点
+     * @en Form item children
+     */
+    children: JSX.Element;
+    /**
+     * 表单项是否刷新
+     * @en Form item is updated
+     */
+    shouldUpdate?: boolean | IShouldUpdateFunc;
+    /**
+     * 表单项规则
+     * @en Form item rules
+     */
+    rules?: IRules[];
+    /**
+     * 表单项下方节点
+     * @en Form item extra node
+     */
+    extra?: JSX.Element;
+    /**
+     * 触发事件更新事件名称
+     * @en The function name when updating data
+     * @default "onChange"
+     */
+    trigger?: string;
+    /**
+     * 自定义必填标识
+     * @en The required icon node
+     */
+    requiredIcon?: ReactNode;
+    /**
+     * 表单项初始数据
+     * @en The initial value of form item
+     */
+    initialValue?: FieldValue;
+    /**
+     * 手动指定为内置组件的类型
+     * @en Manually specified as the type of internal component
+     */
+    displayType?: FormInternalComponentType;
+}
+export interface FormItemRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+export interface IFormItemInnerProps {
+    /**
+     * 表单项字段
+     * @en Form item field
+     */
+    field: string;
+    /**
+     * 表单项子节点
+     * @en Form item children
+     */
+    children: JSX.Element;
+    /**
+     * 表单项是否刷新
+     * @en Form item is updated
+     */
+    shouldUpdate?: boolean | IShouldUpdateFunc;
+    /**
+     * 表单项下方节点
+     * @en Form item extra node
+     */
+    rules?: IRules[];
+    /**
+     * 触发事件更新事件名称
+     * @en The function name when updating data
+     * @default "onChange"
+     */
+    trigger?: string;
+    /**
+     * 校验状态变化回调
+     * @en The callback when validating status changes
+     */
+    onValidateStatusChange: (data: {
+        errors: any;
+        warnings: any;
+    }) => void;
+    /**
+     * 获取内部表单项的dom
+     * @en The dom of inner form item
+     */
+    getFormItemRef: () => HTMLDivElement | null;
+    /**
+     * 自定义表单项存储值的字段名
+     * @en The field name for custom form item
+     * @default "value"
+     */
+    triggerPropsField?: string;
+    /**
+     * 表单项是否禁用
+     * @en Whether Form item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * 表单项初始数据
+     * @en The initial value of form item
+     */
+    initialValue?: FieldValue;
+    /**
+     * 手动指定为内置组件的类型
+     * @en Manually specified as the type of internal component
+     */
+    displayType?: FormInternalComponentType;
+}

package/cjs/form/type.js

@@ -0,0 +1,30 @@
+"use strict";
+
+exports.__esModule = true;
+exports.ValidateStatus = exports.FormInternalComponentType = void 0;
+var FormInternalComponentType;
+exports.FormInternalComponentType = FormInternalComponentType;
+(function (FormInternalComponentType) {
+  FormInternalComponentType["Input"] = "Input";
+  FormInternalComponentType["Textarea"] = "Textarea";
+  FormInternalComponentType["Checkbox"] = "Checkbox";
+  FormInternalComponentType["CheckboxGroup"] = "CheckboxGroup";
+  FormInternalComponentType["DatePicker"] = "DatePicker";
+  FormInternalComponentType["Picker"] = "Picker";
+  FormInternalComponentType["Radio"] = "Radio";
+  FormInternalComponentType["RadioGroup"] = "RadioGroup";
+  FormInternalComponentType["Slider"] = "Slider";
+  FormInternalComponentType["Switch"] = "Switch";
+  FormInternalComponentType["ImagePicker"] = "ImagePicker";
+  FormInternalComponentType["Rate"] = "Rate";
+  FormInternalComponentType["Stepper"] = "Stepper";
+})(FormInternalComponentType || (exports.FormInternalComponentType = FormInternalComponentType = {}));
+var ValidateStatus;
+exports.ValidateStatus = ValidateStatus;
+(function (ValidateStatus) {
+  ValidateStatus["Init"] = "init";
+  ValidateStatus["Error"] = "error";
+  ValidateStatus["Warning"] = "warning";
+  ValidateStatus["Validating"] = "validating";
+  ValidateStatus["Success"] = "success";
+})(ValidateStatus || (exports.ValidateStatus = ValidateStatus = {}));

package/cjs/form/useForm.d.ts

@@ -0,0 +1,18 @@
+import { IFormInstance } from './type';
+export declare const defaultFormDataMethods: {
+    getFieldValue: (name: any) => any;
+    getFieldsValue: (_names: any) => {};
+    getFieldError: (_name: any) => never[];
+    setFieldValue: (_name: any, _value: any) => boolean;
+    setFieldsValue: (_values: any) => boolean;
+    registerField: (_name: any, _self: any) => () => void;
+    resetFields: any;
+    validateFields: any;
+    submit: any;
+    getInternalHooks: () => {
+        registerField: any;
+        setInitialValues: any;
+        setCallbacks: any;
+    };
+};
+export default function useForm(form?: IFormInstance): IFormInstance[];

package/cjs/form/useForm.js

@@ -0,0 +1,225 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = useForm;
+exports.defaultFormDataMethods = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _extends5 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("react");
+/* eslint-disable no-console */
+
+var defaultFunc = function defaultFunc() {};
+var defaultFormDataMethods = {
+  getFieldValue: function getFieldValue(name) {
+    return name;
+  },
+  getFieldsValue: function getFieldsValue(_names) {
+    return {};
+  },
+  getFieldError: function getFieldError(_name) {
+    return [];
+  },
+  setFieldValue: function setFieldValue(_name, _value) {
+    return true;
+  },
+  setFieldsValue: function setFieldsValue(_values) {
+    return true;
+  },
+  registerField: function registerField(_name, _self) {
+    return function () {};
+  },
+  resetFields: defaultFunc,
+  validateFields: defaultFunc,
+  submit: defaultFunc,
+  getInternalHooks: function getInternalHooks() {
+    return {
+      registerField: defaultFunc,
+      setInitialValues: defaultFunc,
+      setCallbacks: defaultFunc
+    };
+  }
+};
+
+// 在field的静态的状态下设置
+exports.defaultFormDataMethods = defaultFormDataMethods;
+var FormData = function FormData() {
+  var _this = this;
+  this._formData = {};
+  this._fieldsList = {};
+  this._initialValues = {};
+  this._callbacks = {};
+  this.setFieldsValue = function (values) {
+    _this._formData = (0, _extends5.default)({}, _this._formData, values);
+    _this.notifyField(values);
+    Object.keys(values).forEach(function (key) {
+      if (key in _this._fieldsList) {
+        var _this$_fieldsList$key;
+        (_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;
+    _this._formData = (0, _extends5.default)({}, _this._formData, (_extends2 = {}, _extends2[name] = value, _extends2));
+    var onValuesChange = _this._callbacks.onValuesChange;
+    onValuesChange && onValuesChange((_onValuesChange = {}, _onValuesChange[name] = value, _onValuesChange), _this._formData);
+    _this.notifyField((_this$notifyField = {}, _this$notifyField[name] = value, _this$notifyField));
+    return true;
+  };
+  this.notifyField = function (values) {
+    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]);
+      }
+    });
+  };
+  this.getFieldsValue = function (names) {
+    if (names) {
+      return names.map(function (name) {
+        return _this.getFieldValue(name);
+      });
+    }
+    return _this._formData;
+  };
+  this.getFieldValue = function (name) {
+    var _this$_formData;
+    return (_this$_formData = _this._formData) == null ? void 0 : _this$_formData[name];
+  };
+  this.getFieldError = function (name) {
+    var _this$_fieldsList2;
+    var field = ((_this$_fieldsList2 = _this._fieldsList) == null ? void 0 : _this$_fieldsList2[name]) || null;
+    if (field) {
+      return field.getFieldError();
+    }
+    return [];
+  };
+  this.getFieldsError = function (names) {
+    var fields = names || Object.keys(_this._fieldsList);
+    return fields.reduce(function (pre, name) {
+      var _this$_fieldsList3;
+      var theField = (_this$_fieldsList3 = _this._fieldsList) == null ? void 0 : _this$_fieldsList3[name];
+      if (theField) {
+        pre[name] = theField == null ? void 0 : theField.getFieldError();
+      }
+      return pre;
+    }, {});
+  };
+  this.isFieldTouched = function (name) {
+    var _this$_fieldsList4;
+    var field = ((_this$_fieldsList4 = _this._fieldsList) == null ? void 0 : _this$_fieldsList4[name]) || null;
+    if (field) {
+      return field.isFieldTouched();
+    }
+    return false;
+  };
+  this.registerField = function (name, self) {
+    _this._fieldsList[name] = self;
+    var initialValue = self.props.initialValue;
+    if (initialValue !== undefined && name) {
+      var _extends3, _extends4;
+      _this._initialValues = (0, _extends5.default)({}, _this._initialValues, (_extends3 = {}, _extends3[name] = initialValue, _extends3));
+      _this.setFieldsValue((0, _extends5.default)({}, _this._formData, (_extends4 = {}, _extends4[name] = initialValue, _extends4)));
+    }
+    return function () {
+      if (name in _this._fieldsList) {
+        delete _this._fieldsList[name];
+        delete _this._formData[name];
+      }
+    };
+  };
+  this.setInitialValues = function (initVal) {
+    _this._initialValues = (0, _extends5.default)({}, initVal || {});
+    _this.setFieldsValue(initVal);
+  };
+  this.resetFields = function () {
+    _this.setFieldsValue(_this._initialValues);
+  };
+  this.validateFields = function () {
+    var promiseList = [];
+    Object.values(_this._fieldsList).forEach(function (entity) {
+      var promise = entity.validateField();
+      promiseList.push(promise.then(function (errors) {
+        return errors;
+      }));
+    });
+    var summaryPromise = new Promise(function (resolve, reject) {
+      Promise.all(promiseList).then(function (res) {
+        var errorResults = res.filter(function (item) {
+          var _item$errors;
+          return item == null ? void 0 : (_item$errors = item.errors) == null ? void 0 : _item$errors.length;
+        });
+        if (errorResults.length) {
+          reject(errorResults);
+        } else {
+          resolve(res);
+        }
+      });
+    });
+    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();
+      }
+    }, _callee);
+  }));
+  this.setCallbacks = function (callbacks) {
+    _this._callbacks = callbacks;
+  };
+  this.getMethods = function () {
+    return {
+      setFieldsValue: _this.setFieldsValue,
+      setFieldValue: _this.setFieldValue,
+      getFieldsValue: _this.getFieldsValue,
+      getFieldValue: _this.getFieldValue,
+      getFieldError: _this.getFieldError,
+      getFieldsError: _this.getFieldsError,
+      isFieldTouched: _this.isFieldTouched,
+      registerField: _this.registerField,
+      resetFields: _this.resetFields,
+      submit: _this.submit,
+      getInternalHooks: _this.getInternalHooks,
+      validateFields: _this.validateFields
+    };
+  };
+  this.getInternalHooks = function () {
+    return {
+      registerField: _this.registerField,
+      setInitialValues: _this.setInitialValues,
+      setCallbacks: _this.setCallbacks
+    };
+  };
+};
+function useForm(form) {
+  var formInstanceRef = (0, _react.useRef)(defaultFormDataMethods);
+  var isSingletonRef = (0, _react.useRef)(false);
+  if (!isSingletonRef.current) {
+    if (form) {
+      formInstanceRef.current = form;
+    } else {
+      var formIns = new FormData();
+      formInstanceRef.current = formIns.getMethods();
+    }
+    isSingletonRef.current = true;
+  }
+  return [formInstanceRef.current];
+}

package/cjs/form/utils.d.ts

@@ -0,0 +1,6 @@
+import { IRules, ValidatorError } from '@arco-design/mobile-utils';
+export declare const isFieldRequired: (rules?: IRules[]) => boolean;
+export declare const getErrorAndWarnings: (result: ValidatorError[]) => {
+    warnings: string[];
+    errors: string[];
+};

package/cjs/form/utils.js

@@ -0,0 +1,36 @@
+"use strict";
+
+exports.__esModule = true;
+exports.isFieldRequired = exports.getErrorAndWarnings = void 0;
+var isFieldRequired = function isFieldRequired(rules) {
+  if (rules === void 0) {
+    rules = [];
+  }
+  return (rules || []).some(function (rule) {
+    return rule == null ? void 0 : rule.required;
+  });
+};
+exports.isFieldRequired = isFieldRequired;
+var getErrorAndWarnings = function getErrorAndWarnings(result) {
+  var errors = [];
+  var warnings = [];
+  result.map(function (_ref) {
+    var _ref$message = _ref.message,
+      message = _ref$message === void 0 ? [] : _ref$message,
+      _ref$validateLevel = _ref.validateLevel,
+      validateLevel = _ref$validateLevel === void 0 ? 'error' : _ref$validateLevel;
+    if (!(message != null && message.length)) {
+      return;
+    }
+    if (validateLevel === 'warning') {
+      warnings = [].concat(warnings, message);
+    } else {
+      errors = [].concat(errors, message);
+    }
+  });
+  return {
+    warnings: warnings,
+    errors: errors
+  };
+};
+exports.getErrorAndWarnings = getErrorAndWarnings;