@nutui/nutui-react 2.6.13 → 2.6.15

package/dist/nutui.react.umd.js

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.nutui = {}, global2.React, global2.ReactDOM));
 })(this, function(exports2, React, ReactDOM) {
   "use strict";/*!
-* @nutui/nutui-react v2.6.13 Fri Jul 12 2024 13:59:44 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.15 Fri Jul 26 2024 15:20:57 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -3150,13 +3150,14 @@
     }, []);
     React.useEffect(() => {
       if (position === "top") return;
-      const containerEle = container == null ? void 0 : container.current;
-      if (!rootRef.current && !containerEle) return;
-      const rootRect = getRect(rootRef.current);
+      const containerEle = container && container.current;
+      const rootEle = rootRef.current;
+      const stickyEle = stickyRef.current;
+      if (!rootEle && !containerEle) return;
+      const rootRect = getRect(rootEle);
       const containerRect = getRect(containerEle);
       const clientHeight = document.documentElement.clientHeight;
-      const stCurrent = stickyRef.current;
-      const stickyRect = getRect(stCurrent);
+      const stickyRect = getRect(stickyEle);
       let fixed = clientHeight - threshold < rootRect.bottom;
       if (containerEle) {
         fixed = containerRect.bottom > clientHeight - threshold - stickyRect.height && clientHeight - threshold - stickyRect.height > containerRect.top;
@@ -3171,19 +3172,18 @@
       setIsFixed(fixed);
     }, [position, container, threshold]);
     const handleScroll = React.useCallback(() => {
-      const containerEle = container == null ? void 0 : container.current;
-      if (!rootRef.current && !containerEle) return;
-      const rootRect = getRect(rootRef.current);
-      const stCurrent = stickyRef.current;
-      const stickyRect = getRect(stCurrent);
+      const containerEle = container && container.current;
+      const rootEle = rootRef.current;
+      const stickyEle = stickyRef.current;
+      if (!rootEle && !containerEle) return;
+      const rootRect = getRect(rootEle);
+      const stickyRect = getRect(stickyEle);
       const containerRect = getRect(containerEle);
       if (rootRect.height) {
-        setRootStyle((prev) => {
-          return {
-            ...prev,
-            height: rootRect.height
-          };
-        });
+        setRootStyle((prev) => ({
+          ...prev,
+          height: rootRect.height
+        }));
       }
       const getFixed = () => {
         let fixed2 = false;
@@ -3199,22 +3199,16 @@
         };
       };
       const getTransform = () => {
-        if (position === "top") {
-          if (containerEle) {
-            const diff = containerRect.bottom - threshold - stickyRect.height;
-            const transform = diff < 0 ? diff : 0;
-            return { transform: `translate3d(0, ${transform}px, 0)` };
-          }
-          return {};
+        if (position === "top" && containerEle) {
+          const diff = containerRect.bottom - threshold - stickyRect.height;
+          const transform = diff < 0 ? diff : 0;
+          return { transform: `translate3d(0, ${transform}px, 0)` };
         }
-        if (position === "bottom") {
-          if (containerEle) {
-            const clientHeight = document.documentElement.clientHeight;
-            const diff = containerRect.bottom - (clientHeight - threshold);
-            const transform = diff < 0 ? diff : 0;
-            return { transform: `translate3d(0, ${transform}px, 0)` };
-          }
-          return {};
+        if (position === "bottom" && containerEle) {
+          const clientHeight = document.documentElement.clientHeight;
+          const diff = containerRect.bottom - (clientHeight - threshold);
+          const transform = diff < 0 ? diff : 0;
+          return { transform: `translate3d(0, ${transform}px, 0)` };
         }
         return {};
       };
@@ -3233,9 +3227,9 @@
     });
     React.useEffect(() => {
       const el = getElement();
-      el.addEventListener("scroll", handleScroll, false);
+      el == null ? void 0 : el.addEventListener("scroll", handleScroll, false);
       return () => {
-        el.removeEventListener("scroll", handleScroll);
+        el == null ? void 0 : el.removeEventListener("scroll", handleScroll);
       };
     }, [getElement, handleScroll]);
     return /* @__PURE__ */ React.createElement(
@@ -9645,7 +9639,7 @@
     };
     const syncValue = async () => {
       const currentValue = innerValue;
-      if (currentValue === void 0 || currentValue !== defaultValue || !state.tree.nodes.length) {
+      if (currentValue === void 0 || ![defaultValue, value].includes(currentValue) || !state.tree.nodes.length) {
         return;
       }
       if (currentValue.length === 0) {
@@ -9677,7 +9671,7 @@
           state.initLoading = false;
         }
       }
-      if (needToSync.length && currentValue === defaultValue) {
+      if (needToSync.length && [defaultValue, value].includes(currentValue)) {
         const pathNodes = state.tree.getPathNodesByValue(needToSync);
         pathNodes.forEach((node, index) => {
           state.tabsCursor = index;
@@ -10698,8 +10692,10 @@
     };
     React.useEffect(() => {
       setCurrentDate(resetDefaultValue() || []);
-      popup && resetRender();
     }, [defaultValue]);
+    React.useEffect(() => {
+      popup && resetRender();
+    }, [currentDate]);
     const scrollToDate = (date) => {
       if (Utils.compareDate(date, propStartDate)) {
         date = propStartDate;
@@ -11534,15 +11530,15 @@
         className,
         disabled,
         list,
-        onChange,
         value,
         defaultValue,
         max,
         min,
-        onLimit,
         labelPosition,
         direction,
         options: options2,
+        onChange,
+        onLimit,
         ...rest
       } = { ...defaultProps$_, ...props };
       React.useImperativeHandle(ref, () => ({
@@ -11571,8 +11567,8 @@
         }
       }));
       const [_value, setValue] = usePropsValue({
-        value: props.value,
-        defaultValue: props.defaultValue,
+        value,
+        defaultValue,
         finalValue: [],
         onChange
       });
@@ -11624,7 +11620,7 @@
             className: classNames(
               classPrefix$i,
               {
-                [`nut-checkboxgroup-${props.direction}`]: props.direction,
+                [`nut-checkboxgroup-${direction}`]: direction,
                 [`nut-checkboxgroup-list`]: list
               },
               className
@@ -11636,7 +11632,6 @@
       );
     }
   );
-  CheckboxGroup.defaultProps = defaultProps$_;
   CheckboxGroup.displayName = "NutCheckboxGroup";
   const defaultProps$Z = {
     ...ComponentDefaults,
@@ -12457,7 +12452,7 @@
         if (!isEqual2) {
           setSelectedDate(formatValue(newDate));
         }
-        props.onChange && props.onChange(
+        onChange == null ? void 0 : onChange(
           selectedOptions,
           [
             String(newDate.getFullYear()),
@@ -12554,8 +12549,8 @@
       }
       pickerValue[columnIndex] = (_a = arr[index]) == null ? void 0 : _a.value;
       setPickerValue([...pickerValue]);
-      if (props.filter && props.filter(type22, arr)) {
-        return props.filter(type22, arr);
+      if (filter == null ? void 0 : filter(type22, arr)) {
+        return filter == null ? void 0 : filter(type22, arr);
       }
       return arr;
     };
@@ -12613,7 +12608,6 @@
       }
     ));
   };
-  DatePicker.defaultProps = defaultProps$X;
   DatePicker.displayName = "NutDatePicker";
   const Context = React.createContext({});
   function _extends() {
@@ -13700,7 +13694,7 @@
           this.store = values;
         }
       };
-      this.setFieldsValue = (newStore) => {
+      this.setFieldsValue = (newStore, needValidate = true) => {
         this.store = {
           ...this.store,
           ...newStore
@@ -13722,6 +13716,7 @@
             item.entity.onStoreChange("update");
           }
         });
+        needValidate && this.validateFields();
       };
       this.setCallback = (callback) => {
         this.callbacks = {
@@ -13966,7 +13961,7 @@
             if (this.props.getValueFromEvent) {
               next = this.props.getValueFromEvent(...args);
             }
-            setFieldsValue({ [name]: next });
+            setFieldsValue({ [name]: next }, false);
           }
         };
         const { validateTrigger } = this.props;
@@ -14726,7 +14721,7 @@
                 handleClick2(item);
               }
             },
-            item.value === innerValue ? /* @__PURE__ */ React.createElement("i", null, icon || /* @__PURE__ */ React.createElement(
+            item.value === innerValue ? /* @__PURE__ */ React.createElement("i", { className: "nut-menu-container-item-icon" }, icon || /* @__PURE__ */ React.createElement(
               o$5,
               {
                 color: activeColor,
@@ -14736,7 +14731,7 @@
             /* @__PURE__ */ React.createElement(
               "div",
               {
-                className: getIconCName(item.value, value),
+                className: `nut-menu-container-item-title ${getIconCName(item.value, value)}`,
                 style: {
                   color: `${item.value === innerValue ? activeColor : ""}`
                 }
@@ -14855,14 +14850,10 @@
           return /* @__PURE__ */ React.createElement(
             "div",
             {
-              className: classNames(
-                "nut-menu-title ",
-                {
-                  active: showMenuItem[index],
-                  disabled
-                },
-                className
-              ),
+              className: classNames("nut-menu-title", `nut-menu-title-${index}`, {
+                active: showMenuItem[index],
+                disabled
+              }),
               style: { color: showMenuItem[index] ? activeColor : "" },
               key: index,
               onClick: (e2) => {
@@ -15139,7 +15130,6 @@
       );
     }
   );
-  RadioGroup.defaultProps = defaultProps$Q;
   RadioGroup.displayName = "NutRadioGroup";
   const defaultProps$P = {
     ...ComponentDefaults,
@@ -15267,7 +15257,6 @@
       renderRadioItem()
     );
   };
-  Radio.defaultProps = defaultProps$P;
   Radio.displayName = "NutRadio";
   Radio.Group = RadioGroup;
   const defaultProps$O = {
@@ -16646,6 +16635,7 @@
   };
   const InternalUploader = (props, ref) => {
     const { locale } = useConfig();
+    const fileListRef = React.useRef([]);
     const {
       children,
       uploadIcon,
@@ -16698,6 +16688,9 @@
     });
     const [uploadQueue, setUploadQueue] = React.useState([]);
     const classes = classNames(className, "nut-uploader");
+    React.useEffect(() => {
+      fileListRef.current = fileList;
+    }, [fileList]);
     React.useImperativeHandle(ref, () => ({
       submit: () => {
         Promise.all(uploadQueue).then((res) => {
@@ -16742,7 +16735,7 @@
       uploadOption.onStart = (option) => {
         clearUploadQueue(index);
         setFileList(
-          fileList.map((item) => {
+          fileListRef.current.map((item) => {
             if (item.uid === fileItem.uid) {
               item.status = "ready";
               item.message = locale.uploader.readyUpload;
@@ -16750,23 +16743,23 @@
             return item;
           })
         );
-        onStart && onStart(option);
+        onStart == null ? void 0 : onStart(option);
       };
       uploadOption.onProgress = (e2, option) => {
         setFileList(
-          fileList.map((item) => {
+          fileListRef.current.map((item) => {
             if (item.uid === fileItem.uid) {
               item.status = UPLOADING;
               item.message = locale.uploader.uploading;
               item.percentage = (e2.loaded / e2.total * 100).toFixed(0);
-              onProgress && onProgress({ e: e2, option, percentage: item.percentage });
+              onProgress == null ? void 0 : onProgress({ e: e2, option, percentage: item.percentage });
             }
             return item;
           })
         );
       };
       uploadOption.onSuccess = (responseText, option) => {
-        const list = fileList.map((item) => {
+        const list = fileListRef.current.map((item) => {
           if (item.uid === fileItem.uid) {
             item.status = SUCCESS;
             item.message = locale.uploader.success;
@@ -16783,7 +16776,7 @@
         });
       };
       uploadOption.onFailure = (responseText, option) => {
-        const list = fileList.map((item) => {
+        const list = fileListRef.current.map((item) => {
           if (item.uid === fileItem.uid) {
             item.status = ERROR;
             item.message = locale.uploader.error;
@@ -16845,9 +16838,7 @@
         }
         return true;
       });
-      if (oversizes.length) {
-        onOversize && onOversize(files);
-      }
+      oversizes.length && (onOversize == null ? void 0 : onOversize(files));
       if (filterFile.length > maximum) {
         filterFile.splice(maximum, filterFile.length - maximum);
       }
@@ -16886,7 +16877,6 @@
         const _files = filterFiles(new Array().slice.call(files));
         readFile(_files);
       }
-      setFileList(fileList);
       if (clearInput) {
         clearInputValue($el);
       }
@@ -17211,18 +17201,6 @@
     );
   };
   Content.displayName = "NutContent";
-  const defaultDialogProps = {
-    ...ComponentDefaults,
-    overlay: true,
-    overlayStyle: {},
-    overlayClassName: "",
-    onCancel: () => {
-    },
-    onClose: () => {
-    },
-    onOverlayClick: (e2) => true,
-    ...defaultOverlayProps
-  };
   const DialogWrap = (props) => {
     const {
       visible,
@@ -17264,7 +17242,6 @@
       /* @__PURE__ */ React.createElement(Content, { ...props, visible })
     ));
   };
-  DialogWrap.defaultProps = defaultDialogProps;
   DialogWrap.displayName = "NutDialogWrap";
   const defaultProps$E = {
     ...ComponentDefaults,
@@ -18797,7 +18774,6 @@
       /* @__PURE__ */ React.createElement("div", null, renderStatusText())
     )), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-content` }, props.children));
   };
-  PullToRefresh.defaultProps = defaultProps$x;
   PullToRefresh.displayName = "NutPullToRefresh";
   const AvatarContext = React.createContext({});
   const defaultProps$w = {
@@ -19181,7 +19157,6 @@
       /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-wrapper`, style: wrapperStyle }, renderActionContent("left", leftRef), children, renderActionContent("right", rightRef))
     );
   });
-  Swipe.defaultProps = defaultProps$t;
   Swipe.displayName = "NutSwipe";
   const classPrefix$8 = "nut-toast";
   class Notification extends React__namespace.PureComponent {
@@ -19581,16 +19556,16 @@
       percent: 0,
       duration: "00:00:00",
       second: 0,
-      hanMuted: props.muted,
-      playing: props.autoPlay,
+      hanMuted: muted,
+      playing: autoPlay,
       handPlaying: false
     });
     const classPrefix2 = "nut-audio";
     const handleEnded = (e2) => {
-      if (props.loop) {
+      if (loop2) {
         console.warn(locale.audio.tips || "onPlayEnd事件在loop=false时才会触发");
       } else {
-        props.onEnd && props.onEnd(e2);
+        onEnd == null ? void 0 : onEnd(e2);
       }
     };
     function watch() {
@@ -19631,25 +19606,25 @@
       if (statusRef.current.currentTime > 0 && AudioRef.current) {
         statusRef.current.currentTime--;
         AudioRef.current.currentTime = statusRef.current.currentTime;
-        props.onBack && props.onBack(AudioRef.current);
+        onBack == null ? void 0 : onBack(AudioRef.current);
       }
     };
     const handleForward = () => {
       if (AudioRef.current) {
         statusRef.current.currentTime++;
         AudioRef.current.currentTime = statusRef.current.currentTime;
-        props.onForward && props.onForward(AudioRef.current);
+        onForward == null ? void 0 : onForward(AudioRef.current);
       }
     };
     const handleMute = () => {
       if (AudioRef.current) {
         AudioRef.current.muted = !AudioRef.current.muted;
-        props.onMute && props.onMute(AudioRef.current);
+        onMute == null ? void 0 : onMute(AudioRef.current);
       }
     };
     const handlePause = (e2) => {
       setPlaying(false);
-      props.onPause && props.onPause(e2);
+      onPause == null ? void 0 : onPause(e2);
     };
     const formatSeconds = (value) => {
       if (!value) {
@@ -19738,12 +19713,12 @@
     };
     const handleCanplay = (e2) => {
       setIsCanPlay(true);
-      if (props.autoPlay && !playing) {
+      if (autoPlay && !playing) {
         AudioRef && AudioRef.current && AudioRef.current.play();
       }
       if (AudioRef.current) {
         statusRef.current.second = AudioRef.current.duration || 0;
-        props.onCanPlay && props.onCanPlay(e2);
+        onCanPlay == null ? void 0 : onCanPlay(e2);
       }
     };
     const onTimeupdate = (e2) => {
@@ -19772,7 +19747,6 @@
       /* @__PURE__ */ React.createElement("track", { kind: "captions" })
     ));
   };
-  Audio.defaultProps = defaultProps$p;
   Audio.displayName = "NutAudio";
   const defaultProps$o = {
     ...ComponentDefaults,
@@ -20607,15 +20581,17 @@
   const defaultEffect = (args) => {
     return React.Children.map(args.children, (child, index) => {
       const { isVertical, getSpringsAxis, loop: loop2, count } = args;
+      const rtl = useRtl();
+      const position = rtl ? "right" : "left";
       return /* @__PURE__ */ React.createElement(
         animated.div,
         {
           className: "nut-swiper-slide",
           style: {
-            [isVertical ? "y" : "x"]: getSpringsAxis().to((position) => {
-              return getPerSlidePosition$1(index, position, loop2, count);
+            [isVertical ? "y" : "x"]: getSpringsAxis().to((position2) => {
+              return getPerSlidePosition$1(index, position2, loop2, count);
             }),
-            [isVertical ? "top" : "left"]: `-${index * 100}%`
+            [isVertical ? "top" : position]: `-${index * 100}%`
           }
         },
         child
@@ -20635,6 +20611,8 @@
   };
   const focusEffect = (args) => {
     return React.Children.map(args.children, (child, index) => {
+      const rtl = useRtl();
+      const position = rtl ? "right" : "left";
       const {
         isVertical,
         springs,
@@ -20652,11 +20630,11 @@
           className: "nut-swiper-slide",
           style: {
             [isVertical ? "y" : "x"]: springs[isVertical ? "y" : "x"].to(
-              (position) => {
-                return getPerSlidePosition(index, position, loop2, count);
+              (position2) => {
+                return getPerSlidePosition(index, position2, loop2, count);
               }
             ),
-            [isVertical ? "top" : "left"]: `-${index * 100}%`,
+            [isVertical ? "top" : position]: `-${index * 100}%`,
             scale: springs.s.to((ss) => {
               const scales = getRefValue(transforms);
               if (!scales) return 1;
@@ -20964,7 +20942,6 @@
       );
     }
   );
-  Swiper.defaultProps = defaultProps$h;
   Swiper.displayName = "NutSwiper";
   const defaultProps$g = {
     onClick: (e2) => void 0
@@ -20975,7 +20952,6 @@
     const classes = classNames(classPrefix2, className);
     return /* @__PURE__ */ React.createElement("div", { className: classes, onClick: props.onClick, style }, children);
   };
-  SwiperItem.defaultProps = defaultProps$g;
   SwiperItem.displayName = "NutSwiperItem";
   const InnerSwiper = Swiper;
   InnerSwiper.Item = SwiperItem;
@@ -21671,10 +21647,6 @@
       });
     };
     const renderBodyTds = (item, rowIndex) => {
-      const { rowRender } = item;
-      if (rowRender && typeof rowRender === "function") {
-        return rowRender(item, rowIndex);
-      }
       return sortDataItem().map(([value, render2]) => {
         return /* @__PURE__ */ React.createElement(
           "div",
@@ -21693,7 +21665,12 @@
     };
     const renderBodyTrs = () => {
       return innerValue.map((item, index) => {
-        return /* @__PURE__ */ React.createElement("div", { className: bodyClassPrefix, key: index }, renderBodyTds(item, index));
+        const inner = renderBodyTds(item, index);
+        const { rowRender } = item;
+        if (rowRender && typeof rowRender === "function") {
+          return rowRender(item, index, { inner });
+        }
+        return /* @__PURE__ */ React.createElement("div", { className: bodyClassPrefix, key: index }, inner);
       });
     };
     return /* @__PURE__ */ React.createElement("div", { className: cls, ...rest }, /* @__PURE__ */ React.createElement(
@@ -22717,6 +22694,8 @@
     gapY: 48,
     width: 120,
     height: 64,
+    startX: 0,
+    startY: 0,
     image: "",
     imageWidth: 120,
     imageHeight: 64,
@@ -22735,6 +22714,8 @@
       className,
       gapX,
       gapY,
+      startX,
+      startY,
       width,
       height,
       image,
@@ -22797,7 +22778,7 @@
           const markSize = Number(fontSize) * ratio;
           ctx2.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
           ctx2.fillStyle = color;
-          ctx2.fillText(content, 0, 0);
+          ctx2.fillText(content, startX, startY);
           ctx2.restore();
           setBase64Url(canvas.toDataURL());
         }

package/dist/packages/empty/empty.scss

@@ -5,7 +5,7 @@
   flex-direction: column;
   justify-content: center;
   padding: $empty-padding;
-  background-color: $color-background-overlay;
+  background-color: $empty-background-color;
 
   &-image {
     width: $empty-image-size;

package/dist/packages/uploader/uploader.scss

@@ -174,7 +174,9 @@
       }
 
       &-c {
-        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         height: 100%;
         position: initial;
         border-radius: $uploader-image-border-radius;