@nutui/nutui-react-taro 2.0.0-alpha.9 → 2.0.0-beta.2

package/dist/esm/{picker.taro-0570ec32.js → picker.taro-86564e14.js}

@@ -2,11 +2,11 @@ import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
 import classNames from "classnames";
 import Taro from "@tarojs/taro";
 import { View, PickerView, PickerViewColumn } from "@tarojs/components";
-import { P as Popup } from "./popup.taro-e756f3fc.js";
+import { P as Popup } from "./popup.taro-1cd1f9d2.js";
 import { u as useTouch } from "./use-touch-ff43512c.js";
-import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+import { g as getRectByTaro } from "./use-client-rect-2bb6c562.js";
 import { c as canUseDom } from "./can-use-dom-0e539bd3.js";
-import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { u as useConfig } from "./configprovider.taro-a7f3bcfd.js";
 import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
 let passiveSupported = false;
@@ -250,7 +250,7 @@ const defaultProps = {
 };
 const InternalPicker = (props, ref) => {
   const { locale } = useConfig();
-  const { visible, title, options = [], defaultValue = [], className, style, threeDimensional, duration, onConfirm, onClose, afterClose, onChange, ...rest } = { ...defaultProps, ...props };
+  const { children, visible, title, options = [], defaultValue = [], className, style, threeDimensional, duration, onConfirm, onClose, afterClose, onChange, ...rest } = { ...defaultProps, ...props };
   const classPrefix = "nut-picker";
   const classes = classNames(classPrefix, className);
   const [selectedValue, setSelectedValue] = usePropsValue({
@@ -262,12 +262,27 @@ const InternalPicker = (props, ref) => {
       (_a = props.onConfirm) == null ? void 0 : _a.call(props, setSelectedOptions(), val);
     }
   });
+  const [innerVisible, setInnerVisible] = usePropsValue({
+    value: props.visible,
+    defaultValue: false,
+    finalValue: false
+  });
+  const [innerValue, setInnerValue] = useState(selectedValue);
   const [currentValue, setCurrentValue] = useState([]);
   const [columnIndex, setColumnIndex] = useState(0);
   const pickerRef = useRef(null);
   const [refs, setRefs] = useRefs();
   const [columnsList, setColumnsList] = useState([]);
   const isConfirmEvent = useRef(false);
+  const actions = {
+    open: () => {
+      setInnerVisible(true);
+    },
+    close: () => {
+      setInnerVisible(false);
+    }
+  };
+  useImperativeHandle(ref, () => actions);
   const formatCascade = (columns, values) => {
     const formatted = [];
     let columnOptions = {
@@ -300,40 +315,49 @@ const InternalPicker = (props, ref) => {
     }
     return "single";
   };
-  const normalListData = () => {
+  const normalListData = (innerValue2) => {
     const type = columnsType();
     switch (type) {
       case "multiple":
         return options;
       case "cascade":
-        return formatCascade(options, selectedValue);
+        return formatCascade(options, innerValue2);
       default:
         return [options];
     }
   };
   const init = () => {
-    const normalData = normalListData();
+    const normalData = normalListData(innerValue);
     setColumnsList(normalData);
     const data = [];
     normalData.length > 0 && normalData.map((item) => {
       item[0] && data.push(item[0].value);
       return item;
     });
-    if (!defaultValue.length && selectedValue.length === 0) {
-      setSelectedValue([...data]);
+    if (!innerValue.length && innerValue.length === 0) {
+      setInnerValue([...data]);
     }
   };
   useEffect(() => {
-    if (!visible) {
+    setInnerValue(innerValue !== selectedValue ? selectedValue : innerValue);
+  }, [innerVisible]);
+  useEffect(() => {
+    if (innerVisible) {
+      init();
+    }
+  }, [options, innerVisible]);
+  useEffect(() => {
+    if (!innerVisible) {
       return;
     }
-    init();
-  }, [options, visible]);
+    Taro.getEnv() !== "WEB" && setCurrentValue(defaultValuesConvert());
+    onChange && onChange(setSelectedOptions(), innerValue, columnIndex);
+  }, [innerValue, columnsList, innerVisible]);
   const setSelectedOptions = () => {
     const options2 = [];
     let currOptions = [];
     columnsList.forEach((columnOptions, index) => {
-      currOptions = columnOptions.filter((item) => item.value === selectedValue[index]);
+      currOptions = columnOptions.filter((item) => item.value === innerValue[index]);
       if (currOptions[0]) {
         options2.push(currOptions[0]);
       } else {
@@ -344,8 +368,8 @@ const InternalPicker = (props, ref) => {
   };
   const defaultValuesConvert = () => {
     const defaultIndexs = [];
-    if (selectedValue.length > 0) {
-      selectedValue.forEach((value, index) => {
+    if (innerValue.length > 0) {
+      innerValue.forEach((value, index) => {
         var _a;
         for (let i = 0; i < ((_a = columnsList == null ? void 0 : columnsList[index]) == null ? void 0 : _a.length); i++) {
           if (columnsList[index][i].value === value) {
@@ -362,37 +386,30 @@ const InternalPicker = (props, ref) => {
     }
     return defaultIndexs;
   };
-  useEffect(() => {
-    if (!visible) {
-      return;
-    }
-    Taro.getEnv() !== "WEB" && setCurrentValue(defaultValuesConvert());
-    onChange && onChange(setSelectedOptions(), selectedValue, columnIndex);
-    if (isConfirmEvent.current) {
-      isConfirmEvent.current = false;
-      onConfirm && onConfirm(setSelectedOptions(), selectedValue);
-    }
-  }, [selectedValue, columnsList, visible]);
   const chooseItem = (columnOptions, columnIndex2) => {
     var _a, _b;
+    const values = [];
+    const start = columnIndex2;
     if (columnOptions && Object.keys(columnOptions).length) {
-      if (selectedValue[columnIndex2] !== columnOptions.value) {
+      if (values[columnIndex2] !== columnOptions.value) {
         if (columnsType() === "cascade") {
-          selectedValue[columnIndex2] = columnOptions.value || "";
-          setSelectedValue([...selectedValue]);
+          values[columnIndex2] = columnOptions.value || "";
           while ((_a = columnOptions == null ? void 0 : columnOptions.children) == null ? void 0 : _a[0]) {
-            selectedValue[columnIndex2 + 1] = columnOptions.children[0].value;
-            setSelectedValue([...selectedValue]);
+            values[columnIndex2 + 1] = columnOptions.children[0].value;
             columnIndex2++;
             columnOptions = columnOptions.children[0];
           }
           if ((_b = columnOptions == null ? void 0 : columnOptions.children) == null ? void 0 : _b.length) {
-            selectedValue[columnIndex2 + 1] = "";
-            setSelectedValue([...selectedValue]);
+            values[columnIndex2 + 1] = "";
           }
-          setColumnsList(normalListData());
+          const combineResult = [
+            ...innerValue.slice(0, start),
+            ...values.splice(start)
+          ];
+          setInnerValue(combineResult);
+          setColumnsList(normalListData(combineResult));
         } else {
-          setSelectedValue((data) => {
+          setInnerValue((data) => {
             const cdata = [...data];
             cdata[columnIndex2] = Object.prototype.hasOwnProperty.call(columnOptions, "value") ? columnOptions.value : "";
             return cdata;
@@ -403,16 +420,16 @@ const InternalPicker = (props, ref) => {
     }
   };
   const confirm = () => {
-    let movings = false;
+    let moving = false;
     refs.forEach((ref2) => {
       if (ref2.moving)
-        movings = true;
+        moving = true;
       ref2.stopMomentum();
     });
-    if (movings) {
+    if (moving) {
       isConfirmEvent.current = true;
     } else {
-      onConfirm && onConfirm(setSelectedOptions(), selectedValue);
+      setSelectedValue(innerValue);
       closePicker();
     }
     setTimeout(() => {
@@ -420,19 +437,26 @@ const InternalPicker = (props, ref) => {
     }, 0);
   };
   const closePicker = () => {
-    onClose && onClose(setSelectedOptions(), selectedValue);
-    afterClose && afterClose(setSelectedOptions(), selectedValue, pickerRef);
+    setInnerVisible(false);
+    onClose && onClose(setSelectedOptions(), innerValue);
+    afterClose && afterClose(setSelectedOptions(), innerValue, pickerRef);
   };
   const renderTitleBar = () => {
     return React.createElement(
       "div",
       { className: `${classPrefix}__control` },
-      React.createElement("span", { className: `${classPrefix}__cancel-btn`, onClick: () => closePicker() }, locale.cancel),
+      React.createElement("span", { className: `${classPrefix}__cancel-btn`, onClick: (e) => {
+        e.stopPropagation();
+        closePicker();
+      } }, locale.cancel),
       React.createElement("div", { className: `${classPrefix}__title` }, title || ""),
-      React.createElement("span", { className: `${classPrefix}__confirm-btn`, onClick: confirm }, locale.confirm)
+      React.createElement("span", { className: `${classPrefix}__confirm-btn`, onClick: (e) => {
+        e.stopPropagation();
+        confirm();
+      } }, locale.confirm)
     );
   };
-  const [pickingStatus, setPickingStatus] = useState(false);
+  const [, setPickingStatus] = useState(false);
   const pickerStart = () => {
     setPickingStatus(true);
   };
@@ -452,25 +476,31 @@ const InternalPicker = (props, ref) => {
     chooseItem(columnsList[changeIndex][data.detail.value[changeIndex]], changeIndex);
   };
   return React.createElement(
-    Popup,
-    { visible, position: "bottom", onClose: () => {
-      closePicker();
-    } },
+    React.Fragment,
+    null,
+    typeof children === "function" && children(selectedValue),
     React.createElement(
-      View,
-      { className: classes, style, ...rest, catchMove: true },
-      renderTitleBar(),
-      React.createElement("div", { className: `${classPrefix}__panel`, ref: pickerRef }, Taro.getEnv() === "WEB" ? columnsList == null ? void 0 : columnsList.map((item, index) => {
-        return React.createElement(PickerPanel$1, { ref: setRefs(index), defaultValue: selectedValue == null ? void 0 : selectedValue[index], options: item, threeDimensional, chooseItem: (value, index2) => chooseItem(value, index2), duration, key: index, keyIndex: index, itemShow: visible });
-      }) : React.createElement(PickerView, { ref: pickerRef, value: currentValue, immediateChange: true, onPickStart: pickerStart, onChange: pickerChange, onPickEnd: pickerEnd, className: "nut-picker-view-panel" }, columnsList == null ? void 0 : columnsList.map((columnOptions, index) => {
-        return React.createElement(PickerViewColumn, { key: `col${index}` }, columnOptions.map((item, index2) => {
-          return React.createElement(
-            View,
-            { key: item.value || index2, className: "nut-picker-roller-item-title" },
-            React.createElement(React.Fragment, null, item.text || item)
-          );
-        }));
-      })))
+      Popup,
+      { visible: innerVisible, position: "bottom", afterClose: () => {
+        closePicker();
+      } },
+      React.createElement(
+        View,
+        { className: classes, style, ...rest, catchMove: true },
+        renderTitleBar(),
+        typeof children !== "function" && children,
+        React.createElement("div", { className: `${classPrefix}__panel`, ref: pickerRef }, Taro.getEnv() === "WEB" ? columnsList == null ? void 0 : columnsList.map((item, index) => {
+          return React.createElement(PickerPanel$1, { ref: setRefs(index), defaultValue: innerValue == null ? void 0 : innerValue[index], options: item, threeDimensional, chooseItem: (value, index2) => chooseItem(value, index2), duration, key: index, keyIndex: index, itemShow: visible });
+        }) : React.createElement(PickerView, { ref: pickerRef, value: currentValue, immediateChange: true, onPickStart: pickerStart, onChange: pickerChange, onPickEnd: pickerEnd, className: "nut-picker-view-panel" }, columnsList == null ? void 0 : columnsList.map((columnOptions, index) => {
+          return React.createElement(PickerViewColumn, { key: `col${index}` }, columnOptions.map((item, index2) => {
+            return React.createElement(
+              View,
+              { key: item.value || index2, className: "nut-picker-roller-item-title" },
+              React.createElement(React.Fragment, null, item.text || item)
+            );
+          }));
+        })))
+      )
     )
   );
 };

package/dist/esm/popover.taro-cec3a7a0.js

@@ -0,0 +1,201 @@
+import React, { useRef, useState, useEffect } from "react";
+import classNames from "classnames";
+import Taro from "@tarojs/taro";
+import { P as Popup } from "./popup.taro-1cd1f9d2.js";
+import { a as getRect, g as getRectByTaro } from "./use-client-rect-2bb6c562.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  list: [],
+  location: "bottom",
+  visible: false,
+  offset: [0, 12],
+  targetId: "",
+  className: "",
+  showArrow: true,
+  overlay: false,
+  closeOnOutsideClick: true,
+  closeOnActionClick: true,
+  onClick: () => {
+  },
+  onOpen: () => {
+  },
+  onClose: () => {
+  }
+};
+const classPrefix = `nut-popover`;
+const Popover = (props) => {
+  const { children, list, location, visible, offset, targetId, overlay, closeOnOutsideClick, closeOnActionClick, className, showArrow, style, onClick, onOpen, onClose, onSelect, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const popoverRef = useRef(null);
+  const popoverContentRef = useRef(null);
+  const [showPopup, setShowPopup] = useState(false);
+  const [elWidth, setElWidth] = useState(0);
+  const [elHeight, setElHeight] = useState(0);
+  const [rootPosition, setRootPosition] = useState();
+  useEffect(() => {
+    setShowPopup(visible);
+    if (visible) {
+      setTimeout(() => {
+        getContentWidth();
+      }, 0);
+    }
+  }, [visible]);
+  const getContentWidth = async () => {
+    let rect;
+    if (targetId) {
+      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+        rect = getRect(document.querySelector(`#${targetId}`));
+      } else {
+        rect = await getRectTaro(targetId);
+      }
+    } else {
+      rect = await getRectByTaro(popoverRef.current);
+    }
+    setRootPosition({
+      width: rect.width,
+      height: rect.height,
+      left: rect.left,
+      top: rect.top,
+      right: rect.right
+    });
+    setTimeout(() => {
+      getPopoverContentW();
+    }, 300);
+  };
+  const getRectTaro = async (targetId2) => {
+    return new Promise((resolve) => {
+      const query = Taro.createSelectorQuery();
+      query.select(`#${targetId2}`) && query.select(`#${targetId2}`).boundingClientRect();
+      query.exec((res) => {
+        resolve(res[0]);
+      });
+    });
+  };
+  const getPopoverContentW = async () => {
+    const rectContent = await getRectByTaro(popoverContentRef.current);
+    setElWidth(rectContent.width);
+    setElHeight(rectContent.height);
+  };
+  const clickAway = () => {
+    if (closeOnOutsideClick) {
+      props.onClick && props.onClick();
+      onClose && onClose();
+    }
+  };
+  const classes = classNames({
+    [`${classPrefix}`]: true
+  }, className);
+  const popoverArrow = () => {
+    const prefixCls = "nut-popover-arrow";
+    const loca = location;
+    const direction = loca.split("-")[0];
+    return `${prefixCls} ${prefixCls}-${direction} ${prefixCls}--${loca}`;
+  };
+  const getRootPosition = () => {
+    const styles = {};
+    if (!rootPosition) {
+      styles.visibility = "hidden";
+      return styles;
+    }
+    const contentWidth = elWidth;
+    const contentHeight = elHeight;
+    const { width, height, left, top, right } = rootPosition;
+    const direction = location.split("-")[0];
+    const skew = location.split("-")[1];
+    let cross = 0;
+    let parallel = 0;
+    if (Array.isArray(offset) && offset.length === 2) {
+      cross += +offset[1];
+      parallel += +offset[0];
+    }
+    if (width) {
+      if (["bottom", "top"].includes(direction)) {
+        const h = direction === "bottom" ? height + cross : -(contentHeight + cross);
+        styles.top = `${top + h}px`;
+        if (!skew) {
+          styles.left = `${-(contentWidth - width) / 2 + left + parallel}px`;
+        }
+        if (skew === "start") {
+          styles.left = `${left + parallel}px`;
+        }
+        if (skew === "end") {
+          styles.left = `${right + parallel}px`;
+        }
+      }
+      if (["left", "right"].includes(direction)) {
+        const contentW = direction === "left" ? -(contentWidth + cross) : width + cross;
+        styles.left = `${left + contentW}px`;
+        if (!skew) {
+          styles.top = `${top - contentHeight / 2 + height / 2 - 4 + parallel}px`;
+        }
+        if (skew === "start") {
+          styles.top = `${top + parallel}px`;
+        }
+        if (skew === "end") {
+          styles.top = `${top + height + parallel}px`;
+        }
+      }
+    }
+    if (elWidth === 0) {
+      styles.visibility = "hidden";
+    } else {
+      styles.visibility = "initial";
+    }
+    return styles;
+  };
+  const handleSelect = (item, index) => {
+    if (!item.disabled) {
+      onSelect && onSelect(item, index);
+    }
+    if (closeOnActionClick) {
+      props.onClick && props.onClick();
+      onClose && onClose();
+    }
+  };
+  return React.createElement(
+    React.Fragment,
+    null,
+    !targetId && React.createElement("div", { className: "nut-popover-wrapper", ref: popoverRef, onClick: () => {
+      props.onClick && props.onClick();
+      if (!visible) {
+        onOpen && onOpen();
+      } else {
+        onClose && onClose();
+      }
+    }, style }, Array.isArray(children) ? children[0] : children),
+    React.createElement(
+      "div",
+      { className: classes, style: getRootPosition() },
+      React.createElement(
+        Popup,
+        { className: `nut-popover-content nut-popover-content--${location}`, position: "default", overlay, visible: showPopup, ...rest },
+        React.createElement(
+          "div",
+          { className: "nut-popover-content-group", ref: popoverContentRef },
+          showArrow && React.createElement("div", { className: popoverArrow() }),
+          Array.isArray(children) ? children[1] : "",
+          list.map((item, index) => {
+            return React.createElement(
+              "div",
+              { className: classNames({
+                "nut-popover-menu-item": true,
+                "nut-popover-menu-disabled": item.disabled
+              }, item.className), key: item.key, onClick: () => handleSelect(item, index) },
+              item.icon ? item.icon : null,
+              React.createElement("div", { className: "nut-popover-menu-item-name" }, item.name)
+            );
+          })
+        )
+      ),
+      showPopup && React.createElement("div", { className: "nut-popover-content-bg", onClick: clickAway, onTouchMove: clickAway })
+    )
+  );
+};
+Popover.defaultProps = defaultProps;
+Popover.displayName = "NutPopover";
+export {
+  Popover as P
+};

package/dist/esm/{popup.taro-e756f3fc.js → popup.taro-1cd1f9d2.js}

@@ -23,13 +23,13 @@ const defaultProps = {
   },
   onClose: () => {
   },
-  onClickOverlay: (e) => true,
-  onClickCloseIcon: (e) => true,
+  onOverlayClick: (e) => true,
+  onCloseIconClick: (e) => true,
   ...defaultOverlayProps
 };
 let _zIndex = 2e3;
 const Popup = (props) => {
-  const { children, visible, overlay, closeOnOverlayClick, overlayStyle, overlayClassName, zIndex, lockScroll, duration, closeable, closeIconPosition, closeIcon, style, transition, round, position, className, destroyOnClose, portal, onOpen, onClose, onClickOverlay, onClickCloseIcon, afterShow, afterClose, onClick } = props;
+  const { children, visible, overlay, closeOnOverlayClick, overlayStyle, overlayClassName, zIndex, lockScroll, duration, closeable, closeIconPosition, closeIcon, left, title, style, transition, round, position, className, destroyOnClose, portal, onOpen, onClose, onOverlayClick, onCloseIconClick, afterShow, afterClose, onClick } = props;
   const [index, setIndex] = useState(zIndex || _zIndex);
   const [innerVisible, setInnerVisible] = useState(visible);
   const [showChildren, setShowChildren] = useState(true);
@@ -79,8 +79,9 @@ const Popup = (props) => {
     }
   };
   const onHandleClickOverlay = (e) => {
+    e.stopPropagation();
     if (closeOnOverlayClick) {
-      const closed = onClickOverlay && onClickOverlay(e);
+      const closed = onOverlayClick && onOverlayClick(e);
       closed && close();
     }
   };
@@ -88,7 +89,7 @@ const Popup = (props) => {
     onClick && onClick(e);
   };
   const onHandleClickCloseIcon = (e) => {
-    const closed = onClickCloseIcon && onClickCloseIcon(e);
+    const closed = onCloseIconClick && onCloseIconClick(e);
     closed && close();
   };
   const onHandleOpened = (e) => {
@@ -114,6 +115,14 @@ const Popup = (props) => {
     }
     return null;
   };
+  const renderTitle = () => {
+    return React.createElement(React.Fragment, null, position === "bottom" && React.createElement(
+      React.Fragment,
+      null,
+      left && React.createElement(View, { className: `${classPrefix}-left-icon` }, left),
+      title && React.createElement(View, { className: `${classPrefix}-title` }, title)
+    ));
+  };
   const renderPop = () => {
     return React.createElement(
       CSSTransition,
@@ -121,8 +130,9 @@ const Popup = (props) => {
       React.createElement(
         View,
         { style: popStyles, className: popClassName, onClick: onHandleClick },
-        showChildren ? children : "",
-        renderIcon()
+        renderTitle(),
+        renderIcon(),
+        showChildren ? children : ""
       )
     );
   };

package/dist/esm/{progress.taro-ff63be75.js → progress.taro-437b9f6a.js}

@@ -1,14 +1,15 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import classNames from "classnames";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
 const defaultProps = {
   ...ComponentDefaults,
   percent: 0,
   showText: false,
-  animated: false
+  animated: false,
+  delay: 0
 };
 const Progress = (props) => {
-  const { className, style, percent, background, color, strokeWidth, showText, animated, children, ...rest } = {
+  const { className, style, percent, background, color, strokeWidth, showText, animated, children, delay, ...rest } = {
     ...defaultProps,
     ...props
   };
@@ -21,17 +22,33 @@ const Progress = (props) => {
     height: `${strokeWidth}px`,
     background
   };
+  const [displayPercent, setDispalyPercent] = useState(0);
   const stylesInner = {
-    width: `${percent}%`,
+    width: `${displayPercent}%`,
     background: color
   };
+  useEffect(() => {
+    setDispalyPercent(percent);
+  }, [percent]);
+  useEffect(() => {
+    let timer = null;
+    if (delay) {
+      setDispalyPercent(0);
+      timer = setTimeout(() => {
+        setDispalyPercent(percent);
+      }, delay);
+    }
+    return () => {
+      timer && clearTimeout(timer);
+    };
+  }, []);
   return React.createElement(
     "div",
     { className: classNames(classPrefix, className), style, ...rest },
     React.createElement(
       "div",
       { className: `${classPrefix}-outer`, style: stylesOuter },
-      React.createElement("div", { className: classesInner, style: stylesInner }, showText && React.createElement("div", { className: `${classPrefix}-text`, style: { left: `${percent}%` } }, children || React.createElement(
+      React.createElement("div", { className: classesInner, style: stylesInner }, showText && React.createElement("div", { className: `${classPrefix}-text`, style: { left: `${displayPercent}%` } }, children || React.createElement(
         "div",
         { className: `${classPrefix}-text__inner`, style: {
           background: color

package/dist/esm/{pulltorefresh.taro-6afe4805.js → pulltorefresh.taro-71ad5d15.js}

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
 import { View } from "@tarojs/components";
-import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { u as useConfig } from "./configprovider.taro-a7f3bcfd.js";
 import { u as useTouch } from "./use-touch-ff43512c.js";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
 function bound(position, min, max) {
@@ -56,9 +56,9 @@ const PullToRefresh = (p) => {
   };
   const headHeight = props.headHeight;
   const threshold = props.threshold;
-  const heightRef = useRef(0);
   const pullingRef = useRef(false);
   const [status, setStatus] = useState("pulling");
+  const [height, setHeight] = useState(0);
   const renderStatusText = () => {
     var _a;
     if (props.renderText) {
@@ -86,25 +86,25 @@ const PullToRefresh = (p) => {
     touch.move(e);
     if (touch.isVertical()) {
       pullingRef.current = true;
-      heightRef.current = Math.max(rubberbandIfOutOfBounds(touch.deltaY, 0, 0, headHeight * 5, 0.5), 0);
-      setStatus(heightRef.current > threshold ? "canRelease" : "pulling");
+      setHeight(Math.max(rubberbandIfOutOfBounds(touch.deltaY, 0, 0, headHeight * 5, 0.5), 0));
+      setStatus(height > threshold ? "canRelease" : "pulling");
     }
   };
   async function doRefresh() {
-    heightRef.current = headHeight;
+    setHeight(headHeight);
     setStatus("refreshing");
     try {
       await props.onRefresh();
       setStatus("complete");
     } catch (e) {
-      heightRef.current = 0;
+      setHeight(0);
       setStatus("pulling");
       throw e;
     }
     if (props.completeDelay > 0) {
       await sleep(props.completeDelay);
     }
-    heightRef.current = 0;
+    setHeight(0);
     setStatus("pulling");
   }
   const handleTouchEnd = () => {
@@ -112,12 +112,12 @@ const PullToRefresh = (p) => {
     if (status === "canRelease") {
       doRefresh();
     } else {
-      heightRef.current = 0;
+      setHeight(0);
       setStatus("pulling");
     }
   };
   const springStyles = {
-    height: `${heightRef.current}px`,
+    height: `${height}px`,
     ...!pullingRef.current ? { transition: "height .3s ease" } : {}
   };
   return React.createElement(

package/dist/esm/{range.taro-615e193a.js → range.taro-a1d1ad25.js}

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect, useCallback } from "react";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
 import { u as useTouch } from "./use-touch-ff43512c.js";
-import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+import { g as getRectByTaro } from "./use-client-rect-2bb6c562.js";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
 import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
 const defaultProps = {