@arco-design/mobile-react 2.31.5 → 2.32.0

package/esnext/ellipsis/type.d.ts

@@ -0,0 +1,107 @@
+import React, { ReactNode } from 'react';
+export interface EllipsisBaseProps {
+    /**
+     * 需要缩略的文本内容
+     * @en Text content to be omitted
+     */
+    text: string;
+    /**
+     * 是否开启缩略
+     * @en Whether to enable ellipsis
+     * @default true
+     */
+    ellipsis?: boolean;
+    /**
+     * 最大显示行数
+     * @en Maximum number of displayed lines
+     * @default 1
+     */
+    maxLine?: number;
+    /**
+     * 是否使用 innerHTML 插入文本（警告：务必确保 text 安全可靠，否则易导致 XSS 漏洞）
+     * @en Whether to use innerHTML to insert text (warning: make sure the text is safe and reliable, otherwise it will easily lead to XSS vulnerabilities)
+     * @default false
+     */
+    dangerouslyUseInnerHTML?: boolean;
+    /**
+     * 自定义缩略符节点，文本缩略时插入文本尾部
+     * @en Customize the ellipsis node, insert at the end of the text when the text is omitted
+     * @default "..."
+     */
+    ellipsisNode?: ReactNode;
+    /**
+     * 自定义收起符节点，不为空且文本展开时插入文本尾部
+     * @en Customize the collapse node, when the value is not empty and the text is expanded, the node is  inserted at the end of the text
+     */
+    collapseNode?: ReactNode;
+    /**
+     * 缩略节点点击事件
+     * @en Ellipsis node click event
+     */
+    onEllipsisNodeClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+    /**
+     * 收起节点点击事件
+     * @en Collapse node click event
+     */
+    onCollapseNodeClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+}
+export interface EllipsisRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 控制容器重新编排
+     * @en Control container to reflow
+     */
+    reflow: (() => void) | undefined;
+}
+export interface EllipsisProps extends EllipsisBaseProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 最大显示高度，单位 px，优先级高于 maxLine
+     * @en Maximum display height(unit: px), priority higher than maxLine
+     */
+    maxHeight?: number;
+    /**
+     * 文本结尾处（缩略符之前）需要过滤掉的字符
+     * @en Characters to filter out at the end of the text (before the ellipsis)
+     * @default []
+     */
+    endExcludes?: string[];
+    /**
+     * 容器大小变化时是否自适应，使用原生缩略时默认为 true
+     * @en  Whether to adapt when the container size changes, the default is true when using native ellipsis
+     * @default false
+     */
+    reflowOnResize?: boolean;
+    /**
+     * 文本缩略时，缩略符节点是否浮在文本右下角（默认加渐变色背景）
+     * @en Whether the abbreviation node is floating in the lower right corner of the text (with a gradient background by default)
+     * @default false
+     */
+    floatEllipsisNode?: boolean;
+    /**
+     * 文本缩略处理的完成回调
+     * @en Callback when text omission processing is complete
+     */
+    onReflow?: (ellipsis: boolean, text: string) => void;
+}
+export declare type EllipsisCommonProps = EllipsisBaseProps & {
+    /**
+     * className 前缀
+     * @en Prefix classname
+     */
+    prefixCls: string;
+};
+export declare type NativeEllipsisProps = EllipsisCommonProps;
+export interface JsEllipsisRef {
+    dom: HTMLDivElement | null;
+    reflow: () => void;
+}
+export declare type JsEllipsisProps = EllipsisCommonProps & Pick<EllipsisProps, 'maxHeight' | 'endExcludes' | 'reflowOnResize' | 'onReflow'>;

package/esnext/ellipsis/type.js

@@ -0,0 +1 @@
+export {};

package/esnext/ellipsis/utils/dom.d.ts

@@ -0,0 +1,2 @@
+export declare function getLineHeight(element: HTMLElement): number;
+export declare function wrapTextChildNodesWithSpan(node: Node, className?: string): void;

package/esnext/ellipsis/utils/dom.js

@@ -0,0 +1,35 @@
+export function getLineHeight(element) {
+    const style = window.getComputedStyle(element, null);
+    const lineHeight = style.getPropertyValue('line-height');
+    if (lineHeight === 'normal') {
+        // Create a temp element to get line-height
+        const dom = document.createElement('span');
+        dom.style.width = '300px';
+        dom.style.position = 'absolute';
+        dom.style.visibility = 'hidden';
+        dom.innerText = 'Test';
+        element.appendChild(dom);
+        const height = dom.clientHeight;
+        element.removeChild(dom);
+        return height;
+    }
+    return parseFloat(lineHeight);
+}
+function createSpan(text, className = '') {
+    const span = document.createElement('span');
+    span.className = className;
+    span.textContent = text;
+    return span;
+}
+export function wrapTextChildNodesWithSpan(node, className = '') {
+    if (node.nodeType === Node.TEXT_NODE) {
+        if (node.textContent) {
+            node.parentNode?.replaceChild(createSpan(node.textContent, className), node);
+        }
+    }
+    else {
+        node.childNodes.forEach(item => {
+            wrapTextChildNodesWithSpan(item, className);
+        });
+    }
+}

package/esnext/ellipsis/utils/is.d.ts

@@ -0,0 +1,3 @@
+export declare const isBrowser: () => boolean;
+/** Whether the environment support -webkit-line-clamp. */
+export declare const isSupportWebkitLineClamp: () => boolean;

package/esnext/ellipsis/utils/is.js

@@ -0,0 +1,3 @@
+export const isBrowser = () => typeof window !== 'undefined' && typeof document !== 'undefined';
+/** Whether the environment support -webkit-line-clamp. */
+export const isSupportWebkitLineClamp = () => isBrowser() && typeof document.body.style.webkitLineClamp !== 'undefined';

package/esnext/form/form-item-context.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IFormItemContext } from './type';
+export declare const FormItemContext: React.Context<IFormItemContext>;

package/esnext/form/form-item-context.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { defaultFormDataMethods } from './useForm';
+export const FormItemContext = React.createContext({
+    form: defaultFormDataMethods,
+    layout: 'horizontal',
+});

package/esnext/form/form-item.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FormItemProps, FormItemRef } from './type';
+declare const _default: React.ForwardRefExoticComponent<FormItemProps & React.RefAttributes<FormItemRef>>;
+export default _default;

package/esnext/form/form-item.js

@@ -0,0 +1,218 @@
+/* eslint-disable react/no-unused-class-component-methods */
+import React, { forwardRef, PureComponent, useContext, useImperativeHandle, useRef, useState, } from 'react';
+import { cls, Validator, ValidatorType } from '@arco-design/mobile-utils';
+import { Promise } from 'es6-promise';
+import { FormItemContext } from './form-item-context';
+import { GlobalContext } from '../context-provider';
+import { FormInternalComponentType, } from './type';
+import { getErrorAndWarnings, isFieldRequired } from './utils';
+import { DefaultDatePickerLinkedContainer, DefaultPickerLinkedContainer } from './linked-container';
+class FormItemInner extends PureComponent {
+    constructor(props, context) {
+        super(props);
+        this._errors = [];
+        this._touched = false;
+        this.onValueChange = (curValue, preValue) => {
+            this._touched = true;
+            const { shouldUpdate } = this.props;
+            if (typeof shouldUpdate === 'function') {
+                shouldUpdate({ preValue, curValue }) && this.forceUpdate();
+                return;
+            }
+            this.forceUpdate();
+        };
+        this.getFieldError = () => {
+            return this._errors;
+        };
+        this.isFieldTouched = () => {
+            return this._touched;
+        };
+        this.validateField = () => {
+            const { validateMessages } = this.context;
+            const { getFieldValue } = this.context.form;
+            const { field, rules, onValidateStatusChange } = this.props;
+            const value = getFieldValue(field);
+            if (rules?.length && field) {
+                const fieldDom = this.props.getFormItemRef();
+                const fieldValidator = new Validator({ [field]: rules }, { validateMessages });
+                return new Promise(resolve => {
+                    fieldValidator.validate({ [field]: value }, (errorsMap) => {
+                        const { errors, warnings, errorTypes } = getErrorAndWarnings(errorsMap?.[field] || []);
+                        this._errors = errors;
+                        onValidateStatusChange({
+                            errors: this._errors,
+                            warnings,
+                            errorTypes,
+                        });
+                        return resolve({
+                            errors: this._errors,
+                            warnings,
+                            value,
+                            field,
+                            dom: fieldDom,
+                        });
+                    });
+                });
+            }
+            return Promise.resolve({ errors: [], warnings: [], value, field, dom: null });
+        };
+        this.setFieldData = (value) => {
+            const { field } = this.props;
+            const { setFieldValue } = this.context.form;
+            setFieldValue(field, value);
+            this.validateField();
+        };
+        this.innerTriggerFunction = (_, value, ...args) => {
+            this.setFieldData(value);
+            const { children, trigger = 'onChange' } = this.props;
+            if (trigger && children.props?.[trigger]) {
+                children.props?.[trigger](_, value, ...args);
+            }
+        };
+        this.innerTriggerFunctionWithValueFirst = (value, ...args) => {
+            this.setFieldData(value);
+            const { children, trigger = 'onChange' } = this.props;
+            if (trigger && children.props?.[trigger]) {
+                children.props?.[trigger](value, ...args);
+            }
+        };
+        this.innerClearFunction = (...args) => {
+            const { children } = this.props;
+            this.setFieldData('');
+            if (children.props?.onClear) {
+                children.props?.onClear(...args);
+            }
+        };
+        this.destroyField = () => { };
+        if (props?.initialValue && props.field) {
+            const { setInitialValues } = context.form.getInternalHooks();
+            setInitialValues({ [props.field]: props.initialValue });
+        }
+    }
+    componentDidMount() {
+        const { registerField } = this.context.form.getInternalHooks();
+        this.destroyField = registerField(this.props.field, this);
+    }
+    componentWillUnmount() {
+        this.destroyField();
+    }
+    renderChildren() {
+        const { children, field, trigger = 'onChange', triggerPropsField = 'value', displayType, } = this.props;
+        const { getFieldValue } = this.context.form;
+        let props = {
+            [triggerPropsField]: getFieldValue(field),
+            disabled: this.props.disabled,
+        };
+        const childrenType = displayType || children.type?.displayName;
+        switch (childrenType) {
+            case FormInternalComponentType.Input:
+            case FormInternalComponentType.Textarea:
+                props = {
+                    value: getFieldValue(field) || '',
+                    onInput: this.innerTriggerFunction,
+                    onClear: this.innerClearFunction,
+                    disabled: this.props.disabled,
+                };
+                break;
+            case FormInternalComponentType.Checkbox:
+            case FormInternalComponentType.Radio:
+            case FormInternalComponentType.Slider:
+            case FormInternalComponentType.RadioGroup:
+            case FormInternalComponentType.CheckboxGroup:
+                props = {
+                    value: getFieldValue(field),
+                    onChange: this.innerTriggerFunctionWithValueFirst,
+                    disabled: this.props.disabled,
+                };
+                break;
+            case FormInternalComponentType.DatePicker:
+                props = {
+                    currentTs: getFieldValue(field),
+                    onChange: this.innerTriggerFunctionWithValueFirst,
+                    disabled: this.props.disabled,
+                    renderLinkedContainer: children.props?.renderLinkedContainer ||
+                        ((ts, types) => React.createElement(DefaultDatePickerLinkedContainer, { ts: ts, types: types })),
+                };
+                break;
+            case FormInternalComponentType.Picker:
+                props = {
+                    value: getFieldValue(field),
+                    onChange: this.innerTriggerFunctionWithValueFirst,
+                    disabled: this.props.disabled,
+                    renderLinkedContainer: children.props?.renderLinkedContainer ||
+                        (val => React.createElement(DefaultPickerLinkedContainer, { value: val })),
+                };
+                break;
+            case FormInternalComponentType.Switch:
+                props = {
+                    checked: Boolean(getFieldValue(field)),
+                    onChange: this.innerTriggerFunctionWithValueFirst,
+                    disabled: this.props.disabled,
+                };
+                break;
+            case FormInternalComponentType.ImagePicker:
+                props = {
+                    images: getFieldValue(field),
+                    onChange: this.innerTriggerFunctionWithValueFirst,
+                    disabled: this.props.disabled,
+                };
+                break;
+            default:
+                const originTrigger = children.props[trigger];
+                // inject the validated result
+                props.error = this._errors;
+                props[trigger] = (newValue, ...args) => {
+                    this.setFieldData(newValue);
+                    originTrigger && originTrigger(newValue, ...args);
+                };
+        }
+        return React.cloneElement(children, props);
+    }
+    render() {
+        return this.renderChildren();
+    }
+}
+FormItemInner.contextType = FormItemContext;
+export default forwardRef((props, ref) => {
+    const { label, field, disabled = false, layout: itemLayout, style, extra, requiredIcon, rules, className = '', ...rest } = props;
+    const { prefixCls } = useContext(GlobalContext);
+    const { layout, disabled: propsDisabled } = useContext(FormItemContext);
+    const [errors, setErrors] = useState(null);
+    const [errorTypes, setErrorTypes] = useState(null);
+    const [warnings, setWarnings] = useState([]);
+    const formItemRef = useRef(null);
+    const onValidateStatusChange = (validateResult) => {
+        const { errors: _errors, warnings: _warnings, errorTypes: _errorTypes } = validateResult;
+        setErrors(_errors.length ? _errors[0] : null);
+        setErrorTypes(_errorTypes.length ? _errorTypes[0] : null);
+        setWarnings(_warnings);
+    };
+    const getFormItemRef = () => {
+        return formItemRef.current;
+    };
+    const fieldDisabled = disabled || propsDisabled;
+    const fieldRules = rest?.required
+        ? [{ type: ValidatorType.String, required: true }, ...(rules || [])]
+        : rules;
+    const isRequired = isFieldRequired(rules) || rest?.required;
+    useImperativeHandle(ref, () => ({
+        dom: formItemRef.current,
+    }));
+    return (React.createElement("div", { className: cls(`${prefixCls}-form-item`, `${prefixCls}-form-item-${itemLayout || layout}`, className, {
+            disabled: fieldDisabled,
+            [`${prefixCls}-form-item-error`]: !!errors,
+            [`${prefixCls}-form-item-warning`]: Boolean(!errors && warnings),
+            [`${prefixCls}-form-item-error-${errorTypes}`]: errorTypes,
+        }), style: style, ref: formItemRef },
+        React.createElement("div", { className: cls(`${prefixCls}-form-label-item`) },
+            isRequired
+                ? requiredIcon || (React.createElement("span", { className: cls(`${prefixCls}-form-label-item-required-asterisk`) }, "*"))
+                : null,
+            label),
+        React.createElement("div", { className: cls(`${prefixCls}-form-item-control-wrapper`) },
+            React.createElement("div", { className: cls(`${prefixCls}-form-item-control`) },
+                React.createElement(FormItemInner, Object.assign({}, rest, { rules: fieldRules, disabled: fieldDisabled, field: field, onValidateStatusChange: onValidateStatusChange, getFormItemRef: getFormItemRef }))),
+            errors && (React.createElement("div", { className: cls(`${prefixCls}-form-item-message ${prefixCls}-form-item-error-message`) }, errors)),
+            (warnings || []).map((node, key) => typeof node === 'string' ? (React.createElement("div", { className: cls(`${prefixCls}-form-item-message ${prefixCls}-form-item-warning-message`), key: key }, node)) : (node))),
+        extra));
+});

package/esnext/form/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FormProps, FormRef } from './type';
+export { default as useForm } from './useForm';
+export * from './type';
+declare const _default: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<FormRef>> & {
+    Item: React.ForwardRefExoticComponent<import("./type").FormItemProps & React.RefAttributes<import("./type").FormItemRef>>;
+};
+/**
+ * 表单组件用于集合数据录入
+ * @en Form, Form for collecting data input
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 表单
+ * @name_en Form
+ */
+export default _default;

package/esnext/form/index.js

@@ -0,0 +1,50 @@
+import { componentWrapper, defaultLocale } from '@arco-design/mobile-utils';
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { ContextLayout } from '../context-provider';
+import Item from './form-item';
+import { FormItemContext } from './form-item-context';
+import useForm from './useForm';
+export { default as useForm } from './useForm';
+export * from './type';
+const Form = forwardRef((props, ref) => {
+    const { className = '', style, layout = 'horizontal', initialValues, form: formInstance, children, onValuesChange, onSubmit, onSubmitFailed, disabled, } = props;
+    const domRef = useRef(null);
+    const initRef = useRef(false);
+    const [form] = useForm(formInstance);
+    const { setCallbacks, setInitialValues } = form.getInternalHooks();
+    setCallbacks({
+        onValuesChange,
+        onSubmit,
+        onSubmitFailed,
+    });
+    if (!initRef.current) {
+        setInitialValues(initialValues || {});
+        initRef.current = true;
+    }
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        form,
+    }));
+    const contextValue = {
+        form: form,
+        layout,
+        disabled,
+    };
+    return (React.createElement(ContextLayout, null, ({ prefixCls, locale = defaultLocale }) => (React.createElement("form", { className: `${prefixCls}-form ${className}`, style: style, ref: domRef, onSubmit: e => {
+            e.preventDefault();
+            e.stopPropagation();
+            form.submit();
+        } },
+        React.createElement(FormItemContext.Provider, { value: { ...contextValue, validateMessages: locale?.Form || {} } }, children)))));
+});
+/**
+ * 表单组件用于集合数据录入
+ * @en Form, Form for collecting data input
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 表单
+ * @name_en Form
+ */
+export default componentWrapper(Form, {
+    Item,
+});

package/esnext/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/esnext/form/linked-container.js

@@ -0,0 +1,29 @@
+import React, { useContext, useMemo } from 'react';
+import { formatDateNumber } from '@arco-design/mobile-utils';
+import { convertTsToDateObj } from '../date-picker/helper';
+import { GlobalContext } from '../context-provider';
+export function DefaultPickerLinkedContainer({ value }) {
+    const { prefixCls, locale } = useContext(GlobalContext);
+    const className = `${prefixCls}-form-picker-link-container`;
+    return (React.createElement("div", { className: className }, value && value.length ? (value.join('-')) : (React.createElement("span", { className: `${className}-placeholder` }, locale?.Form.pickerDefaultHint))));
+}
+export function DefaultDatePickerLinkedContainer({ ts, types }) {
+    const { prefixCls, locale } = useContext(GlobalContext);
+    const className = `${prefixCls}-form-picker-link-container`;
+    const dateTimeStr = useMemo(() => formatDateTimeStr(ts, types), [ts, types]);
+    function formatDateTimeStr(timestamp, itemTypes) {
+        const dateObj = convertTsToDateObj(timestamp);
+        const validDateObj = Object.keys(dateObj).reduce((acc, key) => ({
+            ...acc,
+            ...(itemTypes.includes(key) ? { [key]: formatDateNumber(dateObj[key]) } : {}),
+        }), {});
+        const dateStr = [validDateObj.year, validDateObj.month, validDateObj.date]
+            .filter(v => v)
+            .join('-');
+        const timeStr = [validDateObj.hour, validDateObj.minute, validDateObj.second]
+            .filter(v => v)
+            .join(':');
+        return `${dateStr} ${timeStr}`;
+    }
+    return (React.createElement("div", { className: className }, ts ? (dateTimeStr) : (React.createElement("span", { className: `${className}-placeholder` }, locale?.Form.pickerDefaultHint))));
+}