@arco-design/mobile-react 2.31.6 → 2.32.0

package/esnext/progress/style/index.less

@@ -0,0 +1,205 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-progress {
+
+    &.progress-fixed {
+        position: fixed;
+        width: 100%;
+        .set-prop-with-rtl(left, 0);
+        z-index: @full-screen-z-index + 1;;
+    }
+
+    .progress-wrapper {
+        position: relative;
+        width: 100%;
+        display: flex;
+        align-items: center;
+
+        .progress-track {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            .use-var(background-color, progress-track-color);
+            .use-var(height, progress-track-height);
+
+            &.position-innerLeft {
+                .use-var(height, progress-inner-track-height);
+            }
+
+            &.nav-mode {
+                .use-var(background-color, progress-nav-track-color);
+                .use-var(height, progress-nav-track-height);
+            }
+        }
+
+        .progress-bar {
+            height: 100%;
+            position: relative;
+            .use-var(background-color, progress-primary-color);
+
+            .wrapper {
+                position: absolute;
+                .set-prop-with-rtl(right, 0);
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+
+        .filleted {
+            border-radius: 100PX;
+        }
+
+        .text {
+            .use-var(font-size, progress-text-font-size);
+            .use-var-with-rtl(margin-left, progress-text-gutter);
+            .use-var(color, progress-primary-color);
+        }
+
+        .text-left {
+            .set-prop-with-rtl(margin-left, 0);
+            .use-var-with-rtl(margin-right, progress-text-gutter);
+        }
+
+        .text-innerLeft {
+            position: absolute;
+            z-index: 1;
+            .use-var(color, progress-text-inner-color);
+        }
+
+        .text-center {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            z-index: 1;
+            transform: translate(-50%, -50%);
+            .use-var(color, progress-text-inner-color);
+        }
+
+        .text-follow {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .use-var(width, progress-text-follow-width);
+            .use-var(height, progress-text-follow-height);
+            .use-var(border-radius, progress-text-follow-border-radius);
+            .use-var(font-size, progress-text-follow-font-size);
+            .use-var(color, progress-text-inner-color);
+            .use-var(background-color, progress-primary-color);
+        }
+
+        .track-color {
+            .use-var(background-color, progress-track-color); }
+
+        .color {
+            .use-var(stroke, progress-primary-color);
+            .use-var(color, progress-primary-color);
+        }
+
+        .bar-disabled {
+            .use-var(background-color, progress-disabled-color);
+        }
+
+        .text-disabled {
+            .use-var(color, progress-disabled-text-color);
+        }
+
+        .inner-disabled {
+            .use-var(color, progress-text-inner-color);
+
+            &.inner-block-disabled {
+                .use-var(background-color, progress-disabled-color);
+            }
+        }
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+& when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .@{prefix}-progress {
+    .progress-wrapper {
+      .progress-track {
+        @{arco-dark-mode-selector} & {
+          .use-var(background-color, dark-progress-track-color);
+        }
+      }
+      .progress-bar {
+        @{arco-dark-mode-selector} & {
+          .use-var(background-color, dark-progress-primary-color);
+        }
+      }
+      .text {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-progress-primary-color);
+        }
+      }
+      .text-innerLeft {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-progress-text-inner-color);
+        }
+      }
+      .text-center {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-progress-text-inner-color);
+        }
+      }
+      .text-follow {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-progress-text-inner-color);
+          .use-var(background-color, dark-progress-primary-color);
+        }
+      }
+      .track-color {
+        @{arco-dark-mode-selector} & {
+          .use-var(background-color, dark-progress-track-color);
+        }
+      }
+      .color {
+        @{arco-dark-mode-selector} & {
+          .use-var(stroke, dark-progress-primary-color);
+          .use-var(color, dark-progress-primary-color);
+        }
+      }
+      .bar-disabled {
+        @{arco-dark-mode-selector} & {
+          .use-var(background-color, dark-progress-disabled-color);
+        }
+      }
+      .text-disabled {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-progress-disabled-text-color);
+        }
+      }
+      .inner-disabled {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-progress-text-inner-color);
+        }
+        &.inner-block-disabled {
+          @{arco-dark-mode-selector} & {
+            .use-var(background-color, dark-progress-disabled-color);
+          }
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/pull-refresh/android-pull-refresh.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PullRefreshRef, PullRefreshBasicProps } from './model';
+export declare const PullRefresh: React.ForwardRefExoticComponent<PullRefreshBasicProps & React.RefAttributes<PullRefreshRef>>;

package/esnext/pull-refresh/android-pull-refresh.js

@@ -0,0 +1,168 @@
+import React, { useRef, forwardRef, useCallback, useMemo, useContext, useEffect, useImperativeHandle, } from 'react';
+import { cls, nextTick, defaultLocale } from '@arco-design/mobile-utils';
+import Loading from '../loading';
+import { GlobalContext } from '../context-provider';
+import { PullRefreshStatus } from './model';
+import { useCommonState, useAddScrollEvents, useCheckAsStart } from './hooks';
+import { setStyleWithVendor } from '../_helpers';
+const dampRateCalculate = (val, tipsHeight, dampRate) => val > tipsHeight ? tipsHeight + (val - tipsHeight) / dampRate : val;
+export const PullRefresh = forwardRef((props, ref) => {
+    const { prefixCls, locale = defaultLocale } = useContext(GlobalContext);
+    const { className, style, children, loosingText = (React.createElement("div", { className: cls(`${prefixCls}-pull-refresh-label-text`) },
+        React.createElement("span", null, locale.PullRefresh.loosingText))), loadingText = (React.createElement("div", { className: cls(`${prefixCls}-pull-refresh-label-text`) },
+        React.createElement(Loading, { type: "circle", radius: 4 }),
+        React.createElement("span", null, locale.PullRefresh.loadingText))), pullingText = (React.createElement("div", { className: cls(`${prefixCls}-pull-refresh-label-text`) },
+        React.createElement("span", null, locale.PullRefresh.pullingText))), finishText = (React.createElement("div", { className: cls(`${prefixCls}-pull-refresh-label-text`) },
+        React.createElement("span", null, locale.PullRefresh.finishText))), initialText, finishDelay = 300, loosingMinHeight, dampRate = 4, disabled = false, useHideAsNestedScroll = true, onRefresh, allowPullWhenNotTop = false, } = props;
+    const placeRef = useRef(null);
+    const touchRef = useRef(null);
+    const currentTranslateYRef = useRef(0);
+    const onTouching = useRef(false);
+    const { loadingRef, status, setStatus, labelRef, domRef, touching, setTouching, loosingHeight, handleRefresh, tipsHeight, } = useCommonState({ loosingMinHeight, onRefresh });
+    const { ifShouldHandle } = useCheckAsStart({ domRef, allowPullWhenNotTop });
+    const currentLabelStyle = useMemo(() => {
+        return useHideAsNestedScroll &&
+            !touching &&
+            status === PullRefreshStatus.Pulling &&
+            (domRef?.current?.scrollTop ?? 0) > 0
+            ? { opacity: 0 }
+            : {};
+    }, [useHideAsNestedScroll, touching]);
+    const pullTextConfig = {
+        [PullRefreshStatus.Static]: initialText === void 0 ? pullingText : initialText,
+        [PullRefreshStatus.Pulling]: pullingText,
+        [PullRefreshStatus.Loosing]: loosingText || pullingText,
+        [PullRefreshStatus.Loading]: loadingText,
+        [PullRefreshStatus.Finish]: finishText,
+    };
+    const scroll = (y, ms, callback) => {
+        if (y < 5) {
+            if (y < 0 || ms === 0) {
+                currentTranslateYRef.current = 0;
+                return;
+            }
+        }
+        const translateY = dampRateCalculate(y, loosingHeight, dampRate);
+        currentTranslateYRef.current = translateY;
+        placeRef.current &&
+            setStyleWithVendor(placeRef.current, {
+                transform: translateY ? `translateY(${translateY}px) translateZ(0)` : '',
+                ...(ms ? { transition: `all ${ms / 1000}s` } : {}),
+            });
+        setTimeout(() => {
+            callback?.();
+        }, ms);
+    };
+    const reset = (callback = () => { }) => {
+        scroll(0, 300, () => {
+            if (domRef.current && domRef.current.scrollTop < 0) {
+                domRef.current.scrollTop = 0;
+            }
+            loadingRef.current = false;
+            setStatus(PullRefreshStatus.Static);
+            placeRef.current && setStyleWithVendor(placeRef.current, { transition: '' });
+            callback();
+        });
+    };
+    const handleTouchStart = useCallback((e) => {
+        if (disabled || touchRef.current || loadingRef.current || !domRef.current)
+            return;
+        if (!ifShouldHandle())
+            return;
+        setTouching(true);
+        if (domRef.current.scrollTop === 0) {
+            domRef.current.scrollTop = 1;
+        }
+        const { pageX, pageY } = e.touches[0];
+        if (pageX && pageY) {
+            touchRef.current = { start: domRef.current?.scrollTop, x: pageX, y: pageY };
+        }
+        setStatus(PullRefreshStatus.Pulling);
+    }, [disabled, ifShouldHandle]);
+    const refresh = () => new Promise(resolve => {
+        setStatus(PullRefreshStatus.Loading);
+        nextTick(() => {
+            scroll(tipsHeight, 300);
+            handleRefresh().then(() => {
+                if (pullTextConfig[PullRefreshStatus.Finish]) {
+                    setStatus(PullRefreshStatus.Finish);
+                    setTimeout(() => {
+                        reset(resolve);
+                    }, finishDelay);
+                }
+                else {
+                    reset(resolve);
+                }
+            });
+        });
+    });
+    const handleTouchEnd = useCallback(() => {
+        if (currentTranslateYRef.current === 0 && !ifShouldHandle()) {
+            return;
+        }
+        onTouching.current = false;
+        setTouching(false);
+        if (disabled || !touchRef.current || loadingRef.current)
+            return;
+        touchRef.current = null;
+        if (status === PullRefreshStatus.Loosing) {
+            refresh();
+        }
+        else {
+            reset();
+        }
+    }, [disabled, status, tipsHeight, ifShouldHandle]);
+    const handleTouchMove = useCallback((e) => {
+        onTouching.current = true;
+        if (disabled || loadingRef.current || !domRef.current)
+            return;
+        if (!touchRef.current)
+            return;
+        const { pageY } = e.touches[0];
+        const pullY = pageY - touchRef.current.y - touchRef.current.start;
+        if (currentTranslateYRef.current === 0 && domRef.current.scrollTop > 0) {
+            return;
+        }
+        if (currentTranslateYRef.current === 0 && pullY < 0) {
+            return;
+        }
+        setStatus(() => pullY > loosingHeight ? PullRefreshStatus.Loosing : PullRefreshStatus.Pulling);
+        scroll(pullY, 0);
+        e.stopPropagation();
+        e.cancelable && e.preventDefault();
+    }, [disabled, loosingHeight]);
+    useEffect(() => {
+        const onScroll = () => {
+            if (onTouching.current &&
+                domRef.current &&
+                (domRef.current.scrollTop < 0 || currentTranslateYRef.current)) {
+                // 禁止 ios 负 scrollTop 和双层滚动
+                domRef.current.scrollTop = 0;
+            }
+        };
+        domRef.current?.addEventListener('scroll', onScroll);
+        return () => {
+            domRef.current?.removeEventListener('scroll', onScroll);
+        };
+    }, []);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        refresh,
+        updateIOSHeight() {
+            console.warn('updateIOSHeight 仅在 type="ios" 时可用');
+        },
+    }));
+    useAddScrollEvents({ domRef, handleTouchStart, handleTouchMove, handleTouchEnd });
+    return (React.createElement("div", { className: cls(`${prefixCls}-pull-refresh all-border-box is-android`, className, {
+            'is-disabled': (disabled || (!touching && useHideAsNestedScroll)) &&
+                status !== PullRefreshStatus.Loading,
+        }), style: style, ref: domRef },
+        React.createElement("div", { className: cls(`${prefixCls}-pull-refresh-place`), ref: placeRef },
+            React.createElement("div", { className: cls(`${prefixCls}-pull-refresh-label`), ref: labelRef, style: currentLabelStyle }, pullTextConfig[status]),
+            React.createElement("div", { className: cls(`${prefixCls}-pull-refresh-content`, {
+                    'is-loading': [
+                        PullRefreshStatus.Loading,
+                        PullRefreshStatus.Finish,
+                    ].includes(status),
+                }) }, children))));
+});

package/esnext/pull-refresh/hooks.d.ts

@@ -0,0 +1,30 @@
+import type { RefObject } from 'react';
+import { Promise } from 'es6-promise';
+import { PullRefreshStatus } from './model';
+export declare const useCommonState: ({ onRefresh, loosingMinHeight, }: {
+    onRefresh?: (() => Promise<void>) | undefined;
+    loosingMinHeight?: number | undefined;
+}) => {
+    status: PullRefreshStatus;
+    setStatus: import("react").Dispatch<import("react").SetStateAction<PullRefreshStatus>>;
+    touching: boolean;
+    setTouching: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    loadingRef: import("react").MutableRefObject<boolean>;
+    labelRef: RefObject<HTMLDivElement>;
+    domRef: RefObject<HTMLDivElement>;
+    loosingHeight: number;
+    handleRefresh: () => Promise<[void | undefined, unknown]>;
+    tipsHeight: number;
+};
+export declare const useAddScrollEvents: ({ domRef, handleTouchStart, handleTouchMove, handleTouchEnd, }: {
+    domRef: RefObject<HTMLDivElement>;
+    handleTouchStart: (evt: HTMLElementEventMap['touchstart']) => void;
+    handleTouchMove: (evt: HTMLElementEventMap['touchmove']) => void;
+    handleTouchEnd: (evt: HTMLElementEventMap['touchend']) => void;
+}) => void;
+export declare const useCheckAsStart: ({ allowPullWhenNotTop, domRef, }: {
+    allowPullWhenNotTop: boolean;
+    domRef: RefObject<HTMLDivElement>;
+}) => {
+    ifShouldHandle: () => boolean | null;
+};

package/esnext/pull-refresh/hooks.js

@@ -0,0 +1,73 @@
+import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { Promise } from 'es6-promise';
+import { PullRefreshStatus } from './model';
+export const useCommonState = ({ onRefresh, loosingMinHeight, }) => {
+    const [status, setStatus] = useState(PullRefreshStatus.Static);
+    const loadingRef = useRef(false);
+    const labelRef = useRef(null);
+    const domRef = useRef(null);
+    const [touching, setTouching] = useState(false);
+    const tipsHeight = useMemo(() => {
+        return labelRef.current?.getBoundingClientRect().height ?? 40;
+    }, [status]);
+    const loosingHeight = useMemo(() => loosingMinHeight || tipsHeight, [tipsHeight, loosingMinHeight]);
+    const handleRefresh = useCallback(() => {
+        loadingRef.current = true;
+        // 避免动画过快，最短加载时间
+        // @en Minimum load time, avoid animation too fast
+        return Promise.all([
+            onRefresh?.(),
+            new Promise(resolve => {
+                // 最少加载一秒
+                // @en Load at least one second
+                setTimeout(() => {
+                    resolve();
+                }, 500);
+            }),
+        ]);
+    }, [onRefresh]);
+    return {
+        status,
+        setStatus,
+        touching,
+        setTouching,
+        loadingRef,
+        labelRef,
+        domRef,
+        loosingHeight,
+        handleRefresh,
+        tipsHeight,
+    };
+};
+export const useAddScrollEvents = ({ domRef, handleTouchStart, handleTouchMove, handleTouchEnd, }) => {
+    useEffect(() => {
+        domRef.current?.addEventListener('touchstart', handleTouchStart, { passive: false });
+        return () => {
+            domRef.current?.removeEventListener('touchstart', handleTouchStart);
+        };
+    }, [handleTouchMove]);
+    useEffect(() => {
+        domRef.current?.addEventListener('touchmove', handleTouchMove, { passive: false });
+        return () => {
+            domRef.current?.removeEventListener('touchmove', handleTouchMove);
+        };
+    }, [handleTouchMove]);
+    useEffect(() => {
+        domRef.current?.addEventListener('touchend', handleTouchEnd);
+        domRef.current?.addEventListener('touchcancel', handleTouchEnd);
+        return () => {
+            domRef.current?.removeEventListener('touchend', handleTouchEnd);
+            domRef.current?.removeEventListener('touchcancel', handleTouchEnd);
+        };
+    }, [handleTouchEnd]);
+};
+export const useCheckAsStart = ({ allowPullWhenNotTop, domRef, }) => {
+    const ifShouldHandle = useCallback(() => {
+        const domRefHeight = domRef.current?.offsetHeight ?? 0;
+        return (domRef.current &&
+            !(!allowPullWhenNotTop &&
+                (domRef.current.scrollTop < 0 ||
+                    domRef.current.scrollTop > domRef.current.scrollHeight - domRefHeight)));
+    }, [allowPullWhenNotTop]);
+    return { ifShouldHandle };
+};

package/esnext/pull-refresh/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { PullRefreshBasicProps, PullRefreshRef } from './model';
+export type { PullRefreshRef } from './model';
+export interface PullRefreshProps extends PullRefreshBasicProps {
+    /**
+     * 下拉刷新组件不同的实现方式，android - 常规的外层容器 transform，ios - 利用 ios scrollTop 负值实现下拉及回弹(性能优于transform)，仅ios可用。指定该属性值后优先级高于 useIosOptimize
+     * @en Different implementation methods of PullRefresh, android - conventional outer container transform, ios - use ios scrollTop negative value to achieve pull-down and rebound (performance is better than transform), only available for ios. After specifying value, the priority is higher than useIosOptimize
+     * @default 跟随系统
+     * @default_en Follow the system
+     */
+    type?: 'ios' | 'android';
+    /**
+     * 在 ios 上是否使用 scrollTop 负值实现下拉及回弹，而不是 transform，关闭后所有机型都使用 transform 的方式
+     * @en Whether to use the negative value of scrollTop on ios to achieve pull-down and rebound instead of transform. After closing, all models use transform
+     * @default false
+     */
+    useIosOptimize?: boolean;
+}
+/**
+ * 下拉刷新数据组件。
+ * @en PullRefresh component that pulls down to refresh data.
+ * @name 下拉刷新
+ * @name_en PullRefresh
+ * @type 其他
+ * @type_en Others
+ */
+declare const PullRefresh: React.ForwardRefExoticComponent<PullRefreshProps & React.RefAttributes<PullRefreshRef>>;
+export default PullRefresh;

package/esnext/pull-refresh/index.js

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+import { PullRefresh as IOSPullRefresh } from './ios-pull-refresh';
+import { PullRefresh as AndroidPullRefresh } from './android-pull-refresh';
+import { useSystem } from '../_helpers';
+/**
+ * 下拉刷新数据组件。
+ * @en PullRefresh component that pulls down to refresh data.
+ * @name 下拉刷新
+ * @name_en PullRefresh
+ * @type 其他
+ * @type_en Others
+ */
+const PullRefresh = forwardRef((props, ref) => {
+    const { type, useIosOptimize, children, ...rest } = props;
+    const system = useSystem();
+    const Container = type === 'ios' || (useIosOptimize && (type || system) === 'ios')
+        ? IOSPullRefresh
+        : AndroidPullRefresh;
+    return React.createElement(Container, Object.assign({}, { ...rest, ref }), children);
+});
+export default PullRefresh;

package/esnext/pull-refresh/ios-pull-refresh.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PullRefreshRef, PullRefreshBasicProps } from './model';
+export declare const PullRefresh: React.ForwardRefExoticComponent<PullRefreshBasicProps & React.RefAttributes<PullRefreshRef>>;

package/esnext/pull-refresh/ios-pull-refresh.js

@@ -0,0 +1,137 @@
+import React, { useState, useRef, forwardRef, useCallback, useContext, useEffect, useMemo, useImperativeHandle, } from 'react';
+import { cls, defaultLocale } from '@arco-design/mobile-utils';
+import Loading from '../loading';
+import { GlobalContext } from '../context-provider';
+import { PullRefreshStatus } from './model';
+import { useCommonState, useAddScrollEvents, useCheckAsStart } from './hooks';
+import { useListenResize } from '../_helpers';
+export const PullRefresh = forwardRef((props, ref) => {
+    const { prefixCls, locale = defaultLocale } = useContext(GlobalContext);
+    const animationRef = useRef(0);
+    const { className, style, children, loadingText = (React.createElement("div", { className: cls(`${prefixCls}-pull-refresh-label-text`) },
+        React.createElement(Loading, { type: "circle", radius: 4 }),
+        React.createElement("span", null, locale.PullRefresh.loadingText))), pullingText = (React.createElement("div", { className: cls(`${prefixCls}-pull-refresh-label-text`) },
+        React.createElement("span", null, locale.PullRefresh.pullingText))), finishText = (React.createElement("div", { className: cls(`${prefixCls}-pull-refresh-label-text`) },
+        React.createElement("span", null, locale.PullRefresh.finishText))), initialText, finishDelay = 300, disabled = false, loosingMinHeight, useHideAsNestedScroll = true, allowPullWhenNotTop = false, onRefresh, } = props;
+    const lastScrollTop = useRef(0);
+    const statusRef = useRef(PullRefreshStatus.Static);
+    const [labelStyle, setLabelStyle] = useState({});
+    const [contentHeight, setContentHeight] = useState(0);
+    const { loadingRef, status, setStatus, labelRef, domRef, touching, setTouching, loosingHeight, tipsHeight, handleRefresh, } = useCommonState({ loosingMinHeight, onRefresh });
+    const { ifShouldHandle } = useCheckAsStart({ domRef, allowPullWhenNotTop });
+    const currentLabelStyle = useMemo(() => {
+        return (useHideAsNestedScroll &&
+            !touching &&
+            status === PullRefreshStatus.Pulling &&
+            (domRef?.current?.scrollTop ?? 0) > 0) ||
+            disabled
+            ? { ...labelStyle, opacity: 0 }
+            : labelStyle;
+    }, [labelStyle, useHideAsNestedScroll, touching, disabled]);
+    const pullTextConfig = {
+        [PullRefreshStatus.Static]: initialText === void 0 ? pullingText : initialText,
+        [PullRefreshStatus.Pulling]: pullingText,
+        [PullRefreshStatus.Loading]: loadingText,
+        [PullRefreshStatus.Finish]: finishText,
+    };
+    const reset = useCallback((animationKey, callback = () => { }) => {
+        if (animationRef.current === animationKey) {
+            setLabelStyle({
+                position: 'relative',
+                height: '0px',
+                top: 0,
+                transition: 'height .45s',
+            });
+        }
+        setTimeout(() => {
+            if (animationRef.current === animationKey) {
+                if (domRef.current)
+                    domRef.current.style.overflow = 'auto';
+                setStatus(PullRefreshStatus.Pulling);
+                setLabelStyle({
+                    position: 'absolute',
+                    top: `-${tipsHeight}px`,
+                    height: `${tipsHeight}px`,
+                    transition: 'height 0s',
+                });
+                statusRef.current = PullRefreshStatus.Static;
+                loadingRef.current = false;
+                callback();
+            }
+        }, 450);
+    }, [tipsHeight]);
+    const handleTouchStart = useCallback(() => {
+        if (disabled || loadingRef.current || !domRef.current || !ifShouldHandle())
+            return;
+        setTouching(true);
+        if (domRef.current && domRef.current.scrollTop === 0) {
+            domRef.current.scrollTop = 1;
+        }
+    }, [disabled, ifShouldHandle]);
+    const refresh = () => new Promise(resolve => {
+        if (domRef.current) {
+            domRef.current.style.overflow = 'hidden';
+            const animationKey = new Date().getTime();
+            setStatus(PullRefreshStatus.Loading);
+            setLabelStyle({
+                position: 'relative',
+                top: 0,
+                height: `${tipsHeight}px`,
+                transition: 'height 0s',
+            });
+            animationRef.current = animationKey;
+            handleRefresh().then(() => {
+                if (pullTextConfig[PullRefreshStatus.Finish]) {
+                    setStatus(PullRefreshStatus.Finish);
+                    setTimeout(() => {
+                        reset(animationKey, resolve);
+                    }, finishDelay);
+                }
+                else {
+                    reset(animationKey, resolve);
+                }
+            });
+        }
+    });
+    const handleTouchEnd = useCallback(() => {
+        if (disabled || loadingRef.current || !domRef.current)
+            return;
+        setTouching(false);
+        if (statusRef.current === PullRefreshStatus.Loosing)
+            refresh();
+    }, [disabled, tipsHeight]);
+    const handleTouchMove = useCallback(() => {
+        if (disabled || loadingRef.current || !domRef.current)
+            return;
+        setTimeout(() => {
+            const isLoosing = -(domRef.current?.scrollTop ?? 0) > loosingHeight;
+            if (isLoosing)
+                lastScrollTop.current = domRef.current?.scrollTop ?? 0;
+            statusRef.current = isLoosing ? PullRefreshStatus.Loosing : PullRefreshStatus.Pulling;
+        });
+    }, [disabled, loosingHeight]);
+    const updateIOSHeight = useCallback(() => {
+        if (domRef.current) {
+            const { height } = domRef.current.getBoundingClientRect();
+            setContentHeight(height);
+        }
+    }, []);
+    useListenResize(updateIOSHeight);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        refresh,
+        updateIOSHeight,
+    }));
+    useEffect(() => {
+        updateIOSHeight();
+        reset(animationRef.current);
+    }, []);
+    useAddScrollEvents({ domRef, handleTouchStart, handleTouchMove, handleTouchEnd });
+    return (React.createElement("div", { className: cls(`${prefixCls}-pull-refresh all-border-box is-ios`, className, {
+            'is-disabled': disabled || (!touching && useHideAsNestedScroll),
+        }), ref: domRef, style: contentHeight > 0 ? { height: contentHeight, ...(style || {}) } : style },
+        React.createElement("div", { className: cls(`${prefixCls}-pull-refresh-content-wrapper`) },
+            React.createElement("div", { className: cls(`${prefixCls}-pull-refresh-label-wrapper`), style: currentLabelStyle },
+                React.createElement("div", { className: cls(`${prefixCls}-pull-refresh-label`), ref: labelRef }, pullTextConfig[status])),
+            React.createElement("div", { className: cls(`${prefixCls}-pull-refresh-content`), style: contentHeight > 0 ? { minHeight: `${contentHeight + 1}px` } : {} }, children))));
+});