@nutui/nutui-react-taro 2.5.0 → 2.5.1

package/dist/nutui.react.umd.js

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("@tarojs/taro"), require("@tarojs/components"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "@tarojs/taro", "@tarojs/components", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory((global2.nutui = global2.nutui || {}, global2.nutui.react = {}), global2.React, global2.Taro, global2.components, global2.ReactDOM));
 })(this, function(exports2, React, Taro, components, ReactDOM) {
   "use strict";/*!
-* @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.
 */
@@ -5340,18 +5340,10 @@
             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;
           }
@@ -8615,8 +8607,12 @@
           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 = type2.toLocaleLowerCase();
       if (["date", "datetime", "datehour", "month-day", "year-month"].includes(
         rangeType
@@ -8655,8 +8651,22 @@
         } else if (rangeType === "datehour") {
           date2 = new Date(year, month, day, Number(formatDate[3]));
         }
-        const isEqual = ((_a = new Date(selectedDate)) == null ? void 0 : _a.getTime()) === (date2 == null ? void 0 : date2.getTime());
-        date2 && isDate(date2) && !isEqual && setSelectedDate(formatValue(date2));
+        compareDateChange(selectedDate, date2);
+      } else {
+        const [hour, minute, seconds] = selectedValue;
+        const currentDate = new Date(selectedDate);
+        const year = currentDate.getFullYear();
+        const month = currentDate.getMonth();
+        const day = currentDate.getDate();
+        const date2 = new Date(
+          year,
+          month,
+          day,
+          Number(hour),
+          Number(minute),
+          rangeType === "time" ? Number(seconds) : 0
+        );
+        compareDateChange(selectedDate, date2);
       }
       props.onChange && props.onChange(selectedOptions, selectedValue, index);
     };
@@ -10295,6 +10305,7 @@
   };
   const Input = React.forwardRef(
     (props, ref) => {
+      const rtl = useRtl();
       const { locale } = useConfig$1();
       const {
         type: type2,
@@ -10430,8 +10441,14 @@
             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(type2),
             password: type2 === "password",
@@ -12646,6 +12663,7 @@
     percent: 0,
     showText: false,
     animated: false,
+    lazy: false,
     delay: 0
   };
   const Progress = (props) => {
@@ -12660,6 +12678,7 @@
       showText,
       animated,
       children,
+      lazy,
       delay,
       ...rest
     } = {
@@ -12680,10 +12699,7 @@
       width: `${displayPercent}%`,
       background: color
     };
-    React.useEffect(() => {
-      setDispalyPercent(percent);
-    }, [percent]);
-    React.useEffect(() => {
+    const handlePercent = () => {
       let timer = null;
       if (delay) {
         setDispalyPercent(0);
@@ -12692,27 +12708,104 @@
         }, delay);
       }
       return () => {
+        lazy && resetObserver(Taro.getEnv());
         timer && clearTimeout(timer);
       };
+    };
+    React.useEffect(() => {
+      setDispalyPercent(percent);
+    }, [percent]);
+    const [intersecting, setIntersecting] = React.useState(false);
+    const progressRef = React.useRef(null);
+    const webObserver = React.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();
+      }
+    };
+    React.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();
+    };
+    React.useEffect(() => {
+      if (Taro.getEnv() === "WEB") {
+        handleWebObserver();
+      } else {
+        handleOtherObserver();
+      }
     }, []);
-    return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix2, className), style, ...rest }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-outer`, style: stylesOuter }, /* @__PURE__ */ React.createElement("div", { className: classesInner, style: stylesInner }, showText && /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `${classPrefix2}-text`,
-        style: rtl ? { right: `${displayPercent}%` } : { left: `${displayPercent}%` }
+        ref: progressRef,
+        id: selector,
+        className: classNames(classPrefix2, className),
+        style,
+        ...rest
       },
-      children || /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-outer`, style: stylesOuter }, /* @__PURE__ */ React.createElement("div", { className: classesInner, style: stylesInner }, showText && /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: `${classPrefix2}-text-inner`,
-          style: {
-            background: color
-          }
+          className: `${classPrefix2}-text`,
+          style: rtl ? { right: `${displayPercent}%` } : { left: `${displayPercent}%` }
         },
-        percent,
-        "%"
-      )
-    ))));
+        children || /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `${classPrefix2}-text-inner`,
+            style: {
+              background: color
+            }
+          },
+          percent,
+          "%"
+        )
+      )))
+    );
   };
   Progress.defaultProps = defaultProps$J;
   Progress.displayName = "NutProgress";
@@ -14408,6 +14501,7 @@
   };
   const classPrefix$c = `nut-popover`;
   const Popover = (props) => {
+    const rtl = useRtl();
     const {
       children,
       list,
@@ -14462,9 +14556,9 @@
         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(() => {
@@ -14518,15 +14612,17 @@
       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`;
@@ -14562,15 +14658,17 @@
       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)) {
@@ -14588,12 +14686,13 @@
       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.createElement(React.Fragment, null, !targetId && /* @__PURE__ */ React.createElement(
@@ -16373,9 +16472,14 @@
     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
     );
     React.useEffect(() => {
@@ -16605,18 +16709,19 @@
             width: `${!Number.isNaN(Number(width)) ? `${width}px` : "auto"}`
           }
         },
-        content
-      ), expandText ? /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: "nut-ellipsis-text",
-          onClick: (e2) => {
-            e2.stopPropagation();
-            clickHandle(2);
-          }
-        },
-        collapseText
-      ) : null) : null)
+        content,
+        expandText ? /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: "nut-ellipsis-text",
+            onClick: (e2) => {
+              e2.stopPropagation();
+              clickHandle(2);
+            }
+          },
+          collapseText
+        ) : null
+      )) : null)
     ), /* @__PURE__ */ React.createElement(
       components.View,
       {

package/dist/packages/ellipsis/ellipsis.scss

@@ -4,7 +4,7 @@
   .nut-ellipsis-text {
     cursor: pointer;
     color: $ellipsis-expand-collapse-color;
-    display: inline;
+    display: inline-block;
   }
 
   .nut-ellipsis-wordbreak {

package/dist/packages/form/form.scss

@@ -1,6 +1,6 @@
 
 .form-layout-right .nut-form-item-label {
-  text-align: end;
+  text-align: right;
   font-size: 14px;
   padding-right: 24px;
   white-space: nowrap;
@@ -8,7 +8,7 @@
 
 .form-layout-left .nut-form-item-label {
   position: relative;
-  text-align: start;
+  text-align: left;
   font-size: 14px;
   padding-left: 12px;
   white-space: nowrap;
@@ -41,12 +41,14 @@
 
 [dir='rtl'] .form-layout-right .nut-form-item-label,
 .nut-rtl .form-layout-right .nut-form-item-label {
+  text-align: left;
   padding-right: 0;
   padding-left: 24px;
 }
 
 [dir='rtl'] .form-layout-left .nut-form-item-label,
 .nut-rtl .form-layout-left .nut-form-item-label {
+  text-align: right;
   padding-left: 0;
   padding-right: 12px;
 

package/dist/packages/formitem/formitem.scss

@@ -78,6 +78,7 @@
 [dir='rtl'] .nut-form-item,
 .nut-rtl .nut-form-item {
   &-label {
+    text-align: right;
     margin-right: 0;
     margin-left: $form-item-label-margin-right;
 
@@ -88,4 +89,22 @@
       }
     }
   }
+  &-body {
+    &-slots {
+      text-align: right;
+      .nut-icon-ArrowRight,
+      .nut-icon-ArrowLeft {
+        transform: rotateY(180deg);
+      }
+      .nut-input-text {
+        text-align: right;
+      }
+      .nut-textarea-textarea {
+        text-align: right;
+      }
+    }
+  }
+  &-tips {
+    text-align: right;
+  }
 }

package/dist/packages/popover/popover.scss

@@ -244,29 +244,6 @@
 
 [dir='rtl'] .nut-popover,
 .nut-rtl .nut-popover {
-  &-arrow {
-    &-left {
-      right: auto;
-      left: 0px;
-      border-left-color: currentcolor;
-      border-right-color: $popover-border-color;
-      border-right-width: medium;
-      border-left-width: 0;
-      margin-right: 0;
-      margin-left: -8px;
-    }
-
-    &-right {
-      left: auto;
-      right: 0px;
-      border-right-color: currentcolor;
-      border-left-color: $popover-border-color;
-      border-left-width: medium;
-      border-right-width: 0;
-      margin-left: 0;
-      margin-right: -8px;
-    }
-  }
   .nut-popover-content {
     .nut-popover-menu-item {
       &-name {

package/dist/packages/tabs/tabs.scss

@@ -8,7 +8,6 @@
   display: flex;
   box-sizing: border-box;
   height: $tabs-titles-height;
-  padding: $tabs-titles-padding;
   user-select: none;
   overflow: hidden;
   background: $tabs-titles-background-color;
@@ -29,14 +28,14 @@
   &-left {
     justify-content: flex-start;
     .nut-tabs-titles-item {
-      padding: 0 10px;
+      padding: 0 22px;
     }
   }
 
   &-right {
     justify-content: flex-end;
     .nut-tabs-titles-item {
-      padding: 0 10px;
+      padding: 0 22px;
     }
   }
 
@@ -51,7 +50,7 @@
     align-items: center;
     justify-content: center;
     flex: 1 0 auto;
-    margin: 0 $tabs-titles-gap;
+    padding: 0 $tabs-titles-gap;
     height: $tabs-titles-height;
     line-height: $tabs-titles-height;
     min-width: $tabs-titles-item-min-width;
@@ -118,14 +117,6 @@
     &-disabled {
       color: $color-text-disabled;
     }
-
-    &:first-child {
-      margin-left: 0;
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
   }
 
   &-simple {
@@ -140,7 +131,7 @@
     background-color: $color-default-light;
 
     .nut-tabs-titles-item {
-      margin: 0;
+      padding: 0;
 
       &-active {
         font-weight: $font-weight-bold;
@@ -152,10 +143,18 @@
 
   &-button {
     .nut-tabs-titles-item {
-      &-active {
+      padding: 0 10px;
+      .nut-tabs-titles-item-text {
+        flex: 1;
         height: 28px;
-        margin-top: 8px;
-        margin-bottom: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 8px;
+      }
+    }
+    .nut-tabs-titles-item-active {
+      .nut-tabs-titles-item-text {
         background: $color-default-light;
         color: $color-text;
         border-radius: $tabs-tab-button-border-radius;
@@ -172,7 +171,7 @@
     border-bottom: 1px solid $color-border;
 
     .nut-tabs-titles-item {
-      margin: 0;
+      padding: 0;
       position: relative;
 
       &::after {
@@ -204,10 +203,6 @@
       right: 50%;
       transform: translate(50%, 0);
     }
-    &:first-child {
-      margin-left: 0;
-      margin-right: 0;
-    }
   }
   &-divider {
     .nut-tabs-titles-item {