@arco-design/mobile-react 2.31.6 → 2.33.0

package/esnext/_helpers/index.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @type utils
+ * @name componentUtils
+ */
+import { CSSProperties } from 'react';
+export * from './hooks';
+export * from './react-dom';
+export * from './render';
+export * from './type';
+/**
+ * 获取带浏览器前缀的样式
+ * @desc {en} Get style with browser vendor prefix
+ * @param {CSSProperties} style 原始样式
+ * @param {CSSProperties} style {en} Original style
+ * @returns {CSSProperties} newStyle 添加了浏览器前缀的新样式
+ * @returns {CSSProperties} newStyle {en} New style with browser vendor prefix
+ * @example
+ * ```
+ * import { getStyleWithVendor } from '@arco-design/mobile-react/esm/_helpers';
+ *
+ * // Example usage:
+ * const originalStyle = {
+ *     transform: 'translateX(50px)',
+ *     transition: 'all 0.3s ease',
+ *     opacity: 0.8,
+ * };
+ *
+ * const styleWithPrefix = getStyleWithVendor(originalStyle);
+ *
+ * // Result:
+ * // styleWithPrefix will be:
+ * // {
+ * //     transform: 'translateX(50px)',
+ * //     WebkitTransform: 'translateX(50px)', // Browser-specific prefix added
+ * //     transition: 'all 0.3s ease',
+ * //     WebkitTransition: 'all 0.3s ease', // Browser-specific prefix added
+ * //     opacity: 0.8,
+ * // }
+ * ```
+ */
+export declare function getStyleWithVendor(style: CSSProperties): CSSProperties;
+/**
+ * 给元素设置带浏览器前缀的样式
+ * @desc {en} Set element style with browser vendor prefix
+ * @param {HTMLElement} dom 需要设置样式的元素
+ * @param {HTMLElement} dom {en} Element to set style
+ * @param {CSSProperties} style Original style
+ * @param {CSSProperties} style {en} Original style
+ * @returns {void}
+ * @example
+ * ```
+ * import { setStyleWithVendor } from '@arco-design/mobile-utils';
+ *
+ * // Example: Setting and displaying styles with the Webkit browser vendor prefix
+ * const element = document.getElementById('myElement');
+ * const originalStyle = {
+ *   transform: 'translateX(100px)',
+ *   transition: 'transform 0.5s ease',
+ *   borderRadius: '5px',
+ * };
+ *
+ * // Set the styles with the Webkit browser vendor prefix
+ * setStyleWithVendor(element, originalStyle);
+ *
+ * // Display the styles with the Webkit browser vendor prefixes applied
+ * const computedStyle = getComputedStyle(element);
+ * console.log(computedStyle.getPropertyValue('-webkit-transform')); // Output: The transformed style with the Webkit browser vendor prefix
+ * console.log(computedStyle.getPropertyValue('-webkit-transition')); // Output: The transition style with the Webkit browser vendor prefix
+ * console.log(computedStyle.getPropertyValue('border-radius')); // Output: The borderRadius style without a vendor prefix
+ * ```
+ */
+export declare function setStyleWithVendor(dom: HTMLElement, style: CSSProperties): void;
+/**
+ * 计算默认值，仅未定义时使用默认值
+ * @desc {en} Calculate the default value, use default value only if undefined
+ * @param {T | undefined} value 输入的值
+ * @param {T | undefined} value {en} The input value
+ * @param {T} defaultValue 默认值
+ * @param {T} defaultValue {en} The default value
+ * @returns {T} 如果输入的值是未定义的，那么返回默认值，否则返回输入的值
+ * @returns {T} {en} Returns the default value if the input is undefined, otherwise returns the input value
+ * @example
+ * ```
+ * import { getDefaultValue } from '@arco-design/mobile-react/esm/_helpers';
+ *
+ * const result = getDefaultValue(42, 0);
+ * console.log(result); // Output: 42
+ *
+ * const result2 = getDefaultValue(undefined, 100);
+ * console.log(result2); // Output: 100
+ * ```
+ */
+export declare const getDefaultValue: <T>(value: T | undefined, defaultValue: T) => T;

package/esnext/_helpers/index.js

@@ -0,0 +1,110 @@
+export * from './hooks';
+export * from './react-dom';
+export * from './render';
+export * from './type';
+/**
+ * 获取带浏览器前缀的样式
+ * @desc {en} Get style with browser vendor prefix
+ * @param {CSSProperties} style 原始样式
+ * @param {CSSProperties} style {en} Original style
+ * @returns {CSSProperties} newStyle 添加了浏览器前缀的新样式
+ * @returns {CSSProperties} newStyle {en} New style with browser vendor prefix
+ * @example
+ * ```
+ * import { getStyleWithVendor } from '@arco-design/mobile-react/esm/_helpers';
+ *
+ * // Example usage:
+ * const originalStyle = {
+ *     transform: 'translateX(50px)',
+ *     transition: 'all 0.3s ease',
+ *     opacity: 0.8,
+ * };
+ *
+ * const styleWithPrefix = getStyleWithVendor(originalStyle);
+ *
+ * // Result:
+ * // styleWithPrefix will be:
+ * // {
+ * //     transform: 'translateX(50px)',
+ * //     WebkitTransform: 'translateX(50px)', // Browser-specific prefix added
+ * //     transition: 'all 0.3s ease',
+ * //     WebkitTransition: 'all 0.3s ease', // Browser-specific prefix added
+ * //     opacity: 0.8,
+ * // }
+ * ```
+ */
+export function getStyleWithVendor(style) {
+    const allowReg = /(transform|transition|animation)/i;
+    const newStyle = Object.keys(style).reduce((acc, key) => {
+        const webkitStyle = allowReg.test(key)
+            ? {
+                [`Webkit${key.replace(/^(.)/, (_, p1) => p1.toUpperCase())}`]: style[key],
+            }
+            : {};
+        return {
+            ...acc,
+            [key]: style[key],
+            ...webkitStyle,
+        };
+    }, {});
+    return newStyle;
+}
+/**
+ * 给元素设置带浏览器前缀的样式
+ * @desc {en} Set element style with browser vendor prefix
+ * @param {HTMLElement} dom 需要设置样式的元素
+ * @param {HTMLElement} dom {en} Element to set style
+ * @param {CSSProperties} style Original style
+ * @param {CSSProperties} style {en} Original style
+ * @returns {void}
+ * @example
+ * ```
+ * import { setStyleWithVendor } from '@arco-design/mobile-utils';
+ *
+ * // Example: Setting and displaying styles with the Webkit browser vendor prefix
+ * const element = document.getElementById('myElement');
+ * const originalStyle = {
+ *   transform: 'translateX(100px)',
+ *   transition: 'transform 0.5s ease',
+ *   borderRadius: '5px',
+ * };
+ *
+ * // Set the styles with the Webkit browser vendor prefix
+ * setStyleWithVendor(element, originalStyle);
+ *
+ * // Display the styles with the Webkit browser vendor prefixes applied
+ * const computedStyle = getComputedStyle(element);
+ * console.log(computedStyle.getPropertyValue('-webkit-transform')); // Output: The transformed style with the Webkit browser vendor prefix
+ * console.log(computedStyle.getPropertyValue('-webkit-transition')); // Output: The transition style with the Webkit browser vendor prefix
+ * console.log(computedStyle.getPropertyValue('border-radius')); // Output: The borderRadius style without a vendor prefix
+ * ```
+ */
+export function setStyleWithVendor(dom, style) {
+    const vendorStyle = getStyleWithVendor(style);
+    for (const key in vendorStyle) {
+        dom.style[key] = vendorStyle[key];
+    }
+}
+/**
+ * 计算默认值，仅未定义时使用默认值
+ * @desc {en} Calculate the default value, use default value only if undefined
+ * @param {T | undefined} value 输入的值
+ * @param {T | undefined} value {en} The input value
+ * @param {T} defaultValue 默认值
+ * @param {T} defaultValue {en} The default value
+ * @returns {T} 如果输入的值是未定义的，那么返回默认值，否则返回输入的值
+ * @returns {T} {en} Returns the default value if the input is undefined, otherwise returns the input value
+ * @example
+ * ```
+ * import { getDefaultValue } from '@arco-design/mobile-react/esm/_helpers';
+ *
+ * const result = getDefaultValue(42, 0);
+ * console.log(result); // Output: 42
+ *
+ * const result2 = getDefaultValue(undefined, 100);
+ * console.log(result2); // Output: 100
+ * ```
+ */
+export const getDefaultValue = (value, defaultValue) => {
+    return value === void 0 ? defaultValue : value;
+};

package/esnext/_helpers/react-dom.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+export interface RootType {
+    render: (container: ReactElement) => void;
+    _unmount: () => void;
+}
+export interface RootTypeReact extends RootType {
+    unmount?: () => void;
+}
+export declare type CreateRootFnType = (container: Element | DocumentFragment) => RootTypeReact;
+export declare const render: (app: ReactElement, container: Element | DocumentFragment) => {
+    render: (container: ReactElement) => void;
+    _unmount: () => void;
+};

package/esnext/_helpers/react-dom.js

@@ -0,0 +1,51 @@
+import * as ReactDOM from 'react-dom';
+function isObject(obj) {
+    return Object.prototype.toString.call(obj) === '[object Object]';
+}
+const CopyReactDOM = {
+    ...ReactDOM,
+};
+let copyRender;
+const { version, render: reactRender, unmountComponentAtNode } = CopyReactDOM;
+const isReact18 = Number((version || '').split('.')[0]) > 17;
+const updateUsingClientEntryPoint = (skipWarning) => {
+    // https://github.com/facebook/react/blob/17806594cc28284fe195f918e8d77de3516848ec/packages/react-dom/npm/client.js#L10
+    // Avoid console warning
+    const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = CopyReactDOM;
+    if (isObject(__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED)) {
+        __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skipWarning;
+    }
+};
+let createRoot;
+try {
+    ({ createRoot } = CopyReactDOM);
+}
+catch (_) { }
+if (isReact18 && createRoot) {
+    copyRender = (app, container) => {
+        updateUsingClientEntryPoint(true);
+        const root = createRoot(container);
+        updateUsingClientEntryPoint(false);
+        root.render(app);
+        root._unmount = function () {
+            setTimeout(() => {
+                root?.unmount?.();
+            });
+        };
+        return root;
+    };
+}
+else {
+    copyRender = function (app, container) {
+        reactRender(app, container);
+        return {
+            render: (comment) => {
+                reactRender(comment, container);
+            },
+            _unmount() {
+                unmountComponentAtNode(container);
+            },
+        };
+    };
+}
+export const render = copyRender;

package/esnext/_helpers/render.d.ts

@@ -0,0 +1,17 @@
+import { FunctionComponent } from 'react';
+import { RootType } from './react-dom';
+import { GlobalContextParams } from '../context-provider';
+export declare const renderRootCache: Record<string, RootType | undefined>;
+export declare class ReactDOMRender {
+    root: RootType | undefined;
+    app: FunctionComponent;
+    container: Element | DocumentFragment;
+    context: GlobalContextParams | undefined;
+    rootCacheId: string | undefined;
+    constructor(app: FunctionComponent, container: Element | DocumentFragment, context?: GlobalContextParams, rootCacheId?: string, // root id in cache
+    root?: RootType);
+    render: (props: any) => void;
+    setRootCache: () => void;
+    clearRootCache: () => void;
+    unmount: () => void;
+}

package/esnext/_helpers/render.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render as copyRender } from './react-dom';
+export const renderRootCache = {};
+export class ReactDOMRender {
+    constructor(app, container, context, rootCacheId, // root id in cache
+    root) {
+        this.render = props => {
+            const CustomApp = this.app;
+            const propsWithContext = { ...props, context: this.context };
+            if (this.root) {
+                this.root.render(React.createElement(CustomApp, Object.assign({}, propsWithContext)));
+            }
+            else {
+                this.root = copyRender(React.createElement(CustomApp, Object.assign({}, propsWithContext)), this.container);
+            }
+        };
+        this.setRootCache = () => {
+            if (this.rootCacheId) {
+                renderRootCache[this.rootCacheId] = this.root;
+            }
+        };
+        this.clearRootCache = () => {
+            if (this.rootCacheId) {
+                delete renderRootCache[this.rootCacheId];
+            }
+        };
+        this.unmount = () => {
+            this.root?._unmount();
+            this.root = undefined;
+            this.clearRootCache();
+        };
+        this.app = app;
+        this.container = container;
+        this.context = context;
+        this.rootCacheId = rootCacheId;
+        this.root = root;
+    }
+}

package/esnext/_helpers/type.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export interface SimpleBaseProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     * @default ""
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     * @default {}
+     */
+    style?: React.CSSProperties;
+}
+export interface BaseProps extends SimpleBaseProps {
+    /**
+     * 自定义组件内容
+     * @en Custom component content
+     * @default null
+     */
+    children?: React.ReactNode;
+}
+export interface BaseRef {
+    /**
+     * 组件外层dom元素
+     * @en The outer DOM element of the component
+     */
+    dom: HTMLDivElement | null;
+}

package/esnext/_helpers/type.js

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

package/esnext/action-sheet/index.d.ts

@@ -0,0 +1,106 @@
+import React, { ReactNode, CSSProperties } from 'react';
+import { PopupProps } from '../popup';
+import { OpenBaseProps } from '../masking';
+export interface ActionSheetItemOptions {
+    /**
+     * 选项文字内容
+     * @en Option text
+     */
+    content: ReactNode;
+    /**
+     * 状态，disabled 状态下不可点，danger 状态字体飘红
+     * @en Status, it isn't clickable in disabled status, its font is red in danger status
+     * */
+    status?: 'normal' | 'disabled' | 'danger';
+    /**
+     * 选项文字自定义类名
+     * @en Custom classname for option content
+     */
+    className?: string;
+    /**
+     * 选项文字自定义样式
+     * @en Custom stylesheet for option content
+     */
+    style?: CSSProperties;
+    /**
+     * 点击选项事件，返回值为 true 时可以阻止动作面板关闭
+     * @en Click option event, actionSheet will be prevent from closing when returning true
+     */
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => (void | boolean) | Promise<void | boolean>;
+}
+export interface ActionSheetProps extends Omit<PopupProps, 'children' | 'getScrollContainer' | 'orientationDirection' | 'direction'> {
+    /**
+     * 选项配置，详情见 ActionSheetItemOptions
+     * @en Option setting, see ActionSheetItemOptions for details
+     */
+    items: ActionSheetItemOptions[];
+    /**
+     * 取消按钮内容，传值则会展示，点击后关闭动作面板
+     * @en Cancel button content, the value will be shown, actionSheet will be closed when clicked
+     */
+    cancelText?: ReactNode;
+    /**
+     * 面板标题内容
+     * @en Title content
+     */
+    title?: ReactNode;
+    /**
+     * 面板副标题内容
+     * @en Sub title content
+     */
+    subTitle?: ReactNode;
+    /**
+     * 从底部滑出的菜单内容是否适配ipx底部
+     * @en Whether the content of the menu that slides out from the bottom fits the bottom of the iphoneX
+     * @default true
+     */
+    needBottomOffset?: boolean;
+}
+export interface ActionSheetRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.FunctionComponent<P>): {
+    /**
+     * 打开动作面板
+     * @desc {en} Open actionsheet
+     * @param {ActionSheetProps} config setting
+     * @returns {{ close: () => void; update: (newConfig: ActionSheetProps) => void; }}
+     */
+    open: (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+        key?: string | undefined;
+    }, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        close: () => void;
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+            key?: string | undefined;
+        }) => void;
+    };
+};
+declare const _default: React.ForwardRefExoticComponent<ActionSheetProps & React.RefAttributes<ActionSheetRef>> & {
+    /**
+     * 打开动作面板
+     * @desc {en} Open actionsheet
+     * @param {ActionSheetProps} config setting
+     * @returns {{ close: () => void; update: (newConfig: ActionSheetProps) => void; }}
+     */
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "translateZ" | "className" | "onTouchMove" | "getContainer" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "cancelText" | "subTitle"> & {
+        key?: string | undefined;
+    }, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        close: () => void;
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "translateZ" | "className" | "onTouchMove" | "getContainer" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "cancelText" | "subTitle"> & {
+            key?: string | undefined;
+        }) => void;
+    };
+};
+/**
+ * 动作面板组件
+ * @en ActionSheet Component
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 动作面板
+ * @name_en ActionSheet
+ */
+export default _default;

package/esnext/action-sheet/index.js

@@ -0,0 +1,53 @@
+import React, { useRef, forwardRef, useImperativeHandle, } from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout, CompWithGlobalContext } from '../context-provider';
+import Popup from '../popup';
+import { open } from './methods';
+const ActionSheet = forwardRef((props, ref) => {
+    const { className = '', items, cancelText, close, title, subTitle, needBottomOffset = true, ...otherProps } = props;
+    const popupRef = useRef(null);
+    useImperativeHandle(ref, () => popupRef.current);
+    function handleItemClick(e, item) {
+        e.stopPropagation();
+        if (item.status === 'disabled') {
+            return;
+        }
+        const result = item.onClick ? item.onClick(e) : null;
+        if (!result || typeof result === 'boolean') {
+            !result && close?.(e);
+        }
+        else if (result && result.then) {
+            result.then(res => !res && close?.(e));
+        }
+    }
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement(Popup, Object.assign({ ref: popupRef, className: cls(`${prefixCls}-action-sheet`, className), contentClass: `${prefixCls}-action-sheet-content`, close: close, direction: "bottom", needBottomOffset: needBottomOffset }, otherProps),
+        title || subTitle ? (React.createElement("div", { className: `${prefixCls}-action-sheet-header` },
+            title ? (React.createElement("div", { className: `${prefixCls}-action-sheet-title` }, title)) : null,
+            subTitle ? (React.createElement("div", { className: `${prefixCls}-action-sheet-sub-title` }, subTitle)) : null)) : null,
+        React.createElement("div", { className: `${prefixCls}-action-sheet-list` }, (items || []).map((item, index) => (React.createElement("div", { className: cls(`${prefixCls}-action-sheet-item`, item.className, item.status || 'normal'), key: index, style: item.style, onClick: e => handleItemClick(e, item) }, item.content)))),
+        cancelText ? (React.createElement("div", { className: `${prefixCls}-action-sheet-item cancel-item`, onClick: e => {
+                e.stopPropagation();
+                close?.(e);
+            } }, cancelText)) : null))));
+});
+export function methodsGenerator(Comp) {
+    return {
+        /**
+         * 打开动作面板
+         * @desc {en} Open actionsheet
+         * @param {ActionSheetProps} config setting
+         * @returns {{ close: () => void; update: (newConfig: ActionSheetProps) => void; }}
+         */
+        open: open(Comp),
+    };
+}
+const ActionSheetWithGlobalContext = CompWithGlobalContext(ActionSheet);
+/**
+ * 动作面板组件
+ * @en ActionSheet Component
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 动作面板
+ * @name_en ActionSheet
+ */
+export default componentWrapper(ActionSheet, methodsGenerator(ActionSheetWithGlobalContext));

package/esnext/action-sheet/methods.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { OpenBaseProps } from '../masking/methods';
+export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+    key?: string | undefined;
+}, context?: import("../context-provider").GlobalContextParams | undefined) => {
+    close: () => void;
+    update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+        key?: string | undefined;
+    }) => void;
+};

package/esnext/action-sheet/methods.js

@@ -0,0 +1,4 @@
+import { open as maskingOpen } from '../masking/methods';
+export function open(Component) {
+    return maskingOpen(Component, 'ARCO_ACTION_SHEET');
+}