@nutui/nutui-react 2.0.0-beta.1 → 2.0.0-beta.3

package/dist/esm/CalendarItem.js

@@ -1,5 +1,5 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -24,11 +24,40 @@ function _objectSpread(target) {
 }
 import React__default, { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
-import { U as Utils } from "./date.js";
+import { C as ComponentDefaults } from "./typings.js";
+import { U as Utils, g as getPreMonthDates, a as getDaysStatus, b as getCurrMonthData } from "./date.js";
 import { r as requestAniFrame } from "./raf.js";
-import { useConfig } from "./ConfigProvider.js";
+import { u as useConfig } from "./configprovider2.js";
 import { u as usePropsValue } from "./use-props-value.js";
-var defaultProps = {
+var splitDate = function splitDate2(date) {
+  var split = date.indexOf("-") !== -1 ? "-" : "/";
+  return date.split(split);
+};
+var isMultiple = function isMultiple2(day, days) {
+  if (days.length > 0) {
+    return days.some(function(item) {
+      return Utils.isEqual(item, day);
+    });
+  }
+  return false;
+};
+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 getCurrDate = function getCurrDate2(day, month) {
+  return "".concat(month.curData[0], "/").concat(month.curData[1], "/").concat(Utils.getNumTwoBit(+day.day));
+};
+var isStart = function isStart2(day, days) {
+  return Utils.isEqual(days[0], day);
+};
+var isEnd = function isEnd2(day, days) {
+  return Utils.isEqual(days[1], day);
+};
+var isStartAndEnd = function isStartAndEnd2(days) {
+  return days.length >= 2 && Utils.isEqual(days[0], days[1]);
+};
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   type: "single",
   autoBackfill: false,
   popup: true,
@@ -42,6 +71,7 @@ var defaultProps = {
   showTitle: true,
   showSubTitle: true,
   scrollAnimation: true,
+  firstDayOfWeek: 0,
   renderHeaderButtons: void 0,
   renderDay: void 0,
   renderDayTop: void 0,
@@ -50,28 +80,25 @@ var defaultProps = {
   },
   onUpdate: function onUpdate() {
   },
-  onClickDay: function onClickDay(data) {
+  onDayClick: function onDayClick(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, 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 _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), popup = _defaultProps$props.popup, type = _defaultProps$props.type, autoBackfill = _defaultProps$props.autoBackfill, title = _defaultProps$props.title, defaultValue = _defaultProps$props.defaultValue, startDate = _defaultProps$props.startDate, endDate = _defaultProps$props.endDate, 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, firstDayOfWeek = _defaultProps$props.firstDayOfWeek, renderHeaderButtons = _defaultProps$props.renderHeaderButtons, renderDay = _defaultProps$props.renderDay, renderDayTop = _defaultProps$props.renderDayTop, renderDayBottom = _defaultProps$props.renderDayBottom, onConfirm2 = _defaultProps$props.onConfirm, onUpdate2 = _defaultProps$props.onUpdate, onDayClick2 = _defaultProps$props.onDayClick, onPageChange2 = _defaultProps$props.onPageChange;
+  var weekdays = locale.calendaritem.weekdays;
+  var weeks = [].concat(_toConsumableArray(weekdays.slice(firstDayOfWeek, 7)), _toConsumableArray(weekdays.slice(0, firstDayOfWeek)));
   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), 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) {
-    var split = date.indexOf("-") !== -1 ? "-" : "/";
-    return date.split(split);
-  };
+  var propStartDate = startDate || Utils.getDay(0);
+  var propEndDate = endDate || Utils.getDay(365);
   var startDates = splitDate(propStartDate);
   var endDates = splitDate(propEndDate);
   var _useState11 = useState({
@@ -98,133 +125,37 @@ var CalendarItem = React__default.forwardRef(function(props, ref) {
   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));
-  };
-  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 (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 === "multiple" && isMultiple(dateStr) || !Array.isArray(currentDate) && Utils.isEqual(currentDate, dateStr)) {
-        return "".concat(dayPrefix, "-active");
+  var getMonthData = function getMonthData2(curData, monthNum, type2) {
+    var i = 0;
+    var date = curData;
+    var monthData = monthsData;
+    do {
+      var y = parseInt(date[0], 10);
+      var m = parseInt(date[1], 10);
+      var days = [].concat(_toConsumableArray(getPreMonthDates("prev", y, m, firstDayOfWeek)), _toConsumableArray(getDaysStatus("active", y, m)));
+      var cssHeight = 39 + (days.length > 35 ? 384 : 320);
+      var scrollTop = 0;
+      if (monthData.length > 0) {
+        var monthEle = monthData[monthData.length - 1];
+        scrollTop = monthEle.scrollTop + monthEle.cssHeight;
       }
-      return null;
-    }
-    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 isStart = function isStart2(d) {
-    return Utils.isEqual(currentDate[0], d);
-  };
-  var isEnd = function isEnd2(d) {
-    return Utils.isEqual(currentDate[1], d);
-  };
-  var isStartTip = function isStartTip2(day, month) {
-    return type === "range" && day.type === "active" && isStart(getCurrDate(day, month));
-  };
-  var isEndTip = function isEndTip2(day, month) {
-    return currentDate.length >= 2 && type === "range" && day.type === "active" && isEnd(getCurrDate(day, month));
-  };
-  var isStartAndEnd = function isStartAndEnd2() {
-    return currentDate.length >= 2 && Utils.isEqual(currentDate[0], currentDate[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) {
-      case "prev":
-        month === 1 && (year -= 1);
-        month = month === 1 ? 12 : --month;
-        break;
-      case "next":
-        month === 12 && (year += 1);
-        month = month === 12 ? 1 : ++month;
-        break;
-    }
-    return [year, Utils.getNumTwoBit(month), Utils.getMonthDays(String(year), String(month))];
-  };
-  var getDaysStatus = function getDaysStatus2(days, type2, year, month) {
-    if (type2 === "prev" && days >= 7) {
-      days -= 7;
-    }
-    return Array.from(Array(days), function(v, k) {
-      return {
-        day: k + 1,
-        type: type2,
-        year,
-        month
-      };
-    });
-  };
-  var getPreDaysStatus = function getPreDaysStatus2(days, type2, year, month, preCurrMonthDays) {
-    if (type2 === "prev" && days >= 7) {
-      days -= 7;
-    }
-    var months = Array.from(Array(preCurrMonthDays), function(v, k) {
-      return {
-        day: k + 1,
-        type: type2,
-        year,
-        month
+      var monthInfo = {
+        curData: date,
+        title: monthTitle(y, m),
+        monthData: days,
+        cssHeight,
+        scrollTop
       };
-    });
-    return months.slice(preCurrMonthDays - days);
-  };
-  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 monthInfo = {
-      curData,
-      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 scrollTop = 0;
-    if (monthsData.length > 0) {
-      var monthEle = monthsData[monthsData.length - 1];
-      scrollTop = monthEle.scrollTop + monthEle.cssHeight;
-    }
-    monthInfo.scrollTop = scrollTop;
-    if (type2 === "next") {
-      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);
+      if (type2 === "next") {
+        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]))) {
+          monthData.push(monthInfo);
+        }
+      } else if (!startDates || !Utils.compareDate("".concat(curData[0], "/").concat(curData[1], "/").concat(curData[2]), "".concat(startDates[0], "/").concat(startDates[1], "/01"))) {
+        monthData.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(monthsData);
+      date = getCurrMonthData("next", y, m);
+    } while (i++ < monthNum);
+    setMonthsData(monthData);
   };
   var setReachedYearMonthInfo = function setReachedYearMonthInfo2(current) {
     var currentMonthsData = monthsData[current];
@@ -256,48 +187,11 @@ var CalendarItem = React__default.forwardRef(function(props, ref) {
     setTranslateY(monthsData[start].scrollTop);
     setReachedYearMonthInfo(current);
   };
-  var monthsViewScroll = function monthsViewScroll2(e) {
-    if (monthsData.length <= 1) {
-      return;
-    }
-    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 (scrollTop >= nextTop) {
-        current += 1;
-      }
-    } else if (current > 0 && current < monthsNum - 1) {
-      if (scrollTop >= nextTop) {
-        current += 1;
-      }
-      if (scrollTop < monthsData[current].scrollTop) {
-        current -= 1;
-      }
-    } else {
-      var viewPosition = Math.round(scrollTop + viewHeight);
-      if (current + 1 <= monthsNum && viewPosition >= nextTop + nextHeight) {
-        current += 1;
-      }
-      if (current >= 1 && scrollTop < monthsData[current - 1].scrollTop) {
-        current -= 1;
-      }
-    }
-    setDefaultRange(monthsNum, current);
-  };
   var getMonthNum = function getMonthNum2() {
-    var startDate = {
-      year: Number(startDates[0]),
-      month: Number(startDates[1])
-    };
-    var endDate = {
-      year: Number(endDates[0]),
-      month: Number(endDates[1])
-    };
-    var monthNum = endDate.month - startDate.month;
-    if (endDate.year - startDate.year > 0) {
-      monthNum += 12 * (endDate.year - startDate.year);
+    var monthNum = Number(endDates[1]) - Number(startDates[1]);
+    var yearNum = Number(endDates[0]) - Number(startDates[0]);
+    if (yearNum > 0) {
+      monthNum += 12 * yearNum;
     }
     if (monthNum <= 0) {
       monthNum = 1;
@@ -305,26 +199,7 @@ var CalendarItem = React__default.forwardRef(function(props, ref) {
     setMonthsNum(monthNum);
     return monthNum;
   };
-  var getMonthsData = function getMonthsData2(monthNum) {
-    getMonthData(startDates, "next");
-    var i = 1;
-    do {
-      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 setDefaultDate = function setDefaultDate2() {
     var defaultData = [];
     if (type === "range" && Array.isArray(currentDate)) {
       if (currentDate.length > 0) {
@@ -336,7 +211,7 @@ var CalendarItem = React__default.forwardRef(function(props, ref) {
         }
         defaultData = [].concat(_toConsumableArray(splitDate(currentDate[0])), _toConsumableArray(splitDate(currentDate[1])));
       }
-    } else if (props.type === "multiple" && Array.isArray(currentDate)) {
+    } else if (type === "multiple" && Array.isArray(currentDate)) {
       if (currentDate.length > 0) {
         var defaultArr = [];
         var obj = {};
@@ -351,6 +226,19 @@ var CalendarItem = React__default.forwardRef(function(props, ref) {
         currentDate.splice(0) && currentDate.push.apply(currentDate, defaultArr);
         defaultData = _toConsumableArray(splitDate(defaultArr[0]));
       }
+    } else if (type === "week" && Array.isArray(currentDate)) {
+      if (currentDate.length > 0) {
+        var _splitDate = splitDate(currentDate[0]), _splitDate2 = _slicedToArray(_splitDate, 3), y = _splitDate2[0], m = _splitDate2[1], d = _splitDate2[2];
+        var weekArr = Utils.getWeekDate(y, m, d, firstDayOfWeek);
+        currentDate.splice(0) && currentDate.push.apply(currentDate, _toConsumableArray(weekArr));
+        if (propStartDate && Utils.compareDate(currentDate[0], propStartDate)) {
+          currentDate.splice(0, 1, propStartDate);
+        }
+        if (propEndDate && Utils.compareDate(propEndDate, currentDate[1])) {
+          currentDate.splice(1, 1, propEndDate);
+        }
+        defaultData = [].concat(_toConsumableArray(splitDate(currentDate[0])), _toConsumableArray(splitDate(currentDate[1])));
+      }
     } else if (currentDate) {
       if (currentDate.length > 0) {
         if (propStartDate && Utils.compareDate(currentDate, propStartDate)) {
@@ -364,43 +252,60 @@ var CalendarItem = React__default.forwardRef(function(props, ref) {
         defaultData = [];
       }
     }
+    return defaultData;
+  };
+  var getCurrentIndex = function getCurrentIndex2(defaultData) {
     var current = 0;
     var lastCurrent = 0;
     if (defaultData.length > 0) {
-      monthsData.forEach(function(item, index) {
+      monthsData.forEach(function(item, index2) {
         if (item.title === monthTitle(defaultData[0], defaultData[1])) {
-          current = index;
+          current = index2;
         }
-        if (props.type === "range") {
+        if (type === "range" || type === "week") {
           if (item.title === monthTitle(defaultData[3], defaultData[4])) {
-            lastCurrent = index;
+            lastCurrent = index2;
           }
         }
       });
     } else {
-      var currentYear = /* @__PURE__ */ (/* @__PURE__ */ new Date()).getFullYear();
-      var currentMonth = /* @__PURE__ */ (/* @__PURE__ */ new Date()).getMonth() + 1;
-      var currentYearMonthIndex = monthsData.findIndex(function(item) {
-        return +item.curData[0] === currentYear && +item.curData[1] === currentMonth;
+      var date = /* @__PURE__ */ new Date();
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var index = monthsData.findIndex(function(item) {
+        return +item.curData[0] === year && +item.curData[1] === month;
       });
-      if (currentYearMonthIndex > -1) {
-        current = currentYearMonthIndex;
+      if (index > -1) {
+        current = index;
       }
     }
+    return {
+      current,
+      lastCurrent
+    };
+  };
+  var renderCurrentDate = function renderCurrentDate2() {
+    var defaultData = setDefaultDate();
+    var current = getCurrentIndex(defaultData);
     if (defaultData.length > 0) {
       if (type === "range") {
         chooseDay({
           day: defaultData[2],
           type: "active"
-        }, monthsData[current], true);
+        }, monthsData[current.current], true);
         chooseDay({
           day: defaultData[5],
           type: "active"
-        }, monthsData[lastCurrent], true);
+        }, monthsData[current.lastCurrent], true);
+      } else if (props.type === "week") {
+        chooseDay({
+          day: defaultData[2],
+          type: "curr"
+        }, monthsData[current.current], true);
       } else if (type === "multiple") {
         _toConsumableArray(currentDate).forEach(function(item) {
           var dateArr = splitDate(item);
-          var currentIndex = current;
+          var currentIndex = current.current;
           monthsData.forEach(function(item2, index) {
             if (item2.title === monthTitle(dateArr[0], dateArr[1])) {
               currentIndex = index;
@@ -415,23 +320,42 @@ var CalendarItem = React__default.forwardRef(function(props, ref) {
         chooseDay({
           day: defaultData[2],
           type: "active"
-        }, monthsData[current], true);
+        }, monthsData[current.current], true);
       }
     }
-    return current;
+    return current.current;
+  };
+  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 initData = function initData2() {
     var monthNum = getMonthNum();
-    getMonthsData(monthNum);
+    getMonthData(startDates, monthNum, "next");
     var current = renderCurrentDate();
     setDefaultRange(monthNum, current);
     requestAniFrameFunc(current, monthNum);
   };
+  useEffect(function() {
+    initData();
+  }, []);
   var resetRender = function resetRender2() {
     state.currDateArray.splice(0);
     monthsData.splice(0);
     initData();
   };
+  useEffect(function() {
+    setCurrentDate(resetDefaultValue() || []);
+    popup && resetRender();
+  }, [defaultValue]);
   var scrollToDate = function scrollToDate2(date) {
     if (Utils.compareDate(date, propStartDate)) {
       date = propStartDate;
@@ -466,32 +390,69 @@ var CalendarItem = React__default.forwardRef(function(props, ref) {
       }
     });
   };
-  useEffect(function() {
-    initData();
-  }, []);
-  useEffect(function() {
-    setCurrentDate(resetDefaultValue() || []);
-    popup && resetRender();
-  }, [defaultValue]);
+  var monthsViewScroll = function monthsViewScroll2(e) {
+    if (monthsData.length <= 1) {
+      return;
+    }
+    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 (scrollTop >= nextTop) {
+        current += 1;
+      }
+    } else if (current > 0 && current < monthsNum - 1) {
+      if (scrollTop >= nextTop) {
+        current += 1;
+      }
+      if (scrollTop < monthsData[current].scrollTop) {
+        current -= 1;
+      }
+    } else {
+      var viewPosition = Math.round(scrollTop + viewHeight);
+      if (current + 1 <= monthsNum && viewPosition >= nextTop + nextHeight) {
+        current += 1;
+      }
+      if (current >= 1 && scrollTop < monthsData[current - 1].scrollTop) {
+        current -= 1;
+      }
+    }
+    setDefaultRange(monthsNum, current);
+  };
   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 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 (type === "range" || type === "week") {
+        if (isStart(dateStr, currentDate) || isEnd(dateStr, currentDate)) {
+          return "".concat(dayPrefix, "-active ").concat(isStart(dateStr, currentDate) ? "active-start" : "", " ").concat(isEnd(dateStr, currentDate) ? "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 === "multiple" && isMultiple(dateStr, currentDate) || !Array.isArray(currentDate) && Utils.isEqual(currentDate, dateStr)) {
+        return "".concat(dayPrefix, "-active");
+      }
+      return null;
     }
+    return "".concat(dayPrefix, "-disabled");
   };
   var chooseDay = function chooseDay2(day, month, isFirst) {
     if (getClasses(day, month) === "".concat(dayPrefix, "-disabled")) {
       return;
     }
     var days = _toConsumableArray(month.curData);
+    var _month$curData = _slicedToArray(month.curData, 2), y = _month$curData[0], m = _month$curData[1];
     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]);
@@ -528,84 +489,120 @@ var CalendarItem = React__default.forwardRef(function(props, ref) {
         Array.isArray(currentDate) && currentDate.unshift(days[3]);
         state.currDateArray = [_toConsumableArray(days)].concat(_toConsumableArray(state.currDateArray));
       }
+    } else if (type === "week") {
+      var weekArr = Utils.getWeekDate(y, m, "".concat(day.day), firstDayOfWeek);
+      if (propStartDate && Utils.compareDate(weekArr[0], propStartDate)) {
+        weekArr.splice(0, 1, propStartDate);
+      }
+      if (propEndDate && Utils.compareDate(propEndDate, weekArr[1])) {
+        weekArr.splice(1, 1, propEndDate);
+      }
+      Array.isArray(currentDate) && currentDate.splice(0) && currentDate.push.apply(currentDate, _toConsumableArray(weekArr));
+      state.currDateArray = [Utils.formatResultDate(weekArr[0]), Utils.formatResultDate(weekArr[1])];
     } else {
       setCurrentDate(days[3]);
       state.currDateArray = _toConsumableArray(days);
     }
     if (!isFirst) {
-      onClickDay2 && onClickDay2(state.currDateArray);
+      onDayClick2 && onDayClick2(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: "".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: "".concat(classPrefix, "-weeks"),
-    ref: weeksPanel
-  }, weeks.map(function(item) {
-    return React__default.createElement("div", {
-      className: "".concat(classPrefix, "-week-item"),
-      key: item
-    }, item);
-  }))), React__default.createElement("div", {
-    className: "".concat(classPrefix, "-content"),
-    onScroll: monthsViewScroll,
-    ref: monthsRef
-  }, React__default.createElement("div", {
-    className: "".concat(classPrefix, "-pannel"),
-    ref: monthsPanel
-  }, React__default.createElement("div", {
-    className: "viewArea",
-    ref: viewAreaRef,
-    style: {
-      transform: "translateY(".concat(translateY, "px)")
+  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();
+      }
     }
-  }, monthsData.slice(monthDefaultRange[0], monthDefaultRange[1]).map(function(month, key) {
+  };
+  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 isStartTip = function isStartTip2(day, month) {
+    return (type === "range" || type === "week") && day.type === "active" && isStart(getCurrDate(day, month), currentDate);
+  };
+  var isEndTip = function isEndTip2(day, month) {
+    return currentDate.length >= 2 && (type === "range" || type === "week") && day.type === "active" && isEnd(getCurrDate(day, month), currentDate);
+  };
+  var renderHeader = function renderHeader2() {
     return React__default.createElement("div", {
-      className: "".concat(classPrefix, "-month"),
-      key
+      className: headerClasses
+    }, showTitle && React__default.createElement("div", {
+      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: "".concat(classPrefix, "-weeks"),
+      ref: weeksPanel
+    }, weeks.map(function(item) {
+      return React__default.createElement("div", {
+        className: "".concat(classPrefix, "-week-item"),
+        key: item
+      }, item);
+    })));
+  };
+  var renderContent = function renderContent2() {
+    return React__default.createElement("div", {
+      className: "".concat(classPrefix, "-content"),
+      onScroll: monthsViewScroll,
+      ref: monthsRef
+    }, React__default.createElement("div", {
+      className: "".concat(classPrefix, "-pannel"),
+      ref: monthsPanel
     }, React__default.createElement("div", {
-      className: "".concat(classPrefix, "-month-title")
-    }, month.title), React__default.createElement("div", {
-      className: "".concat(classPrefix, "-days")
-    }, month.monthData.map(function(day, i) {
+      className: "viewArea",
+      ref: viewAreaRef,
+      style: {
+        transform: "translateY(".concat(translateY, "px)")
+      }
+    }, monthsData.slice(monthDefaultRange[0], monthDefaultRange[1]).map(function(month, key) {
       return React__default.createElement("div", {
-        className: ["".concat(classPrefix, "-day"), getClasses(day, month)].join(" "),
-        onClick: function onClick() {
-          chooseDay(day, month);
-        },
-        key: i
+        className: "".concat(classPrefix, "-month"),
+        key
       }, React__default.createElement("div", {
-        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: "".concat(classPrefix, "-day-info ").concat(isStartAndEnd() ? "".concat(classPrefix, "-day-info-top") : "")
-      }, startText || locale.calendaritem.start), isEndTip(day, month) && React__default.createElement("div", {
-        className: "".concat(classPrefix, "-day-info")
-      }, endText || locale.calendaritem.end));
-    })));
-  })))), popup && !autoBackfill ? React__default.createElement("div", {
-    className: "nut-calendar-footer"
-  }, React__default.createElement("div", {
-    className: "calendar-confirm-btn",
-    onClick: confirm
-  }, confirmText || locale.confirm)) : ""));
+        className: "".concat(classPrefix, "-month-title")
+      }, month.title), React__default.createElement("div", {
+        className: "".concat(classPrefix, "-days")
+      }, month.monthData.map(function(day, i) {
+        return React__default.createElement("div", {
+          className: ["".concat(classPrefix, "-day"), getClasses(day, month)].join(" "),
+          onClick: function onClick() {
+            chooseDay(day, month);
+          },
+          key: i
+        }, React__default.createElement("div", {
+          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: "".concat(classPrefix, "-day-info ").concat(isStartAndEnd(currentDate) ? "".concat(classPrefix, "-day-info-top") : "")
+        }, startText || locale.calendaritem.start), isEndTip(day, month) && React__default.createElement("div", {
+          className: "".concat(classPrefix, "-day-info")
+        }, endText || locale.calendaritem.end));
+      })));
+    }))));
+  };
+  var renderFooter = function renderFooter2() {
+    return React__default.createElement("div", {
+      className: "nut-calendar-footer"
+    }, React__default.createElement("div", {
+      className: "calendar-confirm-btn",
+      onClick: confirm
+    }, confirmText || locale.confirm));
+  };
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: classes
+  }, renderHeader(), renderContent(), popup && !autoBackfill ? renderFooter() : ""));
 });
 CalendarItem.defaultProps = defaultProps;
 CalendarItem.displayName = "NutCalendarItem";