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

package/dist/nutui.react.es.js

@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
 };
 var _a;
 /*!
-* @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.
 */
@@ -11203,7 +11203,7 @@ const Popup = (props) => {
       {
         classNames: transitionName,
         unmountOnExit: true,
-        timeout: 500,
+        timeout: 300,
         in: innerVisible,
         onEntered: onHandleOpened,
         onExited: onHandleClosed
@@ -14531,7 +14531,7 @@ const InternalPicker = (props, ref) => {
     {
       visible,
       position: "bottom",
-      onClose: () => {
+      afterClose: () => {
         closePicker();
       }
     },
@@ -14556,29 +14556,29 @@ const Picker = React__default.forwardRef(InternalPicker);
 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: type4,
-    isShowChinese,
+    showChinese,
     minuteStep,
-    modelValue,
     visible,
     title,
+    defaultValue,
     formatter,
-    onCloseDatePicker,
-    onConfirmDatePicker,
+    onClose,
+    onConfirm,
     filter,
     onChange,
     threeDimensional,
@@ -14590,14 +14590,6 @@ const DatePicker = (props) => {
     ...props
   };
   const { locale } = useConfig();
-  const [show2, setShow] = useState(false);
-  const [currentDate, setCurrentDate] = useState(modelValue);
-  const [defaultValue, setDefaultValue] = useState([]);
-  const [options2, setListData] = useState([]);
-  const pickerRef = 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,
@@ -14607,20 +14599,32 @@ const DatePicker = (props) => {
     minute: datepickerLang.min,
     seconds: datepickerLang.seconds
   };
+  const [defaultValueOfPicker, setDefaultValueOfPicker] = useState([]);
+  const [options2, setOptions] = 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 date4 = 1;
@@ -14654,12 +14658,12 @@ const DatePicker = (props) => {
       [`${type22}Seconds`]: seconds
     };
   };
-  const ranges = (date4) => {
-    const curDate = date4 || 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",
@@ -14671,7 +14675,7 @@ const DatePicker = (props) => {
       },
       {
         type: "day",
-        range: [minDate2, maxDate2]
+        range: [minDate, maxDate]
       },
       {
         type: "hour",
@@ -14711,7 +14715,7 @@ const DatePicker = (props) => {
     }
     return result;
   };
-  const updateChooseValueCustmer = (cacheValueData, selectedValue, index) => {
+  const updateChooseValueCustmer = (selectedOptions, selectedValue, index) => {
     if (["date", "datetime", "datehour", "month-day", "year-month"].includes(
       type4.toLocaleLowerCase()
     )) {
@@ -14721,11 +14725,13 @@ const DatePicker = (props) => {
       });
       if (type4.toLocaleLowerCase() === "month-day" && formatDate.length < 3) {
         formatDate.unshift(
-          new Date(modelValue || minDate || maxDate).getFullYear()
+          new Date(defaultValue || startDate || endDate).getFullYear()
         );
       }
       if (type4.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;
@@ -14750,7 +14756,7 @@ const DatePicker = (props) => {
       const isEqual2 = (currentDate == null ? void 0 : currentDate.getTime()) === (date4 == null ? void 0 : date4.getTime());
       date4 && isDate(date4) && !isEqual2 && setCurrentDate(formatValue(date4));
     }
-    props.onChange && props.onChange(cacheValueData, selectedValue, index);
+    props.onChange && props.onChange(selectedOptions, selectedValue, index);
   };
   const padZero = (num, targetLength = 2) => {
     let str = `${num}`;
@@ -14768,12 +14774,13 @@ const DatePicker = (props) => {
       });
     } 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;
@@ -14788,8 +14795,8 @@ const DatePicker = (props) => {
         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);
     }
@@ -14814,8 +14821,8 @@ const DatePicker = (props) => {
     }
     return d;
   };
-  const columns = (date4) => {
-    const val = ranges(date4).map((res, columnIndex) => {
+  const columns = () => {
+    const val = ranges().map((res, columnIndex) => {
       return generateValue(
         res.range[0],
         res.range[1],
@@ -14826,42 +14833,24 @@ const DatePicker = (props) => {
     });
     return val || [];
   };
-  useEffect(() => {
-    setCurrentDate(formatValue(modelValue));
-  }, []);
-  useEffect(() => {
-    setCurrentDate(formatValue(modelValue));
-  }, [modelValue]);
-  useEffect(() => {
-    setShow(visible);
-  }, [visible]);
   useEffect(() => {
     if (currentDate) {
-      setListData(columns());
+      setOptions(columns());
     }
-  }, [currentDate]);
-  return /* @__PURE__ */ React__default.createElement(
-    "div",
+  }, []);
+  return /* @__PURE__ */ React__default.createElement("div", { className: `nut-datepicker ${className}`, style, ...rest }, options2.length && /* @__PURE__ */ React__default.createElement(
+    Picker$1,
     {
-      className: `nut-datepicker ${className || ""}`,
-      style,
-      ...rest
-    },
-    options2.length > 0 && /* @__PURE__ */ React__default.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";
@@ -16727,6 +16716,7 @@ const Menu = (props) => {
   };
   const hideMenuItem = (index) => {
     showMenuItem[index] = false;
+    console.log([...showMenuItem]);
     setShowMenuItem([...showMenuItem]);
   };
   const updateTitle = (text, index) => {
@@ -16736,6 +16726,7 @@ const Menu = (props) => {
   const cloneChildren = () => {
     return React__default.Children.map(children, (child, index) => {
       return React__default.cloneElement(child, {
+        ...child.props,
         show: showMenuItem[index],
         index,
         activeColor,
@@ -16775,7 +16766,8 @@ const Menu = (props) => {
             }),
             style: { color: showMenuItem[index] ? activeColor : "" },
             key: index,
-            onClick: () => {
+            onClick: (e) => {
+              e.stopPropagation();
               !disabled && toggleMenuItem(index);
             }
           },
@@ -16817,12 +16809,59 @@ const Menu = (props) => {
 };
 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();
+    }
+  };
+  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
@@ -16855,9 +16894,6 @@ const MenuItem = forwardRef((props, ref) => {
   useEffect(() => {
     setShowPopup(show2);
   }, [show2]);
-  useEffect(() => {
-    getParentOffset();
-  }, [_showPopup]);
   useImperativeHandle(ref, () => ({
     toggle: parent.toggleMenuItem
   }));
@@ -16878,119 +16914,108 @@ const MenuItem = forwardRef((props, ref) => {
     setValue(item.value);
     onChange && onChange(item);
   };
-  const [position, setPosition] = 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__default.createElement(React__default.Fragment, null, closeOnClickAway ? /* @__PURE__ */ React__default.createElement(
-    "div",
-    {
-      className: `placeholder-element ${classNames({
-        up: direction === "up"
-      })}`,
-      style: placeholderStyle(),
-      onClick: () => parent.toggleMenuItem(index)
-    }
-  ) : null, /* @__PURE__ */ React__default.createElement(
-    Overlay,
-    {
-      className: "nut-menu__overlay",
-      style: getPosition(),
-      lockScroll: parent.lockScroll,
-      visible: _showPopup,
-      closeOnOverlayClick: parent.closeOnOverlayClick,
-      onClick: () => {
-        parent.closeOnOverlayClick && parent.toggleMenuItem(index);
-      }
-    }
-  ), /* @__PURE__ */ React__default.createElement(
+  const micRef = 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__default.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__default.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__default.createElement(
+      "div",
+      {
+        className: classNames(className, {
+          "nut-menu-item__wrap": direction === "down",
+          "nut-menu-item__wrap-up": direction !== "down"
+        }),
+        style: {
+          ...style,
+          ...isShow()
+        }
       },
-      /* @__PURE__ */ React__default.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item, index2) => {
-        return /* @__PURE__ */ React__default.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__default.createElement("i", null, icon || /* @__PURE__ */ React__default.createElement(
-            x$f,
-            {
-              color: activeColor,
-              className: getIconCName(item.value, value)
-            }
-          )) : null,
-          /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React__default.createElement(
+        CSSTransition$1,
+        {
+          in: _showPopup,
+          timeout: 100,
+          classNames: direction === "down" ? "menu-item" : "menu-item-up"
+        },
+        /* @__PURE__ */ React__default.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item) => {
+          return /* @__PURE__ */ React__default.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__default.createElement("i", null, icon || /* @__PURE__ */ React__default.createElement(
+              x$f,
+              {
+                color: activeColor,
+                className: getIconCName(item.value, value)
+              }
+            )) : null,
+            /* @__PURE__ */ React__default.createElement(
+              "div",
+              {
+                className: getIconCName(item.value, value),
+                style: {
+                  color: `${item.value === _value ? activeColor : ""}`
+                }
+              },
+              item.text
+            )
+          );
+        }), children)
+      )
     )
-  ));
+  );
 });
 MenuItem.defaultProps = defaultProps$P;
 MenuItem.displayName = "NutMenuItem";
@@ -18456,19 +18481,6 @@ class Upload {
     }
   }
 }
-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,
@@ -19963,7 +19975,7 @@ const NoticeBar = (props) => {
       onClick: handleClick2
     },
     leftIcon ? /* @__PURE__ */ React__default.createElement("div", { className: "left-icon" }, leftIcon) : null,
-    children ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
+    children ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
       return /* @__PURE__ */ React__default.createElement(
         "div",
         {
@@ -19976,7 +19988,7 @@ const NoticeBar = (props) => {
         },
         item
       );
-    }))) : /* @__PURE__ */ React__default.createElement("div", { className: "horseLamp_list", style: horseLampStyle }, scrollList.current.map((item, index) => {
+    })) : /* @__PURE__ */ React__default.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__default.createElement(
@@ -20170,41 +20182,6 @@ const Notify = {
     }
   }
 };
-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();
-    }
-  };
-  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: [],
@@ -21021,11 +20998,20 @@ class Notification extends React.PureComponent {
     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() {
@@ -21090,6 +21076,7 @@ class Notification extends React.PureComponent {
       contentClassName,
       contentStyle
     } = this.props;
+    const { show: show2 } = this.state;
     const classes = classNames({
       "nut-toast-has-icon": icon,
       [`nut-toast-${size}`]: true
@@ -21097,11 +21084,10 @@ class Notification extends React.PureComponent {
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       Overlay,
       {
-        visible: true,
+        visible: show2,
         style,
         className: `${classPrefix$7}__overlay-default ${className}`,
         onClick: () => {
-          console.log("onclick");
           this.clickCover();
         },
         closeOnOverlayClick
@@ -21122,9 +21108,9 @@ class Notification extends React.PureComponent {
 __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) {