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

package/dist/nutui.react.es.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.15 Wed Jun 07 2023 16:24:05 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.16 Fri Jun 09 2023 18:38:16 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -8880,7 +8880,7 @@ const InternalPicker = (props, ref) => {
     {
       visible,
       position: "bottom",
-      onClose: () => {
+      afterClose: () => {
         closePicker();
       }
     },
@@ -8929,29 +8929,29 @@ const Picker = React.forwardRef(InternalPicker);
 const Picker$1 = Picker;
 const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
 const defaultProps$X = {
-  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,
-    isShowChinese,
+    showChinese,
     minuteStep,
-    modelValue,
     visible,
     title,
+    defaultValue,
     formatter,
-    onCloseDatePicker,
-    onConfirmDatePicker,
+    onClose,
+    onConfirm,
     filter,
     onChange,
     threeDimensional,
@@ -8963,14 +8963,6 @@ const DatePicker = (props) => {
     ...props
   };
   const { locale } = useConfig$1();
-  const [show, setShow] = useState(false);
-  const [currentDate, setCurrentDate] = useState(modelValue);
-  const [defaultValue, setDefaultValue] = useState([]);
-  const [options, 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,
@@ -8980,20 +8972,32 @@ const DatePicker = (props) => {
     minute: datepickerLang.min,
     seconds: datepickerLang.seconds
   };
+  const [defaultValueOfPicker, setDefaultValueOfPicker] = useState([]);
+  const [options, 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 = (type2, value) => {
-    const boundary = type2 === "min" ? minDate : maxDate;
+    const boundary = type2 === "min" ? startDate : endDate;
     const year = boundary.getFullYear();
     let month = 1;
     let date = 1;
@@ -9027,12 +9031,12 @@ const DatePicker = (props) => {
       [`${type2}Seconds`]: seconds
     };
   };
-  const ranges = (date) => {
-    const curDate = date || 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",
@@ -9044,7 +9048,7 @@ const DatePicker = (props) => {
       },
       {
         type: "day",
-        range: [minDate2, maxDate2]
+        range: [minDate, maxDate]
       },
       {
         type: "hour",
@@ -9084,7 +9088,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(
       type.toLocaleLowerCase()
     )) {
@@ -9094,11 +9098,13 @@ const DatePicker = (props) => {
       });
       if (type.toLocaleLowerCase() === "month-day" && formatDate.length < 3) {
         formatDate.unshift(
-          new Date(modelValue || minDate || maxDate).getFullYear()
+          new Date(defaultValue || startDate || endDate).getFullYear()
         );
       }
       if (type.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;
@@ -9123,7 +9129,7 @@ const DatePicker = (props) => {
       const isEqual = (currentDate == null ? void 0 : currentDate.getTime()) === (date == null ? void 0 : date.getTime());
       date && isDate(date) && !isEqual && setCurrentDate(formatValue(date));
     }
-    props.onChange && props.onChange(cacheValueData, selectedValue, index);
+    props.onChange && props.onChange(selectedOptions, selectedValue, index);
   };
   const padZero = (num, targetLength = 2) => {
     let str = `${num}`;
@@ -9141,12 +9147,13 @@ const DatePicker = (props) => {
       });
     } else {
       const padMin = padZero(value, 2);
-      const fatter = isShowChinese ? zhCNType[type2] : "";
+      const fatter = showChinese ? zhCNType[type2] : "";
       fOption = { text: padMin + fatter, value: padMin };
     }
     return fOption;
   };
   const generateValue = (min, max, val, type2, columnIndex) => {
+    var _a;
     let cmin = min;
     const arr = [];
     let index = 0;
@@ -9161,8 +9168,8 @@ const DatePicker = (props) => {
         index++;
       }
     }
-    defaultValue[columnIndex] = arr[index].value;
-    setDefaultValue([...defaultValue]);
+    defaultValueOfPicker[columnIndex] = (_a = arr[index]) == null ? void 0 : _a.value;
+    setDefaultValueOfPicker([...defaultValueOfPicker]);
     if (props.filter && props.filter(type2, arr)) {
       return props.filter(type2, arr);
     }
@@ -9187,8 +9194,8 @@ const DatePicker = (props) => {
     }
     return d;
   };
-  const columns = (date) => {
-    const val = ranges(date).map((res, columnIndex) => {
+  const columns = () => {
+    const val = ranges().map((res, columnIndex) => {
       return generateValue(
         res.range[0],
         res.range[1],
@@ -9199,40 +9206,30 @@ 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.createElement(
     View,
     {
-      className: `nut-datepicker ${className || ""}`,
+      className: `nut-datepicker ${className}`,
       style,
       catchMove: true,
       ...rest
     },
-    options.length > 0 && /* @__PURE__ */ React.createElement(
+    options.length && /* @__PURE__ */ React.createElement(
       Picker$1,
       {
         title,
-        visible: show,
+        visible,
         options,
-        onClose: onCloseDatePicker,
-        defaultValue,
-        onConfirm: (options2, values) => onConfirmDatePicker && onConfirmDatePicker(options2, values),
-        onChange: (list, value, index) => updateChooseValueCustmer(list, value, index),
-        threeDimensional,
-        ref: pickerRef
+        onClose,
+        defaultValue: defaultValueOfPicker,
+        onConfirm: (options2, value) => onConfirm && onConfirm(options2, value),
+        onChange: (options2, value, index) => updateChooseValueCustmer(options2, value, index),
+        threeDimensional
       }
     )
   );
@@ -10174,103 +10171,115 @@ const MenuItem = forwardRef((props, ref) => {
     return { display: "none" };
   };
   const getPosition = () => {
-    return direction === "down" ? { top: `${position.top + position.height}px` } : {
-      bottom: `${getSystemInfoSync().windowHeight - position.top}px`,
-      top: "auto"
+    return direction === "down" ? { position: "absolute", height: `${window.innerHeight}px` } : {
+      position: "absolute",
+      bottom: "100%",
+      top: "auto",
+      height: `${window.innerHeight}px`
     };
   };
   const placeholderStyle = () => {
     if (direction === "down") {
       return {
         height: `${position.top + position.height}px`,
-        top: 0,
+        top: "auto",
+        bottom: "-100%",
         ...isShow()
       };
     }
     return {
       height: `${getSystemInfoSync().windowHeight - position.top}px`,
-      bottom: `0px`,
-      top: "auto",
+      bottom: `auto`,
+      top: "0",
       ...isShow()
     };
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, closeOnClickAway ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: `placeholder-element ${classNames({
-        up: direction === "up"
-      })}`,
-      style: placeholderStyle(),
-      onClick: () => parent.toggleMenuItem(index)
-    }
-  ) : null, /* @__PURE__ */ React.createElement(
-    Overlay$1,
-    {
-      className: "nut-menu__overlay",
-      style: getPosition(),
-      lockScroll: parent.lockScroll,
-      visible: _showPopup,
-      closeOnOverlayClick: parent.closeOnOverlayClick,
-      onClick: () => {
-        parent.closeOnOverlayClick && parent.toggleMenuItem(index);
+      className: "nut-menu-item-container",
+      style: { position: "absolute", left: 0, right: 0 }
+    },
+    closeOnClickAway ? /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `placeholder-element ${classNames({
+          up: direction === "up"
+        })}`,
+        style: placeholderStyle(),
+        onClick: () => 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()
+    ) : null,
+    /* @__PURE__ */ React.createElement(
+      Overlay$1,
+      {
+        className: "nut-menu__overlay",
+        style: getPosition(),
+        lockScroll: parent.lockScroll,
+        visible: _showPopup,
+        closeOnOverlayClick: parent.closeOnOverlayClick,
+        onClick: () => {
+          parent.closeOnOverlayClick && parent.toggleMenuItem(index);
+        }
       }
-    },
+    ),
     /* @__PURE__ */ React.createElement(
-      CSSTransition$1,
+      "div",
       {
-        in: _showPopup,
-        timeout: 100,
-        classNames: direction === "down" ? "menu-item" : "menu-item-up"
+        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" }, options == null ? void 0 : options.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: () => {
-              handleClick(item);
-            }
-          },
-          item.value === _value ? /* @__PURE__ */ React.createElement(React.Fragment, null, icon || /* @__PURE__ */ React.createElement(
-            a$t,
-            {
-              color: activeColor,
-              size: 10,
-              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" }, options == null ? void 0 : options.map((item, index2) => {
+          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: () => {
+                handleClick(item);
               }
             },
-            item.text
-          )
-        );
-      }), children)
+            item.value === _value ? /* @__PURE__ */ React.createElement(React.Fragment, null, icon || /* @__PURE__ */ React.createElement(
+              a$t,
+              {
+                color: activeColor,
+                size: 10,
+                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$R;
 MenuItem.displayName = "NutMenuItem";
@@ -13122,7 +13131,7 @@ const NoticeBar = (props) => {
     "nut-noticebar-page": true,
     withicon: closeable,
     close: closeable,
-    wrap
+    wrapable: wrap
   });
   useEffect(() => {
     return () => {