@nutui/nutui-react-taro 1.2.2-beta.0

package/dist/esm/calendaritem.taro-bbe4a226.js

@@ -0,0 +1,606 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+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, r as requestAniFrame } from './raf-3fbb5f92.js';
+import { u as useConfig } from './configprovider-18657611.js';
+var defaultProps = {
+  type: 'one',
+  isAutoBackFill: false,
+  poppable: true,
+  visible: false,
+  title: '日历选择',
+  defaultValue: '',
+  startDate: Utils.getDay(0),
+  endDate: Utils.getDay(365),
+  onChoose: function onChoose(data) {},
+  onUpdate: function onUpdate() {},
+  onClose: function onClose() {}
+};
+
+var CalendarItem = function CalendarItem(props) {
+  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 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 isStart = function isStart(currDate) {
+    return Utils.isEqual(state.currDate[0], currDate);
+  };
+
+  var isEnd = function isEnd(currDate) {
+    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 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");
+      }
+
+      if (startDate && Utils.compareDate(currDate, startDate) || endDate && Utils.compareDate(endDate, 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])) {
+        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() {
+    if (state.isRange && state.chooseData.length === 2 || !state.isRange) {
+      onChoose && onChoose(state.chooseData);
+
+      if (poppable) {
+        onUpdate && onUpdate();
+      }
+    }
+  };
+
+  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 isStartTip(day, month) {
+    if (isActive(day, month)) {
+      return isStart(getCurrDate(day, month));
+    }
+
+    return false;
+  }; // 是否有结束提示
+
+
+  var isEndTip = function isEndTip(day, month) {
+    return isActive(day, month);
+  }; // 获取当前月数据
+
+
+  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) {
+    // 修复：当某个月的1号是周日时，月份下方会空出来一行
+    if (type === 'prev' && days >= 7) {
+      days -= 7;
+    }
+
+    return Array.from(Array(days), function (v, k) {
+      return {
+        day: k + 1,
+        type: type
+      };
+    });
+  }; // 获取月数据
+
+
+  var getMonth = function getMonth(curData, type) {
+    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 monthInfo = {
+      curData: curData,
+      title: locale.calendaritem.monthTitle(title.year, title.month),
+      monthData: [].concat(_toConsumableArray(getDaysStatus(preMonthDays, 'prev')), _toConsumableArray(getDaysStatus(currMonthDays, 'curr')))
+    };
+
+    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);
+    } else {
+      setUnLoadPrev(true);
+    }
+
+    setMonthsData(state.monthsData);
+  }; // 监听月份滚动，改变月份标题
+
+
+  var loadScroll = function loadScroll() {
+    if (!props.poppable) {
+      return false;
+    }
+
+    requestAniFrame( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              if (!(weeksPanel !== null && weeksPanel !== void 0 && weeksPanel.current && monthsPanel !== null && monthsPanel !== void 0 && monthsPanel.current)) {
+                _context3.next = 2;
+                break;
+              }
+
+              return _context3.delegateYield( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+                var weeksPanelRes, top, monthsDoms, _loop, i;
+
+                return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+                  while (1) {
+                    switch (_context2.prev = _context2.next) {
+                      case 0:
+                        _context2.next = 2;
+                        return weeksPanel === null || weeksPanel === void 0 ? void 0 : weeksPanel.current.getBoundingClientRect();
+
+                      case 2:
+                        weeksPanelRes = _context2.sent;
+                        top = weeksPanelRes === null || weeksPanelRes === void 0 ? void 0 : weeksPanelRes.bottom;
+                        monthsDoms = monthsPanel.current.getElementsByClassName('calendar-month');
+
+                        _loop = function _loop(i) {
+                          var setTitles = /*#__PURE__*/function () {
+                            var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(monthDoms) {
+                              var monthsDomsRes;
+                              return _regeneratorRuntime.wrap(function _callee$(_context) {
+                                while (1) {
+                                  switch (_context.prev = _context.next) {
+                                    case 0:
+                                      _context.next = 2;
+                                      return monthDoms.getBoundingClientRect();
+
+                                    case 2:
+                                      monthsDomsRes = _context.sent;
+
+                                      if ((monthsDomsRes === null || monthsDomsRes === void 0 ? void 0 : monthsDomsRes.top) <= top && (monthsDomsRes === null || monthsDomsRes === void 0 ? void 0 : monthsDomsRes.bottom) >= top) {
+                                        setYearMonthTitle(state.monthsData[i].title);
+                                      } else if (state.scrollDistance === 0) {
+                                        setYearMonthTitle(state.monthsData[0].title);
+                                      }
+
+                                    case 4:
+                                    case "end":
+                                      return _context.stop();
+                                  }
+                                }
+                              }, _callee);
+                            }));
+
+                            return function setTitles(_x) {
+                              return _ref2.apply(this, arguments);
+                            };
+                          }();
+
+                          setTitles(monthsDoms[i]);
+                        };
+
+                        for (i = 0; i < monthsDoms.length; i++) {
+                          _loop(i);
+                        }
+
+                      case 7:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }
+                }, _callee2);
+              })(), "t0", 2);
+
+            case 2:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    })));
+  }; // 设置月份滚动距离和速度
+
+
+  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();
+      }
+
+      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;
+      }
+
+      if (updateMove < 0 && updateMove < -offsetHeight + h) {
+        updateMove = -offsetHeight + h;
+      }
+
+      if (offsetHeight <= h && state.monthsData.length === 1) {
+        updateMove = 0;
+      }
+
+      setTransform(updateMove, type, time);
+    } else {
+      if (updateMove > 0 && updateMove > 100) {
+        updateMove = 100;
+      }
+
+      if (updateMove < -offsetHeight + h - 100 && state.monthsData.length > 1) {
+        updateMove = -offsetHeight + h - 100;
+      }
+
+      if (updateMove < 0 && updateMove < -100 && state.monthsData.length === 1) {
+        updateMove = -100;
+      }
+
+      setTransform(updateMove);
+    }
+  };
+
+  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 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 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 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 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);
+      }
+
+      if (endDate && Utils.compareDate(endDate, state.currDate[1])) {
+        state.currDate.splice(1, 1, endDate);
+      }
+
+      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));
+    }
+
+    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);
+    }
+  };
+
+  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",
+    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",
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    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) {
+    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 && month.monthData.map(function (day, index) {
+      return React__default.createElement("div", {
+        className: ['calendar-month-day', getClass(day, month)].join(' '),
+        key: index,
+        onClick: function onClick() {
+          chooseDay(day, month);
+        }
+      }, 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: "nut-calendar-footer"
+  }, React__default.createElement("div", {
+    className: "calendar-confirm-btn",
+    onClick: confirm
+  }, locale.confirm)) : ''));
+};
+
+CalendarItem.defaultProps = defaultProps;
+CalendarItem.displayName = 'NutCalendarItem';
+export { CalendarItem as C };