@nutui/nutui-react 3.0.14 → 3.0.16

package/dist/nutui.react.umd.js

@@ -2077,8 +2077,8 @@ Check the top-level render call using <` + t + ">.");
       return {
         day: k + 1,
         type: type2,
-        preYear,
-        preMonth
+        year: preYear,
+        month: preMonth
       };
     });
     return months.slice(preDates - days);
@@ -12730,13 +12730,13 @@ Please add \`${key2}Action\` when creating your handler.`);
     renderDay: void 0,
     renderDayTop: void 0,
     renderDayBottom: void 0,
-    onConfirm: function(data2) {
+    onConfirm: function() {
     },
     onUpdate: function() {
     },
-    onDayClick: function(data2) {
+    onDayClick: function() {
     },
-    onPageChange: function(data2) {
+    onPageChange: function() {
     }
   });
   var CalendarItem = /* @__PURE__ */ React.forwardRef(function(props, ref) {
@@ -13510,7 +13510,8 @@ Please add \`${key2}Action\` when creating your handler.`);
   var prefixCls = "nut-calendarcard";
   var CalendarCard = /* @__PURE__ */ React.forwardRef(function(props, ref) {
     var locale = useConfig().locale;
-    var _$_object_spread = _object_spread({}, defaultProps$15, props), style = _$_object_spread.style, className = _$_object_spread.className, type2 = _$_object_spread.type, value2 = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, firstDayOfWeek = _$_object_spread.firstDayOfWeek, startDate = _$_object_spread.startDate, endDate = _$_object_spread.endDate, disableDay = _$_object_spread.disableDay, renderDay = _$_object_spread.renderDay, renderDayTop = _$_object_spread.renderDayTop, renderDayBottom = _$_object_spread.renderDayBottom, onDayClick = _$_object_spread.onDayClick, onPageChange = _$_object_spread.onPageChange, onChange = _$_object_spread.onChange;
+    var _$_object_spread = _object_spread({}, defaultProps$15, props), style = _$_object_spread.style, className = _$_object_spread.className, type2 = _$_object_spread.type, title = _$_object_spread.title, value2 = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, firstDayOfWeek = _$_object_spread.firstDayOfWeek, startDate = _$_object_spread.startDate, endDate = _$_object_spread.endDate, disableDay = _$_object_spread.disableDay, renderDay = _$_object_spread.renderDay, renderDayTop = _$_object_spread.renderDayTop, renderDayBottom = _$_object_spread.renderDayBottom, onDayClick = _$_object_spread.onDayClick, onPageChange = _$_object_spread.onPageChange, onChange = _$_object_spread.onChange;
+    var onPageChangeRef = React.useRef(onPageChange);
     var _useState = _sliced_to_array(React.useState(function() {
       var date2 = new Date(Date.now());
       var val2 = value2 || defaultValue;
@@ -13582,13 +13583,18 @@ Please add \`${key2}Action\` when creating your handler.`);
       firstDayOfWeek
     ]);
     React.useEffect(function() {
+      onPageChangeRef.current = onPageChange;
+    }, [
+      onPageChange
+    ]);
+    React.useEffect(function() {
+      var _onPageChangeRef_current;
       var newDays = getDays(month);
       setDays(newDays);
-      onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(month);
+      (_onPageChangeRef_current = onPageChangeRef.current) === null || _onPageChangeRef_current === void 0 ? void 0 : _onPageChangeRef_current.call(onPageChangeRef, month);
     }, [
       month,
       getDays,
-      onPageChange,
       firstDayOfWeek
     ]);
     var isSameDay = function(day1, day2) {
@@ -13884,7 +13890,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     return days.length > 0 ? /* @__PURE__ */ React.createElement("div", {
       className: classNames(prefixCls, className),
       style
-    }, renderHeader(), renderContent()) : null;
+    }, title || renderHeader(), renderContent()) : null;
   });
   CalendarCard.displayName = "NutCalendarCard";
   var CheckboxGroupContext = React.createContext(null);
@@ -14838,44 +14844,30 @@ Please add \`${key2}Action\` when creating your handler.`);
   };
   var handlePickerValueChange = function(selectedOptions, selectedValue, index2, type2, defaultDate, handleDateComparison) {
     var rangeType = type2.toLocaleLowerCase();
-    if ([
-      "date",
-      "datetime",
-      "datehour",
-      "month-day",
-      "year-month"
-    ].includes(rangeType)) {
-      var formattedDate = [];
-      selectedValue.forEach(function(item) {
-        formattedDate.push(item);
-      });
-      if (rangeType === "month-day" && formattedDate.length < 3) {
-        formattedDate.unshift(new Date(defaultDate).getFullYear());
-      }
-      if (rangeType === "year-month" && formattedDate.length < 3) {
-        formattedDate.push(new Date(defaultDate).getDate());
-      }
-      var year = Number(formattedDate[0]);
-      var month = Number(formattedDate[1]) - 1;
-      var day = Math.min(Number(formattedDate[2]), getLastDayOfMonth(year, month + 1));
-      var date2 = null;
-      if (rangeType === "date" || rangeType === "month-day" || rangeType === "year-month") {
-        date2 = new Date(year, month, day);
-      } else if (rangeType === "datetime") {
-        date2 = new Date(year, month, day, Number(formattedDate[3]), Number(formattedDate[4]));
-      } else if (rangeType === "datehour") {
-        date2 = new Date(year, month, day, Number(formattedDate[3]));
-      }
-      handleDateComparison(date2, selectedOptions, index2);
+    var formattedDate = [];
+    selectedValue.forEach(function(item) {
+      formattedDate.push(item);
+    });
+    if (rangeType === "month-day" && formattedDate.length < 3) {
+      formattedDate.unshift(new Date(defaultDate).getFullYear());
+    }
+    if (rangeType === "year-month" && formattedDate.length < 3) {
+      formattedDate.push(new Date(defaultDate).getDate());
+    }
+    var year = Number(formattedDate[0]);
+    var month = Number(formattedDate[1]) - 1;
+    var day = Math.min(Number(formattedDate[2]), getLastDayOfMonth(year, month + 1));
+    var date2 = null;
+    if (rangeType === "date" || rangeType === "month-day" || rangeType === "year-month") {
+      date2 = new Date(year, month, day);
+    } else if (rangeType === "datetime") {
+      date2 = new Date(year, month, day, Number(formattedDate[3]), Number(formattedDate[4]));
+    } else if (rangeType === "datehour") {
+      date2 = new Date(year, month, day, Number(formattedDate[3]));
     } else {
-      var _selectedValue = _sliced_to_array(selectedValue, 3), hour = _selectedValue[0], minute = _selectedValue[1], seconds = _selectedValue[2];
-      var currentDate = new Date(defaultDate);
-      var year1 = currentDate.getFullYear();
-      var month1 = currentDate.getMonth();
-      var day1 = currentDate.getDate();
-      var date1 = new Date(year1, month1, day1, Number(hour), Number(minute), rangeType === "time" ? Number(seconds) : 0);
-      handleDateComparison(date1, selectedOptions, index2);
+      date2 = new Date(year, month, day, Number(formattedDate[3]), Number(formattedDate[4]), Number(formattedDate[5]));
     }
+    handleDateComparison(date2, selectedOptions, index2);
   };
   var currentYear$1 = (/* @__PURE__ */ new Date()).getFullYear();
   var defaultProps$10 = _object_spread_props(_object_spread({}, ComponentDefaults), {
@@ -16761,12 +16753,12 @@ Please add \`${key2}Action\` when creating your handler.`);
         });
         var item = name2 ? _this.context.formInstance.errors[name2] : [];
         var starPosition = _this.context.formInstance.starPosition;
-        var renderStar = (required2 || requiredInRules) && /* @__PURE__ */ React.createElement("div", {
-          className: "nut-form-item-label-required required"
+        var renderStar = (required2 || requiredInRules) && /* @__PURE__ */ React.createElement("span", {
+          className: "nut-form-item-label-".concat(starPosition, "-required required")
         }, "*");
         var renderLabel = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
           className: "nut-form-item-labeltxt"
-        }, starPosition === "left" ? renderStar : null, label), starPosition === "right" ? renderStar : null);
+        }, starPosition === "left" ? renderStar : null, label, starPosition === "right" ? renderStar : null));
         return /* @__PURE__ */ React.createElement(Cell, {
           className: "".concat(_this.getClassNameWithDirection("nut-form-item"), " ").concat(className),
           style,
@@ -20243,8 +20235,6 @@ Please add \`${key2}Action\` when creating your handler.`);
       var handleCancel = function(e2) {
         e2.stopPropagation();
         if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel())) return;
-        if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose())) return;
-        onClose();
         onCancel();
       };
       var handleOk = /* @__PURE__ */ function() {
@@ -20332,24 +20322,21 @@ Please add \`${key2}Action\` when creating your handler.`);
     };
     var renderCloseIcon = function() {
       if (!closeIcon) return null;
-      var handleCancel = function() {
-        if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel())) return;
+      var handleClose = function() {
         if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose())) return;
         onClose();
-        onCancel();
       };
       var _obj;
       var closeClasses = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-close"), true), _define_property(_obj, "".concat(classPrefix2, "-close-").concat(closeIconPosition), true), _obj));
       var systomIcon = closeIconPosition !== "bottom" ? /* @__PURE__ */ React.createElement(n$6, null) : /* @__PURE__ */ React.createElement(n$4, null);
       return /* @__PURE__ */ React.createElement("div", {
         className: closeClasses,
-        onClick: handleCancel
+        onClick: handleClose
       }, /* @__PURE__ */ React.isValidElement(closeIcon) ? closeIcon : systomIcon);
     };
     var onHandleClickOverlay = function(e2) {
       if (closeOnOverlayClick && visible && e2.target === e2.currentTarget) {
         var closed = onOverlayClick && onOverlayClick(e2);
-        closed && onClose();
         closed && onCancel();
       }
     };
@@ -20897,9 +20884,10 @@ Please add \`${key2}Action\` when creating your handler.`);
     var _useState8 = _sliced_to_array(React.useState(null), 2), isCanScroll = _useState8[0], SetIsCanScroll = _useState8[1];
     var isVertical = direction === "vertical";
     var _useState9 = _sliced_to_array(React.useState(null), 2), rect = _useState9[0], setRect = _useState9[1];
-    var active2 = 0;
+    var activeRef = React.useRef(0);
     var _useState10 = _sliced_to_array(React.useState(false), 2), ready = _useState10[0], setReady = _useState10[1];
     var container = React.useRef(null);
+    var _useState11 = _sliced_to_array(React.useState(false), 2), isContainerReady = _useState11[0], setIsContainerReady = _useState11[1];
     var innerRef = React.useRef(null);
     var swiperRef = React.useRef({
       moving: false,
@@ -20909,8 +20897,8 @@ Please add \`${key2}Action\` when creating your handler.`);
       offset: 0,
       size: 0
     });
-    var _useState11 = _sliced_to_array(React.useState([]), 2), childOffset = _useState11[0], setChildOffset = _useState11[1];
-    var _useState12 = _sliced_to_array(React.useState(0), 2), offset = _useState12[0], setOffset = _useState12[1];
+    var _useState12 = _sliced_to_array(React.useState([]), 2), childOffset = _useState12[0], setChildOffset = _useState12[1];
+    var _useState13 = _sliced_to_array(React.useState(0), 2), offset = _useState13[0], setOffset = _useState13[1];
     var _useMemo = React.useMemo(function() {
       var childCount2 = 0;
       var childs2 = React.Children.map(children, function(child) {
@@ -20947,7 +20935,9 @@ Please add \`${key2}Action\` when creating your handler.`);
       return function() {
         clearInterval(timer);
       };
-    }, []);
+    }, [
+      childs
+    ]);
     React.useEffect(function() {
       initScrollWrap();
     }, [
@@ -21040,24 +21030,23 @@ Please add \`${key2}Action\` when creating your handler.`);
       marginTop: animate ? "-".concat(height2, "px") : ""
     };
     var init = function() {
-      var active3 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
+      var activeIndex = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
       var rects = getRect(container === null || container === void 0 ? void 0 : container.current);
-      var _active = Math.max(Math.min(childCount - 1, active3), 0);
+      var _active = Math.max(Math.min(childCount - 1, activeIndex), 0);
       var _height = rects.height;
       trackSize = childCount * Number(_height);
       var targetOffset = getOffset(_active);
-      swiperRef.current.moving = true;
-      if (ready) {
-        swiperRef.current.moving = false;
-      }
-      active3 = _active;
+      activeRef.current = _active;
       setRect(rects);
       setOffset(targetOffset);
+      setChildOffset(new Array(childCount).fill(0));
+      swiperRef.current.moving = true;
+      setStyle(targetOffset, rects);
+      swiperRef.current.moving = false;
       setReady(true);
     };
     React.useEffect(function() {
       if (ready) {
-        stopAutoPlay();
         autoplay();
       }
       return function() {
@@ -21067,17 +21056,18 @@ Please add \`${key2}Action\` when creating your handler.`);
       ready
     ]);
     React.useEffect(function() {
-      if (isVertical && children) {
-        init();
+      if (isVertical && children && isContainerReady) {
         stopAutoPlay();
-        autoplay();
+        setReady(false);
+        init();
       }
     }, [
       children,
-      container === null || container === void 0 ? void 0 : container.current
+      isContainerReady
     ]);
     var stopAutoPlay = function() {
       clearTimeout(swiperRef.current.autoplayTimer);
+      swiperRef.current.moving = false;
       swiperRef.current.autoplayTimer = null;
     };
     var autoplay = function() {
@@ -21093,21 +21083,24 @@ Please add \`${key2}Action\` when creating your handler.`);
       if (childCount <= 1) return;
       var targetActive = getActive(pace);
       var targetOffset = getOffset(targetActive, offset2);
-      if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
-        var rightBound = targetOffset < minOffset;
-        childOffset[0] = rightBound ? trackSize : 0;
-      }
-      if (Array.isArray(children) && children[childCount - 1] && targetOffset !== 0) {
-        var leftBound = targetOffset > 0;
-        childOffset[childCount - 1] = leftBound ? -trackSize : 0;
-      }
-      setChildOffset(childOffset);
-      active2 = targetActive;
+      setChildOffset(function(prevChildOffset) {
+        var newChildOffset = _to_consumable_array(prevChildOffset);
+        if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
+          var rightBound = targetOffset < minOffset;
+          newChildOffset[0] = rightBound ? trackSize : 0;
+        }
+        if (Array.isArray(children) && children[childCount - 1] && targetOffset !== 0) {
+          var leftBound = targetOffset > 0;
+          newChildOffset[childCount - 1] = leftBound ? -trackSize : 0;
+        }
+        return newChildOffset;
+      });
+      activeRef.current = targetActive;
       setOffset(targetOffset);
-      getStyle(targetOffset);
+      setStyle(targetOffset);
     };
     var next = function() {
-      resettPosition();
+      resetPosition();
       requestFrame(function() {
         requestFrame(function() {
           swiperRef.current.moving = false;
@@ -21120,17 +21113,18 @@ Please add \`${key2}Action\` when creating your handler.`);
     var handleItemClick = function(event, value2) {
       onItemClick && onItemClick(event, value2);
     };
-    var getStyle = function() {
-      var moveOffset = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : offset;
+    var setStyle = function() {
+      var moveOffset = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : offset, currentRect = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : rect;
       var target = innerRef.current;
       if (!target) {
         return;
       }
       var _offset = 0;
-      var val2 = rect.height - height2;
-      _offset = moveOffset + Number(active2 === childCount - 1 && val2 / 2);
+      var containerHeight = (currentRect === null || currentRect === void 0 ? void 0 : currentRect.height) || height2;
+      var val2 = containerHeight - Number(height2);
+      _offset = moveOffset + Number(activeRef.current === childCount - 1 && val2 / 2);
       target.style.transitionDuration = "".concat(swiperRef.current.moving ? 0 : duration, "ms");
-      target.style.height = "".concat(Number(height2) * childCount, "px");
+      target.style.height = "".concat(Number(height2) * (childCount + 1), "px");
       target.style.transform = "translate3D(0,".concat(_offset, "px,0)");
     };
     var itemStyle = function(index2) {
@@ -21146,15 +21140,16 @@ Please add \`${key2}Action\` when creating your handler.`);
       return style2;
     };
     var getActive = function(pace) {
+      var currentActive = activeRef.current;
       if (pace) {
-        var _active = active2 + pace;
+        var _active = currentActive + pace;
         return range2(_active, -1, childCount);
       }
-      return active2;
+      return currentActive;
     };
-    var getOffset = function(active3) {
+    var getOffset = function(active2) {
       var offset2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
-      var currentPosition = active3 * Number(height2);
+      var currentPosition = active2 * Number(height2);
       var targetOffset = offset2 - currentPosition;
       return targetOffset;
     };
@@ -21164,14 +21159,15 @@ Please add \`${key2}Action\` when creating your handler.`);
     var range2 = function(num, min, max) {
       return Math.min(Math.max(num, min), max);
     };
-    var resettPosition = function() {
+    var resetPosition = function() {
+      var currentActive = activeRef.current;
       swiperRef.current.moving = true;
-      if (active2 <= -1) {
+      if (currentActive <= -1) {
         move({
           pace: childCount
         });
       }
-      if (active2 >= childCount) {
+      if (currentActive >= childCount) {
         move({
           pace: -childCount
         });
@@ -21185,6 +21181,20 @@ Please add \`${key2}Action\` when creating your handler.`);
         stopAutoPlay();
       };
     }, []);
+    var hasVerticalContent = React.useMemo(function() {
+      if (!isVertical) return false;
+      if (children) return (childs === null || childs === void 0 ? void 0 : childs.length) > 0;
+      return (list === null || list === void 0 ? void 0 : list.length) > 0;
+    }, [
+      isVertical,
+      childs,
+      list,
+      children
+    ]);
+    var containerRefCallback = React.useCallback(function(ref) {
+      container.current = ref;
+      setIsContainerReady(true);
+    }, []);
     return /* @__PURE__ */ React.createElement("div", {
       className: cls,
       style
@@ -21210,10 +21220,10 @@ Please add \`${key2}Action\` when creating your handler.`);
     }, rightIcon || /* @__PURE__ */ React.createElement(n$6, {
       width: 12,
       height: 12
-    })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React.createElement("div", {
+    })) : null) : null, showNoticeBar && hasVerticalContent && isVertical ? /* @__PURE__ */ React.createElement("div", {
       className: "nut-noticebar-vertical",
       style: barStyle,
-      ref: container,
+      ref: containerRefCallback,
       onClick: handleClick
     }, leftIcon ? /* @__PURE__ */ React.createElement("div", {
       className: "nut-noticebar-box-left-icon"
@@ -24320,7 +24330,24 @@ Please add \`${key2}Action\` when creating your handler.`);
     }
   });
   var ImagePreview = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps$g, props), value2 = _$_object_spread.value, className = _$_object_spread.className, style = _$_object_spread.style, images = _$_object_spread.images, videos = _$_object_spread.videos, visible = _$_object_spread.visible, defaultValue = _$_object_spread.defaultValue, indicatorColor = _$_object_spread.indicatorColor, pagination = _$_object_spread.pagination, indicator = _$_object_spread.indicator, autoPlay = _$_object_spread.autoPlay, closeOnContentClick = _$_object_spread.closeOnContentClick, closeIcon = _$_object_spread.closeIcon, closeIconPosition = _$_object_spread.closeIconPosition, onClose = _$_object_spread.onClose, onChange = _$_object_spread.onChange;
+    var _mergeProps = mergeProps(defaultProps$g, props), value2 = _mergeProps.value, className = _mergeProps.className, style = _mergeProps.style, images = _mergeProps.images, videos = _mergeProps.videos, visible = _mergeProps.visible, defaultValue = _mergeProps.defaultValue, indicatorColor = _mergeProps.indicatorColor, pagination = _mergeProps.pagination, indicator = _mergeProps.indicator, autoPlay = _mergeProps.autoPlay, closeOnContentClick = _mergeProps.closeOnContentClick, closeIcon = _mergeProps.closeIcon, closeIconPosition = _mergeProps.closeIconPosition, onClose = _mergeProps.onClose, onChange = _mergeProps.onChange, rest = _object_without_properties(_mergeProps, [
+      "value",
+      "className",
+      "style",
+      "images",
+      "videos",
+      "visible",
+      "defaultValue",
+      "indicatorColor",
+      "pagination",
+      "indicator",
+      "autoPlay",
+      "closeOnContentClick",
+      "closeIcon",
+      "closeIconPosition",
+      "onClose",
+      "onChange"
+    ]);
     var classPrefix2 = "nut-imagepreview";
     var ref = React.useRef(null);
     var _usePropsValue = _sliced_to_array(usePropsValue({
@@ -24448,21 +24475,18 @@ Please add \`${key2}Action\` when creating your handler.`);
       style,
       ref,
       onTouchStart
-    }, showPop && /* @__PURE__ */ React.createElement(InnerSwiper, {
-      autoPlay: !!duration,
-      duration,
+    }, showPop && /* @__PURE__ */ React.createElement(InnerSwiper, _object_spread({
+      autoplay: !!duration,
       className: "".concat(classPrefix2, "-swiper"),
-      loop: true,
       style: {
         "--nutui-indicator-color": indicatorColor
       },
-      direction: "horizontal",
       onChange: function(page) {
         return slideChangeEnd(page);
       },
       defaultValue: innerNo > maxNo ? maxNo - 1 : innerNo - 1,
       indicator
-    }, _to_consumable_array(videos.map(function(item) {
+    }, rest), _to_consumable_array(videos.map(function(item) {
       return {
         type: "video",
         data: item