@arco-design/mobile-react 2.31.6 → 2.32.0

package/esnext/form/useForm.js

@@ -0,0 +1,203 @@
+/* eslint-disable no-console */
+import { useRef } from 'react';
+import { Promise } from 'es6-promise';
+const defaultFunc = () => { };
+export const defaultFormDataMethods = {
+    getFieldValue: name => name,
+    getFieldsValue: _names => {
+        return {};
+    },
+    getFieldError: _name => [],
+    setFieldValue: (_name, _value) => {
+        return true;
+    },
+    setFieldsValue: _values => {
+        return true;
+    },
+    registerField: (_name, _self) => {
+        return () => { };
+    },
+    resetFields: defaultFunc,
+    validateFields: defaultFunc,
+    submit: defaultFunc,
+    getInternalHooks: () => {
+        return {
+            registerField: defaultFunc,
+            setInitialValues: defaultFunc,
+            setCallbacks: defaultFunc,
+        };
+    },
+};
+// 在field的静态的状态下设置
+class FormData {
+    constructor() {
+        this._formData = {}; // 数据源
+        this._fieldsList = {}; // 字段列表
+        this._initialValues = {}; // 初始值
+        this._callbacks = {};
+        this.setFieldsValue = (values) => {
+            const oldValues = Object.keys(values).reduce((acc, key) => ({
+                ...acc,
+                [key]: this.getFieldValue(key),
+            }), {});
+            this._formData = { ...this._formData, ...values };
+            const { onValuesChange } = this._callbacks;
+            onValuesChange && onValuesChange(values, this._formData);
+            this.notifyField(values, oldValues);
+            return true;
+        };
+        this.setFieldValue = (name, value) => {
+            const oldValues = { [name]: this.getFieldValue(name) };
+            this._formData = { ...this._formData, [name]: value };
+            const { onValuesChange } = this._callbacks;
+            onValuesChange &&
+                onValuesChange({
+                    [name]: value,
+                }, this._formData);
+            this.notifyField({ [name]: value }, oldValues);
+            return true;
+        };
+        this.notifyField = (values, oldValues) => {
+            Object.keys(values).map((fieldName) => {
+                const fieldObj = this._fieldsList?.[fieldName] || null;
+                if (fieldObj) {
+                    fieldObj.onValueChange(values[fieldName], oldValues[fieldName]);
+                }
+            });
+        };
+        this.getFieldsValue = (names) => {
+            if (names) {
+                return names.map(name => this.getFieldValue(name));
+            }
+            return this._formData;
+        };
+        this.getFieldValue = (name) => {
+            return this._formData?.[name];
+        };
+        this.getFieldError = (name) => {
+            const field = this._fieldsList?.[name] || null;
+            if (field) {
+                return field.getFieldError();
+            }
+            return [];
+        };
+        this.getFieldsError = (names) => {
+            const fields = names || Object.keys(this._fieldsList);
+            return fields.reduce((pre, name) => {
+                const theField = this._fieldsList?.[name];
+                if (theField) {
+                    pre[name] = theField?.getFieldError();
+                }
+                return pre;
+            }, {});
+        };
+        this.isFieldTouched = (name) => {
+            const field = this._fieldsList?.[name] || null;
+            if (field) {
+                return field.isFieldTouched();
+            }
+            return false;
+        };
+        this.registerField = (name, self) => {
+            this._fieldsList[name] = self;
+            const { initialValue } = self.props;
+            if (initialValue !== undefined && name) {
+                this._initialValues = {
+                    ...this._initialValues,
+                    [name]: initialValue,
+                };
+                this.setFieldsValue({
+                    ...this._formData,
+                    [name]: initialValue,
+                });
+            }
+            return () => {
+                if (name in this._fieldsList) {
+                    delete this._fieldsList[name];
+                    delete this._formData[name];
+                }
+            };
+        };
+        this.setInitialValues = (initVal) => {
+            this._initialValues = { ...(initVal || {}) };
+            this.setFieldsValue(initVal);
+        };
+        this.resetFields = () => {
+            this.setFieldsValue(this._initialValues);
+        };
+        this.validateFields = () => {
+            const promiseList = [];
+            Object.values(this._fieldsList).forEach((entity) => {
+                const promise = entity.validateField();
+                promiseList.push(promise.then(errors => errors));
+            });
+            const summaryPromise = new Promise((resolve, reject) => {
+                Promise.all(promiseList).then(res => {
+                    const errorResults = res.filter(item => item?.errors?.length);
+                    if (errorResults.length) {
+                        reject(errorResults);
+                    }
+                    else {
+                        resolve(res);
+                    }
+                });
+            });
+            return summaryPromise;
+        };
+        this.submit = () => {
+            this.validateFields()
+                .then(result => {
+                const { onSubmit } = this._callbacks;
+                onSubmit?.(this._formData, result);
+            })
+                .catch(e => {
+                const { onSubmitFailed } = this._callbacks;
+                if (!onSubmitFailed) {
+                    return;
+                }
+                onSubmitFailed(this._formData, e);
+            });
+        };
+        this.setCallbacks = (callbacks) => {
+            this._callbacks = callbacks;
+        };
+        this.getMethods = () => {
+            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 = () => {
+            return {
+                registerField: this.registerField,
+                setInitialValues: this.setInitialValues,
+                setCallbacks: this.setCallbacks,
+            };
+        };
+    }
+}
+export default function useForm(form) {
+    const formInstanceRef = useRef(defaultFormDataMethods);
+    const isSingletonRef = useRef(false);
+    if (!isSingletonRef.current) {
+        if (form) {
+            formInstanceRef.current = form;
+        }
+        else {
+            const formIns = new FormData();
+            formInstanceRef.current = formIns.getMethods();
+        }
+        isSingletonRef.current = true;
+    }
+    return [formInstanceRef.current];
+}

package/esnext/form/utils.d.ts

@@ -0,0 +1,7 @@
+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[];
+    errorTypes: string[];
+};

package/esnext/form/utils.js

@@ -0,0 +1,21 @@
+export const isFieldRequired = (rules = []) => {
+    return (rules || []).some(rule => rule?.required);
+};
+export const getErrorAndWarnings = (result) => {
+    let errors = [];
+    let warnings = [];
+    let errorTypes = [];
+    result.map(({ message = [], validateLevel = 'error', errorTypes: resultErrorTypes }) => {
+        if (!message?.length) {
+            return;
+        }
+        if (validateLevel === 'warning') {
+            warnings = [...warnings, ...message];
+        }
+        else {
+            errors = [...errors, ...message];
+            errorTypes = [...errorTypes, ...resultErrorTypes];
+        }
+    });
+    return { warnings, errors, errorTypes };
+};

package/esnext/grid/index.d.ts

@@ -0,0 +1,112 @@
+import React, { ReactNode } from 'react';
+export interface GridProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 传入的数据
+     * @en grid data
+     *  */
+    data: GridData[];
+    /**
+     * 一行的列数
+     * @en number of columns
+     * @default 3
+     */
+    columns?: number;
+    /**
+     * 是否有边框
+     * @en Whether there is a border
+     * @default false
+     */
+    border?: boolean;
+    /**
+     * 格子间的间距
+     * @en spacing between grids
+     * @default 0
+     */
+    gutter?: number | {
+        x: number;
+        y: number;
+    };
+    /**
+     * 格子的形状，可选值为 circle
+     * @en The shape of the grid, the optional value are circle and square
+     * @default "square"
+     */
+    shape?: string;
+    /**
+     * 溢出时是否支持滑动
+     * @en Whether to support swipe when overflowing
+     * @default false
+     */
+    isSliding?: boolean;
+    /**
+     * 格子内容排列的方向，可选值为 horizontal
+     * @en The direction in which the grid content is arranged, the optional value are horizontal and vertical
+     * @default "vertical"
+     */
+    direction?: string;
+}
+export interface GridData {
+    /**
+     * 传入图标的资源地址
+     * @en The resource address of the input icon
+     *  */
+    img: string | ReactNode;
+    /**
+     * 传入的标题文字内容
+     * @en Title text content
+     * */
+    title: ReactNode;
+    /**
+     * 传入的描述文字内容
+     * @en Description text
+     *  */
+    content?: ReactNode;
+    /**
+     * 自定义样式
+     * @en Custom classname
+     *  */
+    className?: string;
+    /**
+     * 点击后的回调函数
+     * @en Callback when clicking
+     *  */
+    onClick?: (item: GridData) => void;
+    /**
+     * 每个格子自定义样式
+     * @en Custom style for each grid
+     *  */
+    itemStyle?: React.CSSProperties;
+    /**
+     * 自定义单个 grid 的创建函数
+     * @en Customize the creation function of a single grid
+     *  */
+    renderGrid?: (item: GridData, colIndex: number, rowIndex: number) => ReactNode;
+    [x: string]: any;
+}
+export interface GridRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+/**
+ * 宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
+ * @en The grid can divide the page into equal-width blocks in the horizontal direction for displaying content or for page navigation.
+ * @type 布局
+ * @type_en Layout
+ * @name 宫格
+ * @name_en Grid
+ */
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<GridRef>>;
+export default Grid;

package/esnext/grid/index.js

@@ -0,0 +1,79 @@
+import React, { useRef, forwardRef, useImperativeHandle, useContext } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout, GlobalContext } from '../context-provider';
+/**
+ * 宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
+ * @en The grid can divide the page into equal-width blocks in the horizontal direction for displaying content or for page navigation.
+ * @type 布局
+ * @type_en Layout
+ * @name 宫格
+ * @name_en Grid
+ */
+const Grid = forwardRef((props, ref) => {
+    const { className = '', style, data, columns = 3, border = false, gutter = 0, shape = 'square', direction = 'vertical', isSliding = false, } = props;
+    const { useRtl } = useContext(GlobalContext);
+    const domRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    const getRows = (prefix, rowsData, rows, row) => {
+        const placeholders = !isSliding && rowsData.length % columns;
+        let renderData = rowsData;
+        if (placeholders) {
+            const fakeGrids = new Array(columns - placeholders).fill({
+                img: null,
+                title: '',
+            });
+            renderData = rowsData.concat(fakeGrids);
+        }
+        return (React.createElement("div", { className: `${prefix}-rows`, key: row }, renderData.map((item, index) => {
+            const { img, title, content, className: itemClassName, onClick, itemStyle, renderGrid, } = item;
+            if (renderGrid) {
+                return renderGrid(item, index, row);
+            }
+            const marginBottom = row + 1 === rows ? 0 : typeof gutter === 'number' ? gutter : gutter?.y || 0;
+            const rowLen = renderData.length;
+            const marginValue = index + 1 === rowLen
+                ? 0
+                : typeof gutter === 'number'
+                    ? gutter
+                    : gutter?.x || 0;
+            const marginStyle = {
+                [useRtl ? 'marginLeft' : 'marginRight']: marginValue,
+            };
+            return (React.createElement("div", { key: index, style: { marginBottom, ...marginStyle, ...itemStyle }, onClick: () => {
+                    onClick && onClick(item);
+                }, className: cls(`${prefix}-rows-item`, {
+                    horizontal: direction === 'horizontal',
+                    border: border && gutter === 0,
+                }, itemClassName) },
+                typeof img === 'string' ? (React.createElement("img", { src: img, className: `${prefix}-rows-item-icon ${shape === 'circle' ? 'circle' : ''}` })) : (img),
+                title || content ? (React.createElement("div", { className: `${prefix}-rows-item-text` },
+                    title ? (React.createElement("span", { className: `${prefix}-rows-item-title` }, title)) : null,
+                    content ? (React.createElement("span", { className: `${prefix}-rows-item-content` }, content)) : null)) : null,
+                (index + 1) % columns !== 0 ? React.createElement("i", { className: "vertical-border" }) : null,
+                (row + 1) % rows !== 0 ? React.createElement("i", { className: "horizontal-border" }) : null));
+        })));
+    };
+    const getGrid = (prefix, dataArr) => {
+        const rows = dataArr.length || 1;
+        return (React.createElement(React.Fragment, null, dataArr.map((item, index) => {
+            return getRows(prefix, item, rows, index);
+        })));
+    };
+    const renderEl = ({ prefixCls }) => {
+        const prefix = `${prefixCls}-grid`;
+        const dataLength = data?.length || 0;
+        if (dataLength === 0) {
+            return null;
+        }
+        let index = 0;
+        const newArr = [];
+        while (index < dataLength) {
+            newArr.push(data.slice(index, isSliding ? (index += dataLength) : (index += columns)));
+        }
+        return (React.createElement("div", { className: cls(prefix, className, isSliding ? 'sliding' : ''), style: style, ref: domRef }, getGrid(prefix, newArr)));
+    };
+    return React.createElement(ContextLayout, null, renderEl);
+});
+export default Grid;