@arco-design/mobile-react 2.29.6 → 2.30.1

package/tokens/mixin/index.less

@@ -1,7 +1,29 @@
+/**
+ * @type mixin-var
+ * @name GeneralMixinVars
+ * @name_en General Mixin
+ */
 @import '~@arco-design/mobile-utils/style/mixin.less';
 @import './vars-switch.less';
 @import './pxtorem.less';
 
+/**
+ * 根据base-font-size，设置单位尺寸为rem
+ * @desc {en} set the unit size to rem based on base-font-size
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
+ * @param @values {en} css property value, the values can be separated by commas when the style is composite
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .rem(font-size, 14);
+ *     .rem(padding, 16, 0);
+ * }
+ * ```
+ */
 .rem(@property; @values...) {
     @{property}: ~`(function () {
         var baseFontSize=@{base-font-size};
@@ -15,6 +37,23 @@
     }())`;
 }
 
+/**
+ * 根据base-font-size，设置常规模式和rtl模式下单位尺寸为rem
+ * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
+ * @param @values {en} css property value, the values can be separated by commas when the style is composite
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .rem-with-rtl(font-size, 14);
+ *     .rem-with-rtl(padding, 16, 0);
+ * }
+ * ```
+ */
 .rem-with-rtl(@property; @values...) {
     .rem(@property; @values...);
     [dir="rtl"] & {
@@ -24,7 +63,22 @@
     }
 }
 
-// for hack dark mode
+/**
+ * 当less变量use-dark-mode=1时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则
+ * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark when the less variable use-dark-mode=1.
+ * @param @rules 对应的暗黑模式规则
+ * @param @rules {en} Corresponding dark mode rules
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-dark-mode-query({
+ *         background-color: #000;
+ *     });
+ * }
+ * ```
+ */
 .use-dark-mode-query(@rules) {
     & when (@use-dark-mode = 1) {
         @media (prefers-color-scheme: dark) {
@@ -33,6 +87,28 @@
     }
 }
 
+/**
+ * 为属性设置arco提供的token变量
+ * @desc {en} set the token variable provided by Arco for the attribute
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @variables token变量名
+ * @param @variables {en} token variable name
+ * @param @preValues 复合属性css变量前缀
+ * @param @preValues {en} prefix for Compound Attribute CSS Variables
+ * @param @nextValues 复合属性css变量后缀
+ * @param @nextValues {en} suffix for Compound Attribute CSS Variables
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-var(background, primary-color);
+ *     .use-var(border, primary-color, 1px solid);
+ *     .use-var(border, cell-border-width, '', solid black);
+ * }
+ * ```
+ */
 .use-var(@property, @variables, @preValues: '', @nextValues: '') {
     @{property}: ~"@{preValues}" @@variables ~"@{nextValues}";
     & when (@use-css-vars = 1) {
@@ -40,6 +116,26 @@
     }
 }
 
+/**
+ * 在常规模式和rtl模式下为属性设置arco提供的token变量
+ * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @variables token变量名
+ * @param @variables {en} token variable name
+ * @param @preValues
+ * @param @preValues {en}
+ * @param @nextValues
+ * @param @nextValues {en}
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-var-with-rtl(margin-left, button-icon-text-gutter);
+ * }
+ * ```
+ */
 .use-var-with-rtl(@property, @variables, @preValues: '', @nextValues: '') {
     .use-var(@property, @variables, @preValues, @nextValues);
     [dir="rtl"] & {
@@ -49,6 +145,23 @@
     }
 }
 
+/**
+ * 0.5px的边框线
+ * @desc {en} a border line of 0.5 pixels
+ * @param @color 使用css变量为线设置颜色
+ * @param @color {en} set border-color by CSS variable
+ * @param @direction 边框方向，默认为全部方向
+ * @param @direction {en} border direction，default to all directions.
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .hairline-var(line-color);
+ *     .hairline-var(line-color, top);
+ * }
+ * ```
+ */
 .hairline-var(@color, @direction: all) {
     .hairline(@@color, @direction);
     & when (@use-css-vars = 1) {
@@ -56,6 +169,23 @@
     }
 }
 
+/**
+ * 字体加粗
+ * @desc {en} font bold
+ * @param @color 使用css变量设置加粗的字体颜色，默认继承文字当前颜色
+ * @param @color {en} set color by CSS variable
+ * @param @stroke 字体粗细，默认0.3px
+ * @param @stroke {en} font weight, default 0.3 pixel
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .text-medium-var();
+ *    .text-medium-var(primary-color, 0.5PX);
+ * }
+ * ```
+ */
 .text-medium-var(@color: currentColor, @stroke: 0.3PX) {
     .text-medium(@@color, @stroke);
     & when (@use-css-vars = 1) {
@@ -63,6 +193,29 @@
     }
 }
 
+/**
+ * 1px边框
+ * @desc {en} 1 pixel border
+ * @param @direction 边框方向
+ * @param @direction {en} border direction
+ * @param @borderColor 使用css变量设置边框颜色
+ * @param @borderColor {en} set border-color by CSS variable
+ * @param @borderRadius border-radius，默认为0
+ * @param @borderRadius {en} border-radius, default value is 0
+ * @param @borderWidth border-width，默认为1px
+ * @param @borderWidth {en} border-width, default value is 1 pixel
+ * @param @borderStyle border-style，默认为solid
+ * @param @borderStyle {en} border-style, default value is solid
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .onepx-border-var(top, line-color);
+ *    .onepx-border-var(all, line-color, 2, 2px, dashed);
+ * }
+ * ```
+ */
 .onepx-border-var(@direction, @borderColor, @borderRadius: 0, @borderWidth: 1PX, @borderStyle: solid) {
     .onepx-border(@direction, @@borderColor, @borderRadius, @borderWidth, @borderStyle);
     & when (@use-css-vars = 1) {
@@ -70,6 +223,20 @@
     }
 }
 
+/**
+ * 元素右下0.5px边框
+ * @desc {en} 0.5px border on bottom right
+ * @param @color 使用css变量设置边框颜色
+ * @param @color {en} set border-color by CSS variable
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .hairline-bottom-right-var(line-color);
+ * }
+ * ```
+ */
 .hairline-bottom-right-var(@color) {
     .hairline-bottom-right(@@color);
     & when (@use-css-vars = 1) {
@@ -77,6 +244,20 @@
     }
 }
 
+/**
+ * 元素左上0.5px边框
+ * @desc {en} 0.5px border on top left
+ * @param @color 使用css变量设置边框颜色
+ * @param @color {en} set border-color by CSS variable
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .hairline-top-left-var(line-color);
+ * }
+ * ```
+ */
 .hairline-top-left-var(@color) {
     .hairline-top-left(@@color);
     & when (@use-css-vars = 1) {
@@ -84,6 +265,20 @@
     }
 }
 
+/**
+ * 设置Loading组件颜色
+ * @desc {en} set Loading component color
+ * @param @color 使用css变量设置颜色
+ * @param @color {en} set color by CSS variable
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .set-loading-color-var(primary-color);
+ * }
+ * ```
+ */
 .set-loading-color-var(@color) {
     .set-loading-color(@@color);
     & when (@use-css-vars = 1) {
@@ -91,6 +286,23 @@
     }
 }
 
+/**
+ * 设置最小字号
+ * @desc {en} set minimum font-size
+ * @param @size 使用css变量设置最小字号
+ * @param @size {en} set minimum font-size by CSS variable
+ * @param @scale 设置最小字号下文字缩放比例，默认为0.9
+ * @param @scale {en} set minimum font-size down text scale，default value is 0.9
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .set-font-size-var(badge-font-size);
+ *    .set-font-size-var(badge-font-size, 0.5);
+ * }
+ * ```
+ */
 .set-font-size-var(@size, @scale: 0.9) {
     & when not (@use-css-vars = 1) {
         .set-font-size(@@size);
@@ -106,6 +318,26 @@
     }
 }
 
+/**
+ * 设置content-box盒模型下元素宽度
+ * @desc {en} set box width in content-box
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @width 元素总宽度，包含内边距
+ * @param @width element width, include padding
+ * @param @padding-left 左侧内边距
+ * @param @padding-left {en} padding-left
+ * @param @padding-right 右侧内边距
+ * @param @padding-right {en} padding-right
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding-left, badge-text-padding-right);
+ * }
+ * ```
+ */
 .set-content-box-width-var(@property, @width, @padding-left, @padding-right) {
     & when not (@use-css-vars = 1) {
         .set-content-box-width(@property, @@width, @@padding-left, @@padding-right);
@@ -115,3 +347,25 @@
     }
 }
 
+/**
+ * 设置Steps组件颜色
+ * @desc {en} set Steps component color
+ * @param @color 使用css变量设置主颜色
+ * @param @color {en} set main step color by CSS variable
+ * @param @finish-color 使用css变量设置已完成步骤的颜色
+ * @param @finish-color {en} set finished step color by CSS variable
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .set-steps-color-var(primary-color, lighter-primary-color);
+ * }
+ * ```
+ */
+.set-steps-color-var(@color, @finish-color) {
+    .set-steps-color(@@color, @@finish-color);
+    & when (@use-css-vars = 1) {
+        .set-steps-color(var(~"--@{color}", @@color), var(~"--@{finish-color}", @@finish-color));
+    }
+}

package/umd/_helpers/hooks.d.ts

@@ -1,10 +1,26 @@
 /**
  * @type hooks
- * @name 公共hooks
+ * @name GeneralHooks
  * @name_en General Hooks
  */
 import React from 'react';
 import { BezierType } from '../progress';
+/**
+ * 监听页面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);
+ * ```
+ */
 export declare function useListenResize(resizeHandler: () => void, deps?: any[], needListen?: boolean): void;
 /**
  * useState自定义封装，统一处理在组件卸载后还使用setState的行为
@@ -13,6 +29,7 @@ export declare function useListenResize(resizeHandler: () => void, deps?: any[],
  * @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';
@@ -21,13 +38,120 @@ export declare function useListenResize(resizeHandler: () => void, deps?: any[],
  * ```
  */
 export declare function useMountedState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>];
+/**
+ * 用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);
+ * ```
+ */
 export declare function useSameRefState<T>(initialValue: T): [T, React.MutableRefObject<T>, (data: T) => void];
+/**
+ * 用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);
+ * ```
+ */
 export declare function useRefState<T>(initialValue: T | (() => T)): [T, React.MutableRefObject<T>, React.Dispatch<React.SetStateAction<T>>];
+/**
+ * 用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);
+ * ```
+ */
 export declare function useRefMountedState<T>(initialValue: T | (() => T)): [T, React.MutableRefObject<T>, React.Dispatch<React.SetStateAction<T>>];
+/**
+ * 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]);
+ * ```
+ */
 export declare function useUpdateEffect(effect: () => void | (() => void), dependencies?: any[]): void;
+/**
+ * 手动触发一次组件的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();
+ * }
+ * ```
+ */
 export declare function useForceUpdate(): () => void;
+/**
+ * 获取任意变量的最新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);
+ * ```
+ */
 export declare function useLatestRef<T>(variable: T): React.MutableRefObject<T>;
+/**
+ * 从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();
+ * ```
+ */
 export declare function useSystem(): "" | "android" | "ios" | "pc";
+/**
+ * 获取页面视口宽高大小，并在页面有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();
+ * ```
+ */
 export declare function useWindowSize(listenResize?: boolean): {
     windowWidth: number;
     windowHeight: number;
@@ -37,14 +161,130 @@ export interface PopupScrollRefType {
     maxScrollX: number;
     maxScrollY: number;
 }
+/**
+ * 弹窗中滚动统一处理，防止滚动穿透
+ * @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);
+ * ```
+ */
 export declare function usePopupScroll(visible: boolean, popupDom: HTMLDivElement | null, getScrollContainer?: () => (HTMLElement | null)[] | HTMLElement | null, orientationDirection?: 'top' | 'bottom' | 'left' | 'right', preventCallback?: (e: TouchEvent, direction: 'x' | 'y') => void, onTouchMove?: (e: TouchEvent, prevented: boolean, direction: 'x' | 'y') => void, gestureOutOfControl?: boolean): void;
+/**
+ * 在滑动类组件中，如果有内部可滚动区域，则在内部滚动区域滚动时禁用滑动事件
+ * @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);
+ * ```
+ */
 export declare function useSwiperInnerScroll(getInnerScrollContainer?: () => (HTMLElement | null)[] | HTMLElement | null): void;
+/**
+ * 事件绑定统一封装
+ * @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);
+ * ```
+ */
 export declare function useAddListener(dom: HTMLDivElement | null, event: string, handler: any, options?: {
     capture: boolean;
 }): void;
-export declare function usePreventBodyScroll(visible: boolean, preventBodyScroll: boolean, initialBodyOverflow?: string): void;
+/**
+ * 在全屏组件出现时，将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);
+ * ```
+ */
+export declare function usePreventBodyScroll(visible: boolean, preventBodyScroll?: boolean, initialBodyOverflow?: string): void;
+/**
+ * 进度条计算公共逻辑，根据传入的参数计算出当前百分比和过渡效果开关，进度类组件内部使用
+ * @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);
+ * ```
+ */
 export declare function useProgress(mountedTransition: boolean, percentage: number, duration: number, mountedBezier: BezierType, step: number): [number, boolean];
+/**
+ * 单击和双击事件统一处理
+ * @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);
+ * ```
+ */
 export declare function useSingleAndDoubleClick(onClick: (e: React.MouseEvent) => void, onDoubleClick: (e: React.MouseEvent) => void, delay?: number): (e: React.MouseEvent) => void;
+/**
+ * 自动生成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);
+ * ```
+ */
 export declare function useGenSvgKey(userSetSvgKey: string): {
     svgKey: string;
 };