@arco-design/mobile-react 2.31.5 → 2.32.0

package/esm/_helpers/react-dom.js

@@ -1,21 +1,25 @@
-var _CopyReactDOM$version;
-
-import ReactDOM from 'react-dom';
+import _extends from "@babel/runtime/helpers/extends";
+import * as ReactDOM from 'react-dom';
 
 function isObject(obj) {
   return Object.prototype.toString.call(obj) === '[object Object]';
 }
 
-var __SECRET_INTERNALS__ = '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED';
-var CopyReactDOM = ReactDOM;
+var CopyReactDOM = _extends({}, ReactDOM);
+
 var copyRender;
-var isReact18 = Number((_CopyReactDOM$version = CopyReactDOM.version) == null ? void 0 : _CopyReactDOM$version.split('.')[0]) > 17;
+var version = CopyReactDOM.version,
+    reactRender = CopyReactDOM.render,
+    unmountComponentAtNode = CopyReactDOM.unmountComponentAtNode;
+var isReact18 = Number((version || '').split('.')[0]) > 17;
 
 var updateUsingClientEntryPoint = function updateUsingClientEntryPoint(skipWarning) {
   // https://github.com/facebook/react/blob/17806594cc28284fe195f918e8d77de3516848ec/packages/react-dom/npm/client.js#L10
   // Avoid console warning
-  if (isObject(CopyReactDOM[__SECRET_INTERNALS__])) {
-    CopyReactDOM[__SECRET_INTERNALS__].usingClientEntryPoint = skipWarning;
+  var __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = CopyReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+  if (isObject(__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED)) {
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skipWarning;
   }
 };
 
@@ -42,13 +46,13 @@ if (isReact18 && createRoot) {
   };
 } else {
   copyRender = function copyRender(app, container) {
-    CopyReactDOM.render(app, container);
+    reactRender(app, container);
     return {
       render: function render(comment) {
-        CopyReactDOM.render(comment, container);
+        reactRender(comment, container);
       },
       _unmount: function _unmount() {
-        CopyReactDOM.unmountComponentAtNode(container);
+        unmountComponentAtNode(container);
       }
     };
   };

package/esm/stepper/style/css/index.css

@@ -511,11 +511,10 @@
  * ```
  */
 .arco-stepper {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: inline-flex;
   font-size:  0.28rem ;
-  width:  1.96rem ;
 }
 .arco-stepper.arco-square {
   border-width: 1PX;

package/esm/stepper/style/index.less

@@ -1,9 +1,8 @@
 @import '../../../style/mixin.less';
 
 .@{prefix}-stepper {
-    display: flex;
+    display: inline-flex;
     .use-var(font-size, stepper-font-size);
-    .use-var(width, stepper-width);
 
     &.@{prefix}-square {
         border-width: 1PX;

package/esnext/_helpers/hooks.d.ts

@@ -0,0 +1,290 @@
+/**
+ * @type 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的行为
+ * tips：在unmount后有异步处理未完成的场景使用，不推荐无脑替换useState
+ * @desc {en} Custom encapsulation of useState, uniformly handle the behavior of using setState after the component is unloaded
+ * @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';
+ *
+ * const [scrollValue, setScrollValue] = useMountedState(value);
+ * ```
+ */
+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;
+};
+export interface PopupScrollRefType {
+    ele: HTMLElement;
+    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;
+/**
+ * 在全屏组件出现时，将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;
+};