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

package/dist/esm/{datepicker.taro-8c9230b6.js → datepicker.taro-108eb7c8.js}

@@ -1,33 +1,27 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { View } from "@tarojs/components";
-import { P as Picker } from "./picker.taro-6b672469.js";
+import { P as Picker } from "./picker.taro-9ca039c4.js";
 import { u as useConfig } from "./configprovider.taro-372b1525.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
 const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
 const defaultProps = {
-  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, type, isShowChinese, minuteStep, modelValue, visible, title, formatter, onCloseDatePicker, onConfirmDatePicker, filter, onChange, threeDimensional, className, style, ...rest } = {
+  const { startDate, endDate, type, showChinese, minuteStep, visible, title, defaultValue, formatter, onClose, onConfirm, filter, onChange, threeDimensional, className, style, ...rest } = {
     ...defaultProps,
     ...props
   };
   const { locale } = useConfig();
-  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,
@@ -37,20 +31,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;
@@ -84,12 +90,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",
@@ -101,7 +107,7 @@ const DatePicker = (props) => {
       },
       {
         type: "day",
-        range: [minDate2, maxDate2]
+        range: [minDate, maxDate]
       },
       {
         type: "hour",
@@ -141,17 +147,17 @@ 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())) {
       const formatDate = [];
       selectedValue.forEach((item) => {
         formatDate.push(item);
       });
       if (type.toLocaleLowerCase() === "month-day" && formatDate.length < 3) {
-        formatDate.unshift(new Date(modelValue || minDate || maxDate).getFullYear());
+        formatDate.unshift(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;
@@ -167,7 +173,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}`;
@@ -185,12 +191,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;
@@ -205,8 +212,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);
     }
@@ -231,27 +238,18 @@ 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], getDateIndex(res.type), res.type, columnIndex);
     });
     return val || [];
   };
-  useEffect(() => {
-    setCurrentDate(formatValue(modelValue));
-  }, []);
-  useEffect(() => {
-    setCurrentDate(formatValue(modelValue));
-  }, [modelValue]);
-  useEffect(() => {
-    setShow(visible);
-  }, [visible]);
   useEffect(() => {
     if (currentDate) {
-      setListData(columns());
+      setOptions(columns());
     }
-  }, [currentDate]);
-  return React.createElement(View, { className: `nut-datepicker ${className || ""}`, style, catchMove: true, ...rest }, options.length > 0 && React.createElement(Picker, { title, visible: show, options, onClose: onCloseDatePicker, defaultValue, onConfirm: (options2, values) => onConfirmDatePicker && onConfirmDatePicker(options2, values), onChange: (list, value, index) => updateChooseValueCustmer(list, value, index), threeDimensional, ref: pickerRef }));
+  }, []);
+  return React.createElement(View, { className: `nut-datepicker ${className}`, style, catchMove: true, ...rest }, options.length && React.createElement(Picker, { title, visible, options, onClose, defaultValue: defaultValueOfPicker, onConfirm: (options2, value) => onConfirm && onConfirm(options2, value), onChange: (options2, value, index) => updateChooseValueCustmer(options2, value, index), threeDimensional }));
 };
 DatePicker.defaultProps = defaultProps;
 DatePicker.displayName = "NutDatePicker";