@nutui/nutui-react 1.5.2-beta.0 → 1.5.2-beta.2

package/dist/esm/CalendarItem.js

@@ -0,0 +1,676 @@
+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-3b438e61.js';
+import { U as Utils } from './date-c7aad4c0.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);
+    };
+  }
+  return function (callback) {
+    setTimeout(callback, 1000 / 60);
+  };
+}
+var requestAniFrame$1 = requestAniFrame();
+var defaultProps = {
+  type: 'one',
+  isAutoBackFill: false,
+  poppable: true,
+  visible: false,
+  title: '日历选择',
+  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() {},
+  onSelected: function onSelected(data) {},
+  onYearMonthChange: function onYearMonthChange(data) {}
+};
+var CalendarItem = React__default.forwardRef(function (props, ref) {
+  var _classNames, _classNames2;
+  var _useConfig = useConfig(),
+    locale = _useConfig.locale;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+    type = _defaultProps$props.type,
+    isAutoBackFill = _defaultProps$props.isAutoBackFill,
+    poppable = _defaultProps$props.poppable,
+    title = _defaultProps$props.title,
+    defaultValue = _defaultProps$props.defaultValue,
+    showToday = _defaultProps$props.showToday,
+    startText = _defaultProps$props.startText,
+    endText = _defaultProps$props.endText,
+    confirmText = _defaultProps$props.confirmText,
+    showTitle = _defaultProps$props.showTitle,
+    showSubTitle = _defaultProps$props.showSubTitle,
+    toDateAnimation = _defaultProps$props.toDateAnimation,
+    onBtn = _defaultProps$props.onBtn,
+    onDay = _defaultProps$props.onDay,
+    onTopInfo = _defaultProps$props.onTopInfo,
+    onBottomInfo = _defaultProps$props.onBottomInfo,
+    onChoose = _defaultProps$props.onChoose,
+    onUpdate = _defaultProps$props.onUpdate,
+    onSelected = _defaultProps$props.onSelected,
+    onYearMonthChange = _defaultProps$props.onYearMonthChange;
+  var weeks = locale.calendaritem.weekdays;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    yearMonthTitle = _useState2[0],
+    setYearMonthTitle = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    monthsData = _useState4[0],
+    setMonthsData = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    translateY = _useState6[0],
+    setTranslateY = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    monthDefaultRange = _useState8[0],
+    setMonthDefaultRange = _useState8[1];
+  var _useState9 = useState({
+      currDate: '',
+      propStartDate: '',
+      propEndDate: '',
+      unLoadPrev: false,
+      touchParams: {
+        startY: 0,
+        endY: 0,
+        startTime: 0,
+        endTime: 0,
+        lastY: 0,
+        lastTime: 0
+      },
+      transformY: 0,
+      scrollDistance: 0,
+      defaultData: [],
+      chooseData: [],
+      monthsData: [],
+      dayPrefix: 'calendar-month-day',
+      startData: '',
+      endData: '',
+      isRange: props.type === 'range',
+      timer: 0,
+      currentIndex: 0,
+      avgHeight: 0,
+      monthsNum: 0
+    }),
+    _useState10 = _slicedToArray(_useState9, 1),
+    state = _useState10[0];
+  var weeksPanel = useRef(null);
+  var months = useRef(null);
+  var monthsPanel = useRef(null);
+  var viewArea = useRef(null);
+  var viewHeight = 0;
+  var b = cn('calendar');
+  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(b(''), "-tile"), !poppable), _defineProperty(_classNames, "".concat(b(''), "-nofooter"), !!isAutoBackFill), _classNames), b(''));
+  var headerClasses = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(b(''), "-header"), true), _defineProperty(_classNames2, "".concat(b(''), "-header-tile"), !poppable), _classNames2));
+  var monthitemclasses = classNames(_defineProperty({
+    'calendar-month-item': true
+  }, "".concat(type === 'range' ? 'month-item-range' : ''), true));
+  var splitDate = function splitDate(date) {
+    return date.split('-');
+  };
+  var isStart = function isStart(currDate) {
+    return Utils.isEqual(state.currDate[0], currDate);
+  };
+  var isEnd = function isEnd(currDate) {
+    return Utils.isEqual(state.currDate[1], currDate);
+  };
+  var isMultiple = function isMultiple(currDate) {
+    if (state.currDate.length > 0) {
+      return state.currDate.some(function (item) {
+        return Utils.isEqual(item, currDate);
+      });
+    }
+    return false;
+  };
+  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 (Utils.isEqual(state.currDate, currDate) || type === 'range' && (isStart(currDate) || isEnd(currDate)) || type === 'multiple' && isMultiple(currDate)) {
+        return "".concat(state.dayPrefix, "-active");
+      }
+      if (state.propStartDate && Utils.compareDate(currDate, state.propStartDate) || state.propEndDate && Utils.compareDate(state.propEndDate, currDate)) {
+        return "".concat(state.dayPrefix, "-disabled");
+      }
+      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");
+      }
+      return null;
+    }
+    return "".concat(state.dayPrefix, "-disabled");
+  };
+  var isActive = function isActive(day, month) {
+    return state.isRange && day.type === 'curr' && getClass(day, month) === 'calendar-month-day-active';
+  };
+  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 confirm = function confirm() {
+    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();
+      }
+    }
+  };
+  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[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 (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]);
+        } else {
+          Array.isArray(state.currDate) && state.currDate.unshift(days[3]);
+        }
+        if (state.chooseData.length === 2 || !state.chooseData.length) {
+          state.chooseData = [_toConsumableArray(days)];
+        } else if (Utils.compareDate(state.chooseData[0][3], days[3])) {
+          state.chooseData = [].concat(_toConsumableArray(state.chooseData), [_toConsumableArray(days)]);
+        } else {
+          state.chooseData = [_toConsumableArray(days)].concat(_toConsumableArray(state.chooseData));
+        }
+      } else {
+        state.currDate = days[3];
+        state.chooseData = _toConsumableArray(days);
+      }
+      if (!isFirst) {
+        // 点击日期 触发
+        onSelected && onSelected(state.chooseData);
+        if (isAutoBackFill || !poppable) {
+          confirm();
+        }
+      }
+      setMonthsData(state.monthsData.slice());
+    }
+  };
+  var isStartTip = function isStartTip(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 rangeTip = function rangeTip() {
+    if (state.currDate.length >= 2) {
+      return Utils.isEqual(state.currDate[0], state.currDate[1]);
+    }
+    return false;
+  };
+  // 获取当前月数据
+  var getCurrData = function getCurrData(type) {
+    var monthData = type === 'prev' ? state.monthsData[0] : state.monthsData[state.monthsData.length - 1];
+    var year = parseInt(monthData.curData[0]);
+    var month = parseInt(monthData.curData[1].toString().replace(/^0/, ''));
+    switch (type) {
+      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 getDaysStatus(days, type, dateInfo) {
+    // 修复：当某个月的1号是周日时，月份下方会空出来一行
+    var year = dateInfo.year,
+      month = dateInfo.month;
+    if (type === 'prev' && days >= 7) {
+      days -= 7;
+    }
+    return Array.from(Array(days), function (v, k) {
+      return {
+        day: k + 1,
+        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]
+    };
+    var monthInfo = {
+      curData: curData,
+      title: locale.calendaritem.monthTitle(title.year, title.month),
+      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]))) {
+        state.monthsData.push(monthInfo);
+      }
+    } else if (!state.startData || !Utils.compareDate("".concat(curData[0], "-").concat(curData[1], "-").concat(curData[2]), "".concat(state.startData[0], "-").concat(state.startData[1], "-01"))) {
+      state.monthsData.unshift(monthInfo);
+    }
+    setMonthsData(state.monthsData);
+  };
+  var setReachedYearMonthInfo = function setReachedYearMonthInfo() {
+    var currentMonthsData = state.monthsData[state.currentIndex];
+    var _currentMonthsData$cu = _slicedToArray(currentMonthsData.curData, 2),
+      year = _currentMonthsData$cu[0],
+      month = _currentMonthsData$cu[1];
+    if (currentMonthsData.title === yearMonthTitle) return;
+    onYearMonthChange && onYearMonthChange([year, month, "".concat(year, "-").concat(month)]);
+    setYearMonthTitle(currentMonthsData.title);
+  };
+  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;
+      }
+    } else {
+      start = 0;
+      end = monthsNum + 2;
+    }
+    setMonthDefaultRange([start, end]);
+    setTranslateY(state.monthsData[start].cssScrollHeight);
+  };
+  var monthsViewScroll = function monthsViewScroll(e) {
+    if (state.monthsData.length <= 1) {
+      return;
+    }
+    var target = e.target;
+    var currentScrollTop = target.scrollTop;
+    var current = Math.floor(currentScrollTop / state.avgHeight);
+    if (current === 0) {
+      if (currentScrollTop >= state.monthsData[current + 1].cssScrollHeight) {
+        current += 1;
+      }
+    } else if (current > 0 && current < state.monthsNum - 1) {
+      if (currentScrollTop >= state.monthsData[current + 1].cssScrollHeight) {
+        current += 1;
+      }
+      if (currentScrollTop < state.monthsData[current].cssScrollHeight) {
+        current -= 1;
+      }
+    } else {
+      var viewPosition = Math.round(currentScrollTop + viewHeight);
+      if (viewPosition < state.monthsData[current].cssScrollHeight + state.monthsData[current].cssHeight && currentScrollTop > state.monthsData[current - 1].cssScrollHeight) {
+        current -= 1;
+      }
+      if (current + 1 <= state.monthsNum && viewPosition >= state.monthsData[current + 1].cssScrollHeight + state.monthsData[current + 1].cssHeight) {
+        current += 1;
+      }
+      if (current >= 1 && currentScrollTop < state.monthsData[current - 1].cssScrollHeight) {
+        current -= 1;
+      }
+    }
+    if (state.currentIndex !== current) {
+      state.currentIndex = current;
+      setDefaultRange(state.monthsNum, current);
+    }
+    setReachedYearMonthInfo();
+  };
+  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);
+    // 根据是否存在默认时间，初始化当前日期
+    if (defaultValue || Array.isArray(defaultValue) && defaultValue.length > 0) {
+      state.currDate = props.type !== 'one' ? _toConsumableArray(props.defaultValue) : props.defaultValue;
+    }
+    // 判断时间范围内存在多少个月
+    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 (endDate.year - startDate.year > 0) {
+      monthsNum += 12 * (endDate.year - startDate.year);
+    }
+    if (monthsNum <= 0) {
+      monthsNum = 1;
+    }
+    // 设置月份数据
+    getMonth(state.startData, 'next');
+    var i = 1;
+    do {
+      getMonth(getCurrData('next'), 'next');
+    } while (i++ < monthsNum);
+    state.monthsNum = monthsNum;
+    // 日期转化为数组，限制初始日期。判断时间范围
+    if (type === 'range' && Array.isArray(state.currDate)) {
+      if (state.currDate.length > 0) {
+        if (propStartDate && Utils.compareDate(state.currDate[0], propStartDate)) {
+          state.currDate.splice(0, 1, propStartDate);
+        }
+        if (propEndDate && Utils.compareDate(propEndDate, state.currDate[1])) {
+          state.currDate.splice(1, 1, propEndDate);
+        }
+        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;
+      }
+      state.defaultData = _toConsumableArray(splitDate(state.currDate));
+    }
+    // 设置默认可见区域
+    var current = 0;
+    var lastCurrent = 0;
+    if (state.defaultData.length > 0) {
+      state.monthsData.forEach(function (item, index) {
+        if (item.title === locale.calendaritem.monthTitle(state.defaultData[0], state.defaultData[1])) {
+          current = index;
+        }
+        if (props.type === 'range') {
+          if (item.title === locale.calendaritem.monthTitle(state.defaultData[3], state.defaultData[4])) {
+            lastCurrent = index;
+          }
+        }
+      });
+    } else {
+      // 当 defaultValue 为空时，如果月份列表包含当月，则默认定位到当月
+      var currentYear = new Date().getFullYear();
+      var currentMonth = new Date().getMonth() + 1;
+      var currentYearMonthIndex = state.monthsData.findIndex(function (item) {
+        return +item.curData[0] === currentYear && +item.curData[1] === currentMonth;
+      });
+      if (currentYearMonthIndex > -1) {
+        current = currentYearMonthIndex;
+      }
+    }
+    setDefaultRange(monthsNum, current);
+    state.currentIndex = current;
+    setReachedYearMonthInfo();
+    if (state.defaultData.length > 0) {
+      // 设置当前选中日期
+      if (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);
+      }
+    }
+    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));
+  };
+  var resetRender = function resetRender() {
+    state.chooseData.splice(0);
+    state.monthsData.splice(0);
+    initData();
+  };
+  // 暴露出的API
+  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
+  }, showTitle && React__default.createElement("div", {
+    className: "calendar-title"
+  }, title || locale.calendaritem.title), onBtn && React__default.createElement("div", {
+    className: "calendar-top-slot"
+  }, onBtn()), showSubTitle && React__default.createElement("div", {
+    className: "calendar-curr-month"
+  }, yearMonthTitle), React__default.createElement("div", {
+    className: "calendar-weeks",
+    ref: weeksPanel
+  }, weeks.map(function (item) {
+    return React__default.createElement("div", {
+      className: "calendar-week-item",
+      key: item
+    }, item);
+  }))), React__default.createElement("div", {
+    className: "nut-calendar-content",
+    onScroll: monthsViewScroll,
+    ref: months
+  }, React__default.createElement("div", {
+    className: "calendar-months-panel",
+    ref: monthsPanel
+  }, React__default.createElement("div", {
+    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
+    }, React__default.createElement("div", {
+      className: "calendar-month-title"
+    }, month.title), React__default.createElement("div", {
+      className: "calendar-month-con"
+    }, React__default.createElement("div", {
+      className: monthitemclasses
+    }, month.monthData.map(function (day, i) {
+      return React__default.createElement("div", {
+        className: ['calendar-month-day', getClass(day, month)].join(' '),
+        onClick: function onClick() {
+          chooseDay(day, month);
+        },
+        key: i
+      }, React__default.createElement("div", {
+        className: "calendar-day"
+      }, onDay ? onDay(day) : day.day), onTopInfo && React__default.createElement("div", {
+        className: "calendar-curr-tips calendar-curr-tips-top"
+      }, onTopInfo(day)), onBottomInfo && React__default.createElement("div", {
+        className: "calendar-curr-tips calendar-curr-tips-bottom"
+      }, onBottomInfo(day)), !onBottomInfo && showToday && isCurrDay(month, day.day) && React__default.createElement("div", {
+        className: "calendar-curr-tip-curr"
+      }, 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"
+      }, endText || locale.calendaritem.end));
+    }))));
+  })))), poppable && !isAutoBackFill ? React__default.createElement("div", {
+    className: "nut-calendar-footer"
+  }, React__default.createElement("div", {
+    className: "calendar-confirm-btn",
+    onClick: confirm
+  }, confirmText || locale.confirm)) : ''));
+});
+CalendarItem.defaultProps = defaultProps;
+CalendarItem.displayName = 'NutCalendarItem';
+export { CalendarItem as default };

package/dist/esm/Card/style/index.js

@@ -0,0 +1,4 @@
+import '../../Price/style'
+import '../../Tag/style'
+
+import '../../../packages/card/card.scss'