@nutui/nutui-react 1.3.0 → 1.3.1-beta.2

package/dist/esm/CalendarItem.js

@@ -35,12 +35,22 @@ var defaultProps = {
   defaultValue: '',
   startDate: Utils.getDay(0),
   endDate: Utils.getDay(365),
+  showToday: true,
+  startText: '开始',
+  endText: '结束',
+  confirmText: '确认',
+  showTitle: true,
+  showSubTitle: true,
+  toDateAnimation: true,
+  onBtn: undefined,
+  onDay: undefined,
+  onTopInfo: undefined,
+  onBottomInfo: undefined,
   onChoose: function onChoose(data) {},
   onUpdate: function onUpdate() {},
-  onClose: function onClose() {}
+  onSelected: function onSelected(data) {}
 };
-
-var CalendarItem = function CalendarItem(props) {
+var CalendarItem = React__default.forwardRef(function (props, ref) {
   var _classNames, _classNames2;
 
   var _useConfig = useConfig(),
@@ -52,11 +62,20 @@ var CalendarItem = function CalendarItem(props) {
       poppable = _defaultProps$props.poppable,
       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,
+      toDateAnimation = _defaultProps$props.toDateAnimation,
+      onBtn = _defaultProps$props.onBtn,
+      onDay = _defaultProps$props.onDay,
+      onTopInfo = _defaultProps$props.onTopInfo,
+      onBottomInfo = _defaultProps$props.onBottomInfo,
       onChoose = _defaultProps$props.onChoose,
       onUpdate = _defaultProps$props.onUpdate,
-      onClose = _defaultProps$props.onClose;
+      onSelected = _defaultProps$props.onSelected;
 
   var weeks = locale.calendaritem.weekdays;
 
@@ -65,18 +84,26 @@ var CalendarItem = function CalendarItem(props) {
       yearMonthTitle = _useState2[0],
       setYearMonthTitle = _useState2[1];
 
-  var _useState3 = useState(false),
+  var _useState3 = useState([]),
       _useState4 = _slicedToArray(_useState3, 2),
-      unLoadPrev = _useState4[0],
-      setUnLoadPrev = _useState4[1];
+      monthsData = _useState4[0],
+      setMonthsData = _useState4[1];
 
-  var _useState5 = useState([]),
+  var _useState5 = useState(0),
       _useState6 = _slicedToArray(_useState5, 2),
-      monthsData = _useState6[0],
-      setMonthsData = _useState6[1];
+      translateY = _useState6[0],
+      setTranslateY = _useState6[1];
+
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      monthDefaultRange = _useState8[0],
+      setMonthDefaultRange = _useState8[1];
 
-  var _useState7 = useState({
+  var _useState9 = useState({
     currDate: '',
+    propStartDate: '',
+    propEndDate: '',
+    unLoadPrev: false,
     touchParams: {
       startY: 0,
       endY: 0,
@@ -86,7 +113,6 @@ var CalendarItem = function CalendarItem(props) {
       lastTime: 0
     },
     transformY: 0,
-    translateY: 0,
     scrollDistance: 0,
     defaultData: [],
     chooseData: [],
@@ -94,15 +120,20 @@ var CalendarItem = function CalendarItem(props) {
     dayPrefix: 'calendar-month-day',
     startData: '',
     endData: '',
-    isRange: type === 'range',
-    timer: 0
+    isRange: props.type === 'range',
+    timer: 0,
+    currentIndex: 0,
+    avgHeight: 0,
+    monthsNum: 0
   }),
-      _useState8 = _slicedToArray(_useState7, 1),
-      state = _useState8[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));
@@ -122,23 +153,33 @@ var CalendarItem = function CalendarItem(props) {
     return Utils.isEqual(state.currDate[1], currDate);
   };
 
-  var getCurrDate = function getCurrDate(day, month, isRange) {
-    return isRange ? "".concat(month.curData[3], "-").concat(month.curData[4], "-").concat(Utils.getNumTwoBit(+day.day)) : "".concat(month.curData[0], "-").concat(month.curData[1], "-").concat(Utils.getNumTwoBit(+day.day));
+  var isMultiple = function isMultiple(currDate) {
+    if (state.currDate.length > 0) {
+      return state.currDate.some(function (item) {
+        return Utils.isEqual(item, currDate);
+      });
+    }
+
+    return false;
   };
 
-  var getClass = function getClass(day, month, isRange) {
-    var currDate = getCurrDate(day, month, isRange);
+  var getCurrDate = function getCurrDate(day, month) {
+    return "".concat(month.curData[0], "-").concat(month.curData[1], "-").concat(Utils.getNumTwoBit(+day.day));
+  };
+
+  var getClass = function getClass(day, month) {
+    var currDate = getCurrDate(day, month);
 
     if (day.type === 'curr') {
-      if (!state.isRange && Utils.isEqual(state.currDate, currDate) || state.isRange && (isStart(currDate) || isEnd(currDate))) {
+      if (Utils.isEqual(state.currDate, currDate) || type === 'range' && (isStart(currDate) || isEnd(currDate)) || type === 'multiple' && isMultiple(currDate)) {
         return "".concat(state.dayPrefix, "-active");
       }
 
-      if (startDate && Utils.compareDate(currDate, startDate) || endDate && Utils.compareDate(endDate, currDate)) {
+      if (state.propStartDate && Utils.compareDate(currDate, state.propStartDate) || state.propEndDate && Utils.compareDate(state.propEndDate, currDate)) {
         return "".concat(state.dayPrefix, "-disabled");
       }
 
-      if (state.isRange && Array.isArray(state.currDate) && Object.values(state.currDate).length === 2 && Utils.compareDate(state.currDate[0], currDate) && Utils.compareDate(currDate, state.currDate[1])) {
+      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");
       }
 
@@ -158,8 +199,11 @@ var CalendarItem = function CalendarItem(props) {
   };
 
   var confirm = function confirm() {
-    if (state.isRange && state.chooseData.length === 2 || !state.isRange) {
-      onChoose && onChoose(state.chooseData);
+    var type = props.type;
+
+    if (type === 'range' && state.chooseData.length === 2 || type !== 'range') {
+      var chooseData = state.chooseData.slice(0);
+      onChoose && onChoose(chooseData);
 
       if (poppable) {
         onUpdate && onUpdate();
@@ -167,20 +211,42 @@ var CalendarItem = function CalendarItem(props) {
     }
   };
 
-  var chooseDay = function chooseDay(day, month, isFirst, isRange) {
-    if (getClass(day, month, isRange) !== "".concat(state.dayPrefix, "-disabled")) {
+  var chooseDay = function chooseDay(day, month, isFirst) {
+    if (getClass(day, month) !== "".concat(state.dayPrefix, "-disabled")) {
+      var _type = props.type;
+
       var days = _toConsumableArray(month.curData);
 
-      days = isRange ? days.splice(3) : days.splice(0, 3);
       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 (!state.isRange) {
-        state.currDate = days[3];
-        state.chooseData = _toConsumableArray(days);
-      } else {
-        if (Object.values(state.currDate).length === 2) {
+      if (_type === '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 (_type === '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]);
@@ -189,16 +255,24 @@ var CalendarItem = function CalendarItem(props) {
         }
 
         if (state.chooseData.length === 2 || !state.chooseData.length) {
-          state.chooseData = _toConsumableArray(days);
-        } else if (Utils.compareDate(state.chooseData[3], days[3])) {
-          state.chooseData = [_toConsumableArray(state.chooseData), _toConsumableArray(days)];
+          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), _toConsumableArray(state.chooseData)];
+          state.chooseData = [_toConsumableArray(days)].concat(_toConsumableArray(state.chooseData));
         }
+      } else {
+        state.currDate = days[3];
+        state.chooseData = _toConsumableArray(days);
       }
 
-      if (isAutoBackFill && !isFirst) {
-        confirm();
+      if (!isFirst) {
+        // 点击日期 触发
+        onSelected && onSelected(state.chooseData);
+
+        if (isAutoBackFill || !poppable) {
+          confirm();
+        }
       }
 
       setMonthsData(state.monthsData.slice());
@@ -206,20 +280,25 @@ var CalendarItem = function CalendarItem(props) {
   };
 
   var isStartTip = function isStartTip(day, month) {
-    if (isActive(day, month)) {
-      return isStart(getCurrDate(day, month));
+    return isActive(day, month) && isStart(getCurrDate(day, month));
+  }; // 是否有结束提示
+
+
+  var isEndTip = function isEndTip(day, month) {
+    if (state.currDate.length >= 2 && isEnd(getCurrDate(day, month))) {
+      return isActive(day, month);
     }
 
     return false;
-  }; // 是否有结束提示
+  }; // 开始结束时间是否相等
 
 
-  var isEndTip = function isEndTip(day, month) {
-    if (isStartTip(day, month)) {
-      return false;
+  var rangeTip = function rangeTip() {
+    if (state.currDate.length >= 2) {
+      return Utils.isEqual(state.currDate[0], state.currDate[1]);
     }
 
-    return isActive(day, month);
+    return false;
   }; // 获取当前月数据
 
 
@@ -244,8 +323,11 @@ var CalendarItem = function CalendarItem(props) {
   }; // 获取日期状态
 
 
-  var getDaysStatus = function getDaysStatus(days, type) {
+  var getDaysStatus = function getDaysStatus(days, type, dateInfo) {
     // 修复：当某个月的1号是周日时，月份下方会空出来一行
+    var year = dateInfo.year,
+        month = dateInfo.month;
+
     if (type === 'prev' && days >= 7) {
       days -= 7;
     }
@@ -253,15 +335,47 @@ var CalendarItem = function CalendarItem(props) {
     return Array.from(Array(days), function (v, k) {
       return {
         day: k + 1,
-        type: type
+        type: type,
+        year: year,
+        month: month
       };
     });
+  }; // 获取上一个月的最后一周天数，填充当月空白
+
+
+  var getPreDaysStatus = function getPreDaysStatus(days, type, dateInfo, preCurrMonthDays) {
+    // 修复：当某个月的1号是周日时，月份下方会空出来一行
+    var year = dateInfo.year,
+        month = dateInfo.month;
+
+    if (type === 'prev' && days >= 7) {
+      days -= 7;
+    }
+
+    var months = Array.from(Array(preCurrMonthDays), function (v, k) {
+      return {
+        day: k + 1,
+        type: type,
+        year: year,
+        month: month
+      };
+    });
+    return months.slice(preCurrMonthDays - days);
   }; // 获取月数据
 
 
   var getMonth = function getMonth(curData, type) {
     var preMonthDays = Utils.getMonthPreDay(+curData[0], +curData[1]);
+    var preMonth = +curData[1] - 1;
+    var preYear = curData[0];
+
+    if (preMonth <= 0) {
+      preMonth = 12;
+      preYear += 1;
+    }
+
     var currMonthDays = Utils.getMonthDays(curData[0], curData[1]);
+    var preCurrMonthDays = Utils.getMonthDays("".concat(preYear), "".concat(preMonth));
     var title = {
       year: curData[0],
       month: curData[1]
@@ -269,8 +383,19 @@ var CalendarItem = function CalendarItem(props) {
     var monthInfo = {
       curData: curData,
       title: locale.calendaritem.monthTitle(title.year, title.month),
-      monthData: [].concat(_toConsumableArray(getDaysStatus(preMonthDays, 'prev')), _toConsumableArray(getDaysStatus(currMonthDays, 'curr')))
+      monthData: [].concat(_toConsumableArray(getPreDaysStatus(preMonthDays, 'prev', {
+        month: preMonth,
+        year: preYear
+      }, preCurrMonthDays)), _toConsumableArray(getDaysStatus(currMonthDays, 'curr', title)))
     };
+    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;
+    }
+
+    monthInfo.cssScrollHeight = cssScrollHeight;
 
     if (type === '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]))) {
@@ -278,227 +403,295 @@ var CalendarItem = function CalendarItem(props) {
       }
     } 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 {
-      setUnLoadPrev(true);
     }
 
     setMonthsData(state.monthsData);
-  }; // 监听月份滚动，改变月份标题
-
-
-  var loadScroll = function loadScroll() {
-    if (!props.poppable) {
-      return false;
-    }
-
-    requestAniFrame$1(function () {
-      if (weeksPanel !== null && weeksPanel !== void 0 && weeksPanel.current && monthsPanel !== null && monthsPanel !== void 0 && monthsPanel.current) {
-        var top = weeksPanel === null || weeksPanel === void 0 ? void 0 : weeksPanel.current.getBoundingClientRect().bottom;
-        var monthsDoms = monthsPanel.current.getElementsByClassName('calendar-month');
-
-        for (var i = 0; i < monthsDoms.length; i++) {
-          if (monthsDoms[i].getBoundingClientRect().top <= top && monthsDoms[i].getBoundingClientRect().bottom >= top) {
-            setYearMonthTitle(state.monthsData[i].title);
-          } else if (state.scrollDistance === 0) {
-            setYearMonthTitle(state.monthsData[0].title);
-          }
-        }
-      }
-    });
-  }; // 设置月份滚动距离和速度
-
-
-  var setTransform = function setTransform() {
-    var translateY = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    var type = arguments.length > 1 ? arguments[1] : undefined;
-    var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
+  };
 
-    if (monthsPanel !== null && monthsPanel !== void 0 && monthsPanel.current) {
-      if (type === 'end') {
-        monthsPanel.current.style.webkitTransition = "transform ".concat(time, "ms cubic-bezier(0.19, 1, 0.22, 1)");
-        clearTimeout(state.timer);
-        state.timer = setTimeout(function () {
-          loadScroll();
-        }, time);
-      } else {
-        monthsPanel.current.style.webkitTransition = '';
-        loadScroll();
+  var setDefaultRange = function setDefaultRange(monthsNum, current) {
+    var start = 0;
+    var end = 0;
+
+    if (monthsNum >= 3) {
+      if (current > 0 && current < monthsNum) {
+        start = current - 1;
+        end = current + 3;
+      } else if (current === 0) {
+        start = current;
+        end = current + 4;
+      } else if (current === monthsNum) {
+        start = current - 2;
+        end = current + 2;
       }
-
-      monthsPanel.current.style.webkitTransform = "translateY(".concat(translateY, "px)");
-      state.scrollDistance = translateY;
+    } else {
+      start = 0;
+      end = monthsNum + 2;
     }
-  }; // 计算滚动方向和距离
 
+    setMonthDefaultRange([start, end]);
+    setTranslateY(state.monthsData[start].cssScrollHeight);
+  };
 
-  var setMove = function setMove(move, type, time) {
-    var _months$current, _monthsPanel$current;
+  var mothsViewScroll = function mothsViewScroll(e) {
+    if (state.monthsData.length <= 1) {
+      return;
+    }
 
-    var updateMove = move + state.transformY;
-    var h = ((_months$current = months.current) === null || _months$current === void 0 ? void 0 : _months$current.offsetHeight) || 0;
-    var offsetHeight = ((_monthsPanel$current = monthsPanel.current) === null || _monthsPanel$current === void 0 ? void 0 : _monthsPanel$current.offsetHeight) || 0;
+    var target = e.target;
+    var currentScrollTop = target.scrollTop;
+    var current = Math.floor(currentScrollTop / state.avgHeight);
 
-    if (type === 'end') {
-      // 限定滚动距离
-      if (updateMove > 0) {
-        updateMove = 0;
+    if (current === 0) {
+      if (currentScrollTop >= state.monthsData[current + 1].cssScrollHeight) {
+        current += 1;
       }
-
-      if (updateMove < 0 && updateMove < -offsetHeight + h) {
-        updateMove = -offsetHeight + h;
+    } else if (current > 0 && current < state.monthsNum - 1) {
+      if (currentScrollTop >= state.monthsData[current + 1].cssScrollHeight) {
+        current += 1;
       }
 
-      if (offsetHeight <= h && state.monthsData.length === 1) {
-        updateMove = 0;
+      if (currentScrollTop < state.monthsData[current].cssScrollHeight) {
+        current -= 1;
       }
-
-      setTransform(updateMove, type, time);
     } else {
-      if (updateMove > 0 && updateMove > 100) {
-        updateMove = 100;
+      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 (updateMove < -offsetHeight + h - 100 && state.monthsData.length > 1) {
-        updateMove = -offsetHeight + h - 100;
+      if (current + 1 <= state.monthsNum && viewPosition >= state.monthsData[current + 1].cssScrollHeight + state.monthsData[current + 1].cssHeight) {
+        current += 1;
       }
 
-      if (updateMove < 0 && updateMove < -100 && state.monthsData.length === 1) {
-        updateMove = -100;
+      if (current >= 1 && currentScrollTop < state.monthsData[current - 1].cssScrollHeight) {
+        current -= 1;
       }
+    }
 
-      setTransform(updateMove);
+    if (state.currentIndex !== current) {
+      state.currentIndex = current;
+      setDefaultRange(state.monthsNum, current);
     }
-  };
 
-  var onTouchStart = function onTouchStart(event) {
-    event.stopPropagation();
-    var changedTouches = event.changedTouches[0];
-    state.touchParams.startY = changedTouches.pageY;
-    state.touchParams.startTime = event.timeStamp || Date.now();
-    state.transformY = state.scrollDistance;
+    setYearMonthTitle(state.monthsData[current].title);
   };
 
-  var onTouchMove = function onTouchMove(event) {
-    event.stopPropagation();
-    var changedTouches = event.changedTouches[0];
-    state.touchParams.lastY = changedTouches.pageY;
-    state.touchParams.lastTime = event.timeStamp || Date.now();
-    var move = state.touchParams.lastY - state.touchParams.startY;
-
-    if (Math.abs(move) < 5) {
-      return false;
-    }
+  var initData = function initData() {
+    // 初始化开始结束数据
+    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); // 根据是否存在默认时间，初始化当前日期
 
-    setMove(move);
-  };
+    if (defaultValue || Array.isArray(defaultValue) && defaultValue.length > 0) {
+      state.currDate = props.type !== 'one' ? _toConsumableArray(props.defaultValue) : props.defaultValue;
+    } // 判断时间范围内存在多少个月
 
-  var onTouchEnd = function onTouchEnd(event) {
-    var _months$current2, _monthsPanel$current2;
 
-    event.stopPropagation();
-    var changedTouches = event.changedTouches[0];
-    state.touchParams.lastY = changedTouches.pageY;
-    state.touchParams.lastTime = event.timeStamp || Date.now();
-    var move = state.touchParams.lastY - state.touchParams.startY;
+    var startDate = {
+      year: Number(state.startData[0]),
+      month: Number(state.startData[1])
+    };
+    var endDate = {
+      year: Number(state.endData[0]),
+      month: Number(state.endData[1])
+    };
+    var monthsNum = endDate.month - startDate.month;
 
-    if (Math.abs(move) < 5) {
-      return false;
+    if (endDate.year - startDate.year > 0) {
+      monthsNum += 12 * (endDate.year - startDate.year);
     }
 
-    var updateMove = move + state.transformY;
-    var h = ((_months$current2 = months.current) === null || _months$current2 === void 0 ? void 0 : _months$current2.offsetHeight) || 0;
-    var offsetHeight = ((_monthsPanel$current2 = monthsPanel.current) === null || _monthsPanel$current2 === void 0 ? void 0 : _monthsPanel$current2.offsetHeight) || 0;
+    if (monthsNum <= 0) {
+      monthsNum = 1;
+    } // 设置月份数据
+
+
+    getMonth(state.startData, 'next');
+    var i = 1;
 
-    if (updateMove > 0) {
-      getMonth(getCurrData('prev'), 'prev');
-    } else if (updateMove < 0 && updateMove < -offsetHeight + (Math.abs(move) > h ? Math.abs(move) : h) * 5) {
+    do {
       getMonth(getCurrData('next'), 'next');
+    } while (i++ < monthsNum);
 
-      if (Math.abs(move) >= 300) {
-        getMonth(getCurrData('next'), 'next');
-      }
-    }
+    state.monthsNum = monthsNum; // 日期转化为数组，限制初始日期。判断时间范围
 
-    var moveTime = state.touchParams.lastTime - state.touchParams.startTime;
+    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);
+        }
 
-    if (moveTime <= 300) {
-      move *= 2;
-      moveTime += 1000;
-      setMove(move, 'end', moveTime);
-    } else {
-      setMove(move, 'end');
-    }
-  };
+        if (propEndDate && Utils.compareDate(propEndDate, state.currDate[1])) {
+          state.currDate.splice(1, 1, propEndDate);
+        }
 
-  var initData = function initData() {
-    // 初始化开始结束数据
-    state.startData = startDate ? splitDate(startDate) : '';
-    state.endData = endDate ? splitDate(endDate) : ''; // 初始化当前日期
+        state.defaultData = [].concat(_toConsumableArray(splitDate(state.currDate[0])), _toConsumableArray(splitDate(state.currDate[1])));
+      }
+    } else if (props.type === 'multiple' && Array.isArray(state.currDate)) {
+      if (state.currDate.length > 0) {
+        var defaultArr = [];
+        var obj = {};
+        state.currDate.forEach(function (item) {
+          if (propStartDate && !Utils.compareDate(item, propStartDate) && propEndDate && !Utils.compareDate(propEndDate, item)) {
+            if (!Object.hasOwnProperty.call(obj, item)) {
+              defaultArr.push(item);
+              obj[item] = item;
+            }
+          }
+        });
+        state.currDate = [].concat(defaultArr);
+        state.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;
+      }
 
-    if (!defaultValue) {
-      state.currDate = state.isRange ? [Utils.date2Str(new Date()), Utils.getDay(1)] : Utils.date2Str(new Date());
-    } else {
-      state.currDate = state.isRange ? _toConsumableArray(defaultValue) : defaultValue;
-    } // 日期转化为数组
+      state.defaultData = _toConsumableArray(splitDate(state.currDate));
+    } // 设置默认可见区域
 
 
-    if (state.isRange && Array.isArray(state.currDate)) {
-      if (startDate && Utils.compareDate(state.currDate[0], startDate)) {
-        state.currDate.splice(0, 1, startDate);
-      }
+    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])) {
+          current = index;
+        }
+
+        if (props.type === 'range') {
+          if (item.title === locale.calendaritem.monthTitle(state.defaultData[3], state.defaultData[4])) {
+            lastCurrent = index;
+          }
+        }
+      });
+    }
 
-      if (endDate && Utils.compareDate(endDate, state.currDate[1])) {
-        state.currDate.splice(1, 1, endDate);
+    setDefaultRange(monthsNum, current);
+    state.currentIndex = current;
+    setYearMonthTitle(state.monthsData[state.currentIndex].title);
+
+    if (state.defaultData.length > 0) {
+      // 设置当前选中日期
+      if (type === 'range') {
+        chooseDay({
+          day: state.defaultData[2],
+          type: 'curr'
+        }, state.monthsData[state.currentIndex], true);
+        chooseDay({
+          day: state.defaultData[5],
+          type: 'curr'
+        }, state.monthsData[lastCurrent], true);
+      } else if (type === 'multiple') {
+        _toConsumableArray(state.currDate).forEach(function (item) {
+          var dateArr = splitDate(item);
+          var current = state.currentIndex;
+          state.monthsData.forEach(function (item, index) {
+            if (item.title === locale.calendaritem.monthTitle(dateArr[0], dateArr[1])) {
+              current = index;
+            }
+          });
+          chooseDay({
+            day: dateArr[2],
+            type: 'curr'
+          }, state.monthsData[current], true);
+        });
+      } else {
+        chooseDay({
+          day: state.defaultData[2],
+          type: 'curr'
+        }, state.monthsData[state.currentIndex], true);
       }
+    }
 
-      state.defaultData = [].concat(_toConsumableArray(splitDate(state.currDate[0])), _toConsumableArray(splitDate(state.currDate[1])));
-    } else {
-      if (startDate && Utils.compareDate(state.currDate, startDate)) {
-        state.currDate = startDate;
-      } else if (endDate && !Utils.compareDate(state.currDate, endDate)) {
-        state.currDate = endDate;
+    var lastItem = state.monthsData[state.monthsData.length - 1];
+    var containerHeight = lastItem.cssHeight + lastItem.cssScrollHeight;
+    requestAniFrame$1(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));
+  };
 
-      state.defaultData = _toConsumableArray(splitDate(state.currDate));
-    }
+  var resetRender = function resetRender() {
+    state.chooseData.splice(0);
+    state.monthsData.splice(0);
+    initData();
+  }; // 暴露出的API
 
-    getMonth(state.defaultData, 'next');
-    setYearMonthTitle(state.monthsData[0].title);
-    var i = 1;
 
-    do {
-      getMonth(getCurrData('next'), 'next');
-    } while (i++ < 4);
-
-    if (state.isRange) {
-      chooseDay({
-        day: state.defaultData[2],
-        type: 'curr'
-      }, state.monthsData[0], true);
-      chooseDay({
-        day: state.defaultData[5],
-        type: 'curr'
-      }, state.monthsData[0], true, true);
-    } else {
-      chooseDay({
-        day: state.defaultData[2],
-        type: 'curr'
-      }, state.monthsData[0], true);
+  var scrollToDate = function scrollToDate(date) {
+    if (Utils.compareDate(date, state.propStartDate)) {
+      date = state.propStartDate;
+    } else if (!Utils.compareDate(date, state.propEndDate)) {
+      date = state.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) {
+            var flag = 0;
+            var interval = setInterval(function () {
+              flag++;
+
+              if (months.current) {
+                var offset = distance / 10;
+                months.current.scrollTop += offset;
+              }
+
+              if (flag >= 10) {
+                clearInterval(interval);
+
+                if (months.current) {
+                  months.current.scrollTop = state.monthsData[index].cssScrollHeight;
+                }
+              }
+            }, 40);
+          } else {
+            months.current.scrollTop = state.monthsData[index].cssScrollHeight;
+          }
+        }
+      }
+    });
   };
 
   useEffect(function () {
     initData();
   }, []);
+  useEffect(function () {
+    poppable && resetRender();
+  }, [defaultValue]);
+  React__default.useImperativeHandle(ref, function () {
+    return {
+      scrollToDate: scrollToDate
+    };
+  });
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: classes
   }, React__default.createElement("div", {
     className: headerClasses
-  }, poppable ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  }, showTitle && React__default.createElement("div", {
     className: "calendar-title"
-  }, locale.calendaritem.title), React__default.createElement("div", {
+  }, title || locale.calendaritem.title), onBtn && React__default.createElement("div", {
+    className: "calendar-top-slot"
+  }, onBtn()), showSubTitle && React__default.createElement("div", {
     className: "calendar-curr-month"
-  }, yearMonthTitle)) : '', React__default.createElement("div", {
+  }, yearMonthTitle), React__default.createElement("div", {
     className: "calendar-weeks",
     ref: weeksPanel
   }, weeks.map(function (item) {
@@ -508,16 +701,18 @@ var CalendarItem = function CalendarItem(props) {
     }, item);
   }))), React__default.createElement("div", {
     className: "nut-calendar-content",
-    onTouchStart: onTouchStart,
-    onTouchMove: onTouchMove,
-    onTouchEnd: onTouchEnd,
+    onScroll: mothsViewScroll,
     ref: months
   }, React__default.createElement("div", {
     className: "calendar-months-panel",
     ref: monthsPanel
   }, React__default.createElement("div", {
-    className: "calendar-loading-tip"
-  }, !unLoadPrev ? locale.calendaritem.loadPreviousMonth : locale.calendaritem.noEarlierMonth), monthsData.map(function (month, key) {
+    className: "viewArea",
+    ref: viewArea,
+    style: {
+      transform: "translateY(".concat(translateY, "px)")
+    }
+  }, state.monthsData.slice(monthDefaultRange[0], monthDefaultRange[1]).map(function (month, key) {
     return React__default.createElement("div", {
       className: "calendar-month",
       key: key
@@ -527,31 +722,34 @@ var CalendarItem = function CalendarItem(props) {
       className: "calendar-month-con"
     }, React__default.createElement("div", {
       className: monthitemclasses
-    }, month.monthData && month.monthData.map(function (day, index) {
+    }, month.monthData.map(function (day, i) {
       return React__default.createElement("div", {
         className: ['calendar-month-day', getClass(day, month)].join(' '),
-        key: index,
         onClick: function onClick() {
           chooseDay(day, month);
-        }
+        },
+        key: i
       }, React__default.createElement("div", {
         className: "calendar-day"
-      }, day.type === 'curr' ? day.day : ''), isCurrDay(month, day.day) ? React__default.createElement("div", {
-        className: "calendar-curr-tips"
-      }, locale.calendaritem.today) : '', isStartTip(day, month) ? React__default.createElement("div", {
-        className: "calendar-day-tip"
-      }, locale.calendaritem.start) : '', isEndTip(day, month) ? React__default.createElement("div", {
+      }, 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"
+      }, locale.calendaritem.today), isStartTip(day, month) && React__default.createElement("div", {
+        className: "calendar-day-tip ".concat(rangeTip() ? 'calendar-curr-tips-top' : '')
+      }, startText || locale.calendaritem.start), isEndTip(day, month) && React__default.createElement("div", {
         className: "calendar-day-tip"
-      }, locale.calendaritem.end) : '');
+      }, endText || locale.calendaritem.end));
     }))));
-  }))), poppable && !isAutoBackFill ? React__default.createElement("div", {
+  })))), poppable && !isAutoBackFill ? React__default.createElement("div", {
     className: "nut-calendar-footer"
   }, React__default.createElement("div", {
     className: "calendar-confirm-btn",
     onClick: confirm
-  }, locale.confirm)) : ''));
-};
-
+  }, confirmText || locale.confirm)) : ''));
+});
 CalendarItem.defaultProps = defaultProps;
 CalendarItem.displayName = 'NutCalendarItem';
 export { CalendarItem as default };