@nutui/nutui-react 2.0.0-alpha.9 → 2.0.0-beta.1

package/dist/esm/CalendarItem.js

@@ -24,214 +24,136 @@ function _objectSpread(target) {
 }
 import React__default, { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
-import { c as cn } from "./bem.js";
 import { U as Utils } from "./date.js";
 import { r as requestAniFrame } from "./raf.js";
 import { useConfig } from "./ConfigProvider.js";
-import "@bem-react/classname";
+import { u as usePropsValue } from "./use-props-value.js";
 var defaultProps = {
-  type: "one",
-  isAutoBackFill: false,
-  poppable: true,
-  visible: false,
-  title: "日历选择",
-  defaultValue: "",
+  type: "single",
+  autoBackfill: false,
+  popup: true,
+  title: "",
   startDate: Utils.getDay(0),
   endDate: Utils.getDay(365),
   showToday: true,
-  startText: "开始",
-  endText: "结束",
-  confirmText: "确认",
+  startText: "",
+  endText: "",
+  confirmText: "",
   showTitle: true,
   showSubTitle: true,
-  toDateAnimation: true,
-  onBtn: void 0,
-  onDay: void 0,
-  onTopInfo: void 0,
-  onBottomInfo: void 0,
-  onChoose: function onChoose(data) {
+  scrollAnimation: true,
+  renderHeaderButtons: void 0,
+  renderDay: void 0,
+  renderDayTop: void 0,
+  renderDayBottom: void 0,
+  onConfirm: function onConfirm(data) {
   },
   onUpdate: function onUpdate() {
   },
-  onSelected: function onSelected(data) {
+  onClickDay: function onClickDay(data) {
   },
-  onYearMonthChange: function onYearMonthChange(data) {
+  onPageChange: function onPageChange(data) {
   }
 };
 var CalendarItem = React__default.forwardRef(function(props, ref) {
   var _classNames, _classNames2;
   var _useConfig = useConfig(), locale = _useConfig.locale;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), type = _defaultProps$props.type, isAutoBackFill = _defaultProps$props.isAutoBackFill, poppable = _defaultProps$props.poppable, title = _defaultProps$props.title, defaultValue = _defaultProps$props.defaultValue, showToday = _defaultProps$props.showToday, startText = _defaultProps$props.startText, endText = _defaultProps$props.endText, confirmText = _defaultProps$props.confirmText, showTitle = _defaultProps$props.showTitle, showSubTitle = _defaultProps$props.showSubTitle, toDateAnimation = _defaultProps$props.toDateAnimation, onBtn = _defaultProps$props.onBtn, onDay = _defaultProps$props.onDay, onTopInfo = _defaultProps$props.onTopInfo, onBottomInfo = _defaultProps$props.onBottomInfo, onChoose2 = _defaultProps$props.onChoose, onUpdate2 = _defaultProps$props.onUpdate, onSelected2 = _defaultProps$props.onSelected, onYearMonthChange2 = _defaultProps$props.onYearMonthChange;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), type = _defaultProps$props.type, autoBackfill = _defaultProps$props.autoBackfill, popup = _defaultProps$props.popup, title = _defaultProps$props.title, defaultValue = _defaultProps$props.defaultValue, showToday = _defaultProps$props.showToday, startText = _defaultProps$props.startText, endText = _defaultProps$props.endText, confirmText = _defaultProps$props.confirmText, showTitle = _defaultProps$props.showTitle, showSubTitle = _defaultProps$props.showSubTitle, scrollAnimation = _defaultProps$props.scrollAnimation, renderHeaderButtons = _defaultProps$props.renderHeaderButtons, renderDay = _defaultProps$props.renderDay, renderDayTop = _defaultProps$props.renderDayTop, renderDayBottom = _defaultProps$props.renderDayBottom, onConfirm2 = _defaultProps$props.onConfirm, onUpdate2 = _defaultProps$props.onUpdate, onClickDay2 = _defaultProps$props.onClickDay, onPageChange2 = _defaultProps$props.onPageChange;
   var weeks = locale.calendaritem.weekdays;
+  var monthTitle = locale.calendaritem.monthTitle;
   var _useState = useState(""), _useState2 = _slicedToArray(_useState, 2), yearMonthTitle = _useState2[0], setYearMonthTitle = _useState2[1];
   var _useState3 = useState([]), _useState4 = _slicedToArray(_useState3, 2), monthsData = _useState4[0], setMonthsData = _useState4[1];
-  var _useState5 = useState(0), _useState6 = _slicedToArray(_useState5, 2), translateY = _useState6[0], setTranslateY = _useState6[1];
-  var _useState7 = useState([]), _useState8 = _slicedToArray(_useState7, 2), monthDefaultRange = _useState8[0], setMonthDefaultRange = _useState8[1];
-  var _useState9 = useState({
-    currDate: "",
-    propStartDate: "",
-    propEndDate: "",
-    unLoadPrev: false,
-    touchParams: {
-      startY: 0,
-      endY: 0,
-      startTime: 0,
-      endTime: 0,
-      lastY: 0,
-      lastTime: 0
-    },
-    transformY: 0,
-    scrollDistance: 0,
-    defaultData: [],
-    chooseData: [],
-    monthsData: [],
-    dayPrefix: "calendar-month-day",
-    startData: "",
-    endData: "",
-    isRange: props.type === "range",
-    timer: 0,
-    currentIndex: 0,
-    avgHeight: 0,
-    monthsNum: 0
-  }), _useState10 = _slicedToArray(_useState9, 1), state = _useState10[0];
-  var weeksPanel = useRef(null);
-  var months = useRef(null);
-  var monthsPanel = useRef(null);
-  var viewArea = useRef(null);
-  var viewHeight = 0;
-  var b = cn("calendar");
-  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(b(""), "-tile"), !poppable), _defineProperty(_classNames, "".concat(b(""), "-nofooter"), !!isAutoBackFill), _classNames), b(""));
-  var headerClasses = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(b(""), "-header"), true), _defineProperty(_classNames2, "".concat(b(""), "-header-tile"), !poppable), _classNames2));
-  var monthitemclasses = classNames(_defineProperty({
-    "calendar-month-item": true
-  }, "".concat(type === "range" ? "month-item-range" : ""), true));
+  var _useState5 = useState(0), _useState6 = _slicedToArray(_useState5, 2), monthsNum = _useState6[0], setMonthsNum = _useState6[1];
+  var _useState7 = useState(0), _useState8 = _slicedToArray(_useState7, 2), translateY = _useState8[0], setTranslateY = _useState8[1];
+  var _useState9 = useState([]), _useState10 = _slicedToArray(_useState9, 2), monthDefaultRange = _useState10[0], setMonthDefaultRange = _useState10[1];
+  var propStartDate = props.startDate || Utils.getDay(0);
+  var propEndDate = props.endDate || Utils.getDay(365);
   var splitDate = function splitDate2(date) {
-    return date.split("-");
+    var split = date.indexOf("-") !== -1 ? "-" : "/";
+    return date.split(split);
   };
-  var isStart = function isStart2(currDate) {
-    return Utils.isEqual(state.currDate[0], currDate);
-  };
-  var isEnd = function isEnd2(currDate) {
-    return Utils.isEqual(state.currDate[1], currDate);
+  var startDates = splitDate(propStartDate);
+  var endDates = splitDate(propEndDate);
+  var _useState11 = useState({
+    currDateArray: []
+  }), _useState12 = _slicedToArray(_useState11, 1), state = _useState12[0];
+  var resetDefaultValue = function resetDefaultValue2() {
+    if (defaultValue || Array.isArray(defaultValue) && defaultValue.length > 0) {
+      return type !== "single" ? _toConsumableArray(defaultValue) : defaultValue;
+    }
+    return void 0;
   };
-  var isMultiple = function isMultiple2(currDate) {
-    if (state.currDate.length > 0) {
-      return state.currDate.some(function(item) {
-        return Utils.isEqual(item, currDate);
+  var _usePropsValue = usePropsValue({
+    value: props.value,
+    defaultValue: resetDefaultValue(),
+    finalValue: [],
+    onChange: function onChange(val) {
+    }
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), currentDate = _usePropsValue2[0], setCurrentDate = _usePropsValue2[1];
+  var weeksPanel = useRef(null);
+  var monthsRef = useRef(null);
+  var monthsPanel = useRef(null);
+  var viewAreaRef = useRef(null);
+  var _useState13 = useState(0), _useState14 = _slicedToArray(_useState13, 2), avgHeight = _useState14[0], setAvgHeight = _useState14[1];
+  var viewHeight = 0;
+  var classPrefix = "nut-calendar";
+  var dayPrefix = "nut-calendar-day";
+  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(classPrefix, "-title"), !popup), _defineProperty(_classNames, "".concat(classPrefix, "-nofooter"), !!autoBackfill), _classNames), classPrefix);
+  var headerClasses = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(classPrefix, "-header"), true), _defineProperty(_classNames2, "".concat(classPrefix, "-header-title"), !popup), _classNames2));
+  var isMultiple = function isMultiple2(d) {
+    if (currentDate.length > 0) {
+      return currentDate.some(function(item) {
+        return Utils.isEqual(item, d);
       });
     }
     return false;
   };
   var getCurrDate = function getCurrDate2(day, month) {
-    return "".concat(month.curData[0], "-").concat(month.curData[1], "-").concat(Utils.getNumTwoBit(+day.day));
+    return "".concat(month.curData[0], "/").concat(month.curData[1], "/").concat(Utils.getNumTwoBit(+day.day));
   };
-  var getClass = function getClass2(day, month) {
-    var currDate = getCurrDate(day, month);
-    if (day.type === "curr") {
-      if (Utils.isEqual(state.currDate, currDate) || type === "range" && (isStart(currDate) || isEnd(currDate)) || type === "multiple" && isMultiple(currDate)) {
-        return "".concat(state.dayPrefix, "-active");
+  var getClasses = function getClasses2(day, month) {
+    var dateStr = getCurrDate(day, month);
+    if (day.type === "active") {
+      if (propStartDate && Utils.compareDate(dateStr, propStartDate) || propEndDate && Utils.compareDate(propEndDate, dateStr)) {
+        return "".concat(dayPrefix, "-disabled");
       }
-      if (state.propStartDate && Utils.compareDate(currDate, state.propStartDate) || state.propEndDate && Utils.compareDate(state.propEndDate, currDate)) {
-        return "".concat(state.dayPrefix, "-disabled");
+      if (type === "range") {
+        if (isStart(dateStr) || isEnd(dateStr)) {
+          return "".concat(dayPrefix, "-active ").concat(isStart(dateStr) ? "active-start" : "", " ").concat(isEnd(dateStr) ? "active-end" : "");
+        }
+        if (Array.isArray(currentDate) && Object.values(currentDate).length === 2 && Utils.compareDate(currentDate[0], dateStr) && Utils.compareDate(dateStr, currentDate[1])) {
+          return "".concat(dayPrefix, "-choose");
+        }
+        return null;
       }
-      if (type === "range" && Array.isArray(state.currDate) && Object.values(state.currDate).length === 2 && Utils.compareDate(state.currDate[0], currDate) && Utils.compareDate(currDate, state.currDate[1])) {
-        return "".concat(state.dayPrefix, "-choose");
+      if (type === "multiple" && isMultiple(dateStr) || !Array.isArray(currentDate) && Utils.isEqual(currentDate, dateStr)) {
+        return "".concat(dayPrefix, "-active");
       }
       return null;
     }
-    return "".concat(state.dayPrefix, "-disabled");
-  };
-  var isActive = function isActive2(day, month) {
-    return state.isRange && day.type === "curr" && getClass(day, month) === "calendar-month-day-active";
+    return "".concat(dayPrefix, "-disabled");
   };
   var isCurrDay = function isCurrDay2(month, day) {
-    var date = "".concat(month.curData[0], "-").concat(month.curData[1], "-").concat(day);
-    return Utils.isEqual(date, Utils.date2Str(/* @__PURE__ */ new Date()));
+    var date = "".concat(month.curData[0], "/").concat(month.curData[1], "/").concat(day);
+    return Utils.isEqual(date, Utils.date2Str(/* @__PURE__ */ new Date(), "/"));
   };
-  var confirm = function confirm2() {
-    var type2 = props.type;
-    if (type2 === "range" && state.chooseData.length === 2 || type2 !== "range") {
-      var chooseData = state.chooseData.slice(0);
-      onChoose2 && onChoose2(chooseData);
-      if (poppable) {
-        onUpdate2 && onUpdate2();
-      }
-    }
+  var isStart = function isStart2(d) {
+    return Utils.isEqual(currentDate[0], d);
   };
-  var chooseDay = function chooseDay2(day, month, isFirst) {
-    if (getClass(day, month) !== "".concat(state.dayPrefix, "-disabled")) {
-      var type2 = props.type;
-      var days = _toConsumableArray(month.curData);
-      days[2] = typeof day.day === "number" ? Utils.getNumTwoBit(day.day) : day.day;
-      days[3] = "".concat(days[0], "-").concat(days[1], "-").concat(days[2]);
-      days[4] = Utils.getWhatDay(+days[0], +days[1], +days[2]);
-      if (type2 === "multiple") {
-        if (state.currDate.length > 0) {
-          var hasIndex = "";
-          state.currDate.forEach(function(item, index) {
-            if (item === days[3]) {
-              hasIndex = index;
-            }
-          });
-          if (isFirst) {
-            state.chooseData.push(_toConsumableArray(days));
-          } else if (hasIndex !== "") {
-            state.currDate.splice(hasIndex, 1);
-            state.chooseData.splice(hasIndex, 1);
-          } else {
-            state.currDate.push(days[3]);
-            state.chooseData.push(_toConsumableArray(days));
-          }
-        } else {
-          state.currDate = [days[3]];
-          state.chooseData = [_toConsumableArray(days)];
-        }
-      } else if (type2 === "range") {
-        var curDataLength = Object.values(state.currDate).length;
-        if (curDataLength === 2 || curDataLength === 0) {
-          state.currDate = [days[3]];
-        } else if (Utils.compareDate(state.currDate[0], days[3])) {
-          Array.isArray(state.currDate) && state.currDate.push(days[3]);
-        } else {
-          Array.isArray(state.currDate) && state.currDate.unshift(days[3]);
-        }
-        if (state.chooseData.length === 2 || !state.chooseData.length) {
-          state.chooseData = [_toConsumableArray(days)];
-        } else if (Utils.compareDate(state.chooseData[0][3], days[3])) {
-          state.chooseData = [].concat(_toConsumableArray(state.chooseData), [_toConsumableArray(days)]);
-        } else {
-          state.chooseData = [_toConsumableArray(days)].concat(_toConsumableArray(state.chooseData));
-        }
-      } else {
-        state.currDate = days[3];
-        state.chooseData = _toConsumableArray(days);
-      }
-      if (!isFirst) {
-        onSelected2 && onSelected2(state.chooseData);
-        if (isAutoBackFill || !poppable) {
-          confirm();
-        }
-      }
-      setMonthsData(state.monthsData.slice());
-    }
+  var isEnd = function isEnd2(d) {
+    return Utils.isEqual(currentDate[1], d);
   };
   var isStartTip = function isStartTip2(day, month) {
-    return isActive(day, month) && isStart(getCurrDate(day, month));
+    return type === "range" && day.type === "active" && isStart(getCurrDate(day, month));
   };
   var isEndTip = function isEndTip2(day, month) {
-    if (state.currDate.length >= 2 && isEnd(getCurrDate(day, month))) {
-      return isActive(day, month);
-    }
-    return false;
+    return currentDate.length >= 2 && type === "range" && day.type === "active" && isEnd(getCurrDate(day, month));
   };
-  var rangeTip = function rangeTip2() {
-    if (state.currDate.length >= 2) {
-      return Utils.isEqual(state.currDate[0], state.currDate[1]);
-    }
-    return false;
+  var isStartAndEnd = function isStartAndEnd2() {
+    return currentDate.length >= 2 && Utils.isEqual(currentDate[0], currentDate[1]);
   };
-  var getCurrData = function getCurrData2(type2) {
-    var monthData = type2 === "prev" ? state.monthsData[0] : state.monthsData[state.monthsData.length - 1];
+  var getCurrMonthData = function getCurrMonthData2(type2) {
+    var monthData = type2 === "prev" ? monthsData[0] : monthsData[monthsData.length - 1];
     var year = parseInt(monthData.curData[0]);
     var month = parseInt(monthData.curData[1].toString().replace(/^0/, ""));
     switch (type2) {
@@ -246,8 +168,7 @@ var CalendarItem = React__default.forwardRef(function(props, ref) {
     }
     return [year, Utils.getNumTwoBit(month), Utils.getMonthDays(String(year), String(month))];
   };
-  var getDaysStatus = function getDaysStatus2(days, type2, dateInfo) {
-    var year = dateInfo.year, month = dateInfo.month;
+  var getDaysStatus = function getDaysStatus2(days, type2, year, month) {
     if (type2 === "prev" && days >= 7) {
       days -= 7;
     }
@@ -260,12 +181,11 @@ var CalendarItem = React__default.forwardRef(function(props, ref) {
       };
     });
   };
-  var getPreDaysStatus = function getPreDaysStatus2(days, type2, dateInfo, preCurrMonthDays) {
-    var year = dateInfo.year, month = dateInfo.month;
+  var getPreDaysStatus = function getPreDaysStatus2(days, type2, year, month, preCurrMonthDays) {
     if (type2 === "prev" && days >= 7) {
       days -= 7;
     }
-    var months2 = Array.from(Array(preCurrMonthDays), function(v, k) {
+    var months = Array.from(Array(preCurrMonthDays), function(v, k) {
       return {
         day: k + 1,
         type: type2,
@@ -273,156 +193,154 @@ var CalendarItem = React__default.forwardRef(function(props, ref) {
         month
       };
     });
-    return months2.slice(preCurrMonthDays - days);
+    return months.slice(preCurrMonthDays - days);
   };
-  var getMonth = function getMonth2(curData, type2) {
-    var preMonthDays = Utils.getMonthPreDay(+curData[0], +curData[1]);
+  var getMonthData = function getMonthData2(curData, type2) {
     var preMonth = +curData[1] - 1;
     var preYear = curData[0];
     if (preMonth <= 0) {
       preMonth = 12;
       preYear += 1;
     }
+    var preMonthDays = Utils.getMonthPreDay(+curData[0], +curData[1]);
     var currMonthDays = Utils.getMonthDays(curData[0], curData[1]);
     var preCurrMonthDays = Utils.getMonthDays("".concat(preYear), "".concat(preMonth));
-    var title2 = {
-      year: curData[0],
-      month: curData[1]
-    };
     var monthInfo = {
       curData,
-      title: locale.calendaritem.monthTitle(title2.year, title2.month),
-      monthData: [].concat(_toConsumableArray(getPreDaysStatus(preMonthDays, "prev", {
-        month: preMonth,
-        year: preYear
-      }, preCurrMonthDays)), _toConsumableArray(getDaysStatus(currMonthDays, "curr", title2)))
+      title: monthTitle(curData[0], curData[1]),
+      monthData: [].concat(_toConsumableArray(getPreDaysStatus(preMonthDays, "prev", "".concat(preMonth), preYear, preCurrMonthDays)), _toConsumableArray(getDaysStatus(currMonthDays, "active", curData[0], curData[1])))
     };
     monthInfo.cssHeight = 39 + (monthInfo.monthData.length > 35 ? 384 : 320);
-    var cssScrollHeight = 0;
-    if (state.monthsData.length > 0) {
-      cssScrollHeight = state.monthsData[state.monthsData.length - 1].cssScrollHeight + state.monthsData[state.monthsData.length - 1].cssHeight;
+    var scrollTop = 0;
+    if (monthsData.length > 0) {
+      var monthEle = monthsData[monthsData.length - 1];
+      scrollTop = monthEle.scrollTop + monthEle.cssHeight;
     }
-    monthInfo.cssScrollHeight = cssScrollHeight;
+    monthInfo.scrollTop = scrollTop;
     if (type2 === "next") {
-      if (!state.endData || !Utils.compareDate("".concat(state.endData[0], "-").concat(state.endData[1], "-").concat(Utils.getMonthDays(state.endData[0], state.endData[1])), "".concat(curData[0], "-").concat(curData[1], "-").concat(curData[2]))) {
-        state.monthsData.push(monthInfo);
+      if (!endDates || !Utils.compareDate("".concat(endDates[0], "/").concat(endDates[1], "/").concat(Utils.getMonthDays(endDates[0], endDates[1])), "".concat(curData[0], "/").concat(curData[1], "/").concat(curData[2]))) {
+        monthsData.push(monthInfo);
       }
-    } else if (!state.startData || !Utils.compareDate("".concat(curData[0], "-").concat(curData[1], "-").concat(curData[2]), "".concat(state.startData[0], "-").concat(state.startData[1], "-01"))) {
-      state.monthsData.unshift(monthInfo);
+    } else if (!startDates || !Utils.compareDate("".concat(curData[0], "/").concat(curData[1], "/").concat(curData[2]), "".concat(startDates[0], "/").concat(startDates[1], "/01"))) {
+      monthsData.unshift(monthInfo);
     }
-    setMonthsData(state.monthsData);
+    setMonthsData(monthsData);
   };
-  var setReachedYearMonthInfo = function setReachedYearMonthInfo2() {
-    var currentMonthsData = state.monthsData[state.currentIndex];
+  var setReachedYearMonthInfo = function setReachedYearMonthInfo2(current) {
+    var currentMonthsData = monthsData[current];
     var _currentMonthsData$cu = _slicedToArray(currentMonthsData.curData, 2), year = _currentMonthsData$cu[0], month = _currentMonthsData$cu[1];
     if (currentMonthsData.title === yearMonthTitle)
       return;
-    onYearMonthChange2 && onYearMonthChange2([year, month, "".concat(year, "-").concat(month)]);
+    onPageChange2 && onPageChange2([year, month, "".concat(year, "-").concat(month)]);
     setYearMonthTitle(currentMonthsData.title);
   };
-  var setDefaultRange = function setDefaultRange2(monthsNum, current) {
+  var setDefaultRange = function setDefaultRange2(monthNum, current) {
     var start = 0;
     var end = 0;
-    if (monthsNum >= 3) {
-      if (current > 0 && current < monthsNum) {
+    if (monthNum >= 3) {
+      if (current > 0 && current < monthNum) {
         start = current - 1;
         end = current + 3;
       } else if (current === 0) {
         start = current;
         end = current + 4;
-      } else if (current === monthsNum) {
+      } else if (current === monthNum) {
         start = current - 2;
         end = current + 2;
       }
     } else {
       start = 0;
-      end = monthsNum + 2;
+      end = monthNum + 2;
     }
     setMonthDefaultRange([start, end]);
-    setTranslateY(state.monthsData[start].cssScrollHeight);
+    setTranslateY(monthsData[start].scrollTop);
+    setReachedYearMonthInfo(current);
   };
   var monthsViewScroll = function monthsViewScroll2(e) {
-    if (state.monthsData.length <= 1) {
+    if (monthsData.length <= 1) {
       return;
     }
-    var target = e.target;
-    var currentScrollTop = target.scrollTop;
-    var current = Math.floor(currentScrollTop / state.avgHeight);
+    var scrollTop = e.target.scrollTop;
+    var current = Math.floor(scrollTop / avgHeight);
+    var nextTop = monthsData[current + 1].scrollTop;
+    var nextHeight = monthsData[current + 1].cssHeight;
     if (current === 0) {
-      if (currentScrollTop >= state.monthsData[current + 1].cssScrollHeight) {
+      if (scrollTop >= nextTop) {
         current += 1;
       }
-    } else if (current > 0 && current < state.monthsNum - 1) {
-      if (currentScrollTop >= state.monthsData[current + 1].cssScrollHeight) {
+    } else if (current > 0 && current < monthsNum - 1) {
+      if (scrollTop >= nextTop) {
         current += 1;
       }
-      if (currentScrollTop < state.monthsData[current].cssScrollHeight) {
+      if (scrollTop < monthsData[current].scrollTop) {
         current -= 1;
       }
     } else {
-      var viewPosition = Math.round(currentScrollTop + viewHeight);
-      if (viewPosition < state.monthsData[current].cssScrollHeight + state.monthsData[current].cssHeight && currentScrollTop > state.monthsData[current - 1].cssScrollHeight) {
-        current -= 1;
-      }
-      if (current + 1 <= state.monthsNum && viewPosition >= state.monthsData[current + 1].cssScrollHeight + state.monthsData[current + 1].cssHeight) {
+      var viewPosition = Math.round(scrollTop + viewHeight);
+      if (current + 1 <= monthsNum && viewPosition >= nextTop + nextHeight) {
         current += 1;
       }
-      if (current >= 1 && currentScrollTop < state.monthsData[current - 1].cssScrollHeight) {
+      if (current >= 1 && scrollTop < monthsData[current - 1].scrollTop) {
         current -= 1;
       }
     }
-    if (state.currentIndex !== current) {
-      state.currentIndex = current;
-      setDefaultRange(state.monthsNum, current);
-    }
-    setReachedYearMonthInfo();
+    setDefaultRange(monthsNum, current);
   };
-  var initData = function initData2() {
-    var propStartDate = props.startDate ? props.startDate : Utils.getDay(0);
-    var propEndDate = props.endDate ? props.endDate : Utils.getDay(365);
-    state.propStartDate = propStartDate;
-    state.propEndDate = propEndDate;
-    state.startData = splitDate(propStartDate);
-    state.endData = splitDate(propEndDate);
-    if (defaultValue || Array.isArray(defaultValue) && defaultValue.length > 0) {
-      state.currDate = props.type !== "one" ? _toConsumableArray(props.defaultValue) : props.defaultValue;
-    }
+  var getMonthNum = function getMonthNum2() {
     var startDate = {
-      year: Number(state.startData[0]),
-      month: Number(state.startData[1])
+      year: Number(startDates[0]),
+      month: Number(startDates[1])
     };
     var endDate = {
-      year: Number(state.endData[0]),
-      month: Number(state.endData[1])
+      year: Number(endDates[0]),
+      month: Number(endDates[1])
     };
-    var monthsNum = endDate.month - startDate.month;
+    var monthNum = endDate.month - startDate.month;
     if (endDate.year - startDate.year > 0) {
-      monthsNum += 12 * (endDate.year - startDate.year);
+      monthNum += 12 * (endDate.year - startDate.year);
     }
-    if (monthsNum <= 0) {
-      monthsNum = 1;
+    if (monthNum <= 0) {
+      monthNum = 1;
     }
-    getMonth(state.startData, "next");
+    setMonthsNum(monthNum);
+    return monthNum;
+  };
+  var getMonthsData = function getMonthsData2(monthNum) {
+    getMonthData(startDates, "next");
     var i = 1;
     do {
-      getMonth(getCurrData("next"), "next");
-    } while (i++ < monthsNum);
-    state.monthsNum = monthsNum;
-    if (type === "range" && Array.isArray(state.currDate)) {
-      if (state.currDate.length > 0) {
-        if (propStartDate && Utils.compareDate(state.currDate[0], propStartDate)) {
-          state.currDate.splice(0, 1, propStartDate);
+      getMonthData(getCurrMonthData("next"), "next");
+    } while (i++ < monthNum);
+  };
+  var requestAniFrameFunc = function requestAniFrameFunc2(current, monthNum) {
+    var lastItem = monthsData[monthsData.length - 1];
+    var containerHeight = lastItem.cssHeight + lastItem.scrollTop;
+    requestAniFrame(function() {
+      if (monthsRef && monthsPanel && viewAreaRef) {
+        viewHeight = monthsRef.current.clientHeight;
+        monthsPanel.current.style.height = "".concat(containerHeight, "px");
+        monthsRef.current.scrollTop = monthsData[current].scrollTop;
+      }
+    });
+    setAvgHeight(Math.floor(containerHeight / (monthNum + 1)));
+  };
+  var renderCurrentDate = function renderCurrentDate2() {
+    var defaultData = [];
+    if (type === "range" && Array.isArray(currentDate)) {
+      if (currentDate.length > 0) {
+        if (propStartDate && Utils.compareDate(currentDate[0], propStartDate)) {
+          currentDate.splice(0, 1, propStartDate);
         }
-        if (propEndDate && Utils.compareDate(propEndDate, state.currDate[1])) {
-          state.currDate.splice(1, 1, propEndDate);
+        if (propEndDate && Utils.compareDate(propEndDate, currentDate[1])) {
+          currentDate.splice(1, 1, propEndDate);
         }
-        state.defaultData = [].concat(_toConsumableArray(splitDate(state.currDate[0])), _toConsumableArray(splitDate(state.currDate[1])));
+        defaultData = [].concat(_toConsumableArray(splitDate(currentDate[0])), _toConsumableArray(splitDate(currentDate[1])));
       }
-    } else if (props.type === "multiple" && Array.isArray(state.currDate)) {
-      if (state.currDate.length > 0) {
+    } else if (props.type === "multiple" && Array.isArray(currentDate)) {
+      if (currentDate.length > 0) {
         var defaultArr = [];
         var obj = {};
-        state.currDate.forEach(function(item) {
+        currentDate.forEach(function(item) {
           if (propStartDate && !Utils.compareDate(item, propStartDate) && propEndDate && !Utils.compareDate(propEndDate, item)) {
             if (!Object.hasOwnProperty.call(obj, item)) {
               defaultArr.push(item);
@@ -430,26 +348,31 @@ var CalendarItem = React__default.forwardRef(function(props, ref) {
             }
           }
         });
-        state.currDate = [].concat(defaultArr);
-        state.defaultData = _toConsumableArray(splitDate(defaultArr[0]));
+        currentDate.splice(0) && currentDate.push.apply(currentDate, defaultArr);
+        defaultData = _toConsumableArray(splitDate(defaultArr[0]));
       }
-    } else if (state.currDate) {
-      if (propStartDate && Utils.compareDate(state.currDate, propStartDate)) {
-        state.currDate = propStartDate;
-      } else if (propEndDate && !Utils.compareDate(state.currDate, propEndDate)) {
-        state.currDate = propEndDate;
+    } else if (currentDate) {
+      if (currentDate.length > 0) {
+        if (propStartDate && Utils.compareDate(currentDate, propStartDate)) {
+          defaultData = _toConsumableArray(splitDate(propStartDate));
+        } else if (propEndDate && !Utils.compareDate(currentDate, propEndDate)) {
+          defaultData = _toConsumableArray(splitDate(propEndDate));
+        } else {
+          defaultData = _toConsumableArray(splitDate(currentDate));
+        }
+      } else {
+        defaultData = [];
       }
-      state.defaultData = _toConsumableArray(splitDate(state.currDate));
     }
     var current = 0;
     var lastCurrent = 0;
-    if (state.defaultData.length > 0) {
-      state.monthsData.forEach(function(item, index) {
-        if (item.title === locale.calendaritem.monthTitle(state.defaultData[0], state.defaultData[1])) {
+    if (defaultData.length > 0) {
+      monthsData.forEach(function(item, index) {
+        if (item.title === monthTitle(defaultData[0], defaultData[1])) {
           current = index;
         }
         if (props.type === "range") {
-          if (item.title === locale.calendaritem.monthTitle(state.defaultData[3], state.defaultData[4])) {
+          if (item.title === monthTitle(defaultData[3], defaultData[4])) {
             lastCurrent = index;
           }
         }
@@ -457,91 +380,87 @@ var CalendarItem = React__default.forwardRef(function(props, ref) {
     } else {
       var currentYear = /* @__PURE__ */ (/* @__PURE__ */ new Date()).getFullYear();
       var currentMonth = /* @__PURE__ */ (/* @__PURE__ */ new Date()).getMonth() + 1;
-      var currentYearMonthIndex = state.monthsData.findIndex(function(item) {
+      var currentYearMonthIndex = monthsData.findIndex(function(item) {
         return +item.curData[0] === currentYear && +item.curData[1] === currentMonth;
       });
       if (currentYearMonthIndex > -1) {
         current = currentYearMonthIndex;
       }
     }
-    setDefaultRange(monthsNum, current);
-    state.currentIndex = current;
-    setReachedYearMonthInfo();
-    if (state.defaultData.length > 0) {
+    if (defaultData.length > 0) {
       if (type === "range") {
         chooseDay({
-          day: state.defaultData[2],
-          type: "curr"
-        }, state.monthsData[state.currentIndex], true);
+          day: defaultData[2],
+          type: "active"
+        }, monthsData[current], true);
         chooseDay({
-          day: state.defaultData[5],
-          type: "curr"
-        }, state.monthsData[lastCurrent], true);
+          day: defaultData[5],
+          type: "active"
+        }, monthsData[lastCurrent], true);
       } else if (type === "multiple") {
-        _toConsumableArray(state.currDate).forEach(function(item) {
+        _toConsumableArray(currentDate).forEach(function(item) {
           var dateArr = splitDate(item);
-          var current2 = state.currentIndex;
-          state.monthsData.forEach(function(item2, index) {
-            if (item2.title === locale.calendaritem.monthTitle(dateArr[0], dateArr[1])) {
-              current2 = index;
+          var currentIndex = current;
+          monthsData.forEach(function(item2, index) {
+            if (item2.title === monthTitle(dateArr[0], dateArr[1])) {
+              currentIndex = index;
             }
           });
           chooseDay({
             day: dateArr[2],
-            type: "curr"
-          }, state.monthsData[current2], true);
+            type: "active"
+          }, monthsData[currentIndex], true);
         });
       } else {
         chooseDay({
-          day: state.defaultData[2],
-          type: "curr"
-        }, state.monthsData[state.currentIndex], true);
+          day: defaultData[2],
+          type: "active"
+        }, monthsData[current], true);
       }
     }
-    var lastItem = state.monthsData[state.monthsData.length - 1];
-    var containerHeight = lastItem.cssHeight + lastItem.cssScrollHeight;
-    requestAniFrame(function() {
-      if (months && monthsPanel && viewArea) {
-        viewHeight = months.current.clientHeight;
-        monthsPanel.current.style.height = "".concat(containerHeight, "px");
-        months.current.scrollTop = state.monthsData[state.currentIndex].cssScrollHeight;
-      }
-    });
-    state.avgHeight = Math.floor(containerHeight / (monthsNum + 1));
+    return current;
+  };
+  var initData = function initData2() {
+    var monthNum = getMonthNum();
+    getMonthsData(monthNum);
+    var current = renderCurrentDate();
+    setDefaultRange(monthNum, current);
+    requestAniFrameFunc(current, monthNum);
   };
   var resetRender = function resetRender2() {
-    state.chooseData.splice(0);
-    state.monthsData.splice(0);
+    state.currDateArray.splice(0);
+    monthsData.splice(0);
     initData();
   };
   var scrollToDate = function scrollToDate2(date) {
-    if (Utils.compareDate(date, state.propStartDate)) {
-      date = state.propStartDate;
-    } else if (!Utils.compareDate(date, state.propEndDate)) {
-      date = state.propEndDate;
+    if (Utils.compareDate(date, propStartDate)) {
+      date = propStartDate;
+    } else if (!Utils.compareDate(date, propEndDate)) {
+      date = propEndDate;
     }
     var dateArr = splitDate(date);
-    state.monthsData.forEach(function(item, index) {
-      if (item.title === locale.calendaritem.monthTitle(dateArr[0], dateArr[1])) {
-        if (months.current) {
-          var distance = state.monthsData[index].cssScrollHeight - months.current.scrollTop;
-          if (toDateAnimation) {
+    monthsData.forEach(function(item, index) {
+      if (item.title === monthTitle(dateArr[0], dateArr[1])) {
+        var currTop = monthsData[index].scrollTop;
+        if (monthsRef.current) {
+          var distance = currTop - monthsRef.current.scrollTop;
+          if (scrollAnimation) {
             var flag = 0;
             var interval = setInterval(function() {
               flag++;
-              if (months.current) {
+              if (monthsRef.current) {
                 var offset = distance / 10;
-                months.current.scrollTop += offset;
+                monthsRef.current.scrollTop += offset;
               }
               if (flag >= 10) {
                 clearInterval(interval);
-                if (months.current) {
-                  months.current.scrollTop = state.monthsData[index].cssScrollHeight;
+                if (monthsRef.current) {
+                  monthsRef.current.scrollTop = currTop;
                 }
               }
             }, 40);
           } else {
-            months.current.scrollTop = state.monthsData[index].cssScrollHeight;
+            monthsRef.current.scrollTop = currTop;
           }
         }
       }
@@ -551,76 +470,137 @@ var CalendarItem = React__default.forwardRef(function(props, ref) {
     initData();
   }, []);
   useEffect(function() {
-    poppable && resetRender();
+    setCurrentDate(resetDefaultValue() || []);
+    popup && resetRender();
   }, [defaultValue]);
   React__default.useImperativeHandle(ref, function() {
     return {
       scrollToDate
     };
   });
+  var confirm = function confirm2() {
+    if (type === "range" && state.currDateArray.length === 2 || type !== "range") {
+      var chooseData = state.currDateArray.slice(0);
+      onConfirm2 && onConfirm2(chooseData);
+      if (popup) {
+        onUpdate2 && onUpdate2();
+      }
+    }
+  };
+  var chooseDay = function chooseDay2(day, month, isFirst) {
+    if (getClasses(day, month) === "".concat(dayPrefix, "-disabled")) {
+      return;
+    }
+    var days = _toConsumableArray(month.curData);
+    days[2] = typeof day.day === "number" ? Utils.getNumTwoBit(day.day) : day.day;
+    days[3] = "".concat(days[0], "/").concat(days[1], "/").concat(days[2]);
+    days[4] = Utils.getWhatDay(+days[0], +days[1], +days[2]);
+    if (type === "multiple") {
+      if (currentDate.length > 0) {
+        var hasIndex = "";
+        currentDate.forEach(function(item, index) {
+          if (item === days[3]) {
+            hasIndex = index;
+          }
+        });
+        if (isFirst) {
+          state.currDateArray.push(_toConsumableArray(days));
+        } else if (hasIndex !== "") {
+          currentDate.splice(hasIndex, 1);
+          state.currDateArray.splice(hasIndex, 1);
+        } else {
+          currentDate.push(days[3]);
+          state.currDateArray.push(_toConsumableArray(days));
+        }
+      } else {
+        currentDate.push(days[3]);
+        state.currDateArray = [_toConsumableArray(days)];
+      }
+    } else if (type === "range") {
+      var curDataLength = Object.values(currentDate).length;
+      if (curDataLength === 2 || curDataLength === 0) {
+        Array.isArray(currentDate) && currentDate.splice(0) && currentDate.push(days[3]);
+        state.currDateArray = [_toConsumableArray(days)];
+      } else if (Utils.compareDate(currentDate[0], days[3])) {
+        Array.isArray(currentDate) && currentDate.push(days[3]);
+        state.currDateArray = [].concat(_toConsumableArray(state.currDateArray), [_toConsumableArray(days)]);
+      } else {
+        Array.isArray(currentDate) && currentDate.unshift(days[3]);
+        state.currDateArray = [_toConsumableArray(days)].concat(_toConsumableArray(state.currDateArray));
+      }
+    } else {
+      setCurrentDate(days[3]);
+      state.currDateArray = _toConsumableArray(days);
+    }
+    if (!isFirst) {
+      onClickDay2 && onClickDay2(state.currDateArray);
+      if (autoBackfill || !popup) {
+        confirm();
+      }
+    }
+    setMonthsData(monthsData.slice());
+  };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: classes
   }, React__default.createElement("div", {
     className: headerClasses
   }, showTitle && React__default.createElement("div", {
-    className: "calendar-title"
-  }, title || locale.calendaritem.title), onBtn && React__default.createElement("div", {
-    className: "calendar-top-slot"
-  }, onBtn()), showSubTitle && React__default.createElement("div", {
-    className: "calendar-curr-month"
+    className: "".concat(classPrefix, "-title")
+  }, title || locale.calendaritem.title), renderHeaderButtons && React__default.createElement("div", {
+    className: "".concat(classPrefix, "-header-buttons")
+  }, renderHeaderButtons()), showSubTitle && React__default.createElement("div", {
+    className: "".concat(classPrefix, "-sub-title")
   }, yearMonthTitle), React__default.createElement("div", {
-    className: "calendar-weeks",
+    className: "".concat(classPrefix, "-weeks"),
     ref: weeksPanel
   }, weeks.map(function(item) {
     return React__default.createElement("div", {
-      className: "calendar-week-item",
+      className: "".concat(classPrefix, "-week-item"),
       key: item
     }, item);
   }))), React__default.createElement("div", {
-    className: "nut-calendar-content",
+    className: "".concat(classPrefix, "-content"),
     onScroll: monthsViewScroll,
-    ref: months
+    ref: monthsRef
   }, React__default.createElement("div", {
-    className: "calendar-months-panel",
+    className: "".concat(classPrefix, "-pannel"),
     ref: monthsPanel
   }, React__default.createElement("div", {
     className: "viewArea",
-    ref: viewArea,
+    ref: viewAreaRef,
     style: {
       transform: "translateY(".concat(translateY, "px)")
     }
-  }, state.monthsData.slice(monthDefaultRange[0], monthDefaultRange[1]).map(function(month, key) {
+  }, monthsData.slice(monthDefaultRange[0], monthDefaultRange[1]).map(function(month, key) {
     return React__default.createElement("div", {
-      className: "calendar-month",
+      className: "".concat(classPrefix, "-month"),
       key
     }, React__default.createElement("div", {
-      className: "calendar-month-title"
+      className: "".concat(classPrefix, "-month-title")
     }, month.title), React__default.createElement("div", {
-      className: "calendar-month-con"
-    }, React__default.createElement("div", {
-      className: monthitemclasses
+      className: "".concat(classPrefix, "-days")
     }, month.monthData.map(function(day, i) {
       return React__default.createElement("div", {
-        className: ["calendar-month-day", getClass(day, month)].join(" "),
+        className: ["".concat(classPrefix, "-day"), getClasses(day, month)].join(" "),
         onClick: function onClick() {
           chooseDay(day, month);
         },
         key: i
       }, React__default.createElement("div", {
-        className: "calendar-day"
-      }, onDay ? onDay(day) : day.day), onTopInfo && React__default.createElement("div", {
-        className: "calendar-curr-tips calendar-curr-tips-top"
-      }, onTopInfo(day)), onBottomInfo && React__default.createElement("div", {
-        className: "calendar-curr-tips calendar-curr-tips-bottom"
-      }, onBottomInfo(day)), !onBottomInfo && showToday && isCurrDay(month, day.day) && React__default.createElement("div", {
-        className: "calendar-curr-tip-curr"
+        className: "".concat(classPrefix, "-day-day")
+      }, renderDay ? renderDay(day) : day.day), !isStartTip(day, month) && renderDayTop && React__default.createElement("div", {
+        className: "".concat(classPrefix, "-day-info-top")
+      }, renderDayTop(day)), !isStartTip(day, month) && !isEndTip(day, month) && renderDayBottom && React__default.createElement("div", {
+        className: "".concat(classPrefix, "-day-info-bottom")
+      }, renderDayBottom(day)), !isStartTip(day, month) && !isEndTip(day, month) && !renderDayBottom && showToday && isCurrDay(month, day.day) && React__default.createElement("div", {
+        className: "".concat(classPrefix, "-day-info-curr")
       }, locale.calendaritem.today), isStartTip(day, month) && React__default.createElement("div", {
-        className: "calendar-day-tip ".concat(rangeTip() ? "calendar-curr-tips-top" : "")
+        className: "".concat(classPrefix, "-day-info ").concat(isStartAndEnd() ? "".concat(classPrefix, "-day-info-top") : "")
       }, startText || locale.calendaritem.start), isEndTip(day, month) && React__default.createElement("div", {
-        className: "calendar-day-tip"
+        className: "".concat(classPrefix, "-day-info")
       }, endText || locale.calendaritem.end));
-    }))));
-  })))), poppable && !isAutoBackFill ? React__default.createElement("div", {
+    })));
+  })))), popup && !autoBackfill ? React__default.createElement("div", {
     className: "nut-calendar-footer"
   }, React__default.createElement("div", {
     className: "calendar-confirm-btn",