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

package/dist/esm/CalendarItem.js

@@ -1,557 +1,614 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React__default, { useState, useRef, useEffect } from 'react';
-import classNames from 'classnames';
-import { c as cn } from './bem-893ad28d.js';
-import { U as Utils } from './date-710f8c7c.js';
-import { useConfig } from './ConfigProvider.js';
-import '@bem-react/classname';
-
-function requestAniFrame() {
-  if (typeof window !== 'undefined') {
-    return window.requestAnimationFrame || function (callback) {
-      window.setTimeout(callback, 1000 / 60);
-    };
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
-
-  return function (callback) {
-    setTimeout(callback, 1000 / 60);
-  };
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
 }
-
-var requestAniFrame$1 = requestAniFrame();
+import React__default, { useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import { U as Utils } from "./date.js";
+import { r as requestAniFrame } from "./raf.js";
+import { useConfig } from "./ConfigProvider.js";
+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),
-  onChoose: function onChoose(data) {},
-  onUpdate: function onUpdate() {},
-  onClose: function onClose() {}
+  showToday: true,
+  startText: "",
+  endText: "",
+  confirmText: "",
+  showTitle: true,
+  showSubTitle: true,
+  scrollAnimation: true,
+  renderHeaderButtons: void 0,
+  renderDay: void 0,
+  renderDayTop: void 0,
+  renderDayBottom: void 0,
+  onConfirm: function onConfirm(data) {
+  },
+  onUpdate: function onUpdate() {
+  },
+  onClickDay: function onClickDay(data) {
+  },
+  onPageChange: function onPageChange(data) {
+  }
 };
-
-var CalendarItem = function CalendarItem(props) {
+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,
-      startDate = _defaultProps$props.startDate,
-      endDate = _defaultProps$props.endDate,
-      onChoose = _defaultProps$props.onChoose,
-      onUpdate = _defaultProps$props.onUpdate,
-      onClose = _defaultProps$props.onClose;
-
+  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 _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      yearMonthTitle = _useState2[0],
-      setYearMonthTitle = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      unLoadPrev = _useState4[0],
-      setUnLoadPrev = _useState4[1];
-
-  var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      monthsData = _useState6[0],
-      setMonthsData = _useState6[1];
-
-  var _useState7 = useState({
-    currDate: '',
-    touchParams: {
-      startY: 0,
-      endY: 0,
-      startTime: 0,
-      endTime: 0,
-      lastY: 0,
-      lastTime: 0
-    },
-    transformY: 0,
-    translateY: 0,
-    scrollDistance: 0,
-    defaultData: [],
-    chooseData: [],
-    monthsData: [],
-    dayPrefix: 'calendar-month-day',
-    startData: '',
-    endData: '',
-    isRange: type === 'range',
-    timer: 0
-  }),
-      _useState8 = _slicedToArray(_useState7, 1),
-      state = _useState8[0];
-
-  var weeksPanel = useRef(null);
-  var months = useRef(null);
-  var monthsPanel = useRef(null);
-  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 splitDate = function splitDate(date) {
-    return date.split('-');
+  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 isStart = function isStart(currDate) {
-    return Utils.isEqual(state.currDate[0], 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 isEnd = function isEnd(currDate) {
-    return Utils.isEqual(state.currDate[1], 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 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 getCurrDate = function getCurrDate2(day, month) {
+    return "".concat(month.curData[0], "/").concat(month.curData[1], "/").concat(Utils.getNumTwoBit(+day.day));
   };
-
-  var getClass = function getClass(day, month, isRange) {
-    var currDate = getCurrDate(day, month, isRange);
-
-    if (day.type === 'curr') {
-      if (!state.isRange && Utils.isEqual(state.currDate, currDate) || state.isRange && (isStart(currDate) || isEnd(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 (startDate && Utils.compareDate(currDate, startDate) || endDate && Utils.compareDate(endDate, 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 (state.isRange && 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");
+    return "".concat(dayPrefix, "-disabled");
   };
-
-  var isActive = function isActive(day, month) {
-    return state.isRange && day.type === 'curr' && getClass(day, month) === 'calendar-month-day-active';
+  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 isCurrDay = function isCurrDay(month, day) {
-    var date = "".concat(month.curData[0], "-").concat(month.curData[1], "-").concat(day);
-    return Utils.isEqual(date, Utils.date2Str(new Date()));
+  var isStart = function isStart2(d) {
+    return Utils.isEqual(currentDate[0], d);
   };
-
-  var confirm = function confirm() {
-    if (state.isRange && state.chooseData.length === 2 || !state.isRange) {
-      onChoose && onChoose(state.chooseData);
-
-      if (poppable) {
-        onUpdate && onUpdate();
-      }
-    }
+  var isEnd = function isEnd2(d) {
+    return Utils.isEqual(currentDate[1], d);
   };
-
-  var chooseDay = function chooseDay(day, month, isFirst, isRange) {
-    if (getClass(day, month, isRange) !== "".concat(state.dayPrefix, "-disabled")) {
-      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) {
-          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[3], days[3])) {
-          state.chooseData = [_toConsumableArray(state.chooseData), _toConsumableArray(days)];
-        } else {
-          state.chooseData = [_toConsumableArray(days), _toConsumableArray(state.chooseData)];
-        }
-      }
-
-      if (isAutoBackFill && !isFirst) {
-        confirm();
-      }
-
-      setMonthsData(state.monthsData.slice());
-    }
+  var isStartTip = function isStartTip2(day, month) {
+    return type === "range" && day.type === "active" && isStart(getCurrDate(day, month));
   };
-
-  var isStartTip = function isStartTip(day, month) {
-    if (isActive(day, month)) {
-      return isStart(getCurrDate(day, month));
-    }
-
-    return false;
-  }; // 是否有结束提示
-
-
-  var isEndTip = function isEndTip(day, month) {
-    if (isStartTip(day, month)) {
-      return false;
-    }
-
-    return isActive(day, month);
-  }; // 获取当前月数据
-
-
-  var getCurrData = function getCurrData(type) {
-    var monthData = type === 'prev' ? state.monthsData[0] : state.monthsData[state.monthsData.length - 1];
+  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 (type) {
-      case 'prev':
+    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':
+      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 getDaysStatus(days, type) {
-    // 修复：当某个月的1号是周日时，月份下方会空出来一行
-    if (type === 'prev' && days >= 7) {
+  };
+  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;
     }
-
-    return Array.from(Array(days), function (v, k) {
+    var months = Array.from(Array(preCurrMonthDays), function(v, k) {
       return {
         day: k + 1,
-        type: type
+        type: type2,
+        year,
+        month
       };
     });
-  }; // 获取月数据
-
-
-  var getMonth = function getMonth(curData, type) {
+    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 title = {
-      year: curData[0],
-      month: curData[1]
-    };
+    var preCurrMonthDays = Utils.getMonthDays("".concat(preYear), "".concat(preMonth));
     var monthInfo = {
-      curData: curData,
-      title: locale.calendaritem.monthTitle(title.year, title.month),
-      monthData: [].concat(_toConsumableArray(getDaysStatus(preMonthDays, 'prev')), _toConsumableArray(getDaysStatus(currMonthDays, 'curr')))
+      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])))
     };
-
-    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]))) {
-        state.monthsData.push(monthInfo);
+    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);
+      }
+    } 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);
+  };
+  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;
+    onPageChange2 && onPageChange2([year, month, "".concat(year, "-").concat(month)]);
+    setYearMonthTitle(currentMonthsData.title);
+  };
+  var setDefaultRange = function setDefaultRange2(monthNum, current) {
+    var start = 0;
+    var end = 0;
+    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 === monthNum) {
+        start = current - 2;
+        end = current + 2;
       }
-    } 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);
+      start = 0;
+      end = monthNum + 2;
     }
-
-    setMonthsData(state.monthsData);
-  }; // 监听月份滚动，改变月份标题
-
-
-  var loadScroll = function loadScroll() {
-    if (!props.poppable) {
-      return false;
+    setMonthDefaultRange([start, end]);
+    setTranslateY(monthsData[start].scrollTop);
+    setReachedYearMonthInfo(current);
+  };
+  var monthsViewScroll = function monthsViewScroll2(e) {
+    if (monthsData.length <= 1) {
+      return;
     }
-
-    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 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;
       }
-    });
-  }; // 设置月份滚动距离和速度
-
-
-  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();
+    } 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;
       }
-
-      monthsPanel.current.style.webkitTransform = "translateY(".concat(translateY, "px)");
-      state.scrollDistance = translateY;
     }
-  }; // 计算滚动方向和距离
-
-
-  var setMove = function setMove(move, type, time) {
-    var _months$current, _monthsPanel$current;
-
-    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;
-
-    if (type === 'end') {
-      // 限定滚动距离
-      if (updateMove > 0) {
-        updateMove = 0;
+    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);
+    }
+    if (monthNum <= 0) {
+      monthNum = 1;
+    }
+    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;
       }
-
-      if (updateMove < 0 && updateMove < -offsetHeight + h) {
-        updateMove = -offsetHeight + h;
+    });
+    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, currentDate[1])) {
+          currentDate.splice(1, 1, propEndDate);
+        }
+        defaultData = [].concat(_toConsumableArray(splitDate(currentDate[0])), _toConsumableArray(splitDate(currentDate[1])));
       }
-
-      if (offsetHeight <= h && state.monthsData.length === 1) {
-        updateMove = 0;
+    } else if (props.type === "multiple" && Array.isArray(currentDate)) {
+      if (currentDate.length > 0) {
+        var defaultArr = [];
+        var obj = {};
+        currentDate.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;
+            }
+          }
+        });
+        currentDate.splice(0) && currentDate.push.apply(currentDate, defaultArr);
+        defaultData = _toConsumableArray(splitDate(defaultArr[0]));
       }
-
-      setTransform(updateMove, type, time);
-    } else {
-      if (updateMove > 0 && updateMove > 100) {
-        updateMove = 100;
+    } 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 = [];
       }
-
-      if (updateMove < -offsetHeight + h - 100 && state.monthsData.length > 1) {
-        updateMove = -offsetHeight + h - 100;
+    }
+    var current = 0;
+    var lastCurrent = 0;
+    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 === monthTitle(defaultData[3], defaultData[4])) {
+            lastCurrent = index;
+          }
+        }
+      });
+    } 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;
+      });
+      if (currentYearMonthIndex > -1) {
+        current = currentYearMonthIndex;
       }
-
-      if (updateMove < 0 && updateMove < -100 && state.monthsData.length === 1) {
-        updateMove = -100;
+    }
+    if (defaultData.length > 0) {
+      if (type === "range") {
+        chooseDay({
+          day: defaultData[2],
+          type: "active"
+        }, monthsData[current], true);
+        chooseDay({
+          day: defaultData[5],
+          type: "active"
+        }, monthsData[lastCurrent], true);
+      } else if (type === "multiple") {
+        _toConsumableArray(currentDate).forEach(function(item) {
+          var dateArr = splitDate(item);
+          var currentIndex = current;
+          monthsData.forEach(function(item2, index) {
+            if (item2.title === monthTitle(dateArr[0], dateArr[1])) {
+              currentIndex = index;
+            }
+          });
+          chooseDay({
+            day: dateArr[2],
+            type: "active"
+          }, monthsData[currentIndex], true);
+        });
+      } else {
+        chooseDay({
+          day: defaultData[2],
+          type: "active"
+        }, monthsData[current], true);
       }
-
-      setTransform(updateMove);
     }
+    return 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;
+  var initData = function initData2() {
+    var monthNum = getMonthNum();
+    getMonthsData(monthNum);
+    var current = renderCurrentDate();
+    setDefaultRange(monthNum, current);
+    requestAniFrameFunc(current, monthNum);
   };
-
-  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;
-    }
-
-    setMove(move);
+  var resetRender = function resetRender2() {
+    state.currDateArray.splice(0);
+    monthsData.splice(0);
+    initData();
   };
-
-  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;
-
-    if (Math.abs(move) < 5) {
-      return false;
+  var scrollToDate = function scrollToDate2(date) {
+    if (Utils.compareDate(date, propStartDate)) {
+      date = propStartDate;
+    } else if (!Utils.compareDate(date, propEndDate)) {
+      date = propEndDate;
     }
-
-    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 (updateMove > 0) {
-      getMonth(getCurrData('prev'), 'prev');
-    } else if (updateMove < 0 && updateMove < -offsetHeight + (Math.abs(move) > h ? Math.abs(move) : h) * 5) {
-      getMonth(getCurrData('next'), 'next');
-
-      if (Math.abs(move) >= 300) {
-        getMonth(getCurrData('next'), 'next');
+    var dateArr = splitDate(date);
+    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 (monthsRef.current) {
+                var offset = distance / 10;
+                monthsRef.current.scrollTop += offset;
+              }
+              if (flag >= 10) {
+                clearInterval(interval);
+                if (monthsRef.current) {
+                  monthsRef.current.scrollTop = currTop;
+                }
+              }
+            }, 40);
+          } else {
+            monthsRef.current.scrollTop = currTop;
+          }
+        }
+      }
+    });
+  };
+  useEffect(function() {
+    initData();
+  }, []);
+  useEffect(function() {
+    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 moveTime = state.touchParams.lastTime - state.touchParams.startTime;
-
-    if (moveTime <= 300) {
-      move *= 2;
-      moveTime += 1000;
-      setMove(move, 'end', moveTime);
-    } else {
-      setMove(move, 'end');
     }
   };
-
-  var initData = function initData() {
-    // 初始化开始结束数据
-    state.startData = startDate ? splitDate(startDate) : '';
-    state.endData = endDate ? splitDate(endDate) : ''; // 初始化当前日期
-
-    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;
-    } // 日期转化为数组
-
-
-    if (state.isRange && Array.isArray(state.currDate)) {
-      if (startDate && Utils.compareDate(state.currDate[0], startDate)) {
-        state.currDate.splice(0, 1, startDate);
+  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)];
       }
-
-      if (endDate && Utils.compareDate(endDate, state.currDate[1])) {
-        state.currDate.splice(1, 1, endDate);
+    } 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));
       }
-
-      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;
-      }
-
-      state.defaultData = _toConsumableArray(splitDate(state.currDate));
+      setCurrentDate(days[3]);
+      state.currDateArray = _toConsumableArray(days);
     }
-
-    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);
+    if (!isFirst) {
+      onClickDay2 && onClickDay2(state.currDateArray);
+      if (autoBackfill || !popup) {
+        confirm();
+      }
     }
+    setMonthsData(monthsData.slice());
   };
-
-  useEffect(function () {
-    initData();
-  }, []);
   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", {
-    className: "calendar-title"
-  }, locale.calendaritem.title), React__default.createElement("div", {
-    className: "calendar-curr-month"
-  }, yearMonthTitle)) : '', React__default.createElement("div", {
-    className: "calendar-weeks",
+  }, 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) {
+  }, 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",
-    onTouchStart: onTouchStart,
-    onTouchMove: onTouchMove,
-    onTouchEnd: onTouchEnd,
-    ref: months
+    className: "".concat(classPrefix, "-content"),
+    onScroll: monthsViewScroll,
+    ref: monthsRef
   }, React__default.createElement("div", {
-    className: "calendar-months-panel",
+    className: "".concat(classPrefix, "-pannel"),
     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: viewAreaRef,
+    style: {
+      transform: "translateY(".concat(translateY, "px)")
+    }
+  }, monthsData.slice(monthDefaultRange[0], monthDefaultRange[1]).map(function(month, key) {
     return React__default.createElement("div", {
-      className: "calendar-month",
-      key: key
+      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
-    }, month.monthData && month.monthData.map(function (day, index) {
+      className: "".concat(classPrefix, "-days")
+    }, month.monthData.map(function(day, i) {
       return React__default.createElement("div", {
-        className: ['calendar-month-day', getClass(day, month)].join(' '),
-        key: index,
+        className: ["".concat(classPrefix, "-day"), getClasses(day, month)].join(" "),
         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", {
-        className: "calendar-day-tip"
-      }, locale.calendaritem.end) : '');
-    }))));
-  }))), poppable && !isAutoBackFill ? 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
-  }, locale.confirm)) : ''));
-};
-
+  }, confirmText || locale.confirm)) : ""));
+});
 CalendarItem.defaultProps = defaultProps;
-CalendarItem.displayName = 'NutCalendarItem';
-export { CalendarItem as default };
+CalendarItem.displayName = "NutCalendarItem";
+export {
+  CalendarItem as default
+};