@arco-design/mobile-react 2.29.5 → 2.30.0

package/umd/_helpers/hooks.js

@@ -34,9 +34,26 @@
 
   /**
    * @type hooks
-   * @name 公共hooks
+   * @name GeneralHooks
    * @name_en General Hooks
    */
+
+  /**
+   * 监听页面resize事件的统一封装
+   * @desc {en} Unified encapsulation for monitoring page resize events
+   * @param resizeHandler resize事件回调
+   * @param resizeHandler {en} Resize event callback
+   * @param deps 触发事件绑定更新的依赖
+   * @param deps {en} Dependencies that trigger event binding updates
+   * @param needListen 是否开启事件监听，默认开启
+   * @param needListen {en} Whether to enable event monitoring
+   * @example
+   * ```
+   * import { useListenResize } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * useListenResize(setSize, [], listenResize);
+   * ```
+   */
   function useListenResize(resizeHandler, deps, needListen) {
     if (deps === void 0) {
       deps = [];
@@ -47,15 +64,16 @@
     }
 
     (0, _react.useEffect)(function () {
-      if (!needListen) {
-        return function () {};
+      if (needListen) {
+        window.addEventListener('resize', resizeHandler);
+        window.addEventListener('orientationchange', resizeHandler);
       }
 
-      window.addEventListener('resize', resizeHandler);
-      window.addEventListener('orientationchange', resizeHandler);
       return function () {
-        window.removeEventListener('resize', resizeHandler);
-        window.removeEventListener('orientationchange', resizeHandler);
+        if (needListen) {
+          window.removeEventListener('resize', resizeHandler);
+          window.removeEventListener('orientationchange', resizeHandler);
+        }
       };
     }, [].concat(deps, [needListen]));
   }
@@ -66,6 +84,7 @@
    * @desc {en} Tips: Use in scenarios where asynchronous processing is not completed after unmount. It is not recommended to replace useState without brains
    * @param initialState 初始状态
    * @param initialState {en} Initial State
+   * @returns [state, setState]，同useState返回值
    * @example
    * ```
    * import { useMountedState } from '@arco-design/mobile-react/esm/_helpers/hooks';
@@ -96,6 +115,20 @@
     var result = [state, setValidState];
     return result;
   }
+  /**
+   * 用useState管理状态，且在状态更新之前同步至ref，并返回ref
+   * @desc {en} Use useState to manage the state, and synchronize to ref before the state is updated, and return ref
+   * @param initialValue 初始状态
+   * @param initialValue {en} Initial State
+   * @returns [state, stateRef, setState]
+   * @example
+   * ```
+   * import { useSameRefState } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * const [opened, openedRef, setOpened] = useSameRefState(false);
+   * ```
+   */
+
 
   function useSameRefState(initialValue) {
     var _useState2 = (0, _react.useState)(initialValue),
@@ -111,6 +144,20 @@
 
     return [state, stateRef, setStateProxy];
   }
+  /**
+   * 用useState管理状态，且在状态更新后同步至ref，并返回ref
+   * @desc {en} Use useState to manage the state, and synchronize to ref after the state is updated, and return ref
+   * @param initialValue 初始状态
+   * @param initialValue {en} Initial State
+   * @returns [state, stateRef, setState]
+   * @example
+   * ```
+   * import { useRefState } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * const [index, indexRef, setIndex] = useRefState(currentIndex);
+   * ```
+   */
+
 
   function useRefState(initialValue) {
     var _useState3 = (0, _react.useState)(initialValue),
@@ -123,6 +170,20 @@
     }, [state]);
     return [state, stateRef, setState];
   }
+  /**
+   * 用useState管理状态，且在状态更新后同步至ref，并返回ref，统一处理在组件卸载后还使用setState的行为
+   * @desc {en} Use useState to manage the state, and synchronize to ref after the state is updated, and return ref, and uniformly handle the behavior of using setState after the component is uninstalled
+   * @param initialValue 初始状态
+   * @param initialValue {en} Initial State
+   * @returns [state, stateRef, setState]
+   * @example
+   * ```
+   * import { useRefMountedState } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * const [active, activeRef, setActive] = useRefMountedState(false);
+   * ```
+   */
+
 
   function useRefMountedState(initialValue) {
     var _useMountedState = useMountedState(initialValue),
@@ -135,6 +196,23 @@
     }, [state]);
     return [state, stateRef, setState];
   }
+  /**
+   * useEffect特殊封装，仅在非首次依赖更新时触发回调
+   * @desc {en} Special encapsulation of useEffect, which only triggers the callback when the dependency is not updated for the first time
+   * @param effect useEffect回调
+   * @param effect {en} useEffect callback
+   * @param dependencies useEffect依赖
+   * @param dependencies {en} useEffect dependencies
+   * @example
+   * ```
+   * import { useUpdateEffect } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * useUpdateEffect(() => {
+   *     handleIndexChange(index);
+   * }, [index]);
+   * ```
+   */
+
 
   function useUpdateEffect(effect, dependencies) {
     if (dependencies === void 0) {
@@ -150,6 +228,21 @@
       }
     }, dependencies);
   }
+  /**
+   * 手动触发一次组件的rerender
+   * @desc {en} Manually trigger the rerender of the component once
+   * @example
+   * ```
+   * import { useForceUpdate } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * const update = useForceUpdate();
+   *
+   * function forceUpdate() {
+   *     update();
+   * }
+   * ```
+   */
+
 
   function useForceUpdate() {
     var _useState4 = (0, _react.useState)(0),
@@ -162,6 +255,21 @@
     }, []);
     return update;
   }
+  /**
+   * 获取任意变量的最新ref值（用于监听属性、方法等非state变量）
+   * @desc {en} Get the latest ref value of any variable (used to monitor non-state variables such as properties and methods)
+   * @param variable 待获取最新值的变量
+   * @param variable {en} Variable to get latest value
+   * @returns variableRef，变量的最新ref值
+   * @example
+   * ```
+   * import { useLatestRef } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * const { wrapSize } = props;
+   * const wrapSizeRef = useLatestRef(wrapSize);
+   * ```
+   */
+
 
   function useLatestRef(variable) {
     var variableRef = (0, _react.useRef)(variable);
@@ -170,6 +278,18 @@
     }, [variable]);
     return variableRef;
   }
+  /**
+   * 从navigator.userAgent中获取当前操作系统，如果无法获取ua，则从ContextProvider传入的system中获取值
+   * @desc {en} Get the current operating system from navigator.userAgent, if ua cannot be obtained, get the value from the system passed in by ContextProvider
+   * @returns system 操作系统，"" | "pc" | "android" | "ios"
+   * @example
+   * ```
+   * import { useSystem } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * const system = useSystem();
+   * ```
+   */
+
 
   function useSystem() {
     var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
@@ -186,13 +306,27 @@
     }, [currentSystem]);
     return system;
   }
+  /**
+   * 获取页面视口宽高大小，并在页面有resize时更新大小
+   * @desc {en} Get the width and height of the page viewport, and update the size when the page is resized
+   * @param needListen 是否开启resize事件监听
+   * @param needListen {en} Whether to enable resize event monitoring
+   * @returns 页面宽高，{ windowWidth, windowHeight }
+   * @example
+   * ```
+   * import { useWindowSize } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * const { windowHeight, windowWidth } = useWindowSize();
+   * ```
+   */
+
 
   function useWindowSize(listenResize) {
-    var _useState6 = (0, _react.useState)(0),
+    var _useState6 = (0, _react.useState)(typeof window !== 'undefined' ? window.innerWidth : 0),
         windowWidth = _useState6[0],
         setWindowWidth = _useState6[1];
 
-    var _useState7 = (0, _react.useState)(0),
+    var _useState7 = (0, _react.useState)(typeof window !== 'undefined' ? window.innerHeight : 0),
         windowHeight = _useState7[0],
         setWindowHeight = _useState7[1];
 
@@ -211,7 +345,30 @@
     };
   }
 
-  /* eslint-disable max-lines-per-function */
+  /**
+   * 弹窗中滚动统一处理，防止滚动穿透
+   * @desc {en} Unified processing of scrolling in pop-up windows to prevent scrolling penetration
+   * @param visible 弹窗是否被打开
+   * @param visible {en} Whether the popup is opened
+   * @param popupDom 弹窗的dom元素
+   * @param popupDom {en} DOM element of the popup
+   * @param getScrollContainer 弹窗中的滚动容器，可传入多个
+   * @param getScrollContainer {en} The scrolling container in the popup, which can pass in multiple
+   * @param orientationDirection 弹窗内容朝向，默认为top（从上到下），用于实现模拟横屏
+   * @param orientationDirection {en} The content orientation of the popup, the default is top (from top to bottom), which is used to simulate a horizontal screen
+   * @param preventCallback 在滚动穿透被阻止（preventDefault被触发）时的回调
+   * @param preventCallback {en} Callback when scrolling is blocked (preventDefault is triggered)
+   * @param onTouchMove touchmove 自定义事件
+   * @param onTouchMove {en} Touchmove custom event
+   * @param gestureOutOfControl 是否禁用滚动穿透处理
+   * @param gestureOutOfControl {en} Whether to disable scroll through processing
+   * @example
+   * ```
+   * import { usePopupScroll } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * usePopupScroll(visible, domRef.current, getScrollContainer, orientationDirection, onPreventTouchMove, onTouchMove, gestureOutOfControl);
+   * ```
+   */
   function usePopupScroll(visible, popupDom, getScrollContainer, orientationDirection, preventCallback, onTouchMove, gestureOutOfControl) {
     if (orientationDirection === void 0) {
       orientationDirection = 'top';
@@ -393,6 +550,19 @@
       };
     }, [visible, popupDom, handleTouchStart, handleTouchMove]);
   }
+  /**
+   * 在滑动类组件中，如果有内部可滚动区域，则在内部滚动区域滚动时禁用滑动事件
+   * @desc {en} In the sliding class component, if there is an inner scrollable area, the sliding event is disabled when the inner scrolling area is scrolled
+   * @param getInnerScrollContainer 内部可滚动区域，可传入多个
+   * @param getInnerScrollContainer {en} Inner scrollable area, can pass in multiple
+   * @example
+   * ```
+   * import { useSwiperInnerScroll } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * useSwiperInnerScroll(getInnerScrollContainer);
+   * ```
+   */
+
 
   function useSwiperInnerScroll(getInnerScrollContainer) {
     var stopFunc = (0, _react.useCallback)(function (e) {
@@ -421,6 +591,26 @@
       };
     }, [getInnerScrollContainer]);
   }
+  /**
+   * 事件绑定统一封装
+   * @desc {en} Unified encapsulation of event binding
+   * @param dom 待绑定事件的dom元素
+   * @param dom {en} The dom element to be bound to the event
+   * @param event 待绑定事件名称
+   * @param event {en} The name of the event to be bound
+   * @param handler 待绑定事件回调
+   * @param handler {en} The callback of the event to be bound
+   * @param options 待绑定事件配置，默认为 { capture: true }
+   * @param options {en} Event configuration to be bound, the default is { capture: true }
+   * @example
+   * ```
+   * import { useAddListener } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * useAddListener(domRef.current, 'touchstart', onTouchStart);
+   * useAddListener(domRef.current, 'touchend', onTouchEnd);
+   * ```
+   */
+
 
   function useAddListener(dom, event, handler, options) {
     if (options === void 0) {
@@ -451,8 +641,28 @@
 
   var arcoFullScreenCount = 0;
   var arcoFullScreenOriginOverflow = '';
+  /**
+   * 在全屏组件出现时，将body的overflow设置为hidden，防止滚动穿透
+   * @desc {en} When the full screen component appears, set the overflow of the body to hidden to prevent scrolling penetration
+   * @param visible 全屏组件是否被打开
+   * @param visible {en} Whether the full screen component is opened
+   * @param preventBodyScroll 是否启用防滚动穿透，默认启用
+   * @param preventBodyScroll {en} Whether to enable anti-scroll penetration, enabled by default
+   * @param initialBodyOverflow body在初始状态下的overflow值，在全屏组件全部关闭后会还原
+   * @param initialBodyOverflow {en} The overflow value of the body in the initial state, which will be restored after all full-screen components are closed
+   * @example
+   * ```
+   * import { usePreventBodyScroll } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * usePreventBodyScroll(visible, preventBodyScroll, initialBodyOverflow);
+   * ```
+   */
 
   function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOverflow) {
+    if (preventBodyScroll === void 0) {
+      preventBodyScroll = true;
+    }
+
     // 新出现一个全屏组件则计数+1，并设置body hidden样式
     // @en When a new full-screen component appears, count + 1 and set the body hidden style
     var addFullScreen = (0, _react.useCallback)(function () {
@@ -499,6 +709,18 @@
       };
     }, [visible]);
   }
+  /**
+   * 进度条计算公共逻辑，根据传入的参数计算出当前百分比和过渡效果开关，进度类组件内部使用
+   * @desc {en} Progress bar calculation common logic, used internally by the progress class component
+   * @returns [当前计算的百分比, 当前是否应有过渡效果]
+   * @example
+   * ```
+   * import { usePreventBodyScroll } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * const [currentPercentage, transitionControl] = useProgress(mountedTransition, percentage, duration, mountedBezier, step);
+   * ```
+   */
+
 
   function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
     var _useState8 = (0, _react.useState)(0),
@@ -535,6 +757,24 @@
     }, [count, percentage, step]);
     return [currentPercentage, transitionControl];
   }
+  /**
+   * 单击和双击事件统一处理
+   * @desc {en} Unified processing of single and double click events
+   * @param onClick 单击事件回调
+   * @param onClick {en} Callback of single click event
+   * @param onDoubleClick 双击事件回调
+   * @param onDoubleClick {en} Callback of double click event
+   * @param delay 两次点击被判定为双击事件的最大间隔时间
+   * @param delay {en} The maximum interval between two clicks is judged as a double-click event
+   * @returns clickHandler，统一后的事件处理方法
+   * @example
+   * ```
+   * import { useSingleAndDoubleClick } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * const handleClick = useSingleAndDoubleClick(handleImageClick, handleImageDoubleClick);
+   * ```
+   */
+
 
   function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
     if (delay === void 0) {
@@ -565,6 +805,23 @@
   }
 
   var arcoSvgKeyCount = 0;
+  /**
+   * 自动生成svg <def>标签的唯一标识，用于区分不同svg的<def>内容
+   * @desc {en} Automatically generate the unique identifier of the svg <def> tag, which is used to distinguish the <def> content of different svg
+   * @param userSetSvgKey 自定义唯一标识，传入则覆盖自动生成的值
+   * @param userSetSvgKey {en} Customize the unique identifier, if passed in, it will override the automatically generated value
+   * @returns 包含svgKey的对象 生成后的唯一标识
+   * @globalVariable
+   * ```
+   * let arcoSvgKeyCount = 0;
+   * ```
+   * @example
+   * ```
+   * import { useGenSvgKey } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * const { svgKey } = useGenSvgKey(userSetSvgKey);
+   * ```
+   */
 
   function useGenSvgKey(userSetSvgKey) {
     var _useState12 = (0, _react.useState)(''),

package/umd/_helpers/index.d.ts

@@ -4,12 +4,89 @@
  */
 import { CSSProperties } from 'react';
 export * from './hooks';
-export * from './type';
 export * from './react-dom';
+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/umd/_helpers/index.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "./hooks", "./type", "./react-dom"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "./hooks", "./react-dom", "./type"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("./hooks"), require("./type"), require("./react-dom"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("./hooks"), require("./react-dom"), require("./type"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.hooks, global.type, global.reactDom);
+    factory(mod.exports, global._extends, global.hooks, global.reactDom, global.type);
     global.index = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends3, _hooks, _type, _reactDom) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends3, _hooks, _reactDom, _type) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -31,23 +31,55 @@
     if (key in _exports && _exports[key] === _hooks[key]) return;
     _exports[key] = _hooks[key];
   });
-  Object.keys(_type).forEach(function (key) {
-    if (key === "default" || key === "__esModule") return;
-    if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-    if (key in _exports && _exports[key] === _type[key]) return;
-    _exports[key] = _type[key];
-  });
   Object.keys(_reactDom).forEach(function (key) {
     if (key === "default" || key === "__esModule") return;
     if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
     if (key in _exports && _exports[key] === _reactDom[key]) return;
     _exports[key] = _reactDom[key];
   });
+  Object.keys(_type).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+    if (key in _exports && _exports[key] === _type[key]) return;
+    _exports[key] = _type[key];
+  });
 
   /**
    * @type utils
    * @name componentUtils
    */
+
+  /**
+   * 获取带浏览器前缀的样式
+   * @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,
+   * // }
+   * ```
+   */
   function getStyleWithVendor(style) {
     var allowReg = /(transform|transition|animation)/i;
     var newStyle = Object.keys(style).reduce(function (acc, key) {
@@ -60,6 +92,37 @@
     }, {});
     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
+   * ```
+   */
+
 
   function setStyleWithVendor(dom, style) {
     var vendorStyle = getStyleWithVendor(style);
@@ -71,6 +134,22 @@
   /**
    * 计算默认值，仅未定义时使用默认值
    * @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
+   * ```
    */