@nutui/nutui-react-taro 2.5.0 → 2.5.1

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.5.0 Fri Mar 22 2024 19:33:37 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.5.1 Fri Mar 29 2024 16:12:06 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -5324,18 +5324,10 @@ const Tabs = (props) => {
           return;
         let to = 0;
         if (props.direction === "vertical") {
-          const DEFAULT_PADDING = 11;
-          const top = titleRects.slice(0, index).reduce(
-            (prev, curr) => prev + curr.height,
-            DEFAULT_PADDING
-          );
+          const top = titleRects.slice(0, index).reduce((prev, curr) => prev + curr.height, 0);
           to = top - (navRectRef.current.height - titleRect.height) / 2;
         } else {
-          const DEFAULT_PADDING = 20;
-          const left2 = titleRects.slice(0, index).reduce(
-            (prev, curr) => prev + curr.width,
-            DEFAULT_PADDING
-          );
+          const left2 = titleRects.slice(0, index).reduce((prev, curr) => prev + curr.width, 0);
           to = left2 - (navRectRef.current.width - titleRect.width) / 2;
           to = rtl ? -to : to;
         }
@@ -8599,8 +8591,12 @@ const DatePicker = (props) => {
         return result;
     }
   };
-  const handlePickerChange = (selectedOptions, selectedValue, index) => {
+  const compareDateChange = (currentDate, newDate) => {
     var _a;
+    const isEqual = ((_a = new Date(currentDate)) == null ? void 0 : _a.getTime()) === (newDate == null ? void 0 : newDate.getTime());
+    newDate && isDate(newDate) && !isEqual && setSelectedDate(formatValue(newDate));
+  };
+  const handlePickerChange = (selectedOptions, selectedValue, index) => {
     const rangeType = type4.toLocaleLowerCase();
     if (["date", "datetime", "datehour", "month-day", "year-month"].includes(
       rangeType
@@ -8639,8 +8635,22 @@ const DatePicker = (props) => {
       } else if (rangeType === "datehour") {
         date4 = new Date(year, month, day, Number(formatDate[3]));
       }
-      const isEqual = ((_a = new Date(selectedDate)) == null ? void 0 : _a.getTime()) === (date4 == null ? void 0 : date4.getTime());
-      date4 && isDate(date4) && !isEqual && setSelectedDate(formatValue(date4));
+      compareDateChange(selectedDate, date4);
+    } else {
+      const [hour, minute, seconds] = selectedValue;
+      const currentDate = new Date(selectedDate);
+      const year = currentDate.getFullYear();
+      const month = currentDate.getMonth();
+      const day = currentDate.getDate();
+      const date4 = new Date(
+        year,
+        month,
+        day,
+        Number(hour),
+        Number(minute),
+        rangeType === "time" ? Number(seconds) : 0
+      );
+      compareDateChange(selectedDate, date4);
     }
     props.onChange && props.onChange(selectedOptions, selectedValue, index);
   };
@@ -10279,6 +10289,7 @@ const defaultProps$X = {
 };
 const Input = forwardRef(
   (props, ref) => {
+    const rtl = useRtl();
     const { locale } = useConfig$1();
     const {
       type: type4,
@@ -10414,8 +10425,14 @@ const Input = forwardRef(
           className: "nut-input-native",
           ref: inputRef,
           style: {
-            textAlign: `${// eslint-disable-next-line no-nested-ternary
-            align === "right" ? "end" : align === "left" ? "start" : "center"}`
+            // eslint-disable-next-line no-nested-ternary
+            textAlign: rtl ? (
+              // eslint-disable-next-line no-nested-ternary
+              align === "right" ? (
+                // eslint-disable-next-line no-nested-ternary
+                "left"
+              ) : align === "left" ? "right" : "center"
+            ) : align
           },
           type: inputType(type4),
           password: type4 === "password",
@@ -12630,6 +12647,7 @@ const defaultProps$J = {
   percent: 0,
   showText: false,
   animated: false,
+  lazy: false,
   delay: 0
 };
 const Progress = (props) => {
@@ -12644,6 +12662,7 @@ const Progress = (props) => {
     showText,
     animated,
     children,
+    lazy,
     delay,
     ...rest
   } = {
@@ -12664,10 +12683,7 @@ const Progress = (props) => {
     width: `${displayPercent}%`,
     background: color
   };
-  useEffect(() => {
-    setDispalyPercent(percent);
-  }, [percent]);
-  useEffect(() => {
+  const handlePercent = () => {
     let timer = null;
     if (delay) {
       setDispalyPercent(0);
@@ -12676,27 +12692,104 @@ const Progress = (props) => {
       }, delay);
     }
     return () => {
+      lazy && resetObserver(Taro.getEnv());
       timer && clearTimeout(timer);
     };
+  };
+  useEffect(() => {
+    setDispalyPercent(percent);
+  }, [percent]);
+  const [intersecting, setIntersecting] = useState(false);
+  const progressRef = useRef(null);
+  const webObserver = useRef(null);
+  const uuid = useUuid();
+  const selector = `${classPrefix2}-lazy-${uuid}`;
+  const resetObserver = (env, observer = null) => {
+    if (env === "WEB") {
+      webObserver.current.disconnect && webObserver.current.disconnect();
+    } else {
+      observer && observer.disconnect();
+    }
+  };
+  useEffect(() => {
+    if (lazy) {
+      setTimeout(() => {
+        if (intersecting) {
+          setDispalyPercent(percent);
+        } else {
+          setDispalyPercent(0.01);
+        }
+      }, delay);
+    }
+  }, [intersecting]);
+  const handleWebObserver = () => {
+    if (lazy) {
+      webObserver.current = new IntersectionObserver(
+        (entires, self2) => {
+          entires.forEach((item) => {
+            setIntersecting(item.isIntersecting);
+          });
+        },
+        {
+          threshold: [0],
+          rootMargin: "0px"
+        }
+      );
+      webObserver.current.observe(progressRef.current);
+    }
+    handlePercent();
+  };
+  const handleOtherObserver = () => {
+    let observer = null;
+    if (lazy) {
+      observer = Taro.createIntersectionObserver(
+        Taro.getCurrentInstance().page,
+        {
+          thresholds: [0],
+          observeAll: true
+        }
+      );
+      observer.relativeToViewport({ top: 0 }).observe(`#${selector}`, (res) => {
+        setIntersecting(res.intersectionRatio > 0);
+      });
+    }
+    handlePercent();
+  };
+  useEffect(() => {
+    if (Taro.getEnv() === "WEB") {
+      handleWebObserver();
+    } else {
+      handleOtherObserver();
+    }
   }, []);
-  return /* @__PURE__ */ React__default.createElement("div", { className: classNames(classPrefix2, className), style, ...rest }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-outer`, style: stylesOuter }, /* @__PURE__ */ React__default.createElement("div", { className: classesInner, style: stylesInner }, showText && /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: `${classPrefix2}-text`,
-      style: rtl ? { right: `${displayPercent}%` } : { left: `${displayPercent}%` }
+      ref: progressRef,
+      id: selector,
+      className: classNames(classPrefix2, className),
+      style,
+      ...rest
     },
-    children || /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-outer`, style: stylesOuter }, /* @__PURE__ */ React__default.createElement("div", { className: classesInner, style: stylesInner }, showText && /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        className: `${classPrefix2}-text-inner`,
-        style: {
-          background: color
-        }
+        className: `${classPrefix2}-text`,
+        style: rtl ? { right: `${displayPercent}%` } : { left: `${displayPercent}%` }
       },
-      percent,
-      "%"
-    )
-  ))));
+      children || /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: `${classPrefix2}-text-inner`,
+          style: {
+            background: color
+          }
+        },
+        percent,
+        "%"
+      )
+    )))
+  );
 };
 Progress.defaultProps = defaultProps$J;
 Progress.displayName = "NutProgress";
@@ -14392,6 +14485,7 @@ const defaultProps$z = {
 };
 const classPrefix$c = `nut-popover`;
 const Popover = (props) => {
+  const rtl = useRtl();
   const {
     children,
     list,
@@ -14446,9 +14540,9 @@ const Popover = (props) => {
       setRootPosition({
         width: rect.width,
         height: rect.height,
-        left: rect.left,
+        left: rtl ? rect.right : rect.left,
         top: rect.top + distance,
-        right: rect.right
+        right: rtl ? rect.left : rect.right
       });
     }).exec();
     setTimeout(() => {
@@ -14502,15 +14596,17 @@ const Popover = (props) => {
     let cross = 0;
     let parallel = 0;
     if (Array.isArray(offset) && offset.length === 2) {
+      const rtloffset = rtl ? -offset[0] : offset[0];
       cross += +offset[1];
-      parallel += +offset[0];
+      parallel += +rtloffset;
     }
     if (width) {
+      const dir = rtl ? "right" : "left";
       if (["bottom", "top"].includes(direction)) {
         const h2 = direction === "bottom" ? height + cross : -(contentHeight + cross);
         styles.top = `${top + h2}px`;
         if (!skew) {
-          styles.left = `${-(contentWidth - width) / 2 + left2 + parallel}px`;
+          styles[dir] = `${-(contentWidth - width) / 2 + rootPosition[dir] + parallel}px`;
         }
         if (skew === "start") {
           styles.left = `${left2 + parallel}px`;
@@ -14546,15 +14642,17 @@ const Popover = (props) => {
     const skew = location.split("-")[1];
     const base = 16;
     if (props.arrowOffset !== 0) {
+      const dir = rtl ? "right" : "left";
+      const dir2 = rtl ? "left" : "right";
       if (["bottom", "top"].includes(direction)) {
         if (!skew) {
-          styles.left = `calc(50% + ${arrowOffset}px)`;
+          styles[dir] = `calc(50% + ${arrowOffset}px)`;
         }
         if (skew === "start") {
-          styles.left = `${base + arrowOffset}px`;
+          styles[dir] = `${base + arrowOffset}px`;
         }
         if (skew === "end") {
-          styles.right = `${base - arrowOffset}px`;
+          styles[dir2] = `${base - arrowOffset}px`;
         }
       }
       if (["left", "right"].includes(direction)) {
@@ -14572,12 +14670,13 @@ const Popover = (props) => {
     return styles;
   };
   const handleSelect = (item, index) => {
+    var _a;
     if (!item.disabled) {
-      onSelect && onSelect(item, index);
+      onSelect == null ? void 0 : onSelect(item, index);
     }
     if (closeOnActionClick) {
-      props.onClick && props.onClick();
-      onClose && onClose();
+      (_a = props.onClick) == null ? void 0 : _a.call(props);
+      onClose == null ? void 0 : onClose();
     }
   };
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !targetId && /* @__PURE__ */ React__default.createElement(
@@ -16357,9 +16456,14 @@ const Ellipsis = (props) => {
   const digitReg = /^[0-9]+$/;
   const letterUpperReg = /^[A-Z]+$/;
   const letterLowerReg = /^[a-z]+$/;
+  const rtl = useRtl();
+  const rtlClasses = classNames({
+    [`${classPrefix$6}-rtl`]: rtl
+  });
   const classes = classNames(
     classPrefix$6,
     width ? `${classPrefix$6}-width` : "",
+    rtlClasses,
     className
   );
   useEffect(() => {
@@ -16589,18 +16693,19 @@ const Ellipsis = (props) => {
           width: `${!Number.isNaN(Number(width)) ? `${width}px` : "auto"}`
         }
       },
-      content
-    ), expandText ? /* @__PURE__ */ React__default.createElement(
-      "span",
-      {
-        className: "nut-ellipsis-text",
-        onClick: (e2) => {
-          e2.stopPropagation();
-          clickHandle(2);
-        }
-      },
-      collapseText
-    ) : null) : null)
+      content,
+      expandText ? /* @__PURE__ */ React__default.createElement(
+        "span",
+        {
+          className: "nut-ellipsis-text",
+          onClick: (e2) => {
+            e2.stopPropagation();
+            clickHandle(2);
+          }
+        },
+        collapseText
+      ) : null
+    )) : null)
   ), /* @__PURE__ */ React__default.createElement(
     View,
     {