@nutui/nutui-react 2.0.0-alpha.15 → 2.0.0-alpha.16

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.0.0-alpha.15 Wed Jun 07 2023 16:11:56 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.16 Fri Jun 09 2023 18:29:35 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -11221,7 +11221,7 @@ Please add \`${key}Action\` when creating your handler.`);
         {
           classNames: transitionName,
           unmountOnExit: true,
-          timeout: 500,
+          timeout: 300,
           in: innerVisible,
           onEntered: onHandleOpened,
           onExited: onHandleClosed
@@ -14549,7 +14549,7 @@ Please add \`${key}Action\` when creating your handler.`);
       {
         visible,
         position: "bottom",
-        onClose: () => {
+        afterClose: () => {
           closePicker();
         }
       },
@@ -14574,29 +14574,29 @@ Please add \`${key}Action\` when creating your handler.`);
   const Picker$1 = Picker;
   const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
   const defaultProps$V = {
-    modelValue: null,
+    ...ComponentDefaults,
     visible: false,
     title: "",
     type: "date",
-    isShowChinese: false,
+    showChinese: false,
     threeDimensional: true,
     minuteStep: 1,
-    minDate: new Date(currentYear - 10, 0, 1),
-    maxDate: new Date(currentYear + 10, 11, 31)
+    startDate: new Date(currentYear - 10, 0, 1),
+    endDate: new Date(currentYear + 10, 11, 31)
   };
   const DatePicker = (props) => {
     const {
-      minDate,
-      maxDate,
+      startDate,
+      endDate,
       type: type2,
-      isShowChinese,
+      showChinese,
       minuteStep,
-      modelValue,
       visible,
       title,
+      defaultValue,
       formatter,
-      onCloseDatePicker,
-      onConfirmDatePicker,
+      onClose,
+      onConfirm,
       filter,
       onChange,
       threeDimensional,
@@ -14608,14 +14608,6 @@ Please add \`${key}Action\` when creating your handler.`);
       ...props
     };
     const { locale } = useConfig();
-    const [show2, setShow] = React.useState(false);
-    const [currentDate, setCurrentDate] = React.useState(modelValue);
-    const [defaultValue, setDefaultValue] = React.useState([]);
-    const [options2, setListData] = React.useState([]);
-    const pickerRef = React.useRef(null);
-    const isDate = (val) => {
-      return Object.prototype.toString.call(val) === "[object Date]" && !Number.isNaN(val.getTime());
-    };
     const datepickerLang = locale.datepicker;
     const zhCNType = {
       day: datepickerLang.day,
@@ -14625,20 +14617,32 @@ Please add \`${key}Action\` when creating your handler.`);
       minute: datepickerLang.min,
       seconds: datepickerLang.seconds
     };
+    const [defaultValueOfPicker, setDefaultValueOfPicker] = React.useState([]);
+    const [options2, setOptions] = React.useState([]);
+    const isDate = (val) => {
+      return Object.prototype.toString.call(val) === "[object Date]" && !Number.isNaN(val.getTime());
+    };
     const formatValue = (value) => {
       let cvalue = value;
       if (!cvalue || cvalue && !isDate(cvalue)) {
-        cvalue = minDate;
+        cvalue = startDate;
       }
-      let timestmp = Math.max(cvalue.getTime(), minDate.getTime());
-      timestmp = Math.min(timestmp, maxDate.getTime());
+      let timestmp = Math.max(cvalue.getTime(), startDate.getTime());
+      timestmp = Math.min(timestmp, endDate.getTime());
       return new Date(timestmp);
     };
+    const [currentDate, setCurrentDate] = usePropsValue({
+      value: props.value && formatValue(props.value),
+      defaultValue: formatValue(props.defaultValue || null),
+      finalValue: null,
+      onChange: (val) => {
+      }
+    });
     function getMonthEndDay(year, month) {
       return new Date(year, month, 0).getDate();
     }
     const getBoundary = (type22, value) => {
-      const boundary = type22 === "min" ? minDate : maxDate;
+      const boundary = type22 === "min" ? startDate : endDate;
       const year = boundary.getFullYear();
       let month = 1;
       let date2 = 1;
@@ -14672,12 +14676,12 @@ Please add \`${key}Action\` when creating your handler.`);
         [`${type22}Seconds`]: seconds
       };
     };
-    const ranges = (date2) => {
-      const curDate = date2 || currentDate;
+    const ranges = () => {
+      const curDate = currentDate;
       if (!curDate)
         return [];
-      const { maxYear, maxDate: maxDate2, maxMonth, maxHour, maxMinute, maxSeconds } = getBoundary("max", curDate);
-      const { minYear, minDate: minDate2, minMonth, minHour, minMinute, minSeconds } = getBoundary("min", curDate);
+      const { maxYear, maxDate, maxMonth, maxHour, maxMinute, maxSeconds } = getBoundary("max", curDate);
+      const { minYear, minDate, minMonth, minHour, minMinute, minSeconds } = getBoundary("min", curDate);
       let result = [
         {
           type: "year",
@@ -14689,7 +14693,7 @@ Please add \`${key}Action\` when creating your handler.`);
         },
         {
           type: "day",
-          range: [minDate2, maxDate2]
+          range: [minDate, maxDate]
         },
         {
           type: "hour",
@@ -14729,7 +14733,7 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       return result;
     };
-    const updateChooseValueCustmer = (cacheValueData, selectedValue, index) => {
+    const updateChooseValueCustmer = (selectedOptions, selectedValue, index) => {
       if (["date", "datetime", "datehour", "month-day", "year-month"].includes(
         type2.toLocaleLowerCase()
       )) {
@@ -14739,11 +14743,13 @@ Please add \`${key}Action\` when creating your handler.`);
         });
         if (type2.toLocaleLowerCase() === "month-day" && formatDate.length < 3) {
           formatDate.unshift(
-            new Date(modelValue || minDate || maxDate).getFullYear()
+            new Date(defaultValue || startDate || endDate).getFullYear()
           );
         }
         if (type2.toLocaleLowerCase() === "year-month" && formatDate.length < 3) {
-          formatDate.push(new Date(modelValue || minDate || maxDate).getDate());
+          formatDate.push(
+            new Date(defaultValue || startDate || endDate).getDate()
+          );
         }
         const year = Number(formatDate[0]);
         const month = Number(formatDate[1]) - 1;
@@ -14768,7 +14774,7 @@ Please add \`${key}Action\` when creating your handler.`);
         const isEqual2 = (currentDate == null ? void 0 : currentDate.getTime()) === (date2 == null ? void 0 : date2.getTime());
         date2 && isDate(date2) && !isEqual2 && setCurrentDate(formatValue(date2));
       }
-      props.onChange && props.onChange(cacheValueData, selectedValue, index);
+      props.onChange && props.onChange(selectedOptions, selectedValue, index);
     };
     const padZero = (num, targetLength = 2) => {
       let str = `${num}`;
@@ -14786,12 +14792,13 @@ Please add \`${key}Action\` when creating your handler.`);
         });
       } else {
         const padMin = padZero(value, 2);
-        const fatter = isShowChinese ? zhCNType[type22] : "";
+        const fatter = showChinese ? zhCNType[type22] : "";
         fOption = { text: padMin + fatter, value: padMin };
       }
       return fOption;
     };
     const generateValue = (min, max, val, type22, columnIndex) => {
+      var _a2;
       let cmin = min;
       const arr = [];
       let index = 0;
@@ -14806,8 +14813,8 @@ Please add \`${key}Action\` when creating your handler.`);
           index++;
         }
       }
-      defaultValue[columnIndex] = arr[index].value;
-      setDefaultValue([...defaultValue]);
+      defaultValueOfPicker[columnIndex] = (_a2 = arr[index]) == null ? void 0 : _a2.value;
+      setDefaultValueOfPicker([...defaultValueOfPicker]);
       if (props.filter && props.filter(type22, arr)) {
         return props.filter(type22, arr);
       }
@@ -14832,8 +14839,8 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       return d;
     };
-    const columns = (date2) => {
-      const val = ranges(date2).map((res, columnIndex) => {
+    const columns = () => {
+      const val = ranges().map((res, columnIndex) => {
         return generateValue(
           res.range[0],
           res.range[1],
@@ -14844,42 +14851,24 @@ Please add \`${key}Action\` when creating your handler.`);
       });
       return val || [];
     };
-    React.useEffect(() => {
-      setCurrentDate(formatValue(modelValue));
-    }, []);
-    React.useEffect(() => {
-      setCurrentDate(formatValue(modelValue));
-    }, [modelValue]);
-    React.useEffect(() => {
-      setShow(visible);
-    }, [visible]);
     React.useEffect(() => {
       if (currentDate) {
-        setListData(columns());
+        setOptions(columns());
       }
-    }, [currentDate]);
-    return /* @__PURE__ */ React.createElement(
-      "div",
+    }, []);
+    return /* @__PURE__ */ React.createElement("div", { className: `nut-datepicker ${className}`, style, ...rest }, options2.length && /* @__PURE__ */ React.createElement(
+      Picker$1,
       {
-        className: `nut-datepicker ${className || ""}`,
-        style,
-        ...rest
-      },
-      options2.length > 0 && /* @__PURE__ */ React.createElement(
-        Picker$1,
-        {
-          title,
-          visible: show2,
-          options: options2,
-          onClose: onCloseDatePicker,
-          defaultValue,
-          onConfirm: (options22, values) => onConfirmDatePicker && onConfirmDatePicker(options22, values),
-          onChange: (list, value, index) => updateChooseValueCustmer(list, value, index),
-          threeDimensional,
-          ref: pickerRef
-        }
-      )
-    );
+        title,
+        visible,
+        options: options2,
+        onClose,
+        defaultValue: defaultValueOfPicker,
+        onConfirm: (options22, value) => onConfirm && onConfirm(options22, value),
+        onChange: (options22, value, index) => updateChooseValueCustmer(options22, value, index),
+        threeDimensional
+      }
+    ));
   };
   DatePicker.defaultProps = defaultProps$V;
   DatePicker.displayName = "NutDatePicker";
@@ -16745,6 +16734,7 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const hideMenuItem = (index) => {
       showMenuItem[index] = false;
+      console.log([...showMenuItem]);
       setShowMenuItem([...showMenuItem]);
     };
     const updateTitle = (text, index) => {
@@ -16754,6 +16744,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const cloneChildren = () => {
       return React.Children.map(children, (child, index) => {
         return React.cloneElement(child, {
+          ...child.props,
           show: showMenuItem[index],
           index,
           activeColor,
@@ -16793,7 +16784,8 @@ Please add \`${key}Action\` when creating your handler.`);
               }),
               style: { color: showMenuItem[index] ? activeColor : "" },
               key: index,
-              onClick: () => {
+              onClick: (e) => {
+                e.stopPropagation();
                 !disabled && toggleMenuItem(index);
               }
             },
@@ -16835,12 +16827,59 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   Menu.defaultProps = defaultProps$Q;
   Menu.displayName = "NutMenu";
+  const isObject = (val) => val !== null && typeof val === "object";
+  const isFunction = (val) => typeof val === "function";
+  const isPromise = (val) => {
+    return isObject(val) && isFunction(val.then) && isFunction(val.catch);
+  };
+  const upperCaseFirst = (str) => {
+    var str = str.toLowerCase();
+    str = str.replace(
+      /\b\w+\b/g,
+      (word) => word.substring(0, 1).toUpperCase() + word.substring(1)
+    );
+    return str;
+  };
+  const getTargetElement = (target) => {
+    let targetElement;
+    if (isFunction(target)) {
+      targetElement = target();
+    } else if ("current" in target) {
+      targetElement = target.current;
+    } else {
+      targetElement = target;
+    }
+    return targetElement;
+  };
+  function useClickAway(onClickAway, target, eventName = "click", isListener, outerVar) {
+    const handler = (event) => {
+      const targets = Array.isArray(target) ? target : [target];
+      if (targets.some((item) => {
+        const targetElement = getTargetElement(item);
+        return !targetElement || targetElement.contains(event.target);
+      })) {
+        return;
+      }
+      if (outerVar) {
+        onClickAway();
+      }
+    };
+    React.useEffect(() => {
+      if (isListener) {
+        window.addEventListener(eventName, handler, false);
+      } else {
+        window.removeEventListener(eventName, handler, false);
+      }
+      return () => {
+        window.removeEventListener(eventName, handler, true);
+      };
+    }, [target]);
+  }
   const defaultProps$P = {
     ...ComponentDefaults,
     columns: 1,
     direction: "down",
     icon: null,
-    closeOnClickAway: false,
     activeTitleClass: "",
     inactiveTitleClass: "",
     onChange: (value) => void 0
@@ -16873,9 +16912,6 @@ Please add \`${key}Action\` when creating your handler.`);
     React.useEffect(() => {
       setShowPopup(show2);
     }, [show2]);
-    React.useEffect(() => {
-      getParentOffset();
-    }, [_showPopup]);
     React.useImperativeHandle(ref, () => ({
       toggle: parent.toggleMenuItem
     }));
@@ -16896,119 +16932,108 @@ Please add \`${key}Action\` when creating your handler.`);
       setValue(item.value);
       onChange && onChange(item);
     };
-    const [position, setPosition] = React.useState({
-      top: 0,
-      height: 0
-    });
-    const getParentOffset = () => {
-      setTimeout(() => {
-        const p = parent.menuRef.current;
-        const rect = p.getBoundingClientRect();
-        setPosition({
-          height: rect.height,
-          top: rect.top
-        });
-      });
-    };
     const isShow = () => {
       if (_showPopup)
         return {};
       return { display: "none" };
     };
     const getPosition = () => {
-      return direction === "down" ? { top: `${position.top + position.height}px` } : { bottom: `${window.innerHeight - position.top}px`, top: "auto" };
-    };
-    const placeholderStyle = () => {
-      if (direction === "down") {
-        return {
-          height: `${position.top + position.height}px`,
-          top: 0,
-          ...isShow()
-        };
-      }
-      return {
-        height: `${window.innerHeight - position.top}px`,
-        bottom: `0px`,
+      return direction === "down" ? { position: "absolute", height: `${window.innerHeight}px` } : {
+        position: "absolute",
+        bottom: "100%",
         top: "auto",
-        ...isShow()
+        height: `${window.innerHeight}px`
       };
     };
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, closeOnClickAway ? /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: `placeholder-element ${classNames({
-          up: direction === "up"
-        })}`,
-        style: placeholderStyle(),
-        onClick: () => parent.toggleMenuItem(index)
-      }
-    ) : null, /* @__PURE__ */ React.createElement(
-      Overlay,
-      {
-        className: "nut-menu__overlay",
-        style: getPosition(),
-        lockScroll: parent.lockScroll,
-        visible: _showPopup,
-        closeOnOverlayClick: parent.closeOnOverlayClick,
-        onClick: () => {
-          parent.closeOnOverlayClick && parent.toggleMenuItem(index);
-        }
-      }
-    ), /* @__PURE__ */ React.createElement(
+    const micRef = React.useRef(null);
+    const targetSet = [micRef.current];
+    useClickAway(
+      () => {
+        parent.hideMenuItem(index);
+      },
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      targetSet,
+      "click",
+      _showPopup,
+      closeOnClickAway
+    );
+    return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(className, {
-          "nut-menu-item__wrap": direction === "down",
-          "nut-menu-item__wrap-up": direction !== "down"
-        }),
-        style: {
-          ...style,
-          ...isShow()
-        }
+        className: "nut-menu-item-container",
+        ref: micRef,
+        style: { position: "absolute", left: 0, right: 0 }
       },
       /* @__PURE__ */ React.createElement(
-        CSSTransition$1,
+        Overlay,
         {
-          in: _showPopup,
-          timeout: 100,
-          classNames: direction === "down" ? "menu-item" : "menu-item-up"
+          className: "nut-menu__overlay",
+          style: getPosition(),
+          lockScroll: parent.lockScroll,
+          visible: _showPopup,
+          closeOnOverlayClick: parent.closeOnOverlayClick,
+          onClick: () => {
+            parent.closeOnOverlayClick && parent.toggleMenuItem(index);
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(className, {
+            "nut-menu-item__wrap": direction === "down",
+            "nut-menu-item__wrap-up": direction !== "down"
+          }),
+          style: {
+            ...style,
+            ...isShow()
+          }
         },
-        /* @__PURE__ */ React.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item, index2) => {
-          return /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              className: `nut-menu-item__option ${classNames({
-                active: item.value === _value
-              })}`,
-              key: item.text,
-              style: {
-                flexBasis: `${100 / columns}%`
-              },
-              onClick: () => {
-                handleClick2(item);
-              }
-            },
-            item.value === _value ? /* @__PURE__ */ React.createElement("i", null, icon || /* @__PURE__ */ React.createElement(
-              x$f,
-              {
-                color: activeColor,
-                className: getIconCName(item.value, value)
-              }
-            )) : null,
-            /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement(
+          CSSTransition$1,
+          {
+            in: _showPopup,
+            timeout: 100,
+            classNames: direction === "down" ? "menu-item" : "menu-item-up"
+          },
+          /* @__PURE__ */ React.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item) => {
+            return /* @__PURE__ */ React.createElement(
               "div",
               {
-                className: getIconCName(item.value, value),
+                className: `nut-menu-item__option ${classNames({
+                  active: item.value === _value
+                })}`,
+                key: item.text,
                 style: {
-                  color: `${item.value === _value ? activeColor : ""}`
+                  flexBasis: `${100 / columns}%`
+                },
+                onClick: () => {
+                  handleClick2(item);
                 }
               },
-              item.text
-            )
-          );
-        }), children)
+              item.value === _value ? /* @__PURE__ */ React.createElement("i", null, icon || /* @__PURE__ */ React.createElement(
+                x$f,
+                {
+                  color: activeColor,
+                  className: getIconCName(item.value, value)
+                }
+              )) : null,
+              /* @__PURE__ */ React.createElement(
+                "div",
+                {
+                  className: getIconCName(item.value, value),
+                  style: {
+                    color: `${item.value === _value ? activeColor : ""}`
+                  }
+                },
+                item.text
+              )
+            );
+          }), children)
+        )
       )
-    ));
+    );
   });
   MenuItem.defaultProps = defaultProps$P;
   MenuItem.displayName = "NutMenuItem";
@@ -18474,19 +18499,6 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     }
   }
-  const isObject = (val) => val !== null && typeof val === "object";
-  const isFunction = (val) => typeof val === "function";
-  const isPromise = (val) => {
-    return isObject(val) && isFunction(val.then) && isFunction(val.catch);
-  };
-  const upperCaseFirst = (str) => {
-    var str = str.toLowerCase();
-    str = str.replace(
-      /\b\w+\b/g,
-      (word) => word.substring(0, 1).toUpperCase() + word.substring(1)
-    );
-    return str;
-  };
   const funcInterceptor = (interceptor, {
     args = [],
     done,
@@ -19981,7 +19993,7 @@ Please add \`${key}Action\` when creating your handler.`);
         onClick: handleClick2
       },
       leftIcon ? /* @__PURE__ */ React.createElement("div", { className: "left-icon" }, leftIcon) : null,
-      children ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
+      children ? /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
         return /* @__PURE__ */ React.createElement(
           "div",
           {
@@ -19994,7 +20006,7 @@ Please add \`${key}Action\` when creating your handler.`);
           },
           item
         );
-      }))) : /* @__PURE__ */ React.createElement("div", { className: "horseLamp_list", style: horseLampStyle }, scrollList.current.map((item, index) => {
+      })) : /* @__PURE__ */ React.createElement("div", { className: "horseLamp_list", style: horseLampStyle }, scrollList.current.map((item, index) => {
         return (
           // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
           /* @__PURE__ */ React.createElement(
@@ -20188,41 +20200,6 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     }
   };
-  const getTargetElement = (target) => {
-    let targetElement;
-    if (isFunction(target)) {
-      targetElement = target();
-    } else if ("current" in target) {
-      targetElement = target.current;
-    } else {
-      targetElement = target;
-    }
-    return targetElement;
-  };
-  function useClickAway(onClickAway, target, eventName = "click", isListener, outerVar) {
-    const handler = (event) => {
-      const targets = Array.isArray(target) ? target : [target];
-      if (targets.some((item) => {
-        const targetElement = getTargetElement(item);
-        return !targetElement || targetElement.contains(event.target);
-      })) {
-        return;
-      }
-      if (outerVar) {
-        onClickAway();
-      }
-    };
-    React.useEffect(() => {
-      if (isListener) {
-        window.addEventListener(eventName, handler, true);
-      } else {
-        window.removeEventListener(eventName, handler, true);
-      }
-      return () => {
-        window.removeEventListener(eventName, handler, true);
-      };
-    }, [target]);
-  }
   const defaultProps$w = {
     ...ComponentDefaults,
     list: [],
@@ -21039,11 +21016,20 @@ Please add \`${key}Action\` when creating your handler.`);
       this.close = this.close.bind(this);
       this.startCloseTimer = this.startCloseTimer.bind(this);
       this.clearCloseTimer = this.clearCloseTimer.bind(this);
-      this.close = this.close.bind(this);
       this.clickCover = this.clickCover.bind(this);
+      this.state = {
+        show: true
+      };
     }
     close() {
+      this.setState({
+        show: false
+      });
       this.clearCloseTimer();
+      if (this.props.id) {
+        const element = document.getElementById(this.props.id);
+        element && element.parentNode && element.parentNode.removeChild(element);
+      }
       this.props.onClose();
     }
     startCloseTimer() {
@@ -21108,6 +21094,7 @@ Please add \`${key}Action\` when creating your handler.`);
         contentClassName,
         contentStyle
       } = this.props;
+      const { show: show2 } = this.state;
       const classes = classNames({
         "nut-toast-has-icon": icon,
         [`nut-toast-${size}`]: true
@@ -21115,11 +21102,10 @@ Please add \`${key}Action\` when creating your handler.`);
       return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
         Overlay,
         {
-          visible: true,
+          visible: show2,
           style,
           className: `${classPrefix$7}__overlay-default ${className}`,
           onClick: () => {
-            console.log("onclick");
             this.clickCover();
           },
           closeOnOverlayClick
@@ -21140,9 +21126,9 @@ Please add \`${key}Action\` when creating your handler.`);
   __publicField(Notification, "newInstance");
   Notification.newInstance = (properties, callback) => {
     const element = document.createElement("div");
-    if (properties.id) {
-      element.setAttribute("id", `${properties.id}`);
-    }
+    const id = properties.id ? properties.id : `${(/* @__PURE__ */ new Date()).getTime()}`;
+    element.id = id;
+    properties.id = id;
     document.body.appendChild(element);
     let called = false;
     function ref(instance) {