@arco-design/mobile-react 2.31.6 → 2.33.0

package/esnext/form/style/index.less

@@ -0,0 +1,172 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-form {
+    &-item {
+        display: flex;
+        align-items: flex-start;
+        border-top-width: 1px;
+        border-top-style: solid;
+        .use-var(border-top-color, form-item-border-divider-color);
+
+        &:first-child {
+            border: none;
+        }
+    }
+
+    &-label-item {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: flex-start;
+        .use-var(font-size, form-item-label-item-font-size);
+        .use-var(line-height, form-item-label-item-line-height);
+        .use-var(color, form-item-label-item-color);
+        .use-var-with-rtl(padding-right, form-item-label-item-gutter);
+        .use-var(width, form-item-label-item-width);
+
+        &-required-asterisk {
+            position: absolute;
+            .set-prop-with-rtl(left, -0.6em);
+            top: 0;
+
+            .use-var(font-size, form-item-label-item-font-size);
+            .use-var(line-height, form-item-label-item-line-height);
+            .use-var(color, form-item-label-item-required-asterisk-color);
+        }
+        .disabled & {
+            .use-var(color, input-disabled-color);
+        }
+    }
+    &-item-control {
+        padding: 16px 0;
+        .@{prefix}-input-wrap, .@{prefix}-input {
+            padding: 0;
+        }
+        &-wrapper {
+            width: 100%;
+            flex: 1;
+            position: relative;
+            .@{prefix}-input-wrap {
+                .use-var(height, input-text-line-height);
+            }
+        }
+    }
+    &-item-message {
+        .rem(font-size, 12);
+        .use-var(color, form-item-label-item-required-asterisk-color);
+        .rem(margin-top, -5);
+        svg,
+        span {
+            vertical-align: middle;
+        }
+
+        svg {
+            .rem-with-rtl(margin-right, 4);
+        }
+        margin-bottom: 16px;
+    }
+    &-item-error-message {
+        .use-var(color, form-item-error-message-color);
+    }
+
+    &-item-warning-message {
+        .use-var(color, form-item-warning-message-color);
+    }
+
+    &-item.@{prefix}-form-item-vertical {
+        display: block;
+        .@{prefix}-input-wrap {
+            .set-prop-with-rtl(padding-left, 0);
+        }
+        .@{prefix}-form-label-item {
+            width: auto;
+            margin-top: 16px;
+            .use-var(height, form-item-label-item-font-size);
+            .use-var( line-height, form-item-label-item-font-size);
+            &-required-asterisk {
+                .use-var(height, form-item-label-item-font-size);
+                .use-var( line-height, form-item-label-item-font-size);
+            }
+        }
+    }
+
+    &-picker-link-container {
+        .rem(font-size, 16);
+        .use-var(color, font-color);
+        &-placeholder {
+            .use-var(color, input-placeholder-color);
+        }
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+& when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .@{prefix}-form {
+    &-item {
+      @{arco-dark-mode-selector} & {
+        .use-var(border-top-color, dark-form-item-border-divider-color);
+      }
+    }
+    &-label-item {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-form-item-label-item-color);
+      }
+      &-required-asterisk {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-form-item-label-item-required-asterisk-color);
+        }
+      }
+      .disabled & {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-input-disabled-color);
+        }
+      }
+    }
+    &-item-message {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-form-item-label-item-required-asterisk-color);
+      }
+    }
+    &-item-error-message {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-form-item-error-message-color);
+      }
+    }
+    &-item-warning-message {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-form-item-warning-message-color);
+      }
+    }
+    &-picker-link-container {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-font-color);
+      }
+      &-placeholder {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-input-placeholder-color);
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/form/type.d.ts

@@ -0,0 +1,373 @@
+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';
+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: any) => () => 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: any) => () => 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 field value
+     */
+    setFieldValue: (name: string, value: FieldValue) => boolean;
+    /**
+     * 设置多个表单项值
+     * @en Set multiple field value
+     */
+    setFieldsValue: (value: FieldItem) => void;
+    /**
+     * 校验所有表单项
+     * @en Validate all fields
+     */
+    validateFields: () => Promise<IFieldError[]>;
+    /**
+     * 提交表单
+     * @en Submit all fields
+     */
+    submit: () => void;
+}
+export declare type InternalFormInstance = IFormInstance & {
+    /**
+     * 获取内部方法
+     * @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: {
+    preValue: any;
+    curValue: any;
+}) => 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?: 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?: 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: ReactNode[];
+        warnings: ReactNode[];
+        errorTypes: string[];
+    }) => 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/esnext/form/type.js

@@ -0,0 +1,26 @@
+// 注意：自动识别form关联组件的依据，请勿轻易改变代码结构
+// Notice: Automatically identify the basis of the associated component of the form, DO NOT change the code structure.
+export var 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 || (FormInternalComponentType = {}));
+export var ValidateStatus;
+(function (ValidateStatus) {
+    ValidateStatus["Init"] = "init";
+    ValidateStatus["Error"] = "error";
+    ValidateStatus["Warning"] = "warning";
+    ValidateStatus["Validating"] = "validating";
+    ValidateStatus["Success"] = "success";
+})(ValidateStatus || (ValidateStatus = {}));

package/esnext/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[];