@nutui/nutui-react-taro 2.3.12 → 2.4.0

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.3.12 Fri Mar 01 2024 16:07:31 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.4.0 Fri Mar 08 2024 14:36:52 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -4934,6 +4934,7 @@ const defaultProps$1d = {
 };
 const Badge = (props) => {
   var _a;
+  const rtl = useRtl();
   const { className, style, value, max, children, dot, top, right: right2, color } = {
     ...defaultProps$1d,
     ...props
@@ -4971,7 +4972,8 @@ const Badge = (props) => {
   const getStyle = () => {
     const style2 = {};
     style2.top = `${Number(top) || parseFloat(String(top)) || 0}px`;
-    style2.right = `${Number(right2) || parseFloat(String(right2)) || 0}px`;
+    const dir = rtl ? "left" : "right";
+    style2[dir] = `${Number(right2) || parseFloat(String(right2)) || 0}px`;
     style2.background = color;
     return style2;
   };
@@ -5279,7 +5281,7 @@ const Tabs = (props) => {
     }
     animate();
   };
-  const scrollIntoView = () => {
+  const scrollIntoView = (index) => {
     requestAniFrame$1(() => {
       Promise.all([
         getRect2(`#nut-tabs-titles-${name || uuid} .nut-tabs-list`),
@@ -5287,20 +5289,20 @@ const Tabs = (props) => {
       ]).then(([navRect, titleRects]) => {
         navRectRef.current = navRect;
         titleRectRef.current = titleRects;
-        const titleRect = titleRectRef.current[value];
+        const titleRect = titleRectRef.current[index];
         if (!titleRect)
           return;
         let to = 0;
         if (props.direction === "vertical") {
           const DEFAULT_PADDING = 11;
-          const top = titleRects.slice(0, value).reduce(
+          const top = titleRects.slice(0, index).reduce(
             (prev, curr) => prev + curr.height,
             DEFAULT_PADDING
           );
           to = top - (navRectRef.current.height - titleRect.height) / 2;
         } else {
           const DEFAULT_PADDING = 20;
-          const left2 = titleRects.slice(0, value).reduce(
+          const left2 = titleRects.slice(0, index).reduce(
             (prev, curr) => prev + curr.width,
             DEFAULT_PADDING
           );
@@ -5319,7 +5321,7 @@ const Tabs = (props) => {
       transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
       transitionDuration: `${duration}ms`
     });
-    scrollIntoView();
+    scrollIntoView(index);
   }, [value]);
   const tabChange = (item, index) => {
     onClick && onClick(item.value);
@@ -7543,6 +7545,7 @@ const Context$1 = CheckboxGroupContext;
 const defaultProps$11 = {
   max: void 0,
   min: void 0,
+  list: false,
   labelPosition: "right",
   direction: "vertical",
   onChange: (value) => {
@@ -7558,6 +7561,7 @@ const CheckboxGroup = React__default.forwardRef(
       children,
       className,
       disabled,
+      list,
       onChange,
       value,
       defaultValue,
@@ -7621,6 +7625,7 @@ const CheckboxGroup = React__default.forwardRef(
           labelPosition: labelPosition || "right",
           disabled,
           max,
+          list,
           onLimit,
           value: _value,
           check: (value2) => {
@@ -7647,7 +7652,8 @@ const CheckboxGroup = React__default.forwardRef(
           className: classNames(
             classPrefix$j,
             {
-              [`nut-checkboxgroup-${props.direction}`]: props.direction
+              [`nut-checkboxgroup-${props.direction}`]: props.direction,
+              [`nut-checkboxgroup-list`]: list
             },
             className
           ),
@@ -7747,6 +7753,9 @@ const Checkbox = (props) => {
       if (innerChecked && !innerIndeterminate) {
         return `${cls}${classPrefix$i}-icon-checked ${classPrefix$i}-icon-disabled`;
       }
+      if (innerChecked && innerIndeterminate) {
+        return `${cls}${classPrefix$i}-icon-indeterminate ${classPrefix$i}-icon-disabled`;
+      }
       return `${cls}${classPrefix$i}-icon-disabled`;
     }
     if (innerChecked) {
@@ -7776,7 +7785,7 @@ const Checkbox = (props) => {
   };
   const renderButton = () => {
     return /* @__PURE__ */ React__default.createElement(
-      "div",
+      View,
       {
         className: classNames(`${classPrefix$i}-button`, {
           [`${classPrefix$i}-button-active`]: innerChecked,
@@ -7784,17 +7793,23 @@ const Checkbox = (props) => {
         })
       },
       children || label,
-      innerChecked && activeIcon ? /* @__PURE__ */ React__default.createElement("div", { className: classNames(`${classPrefix$i}-button-icon`) }, activeIcon) : null
+      innerChecked && activeIcon ? /* @__PURE__ */ React__default.createElement(View, { className: classNames(`${classPrefix$i}-button-icon`) }, activeIcon) : null
     );
   };
+  const renderListItem = () => {
+    return /* @__PURE__ */ React__default.createElement(View, { className: "nut-checkbox-list-item" }, renderLabel(), renderIcon());
+  };
   const renderCheckboxItem = () => {
+    if (ctx == null ? void 0 : ctx.list) {
+      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderListItem());
+    }
     if (shape === "button") {
       return renderButton();
     }
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderIcon(), renderLabel());
   };
   return /* @__PURE__ */ React__default.createElement(
-    "div",
+    View,
     {
       className: classNames(
         classPrefix$i,
@@ -8621,7 +8636,7 @@ const DatePicker = (props) => {
       } else {
         cmin++;
       }
-      if (cmin <= val) {
+      if (cmin <= Number(val)) {
         index++;
       }
     }
@@ -10517,7 +10532,7 @@ const InputNumber = (props) => {
       );
       const nextValue = bound2(shouldOverBoundary, Number(min), Number(max));
       setShadowValue(nextValue);
-      if (negative ? shouldOverBoundary < min : shouldOverBoundary > max) {
+      if (negative ? shouldOverBoundary < Number(min) : shouldOverBoundary > Number(max)) {
         onOverlimit == null ? void 0 : onOverlimit(e2);
       } else {
         onChange == null ? void 0 : onChange(nextValue, e2);
@@ -13063,7 +13078,7 @@ const InternalUploader = (props, ref) => {
   const handleItemClick = (file, index) => {
     onFileItemClick == null ? void 0 : onFileItemClick(file, index);
   };
-  return /* @__PURE__ */ React__default.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader-slot" }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children || /* @__PURE__ */ React__default.createElement(Button, { size: "small", type: "primary" }, "上传文件"), maxCount > fileList.length && /* @__PURE__ */ React__default.createElement(Button, { className: "nut-uploader-input", onClick: _chooseImage }))), /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader-slot" }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children || /* @__PURE__ */ React__default.createElement(Button, { size: "small", type: "primary" }, "上传文件"), Number(maxCount) > fileList.length && /* @__PURE__ */ React__default.createElement(Button, { className: "nut-uploader-input", onClick: _chooseImage }))), /* @__PURE__ */ React__default.createElement(
     Preview,
     {
       ...{
@@ -13076,7 +13091,7 @@ const InternalUploader = (props, ref) => {
         children
       }
     }
-  ), maxCount > fileList.length && previewType === "picture" && !children && /* @__PURE__ */ React__default.createElement(
+  ), Number(maxCount) > fileList.length && previewType === "picture" && !children && /* @__PURE__ */ React__default.createElement(
     "div",
     {
       className: `nut-uploader-upload ${previewType} ${disabled ? "nut-uploader-upload-disabled" : ""}`
@@ -13275,6 +13290,7 @@ const defaultProps$G = {
 const BaseDialog = (props) => {
   const classPrefix2 = "nut-dialog";
   const { locale } = useConfig$1();
+  const [loading, setLoading] = useState(false);
   const {
     params: {
       id,
@@ -13329,10 +13345,16 @@ const BaseDialog = (props) => {
       onClose == null ? void 0 : onClose();
       onCancel == null ? void 0 : onCancel();
     };
-    const handleOk = (e2) => {
+    const handleOk = async (e2) => {
       e2.stopPropagation();
-      onClose == null ? void 0 : onClose();
-      onConfirm == null ? void 0 : onConfirm(e2);
+      setLoading(true);
+      try {
+        await (onConfirm == null ? void 0 : onConfirm(e2));
+        setLoading(false);
+        onClose == null ? void 0 : onClose();
+      } catch {
+        setLoading(false);
+      }
     };
     return footer || /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !hideCancelButton && /* @__PURE__ */ React__default.createElement(
       Button,
@@ -13350,7 +13372,8 @@ const BaseDialog = (props) => {
           disabled: disableConfirmButton
         }),
         disabled: disableConfirmButton,
-        onClick: (e2) => handleOk(e2)
+        onClick: (e2) => handleOk(e2),
+        loading
       },
       confirmText || locale.confirm
     ));
@@ -13790,6 +13813,7 @@ Loading.defaultProps = defaultProps$C;
 Loading.displayName = "NutLoading";
 const defaultProps$B = {
   ...ComponentDefaults,
+  align: "left",
   direction: "horizontal",
   list: [],
   duration: 1e3,
@@ -13804,10 +13828,12 @@ const defaultProps$B = {
   speed: 50
 };
 const NoticeBar = (props) => {
+  const rtl = useRtl();
   const {
     children,
     className,
     style,
+    align,
     direction,
     list,
     duration,
@@ -13914,7 +13940,7 @@ const NoticeBar = (props) => {
       const contentRes = await getRectByTaro(contentRef.current);
       const wrapW = warpRes.width;
       const offsetW = contentRes.width;
-      const canScroll = scrollable == null ? offsetW > wrapW : scrollable;
+      const canScroll = align === "left" && scrollable == null ? offsetW > wrapW : scrollable;
       SetIsCanScroll(canScroll);
       if (canScroll) {
         SetWrapWidth(wrapW);
@@ -13965,7 +13991,7 @@ const NoticeBar = (props) => {
     onClose && onClose(event);
   };
   const isEllipsis = () => {
-    if (isCanScroll == null) {
+    if (isCanScroll == null && align === "left") {
       return wrap;
     }
     return !isCanScroll && !wrap;
@@ -13973,7 +13999,7 @@ const NoticeBar = (props) => {
   const contentStyle = {
     animationDelay: `${firstRound ? delay : 0}s`,
     animationDuration: `${animationDuration}s`,
-    transform: `translateX(${firstRound ? 0 : `${wrapWidth}px`})`
+    transform: `translateX(${firstRound ? 0 : `${rtl ? -wrapWidth : wrapWidth}px`})`
   };
   const barStyle = {
     height: isVertical ? `${height}px` : ""
@@ -14119,16 +14145,18 @@ const NoticeBar = (props) => {
     }
   };
   const noticebarClass = classNames({
-    "nut-noticebar-box": true,
-    [`nut-noticebar-box-wrapable`]: wrap
+    [`${classPrefix2}-box`]: true,
+    [`${classPrefix2}-box-wrapable`]: wrap,
+    [`${classPrefix2}-box-${align}`]: true
   });
+  const cls = classNames(classPrefix2, className);
   useEffect(() => {
     return () => {
       stopAutoPlay();
     };
   }, []);
-  return /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2} ${className || ""}`, style }, showNoticeBar && direction === "horizontal" ? /* @__PURE__ */ React__default.createElement("div", { className: noticebarClass, style: barStyle, onClick: handleClick }, leftIcon ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-noticebar-box-left-icon" }, leftIcon) : null, /* @__PURE__ */ React__default.createElement("div", { ref: wrapRef, className: "nut-noticebar-box-wrap" }, /* @__PURE__ */ React__default.createElement(
-    "div",
+  return /* @__PURE__ */ React__default.createElement(View, { className: cls, style }, showNoticeBar && direction === "horizontal" ? /* @__PURE__ */ React__default.createElement(View, { className: noticebarClass, style: barStyle, onClick: handleClick }, leftIcon ? /* @__PURE__ */ React__default.createElement(View, { className: "nut-noticebar-box-left-icon" }, leftIcon) : null, /* @__PURE__ */ React__default.createElement(View, { ref: wrapRef, className: "nut-noticebar-box-wrap" }, /* @__PURE__ */ React__default.createElement(
+    View,
     {
       ref: contentRef,
       className: `nut-noticebar-box-wrap-content ${animationClass} ${isEllipsis() ? "nut-ellipsis" : ""}`,
@@ -14137,18 +14165,25 @@ const NoticeBar = (props) => {
     },
     children,
     content
-  )), closeable || rightIcon ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: onClickIcon }, rightIcon || /* @__PURE__ */ React__default.createElement(A$1, { size: 12 })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React__default.createElement(
-    "div",
+  )), closeable || rightIcon ? /* @__PURE__ */ React__default.createElement(
+    View,
+    {
+      className: "nut-noticebar-box-right-icon",
+      onClick: onClickIcon
+    },
+    rightIcon || /* @__PURE__ */ React__default.createElement(A$1, { size: 12 })
+  ) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React__default.createElement(
+    View,
     {
       className: "nut-noticebar-vertical",
       style: barStyle,
       ref: container,
       onClick: handleClick
     },
-    leftIcon ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-noticebar-box-left-icon" }, leftIcon) : null,
-    children ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-noticebar-box-wrap", ref: innerRef }, scrollList.current.map((item, index) => {
+    leftIcon ? /* @__PURE__ */ React__default.createElement(View, { className: "nut-noticebar-box-left-icon" }, leftIcon) : null,
+    children ? /* @__PURE__ */ React__default.createElement(View, { className: "nut-noticebar-box-wrap", ref: innerRef }, scrollList.current.map((item, index) => {
       return /* @__PURE__ */ React__default.createElement(
-        "div",
+        View,
         {
           style: itemStyle(index),
           key: index,
@@ -14159,7 +14194,7 @@ const NoticeBar = (props) => {
         item
       );
     })) : /* @__PURE__ */ React__default.createElement(
-      "div",
+      View,
       {
         className: "nut-noticebar-box-horseLamp-list",
         style: horseLampStyle
@@ -14168,7 +14203,7 @@ const NoticeBar = (props) => {
         return (
           // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
           /* @__PURE__ */ React__default.createElement(
-            "div",
+            View,
             {
               className: "nut-noticebar-box-horseLamp-list-item",
               style: { height },
@@ -14183,7 +14218,7 @@ const NoticeBar = (props) => {
       })
     ),
     /* @__PURE__ */ React__default.createElement(
-      "div",
+      View,
       {
         className: "nut-noticebar-box-right-icon",
         onClick: (e2) => {
@@ -14300,6 +14335,7 @@ Notify.close = close;
 const defaultProps$z = {
   ...ComponentDefaults,
   list: [],
+  theme: "light",
   location: "bottom",
   visible: false,
   offset: [0, 12],
@@ -14307,9 +14343,9 @@ const defaultProps$z = {
   targetId: "",
   className: "",
   showArrow: true,
-  overlay: false,
   closeOnOutsideClick: true,
   closeOnActionClick: true,
+  overlay: false,
   onClick: () => {
   },
   onOpen: () => {
@@ -14322,16 +14358,17 @@ const Popover = (props) => {
   const {
     children,
     list,
+    theme,
     location,
     visible,
     offset,
+    arrowOffset,
     targetId,
     overlay,
     closeOnOutsideClick,
     closeOnActionClick,
     className,
     showArrow,
-    arrowOffset,
     style,
     onClick,
     onOpen,
@@ -14403,7 +14440,8 @@ const Popover = (props) => {
   };
   const classes = classNames(
     {
-      [`${classPrefix$c}`]: true
+      [`${classPrefix$c}`]: true,
+      [`${classPrefix$c}-${theme}`]: theme === "dark"
     },
     className
   );
@@ -14511,11 +14549,12 @@ const Popover = (props) => {
       className: "nut-popover-wrapper",
       ref: popoverRef,
       onClick: () => {
-        props.onClick && props.onClick();
+        var _a;
+        (_a = props == null ? void 0 : props.onClick) == null ? void 0 : _a.call(props);
         if (!visible) {
-          onOpen && onOpen();
+          onOpen == null ? void 0 : onOpen();
         } else {
-          onClose && onClose();
+          onClose == null ? void 0 : onClose();
         }
       },
       style
@@ -15134,6 +15173,7 @@ const defaultProps$t = {
   id: "",
   icon: null,
   iconSize: "20",
+  content: "",
   msg: "",
   duration: 2,
   // 时长,duration为0则一直展示
@@ -15161,6 +15201,7 @@ const Toast = (props) => {
       contentStyle,
       icon,
       iconSize,
+      content,
       msg,
       duration,
       type: type4,
@@ -15272,7 +15313,7 @@ const Toast = (props) => {
       },
       hasIcon() ? /* @__PURE__ */ React__default.createElement("p", { className: `${classPrefix$9}-icon-wrapper` }, iconName()) : null,
       title ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$9}-title` }, title) : null,
-      /* @__PURE__ */ React__default.createElement("span", { className: `${classPrefix$9}-text` }, msg)
+      /* @__PURE__ */ React__default.createElement("span", { className: `${classPrefix$9}-text` }, content || msg)
     ))
   ) : null);
 };
@@ -16036,7 +16077,7 @@ const InternalCountDown = (props, ref) => {
     if (!timeStr)
       return Date.now();
     let t2 = timeStr;
-    t2 = t2 > 0 ? +t2 : t2.toString().replace(/-/g, "/");
+    t2 = Number(t2) > 0 ? +t2 : t2.toString().replace(/-/g, "/");
     return new Date(t2).getTime();
   };
   const initTime = () => {
@@ -17258,7 +17299,7 @@ const Steps = (props) => {
 };
 Steps.defaultProps = defaultProps$c;
 Steps.displayName = "NutSteps";
-function useTableSticky(columns) {
+function useTableSticky(columns, rtl = false) {
   const [isSticky, setIsSticky] = useState(false);
   const [stickyColumnStyleMap, setStickyColumnStyleMap] = useState({});
   const [stickyColumnClassMap, setStickyColumnClassMap] = useState({});
@@ -17273,9 +17314,9 @@ function useTableSticky(columns) {
     let _stickyLeftWidth = 0;
     let _stickyRightWidth = 0;
     leftColumns.forEach((curr, index) => {
-      leftColumns[index - 1] || {};
+      const dir = rtl ? "right" : "left";
       _columnStyleMap[curr.key] = {
-        left: _stickyLeftWidth || 0,
+        [dir]: _stickyLeftWidth || 0,
         width: curr.width || "auto"
       };
       _columnClassMap[curr.key] = {
@@ -17291,9 +17332,9 @@ function useTableSticky(columns) {
     });
     for (let i2 = rightColumns.length - 1; i2 >= 0; i2--) {
       const curr = rightColumns[i2];
-      rightColumns[i2 + 1] || {};
+      const dir = rtl ? "left" : "right";
       _columnStyleMap[curr.key] = {
-        right: _stickyRightWidth || 0,
+        [dir]: _stickyRightWidth || 0,
         width: curr.width || "auto"
       };
       _columnClassMap[curr.key] = {
@@ -17340,6 +17381,7 @@ const defaultProps$b = {
 };
 const Table = (props) => {
   const { locale } = useConfig$1();
+  const rtl = useRtl();
   defaultProps$b.noData = locale.noData;
   const {
     children,
@@ -17370,7 +17412,7 @@ const Table = (props) => {
     stickyRightWidth,
     getStickyClass,
     getStickyStyle
-  } = useTableSticky(columns);
+  } = useTableSticky(columns, rtl);
   useEffect(() => {
     setValue(data);
   }, [data]);
@@ -17883,11 +17925,9 @@ const updateItemSize = (positions, items, sizeKey, margin) => {
     }
   });
 };
-const clientHeight = getSystemInfoSync().windowHeight - 5 || 667;
 const defaultProps$7 = {
   ...ComponentDefaults,
   list: [],
-  containerHeight: clientHeight,
   itemHeight: 66,
   margin: 10,
   itemEqual: true,
@@ -17904,12 +17944,20 @@ const VirtualList = (props) => {
     key,
     onScroll,
     className,
-    containerHeight,
+    containerHeight: origContainerHeight,
     ...rest
   } = {
     ...defaultProps$7,
     ...props
   };
+  const clientHeight = useMemo$1(
+    () => getSystemInfoSync().windowHeight - 5 || 667,
+    []
+  );
+  const containerHeight = useMemo$1(
+    () => origContainerHeight ?? clientHeight,
+    [origContainerHeight, clientHeight]
+  );
   const [startOffset, setStartOffset] = useState(0);
   const start = useRef(0);
   const scrollRef = useRef(null);