@nutui/nutui-react 2.6.13 → 2.6.15

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @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.
 */
@@ -3132,13 +3132,14 @@ const Sticky = (props) => {
   }, []);
   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;
@@ -3153,19 +3154,18 @@ const Sticky = (props) => {
     setIsFixed(fixed);
   }, [position, container, threshold]);
   const handleScroll = 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;
@@ -3181,22 +3181,16 @@ const Sticky = (props) => {
       };
     };
     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 {};
     };
@@ -3215,9 +3209,9 @@ const Sticky = (props) => {
   });
   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__default.createElement(
@@ -9627,7 +9621,7 @@ const InternalCascader = (props, ref) => {
   };
   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) {
@@ -9659,7 +9653,7 @@ const InternalCascader = (props, ref) => {
         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;
@@ -10680,8 +10674,10 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
   };
   useEffect(() => {
     setCurrentDate(resetDefaultValue() || []);
-    popup && resetRender();
   }, [defaultValue]);
+  useEffect(() => {
+    popup && resetRender();
+  }, [currentDate]);
   const scrollToDate = (date4) => {
     if (Utils.compareDate(date4, propStartDate)) {
       date4 = propStartDate;
@@ -11516,15 +11512,15 @@ const CheckboxGroup = React__default.forwardRef(
       className,
       disabled,
       list,
-      onChange,
       value,
       defaultValue,
       max,
       min,
-      onLimit,
       labelPosition,
       direction,
       options: options2,
+      onChange,
+      onLimit,
       ...rest
     } = { ...defaultProps$_, ...props };
     useImperativeHandle(ref, () => ({
@@ -11553,8 +11549,8 @@ const CheckboxGroup = React__default.forwardRef(
       }
     }));
     const [_value, setValue] = usePropsValue({
-      value: props.value,
-      defaultValue: props.defaultValue,
+      value,
+      defaultValue,
       finalValue: [],
       onChange
     });
@@ -11606,7 +11602,7 @@ const CheckboxGroup = React__default.forwardRef(
           className: classNames(
             classPrefix$i,
             {
-              [`nut-checkboxgroup-${props.direction}`]: props.direction,
+              [`nut-checkboxgroup-${direction}`]: direction,
               [`nut-checkboxgroup-list`]: list
             },
             className
@@ -11618,7 +11614,6 @@ const CheckboxGroup = React__default.forwardRef(
     );
   }
 );
-CheckboxGroup.defaultProps = defaultProps$_;
 CheckboxGroup.displayName = "NutCheckboxGroup";
 const defaultProps$Z = {
   ...ComponentDefaults,
@@ -12439,7 +12434,7 @@ const DatePicker = (props) => {
       if (!isEqual2) {
         setSelectedDate(formatValue(newDate));
       }
-      props.onChange && props.onChange(
+      onChange == null ? void 0 : onChange(
         selectedOptions,
         [
           String(newDate.getFullYear()),
@@ -12536,8 +12531,8 @@ const DatePicker = (props) => {
     }
     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;
   };
@@ -12595,7 +12590,6 @@ const DatePicker = (props) => {
     }
   ));
 };
-DatePicker.defaultProps = defaultProps$X;
 DatePicker.displayName = "NutDatePicker";
 const Context = createContext({});
 function _extends() {
@@ -13682,7 +13676,7 @@ class FormStore {
         this.store = values;
       }
     };
-    this.setFieldsValue = (newStore) => {
+    this.setFieldsValue = (newStore, needValidate = true) => {
       this.store = {
         ...this.store,
         ...newStore
@@ -13704,6 +13698,7 @@ class FormStore {
           item.entity.onStoreChange("update");
         }
       });
+      needValidate && this.validateFields();
     };
     this.setCallback = (callback) => {
       this.callbacks = {
@@ -13948,7 +13943,7 @@ const _FormItem = class _FormItem extends React__default.Component {
           if (this.props.getValueFromEvent) {
             next = this.props.getValueFromEvent(...args);
           }
-          setFieldsValue({ [name]: next });
+          setFieldsValue({ [name]: next }, false);
         }
       };
       const { validateTrigger } = this.props;
@@ -14708,7 +14703,7 @@ const MenuItem = forwardRef((props, ref) => {
               handleClick2(item);
             }
           },
-          item.value === innerValue ? /* @__PURE__ */ React__default.createElement("i", null, icon || /* @__PURE__ */ React__default.createElement(
+          item.value === innerValue ? /* @__PURE__ */ React__default.createElement("i", { className: "nut-menu-container-item-icon" }, icon || /* @__PURE__ */ React__default.createElement(
             o$5,
             {
               color: activeColor,
@@ -14718,7 +14713,7 @@ const MenuItem = forwardRef((props, ref) => {
           /* @__PURE__ */ React__default.createElement(
             "div",
             {
-              className: getIconCName(item.value, value),
+              className: `nut-menu-container-item-title ${getIconCName(item.value, value)}`,
               style: {
                 color: `${item.value === innerValue ? activeColor : ""}`
               }
@@ -14837,14 +14832,10 @@ const Menu = (props) => {
         return /* @__PURE__ */ React__default.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) => {
@@ -15121,7 +15112,6 @@ const RadioGroup = React__default.forwardRef(
     );
   }
 );
-RadioGroup.defaultProps = defaultProps$Q;
 RadioGroup.displayName = "NutRadioGroup";
 const defaultProps$P = {
   ...ComponentDefaults,
@@ -15249,7 +15239,6 @@ const Radio = (props) => {
     renderRadioItem()
   );
 };
-Radio.defaultProps = defaultProps$P;
 Radio.displayName = "NutRadio";
 Radio.Group = RadioGroup;
 const defaultProps$O = {
@@ -16628,6 +16617,7 @@ const defaultProps$G = {
 };
 const InternalUploader = (props, ref) => {
   const { locale } = useConfig();
+  const fileListRef = useRef([]);
   const {
     children,
     uploadIcon,
@@ -16680,6 +16670,9 @@ const InternalUploader = (props, ref) => {
   });
   const [uploadQueue, setUploadQueue] = useState([]);
   const classes = classNames(className, "nut-uploader");
+  useEffect(() => {
+    fileListRef.current = fileList;
+  }, [fileList]);
   useImperativeHandle(ref, () => ({
     submit: () => {
       Promise.all(uploadQueue).then((res) => {
@@ -16724,7 +16717,7 @@ const InternalUploader = (props, ref) => {
     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;
@@ -16732,23 +16725,23 @@ const InternalUploader = (props, ref) => {
           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;
@@ -16765,7 +16758,7 @@ const InternalUploader = (props, ref) => {
       });
     };
     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;
@@ -16827,9 +16820,7 @@ const InternalUploader = (props, ref) => {
       }
       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);
     }
@@ -16868,7 +16859,6 @@ const InternalUploader = (props, ref) => {
       const _files = filterFiles(new Array().slice.call(files));
       readFile(_files);
     }
-    setFileList(fileList);
     if (clearInput) {
       clearInputValue($el);
     }
@@ -17193,18 +17183,6 @@ const Content = (props) => {
   );
 };
 Content.displayName = "NutContent";
-const defaultDialogProps = {
-  ...ComponentDefaults,
-  overlay: true,
-  overlayStyle: {},
-  overlayClassName: "",
-  onCancel: () => {
-  },
-  onClose: () => {
-  },
-  onOverlayClick: (e2) => true,
-  ...defaultOverlayProps
-};
 const DialogWrap = (props) => {
   const {
     visible,
@@ -17246,7 +17224,6 @@ const DialogWrap = (props) => {
     /* @__PURE__ */ React__default.createElement(Content, { ...props, visible })
   ));
 };
-DialogWrap.defaultProps = defaultDialogProps;
 DialogWrap.displayName = "NutDialogWrap";
 const defaultProps$E = {
   ...ComponentDefaults,
@@ -18779,7 +18756,6 @@ const PullToRefresh = (p) => {
     /* @__PURE__ */ React__default.createElement("div", null, renderStatusText())
   )), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-content` }, props.children));
 };
-PullToRefresh.defaultProps = defaultProps$x;
 PullToRefresh.displayName = "NutPullToRefresh";
 const AvatarContext = createContext({});
 const defaultProps$w = {
@@ -19163,7 +19139,6 @@ const Swipe = forwardRef((props, instanceRef) => {
     /* @__PURE__ */ React__default.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 Notification2 extends React.PureComponent {
@@ -19563,16 +19538,16 @@ const Audio = (props) => {
     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() {
@@ -19613,25 +19588,25 @@ const Audio = (props) => {
     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) {
@@ -19720,12 +19695,12 @@ const Audio = (props) => {
   };
   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) => {
@@ -19754,7 +19729,6 @@ const Audio = (props) => {
     /* @__PURE__ */ React__default.createElement("track", { kind: "captions" })
   ));
 };
-Audio.defaultProps = defaultProps$p;
 Audio.displayName = "NutAudio";
 const defaultProps$o = {
   ...ComponentDefaults,
@@ -20589,15 +20563,17 @@ const getPerSlidePosition$1 = (index, position, loop2, count) => {
 const defaultEffect = (args) => {
   return React__default.Children.map(args.children, (child, index) => {
     const { isVertical, getSpringsAxis, loop: loop2, count } = args;
+    const rtl = useRtl();
+    const position = rtl ? "right" : "left";
     return /* @__PURE__ */ React__default.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
@@ -20617,6 +20593,8 @@ const getPerSlidePosition = (index, position, loop2, count) => {
 };
 const focusEffect = (args) => {
   return React__default.Children.map(args.children, (child, index) => {
+    const rtl = useRtl();
+    const position = rtl ? "right" : "left";
     const {
       isVertical,
       springs,
@@ -20634,11 +20612,11 @@ const focusEffect = (args) => {
         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;
@@ -20946,7 +20924,6 @@ const Swiper = React__default.forwardRef(
     );
   }
 );
-Swiper.defaultProps = defaultProps$h;
 Swiper.displayName = "NutSwiper";
 const defaultProps$g = {
   onClick: (e2) => void 0
@@ -20957,7 +20934,6 @@ const SwiperItem = (props) => {
   const classes = classNames(classPrefix2, className);
   return /* @__PURE__ */ React__default.createElement("div", { className: classes, onClick: props.onClick, style }, children);
 };
-SwiperItem.defaultProps = defaultProps$g;
 SwiperItem.displayName = "NutSwiperItem";
 const InnerSwiper = Swiper;
 InnerSwiper.Item = SwiperItem;
@@ -21653,10 +21629,6 @@ const Table = (props) => {
     });
   };
   const renderBodyTds = (item, rowIndex) => {
-    const { rowRender } = item;
-    if (rowRender && typeof rowRender === "function") {
-      return rowRender(item, rowIndex);
-    }
     return sortDataItem().map(([value, render2]) => {
       return /* @__PURE__ */ React__default.createElement(
         "div",
@@ -21675,7 +21647,12 @@ const Table = (props) => {
   };
   const renderBodyTrs = () => {
     return innerValue.map((item, index) => {
-      return /* @__PURE__ */ React__default.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__default.createElement("div", { className: bodyClassPrefix, key: index }, inner);
     });
   };
   return /* @__PURE__ */ React__default.createElement("div", { className: cls, ...rest }, /* @__PURE__ */ React__default.createElement(
@@ -22699,6 +22676,8 @@ const defaultProps$1 = {
   gapY: 48,
   width: 120,
   height: 64,
+  startX: 0,
+  startY: 0,
   image: "",
   imageWidth: 120,
   imageHeight: 64,
@@ -22717,6 +22696,8 @@ const WaterMark = (props) => {
     className,
     gapX,
     gapY,
+    startX,
+    startY,
     width,
     height,
     image,
@@ -22779,7 +22760,7 @@ const WaterMark = (props) => {
         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());
       }