@nutui/nutui-react-taro 2.0.0-alpha.8 → 2.0.0-beta.1

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

@@ -0,0 +1,712 @@
+import React, { useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import { ScrollView } from "@tarojs/components";
+import { nextTick } from "@tarojs/taro";
+import { u as useConfig } from "./configprovider.taro-a7f3bcfd.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+const Utils = {
+  /**
+   * 是否为闫年
+   * @return {Boolse} true|false
+   */
+  isLeapYear(y) {
+    return y % 4 == 0 && y % 100 != 0 || y % 400 == 0;
+  },
+  /**
+   * 返回星期数
+   * @return {String}
+   */
+  getWhatDay(year, month, day) {
+    const date = /* @__PURE__ */ new Date(`${year}/${month}/${day}`);
+    const index = date.getDay();
+    const dayNames = [
+      "星期日",
+      "星期一",
+      "星期二",
+      "星期三",
+      "星期四",
+      "星期五",
+      "星期六"
+    ];
+    return dayNames[index];
+  },
+  /**
+   * 返回星期数
+   * @return {Number}
+   */
+  getMonthPreDay(year, month) {
+    const date = /* @__PURE__ */ new Date(`${year}/${month}/01`);
+    let day = date.getDay();
+    if (day === 0) {
+      day = 7;
+    }
+    return day;
+  },
+  /**
+   * 返回月份天数
+   * @return {Number}
+   */
+  getMonthDays(year, month) {
+    if (/^0/.test(month)) {
+      month = month.split("")[1];
+    }
+    return [
+      0,
+      31,
+      this.isLeapYear(Number(year)) ? 29 : 28,
+      31,
+      30,
+      31,
+      30,
+      31,
+      31,
+      30,
+      31,
+      30,
+      31
+    ][month];
+  },
+  /**
+   * 补齐数字位数
+   * @return {string}
+   */
+  getNumTwoBit(n) {
+    n = Number(n);
+    return (n > 9 ? "" : "0") + n;
+  },
+  /**
+   * 日期对象转成字符串
+   * @return {string}
+   */
+  date2Str(date, split) {
+    split = split || "-";
+    const y = date.getFullYear();
+    const m = this.getNumTwoBit(date.getMonth() + 1);
+    const d = this.getNumTwoBit(date.getDate());
+    return [y, m, d].join(split);
+  },
+  /**
+   * 返回日期格式字符串
+   * @param {Number} 0返回今天的日期、1返回明天的日期，2返回后天得日期，依次类推
+   * @return {string} '2014-12-31'
+   */
+  getDay(i) {
+    i = i || 0;
+    let date = /* @__PURE__ */ new Date();
+    const diff = i * (1e3 * 60 * 60 * 24);
+    date = new Date(date.getTime() + diff);
+    return this.date2Str(date);
+  },
+  /**
+   * 时间比较
+   * @return {Boolean}
+   */
+  compareDate(date1, date2) {
+    const startTime = new Date(date1.replace("-", "/").replace("-", "/"));
+    const endTime = new Date(date2.replace("-", "/").replace("-", "/"));
+    if (startTime >= endTime) {
+      return false;
+    }
+    return true;
+  },
+  /**
+   * 时间是否相等
+   * @return {Boolean}
+   */
+  isEqual(date1 = "", date2) {
+    const startTime = new Date(date1.replace("-", "/")).getTime();
+    const endTime = new Date(date2.replace("-", "/")).getTime();
+    if (startTime === endTime) {
+      return true;
+    }
+    return false;
+  }
+};
+const _window = window;
+function requestAniFrame() {
+  if (typeof _window !== "undefined") {
+    return _window.requestAnimationFrame || _window.webkitRequestAnimationFrame || function(callback) {
+      _window.setTimeout(callback, 1e3 / 60);
+    };
+  }
+  return function(callback) {
+    setTimeout(callback, 1e3 / 60);
+  };
+}
+const requestAniFrame$1 = requestAniFrame();
+const defaultProps = {
+  type: "single",
+  autoBackfill: false,
+  popup: true,
+  title: "",
+  startDate: Utils.getDay(0),
+  endDate: Utils.getDay(365),
+  showToday: true,
+  startText: "",
+  endText: "",
+  confirmText: "",
+  showTitle: true,
+  showSubTitle: true,
+  scrollAnimation: true,
+  renderHeaderButtons: void 0,
+  renderDay: void 0,
+  renderDayTop: void 0,
+  renderDayBottom: void 0,
+  onConfirm: (data) => {
+  },
+  onUpdate: () => {
+  },
+  onClickDay: (data) => {
+  },
+  onPageChange: (data) => {
+  }
+};
+const CalendarItem = React.forwardRef((props, ref) => {
+  const { locale } = useConfig();
+  const { type, autoBackfill, popup, title, defaultValue, showToday, startText, endText, confirmText, showTitle, showSubTitle, scrollAnimation, renderHeaderButtons, renderDay, renderDayTop, renderDayBottom, onConfirm, onUpdate, onClickDay, onPageChange } = { ...defaultProps, ...props };
+  const weeks = locale.calendaritem.weekdays;
+  const monthTitle = locale.calendaritem.monthTitle;
+  const [yearMonthTitle, setYearMonthTitle] = useState("");
+  const [monthsData, setMonthsData] = useState([]);
+  const [monthsNum, setMonthsNum] = useState(0);
+  const [translateY, setTranslateY] = useState(0);
+  const [monthDefaultRange, setMonthDefaultRange] = useState([]);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [scrollWithAnimation, setScrollWithAnimation] = useState(false);
+  const propStartDate = props.startDate || Utils.getDay(0);
+  const propEndDate = props.endDate || Utils.getDay(365);
+  const splitDate = (date) => {
+    const split = date.indexOf("-") !== -1 ? "-" : "/";
+    return date.split(split);
+  };
+  const startDates = splitDate(propStartDate);
+  const endDates = splitDate(propEndDate);
+  const [state] = useState({
+    currDateArray: []
+  });
+  const resetDefaultValue = () => {
+    if (defaultValue || Array.isArray(defaultValue) && defaultValue.length > 0) {
+      return type !== "single" ? [...defaultValue] : defaultValue;
+    }
+    return void 0;
+  };
+  const [currentDate, setCurrentDate] = usePropsValue({
+    value: props.value,
+    defaultValue: resetDefaultValue(),
+    finalValue: [],
+    onChange: (val) => {
+    }
+  });
+  const weeksPanel = useRef(null);
+  const monthsRef = useRef(null);
+  const monthsPanel = useRef(null);
+  const viewAreaRef = useRef(null);
+  const [avgHeight, setAvgHeight] = useState(0);
+  let viewHeight = 0;
+  const classPrefix = "nut-calendar";
+  const dayPrefix = "nut-calendar-day";
+  const classes = classNames({
+    [`${classPrefix}-title`]: !popup,
+    [`${classPrefix}-nofooter`]: !!autoBackfill
+  }, classPrefix);
+  const headerClasses = classNames({
+    [`${classPrefix}-header`]: true,
+    [`${classPrefix}-header-title`]: !popup
+  });
+  const isMultiple = (d) => {
+    if (currentDate.length > 0) {
+      return currentDate.some((item) => {
+        return Utils.isEqual(item, d);
+      });
+    }
+    return false;
+  };
+  const getCurrDate = (day, month) => {
+    return `${month.curData[0]}/${month.curData[1]}/${Utils.getNumTwoBit(+day.day)}`;
+  };
+  const getClasses = (day, month) => {
+    const dateStr = getCurrDate(day, month);
+    if (day.type === "active") {
+      if (propStartDate && Utils.compareDate(dateStr, propStartDate) || propEndDate && Utils.compareDate(propEndDate, dateStr)) {
+        return `${dayPrefix}-disabled`;
+      }
+      if (type === "range") {
+        if (isStart(dateStr) || isEnd(dateStr)) {
+          return `${dayPrefix}-active ${isStart(dateStr) ? "active-start" : ""} ${isEnd(dateStr) ? "active-end" : ""}`;
+        }
+        if (Array.isArray(currentDate) && Object.values(currentDate).length === 2 && Utils.compareDate(currentDate[0], dateStr) && Utils.compareDate(dateStr, currentDate[1])) {
+          return `${dayPrefix}-choose`;
+        }
+        return null;
+      }
+      if (type === "multiple" && isMultiple(dateStr) || !Array.isArray(currentDate) && Utils.isEqual(currentDate, dateStr)) {
+        return `${dayPrefix}-active`;
+      }
+      return null;
+    }
+    return `${dayPrefix}-disabled`;
+  };
+  const isCurrDay = (month, day) => {
+    const date = `${month.curData[0]}/${month.curData[1]}/${day}`;
+    return Utils.isEqual(date, Utils.date2Str(/* @__PURE__ */ new Date(), "/"));
+  };
+  const isStart = (d) => {
+    return Utils.isEqual(currentDate[0], d);
+  };
+  const isEnd = (d) => {
+    return Utils.isEqual(currentDate[1], d);
+  };
+  const isStartTip = (day, month) => {
+    return type === "range" && day.type === "active" && isStart(getCurrDate(day, month));
+  };
+  const isEndTip = (day, month) => {
+    return currentDate.length >= 2 && type === "range" && day.type === "active" && isEnd(getCurrDate(day, month));
+  };
+  const isStartAndEnd = () => {
+    return currentDate.length >= 2 && Utils.isEqual(currentDate[0], currentDate[1]);
+  };
+  const getCurrMonthData = (type2) => {
+    const monthData = type2 === "prev" ? monthsData[0] : monthsData[monthsData.length - 1];
+    let year = parseInt(monthData.curData[0]);
+    let month = parseInt(monthData.curData[1].toString().replace(/^0/, ""));
+    switch (type2) {
+      case "prev":
+        month === 1 && (year -= 1);
+        month = month === 1 ? 12 : --month;
+        break;
+      case "next":
+        month === 12 && (year += 1);
+        month = month === 12 ? 1 : ++month;
+        break;
+    }
+    return [
+      year,
+      Utils.getNumTwoBit(month),
+      Utils.getMonthDays(String(year), String(month))
+    ];
+  };
+  const getDaysStatus = (days, type2, year, month) => {
+    if (type2 === "prev" && days >= 7) {
+      days -= 7;
+    }
+    return Array.from(Array(days), (v, k) => {
+      return {
+        day: k + 1,
+        type: type2,
+        year,
+        month
+      };
+    });
+  };
+  const getPreDaysStatus = (days, type2, year, month, preCurrMonthDays) => {
+    if (type2 === "prev" && days >= 7) {
+      days -= 7;
+    }
+    const months = Array.from(Array(preCurrMonthDays), (v, k) => {
+      return {
+        day: k + 1,
+        type: type2,
+        year,
+        month
+      };
+    });
+    return months.slice(preCurrMonthDays - days);
+  };
+  const getMonthData = (curData, type2) => {
+    let preMonth = +curData[1] - 1;
+    let preYear = curData[0];
+    if (preMonth <= 0) {
+      preMonth = 12;
+      preYear += 1;
+    }
+    const preMonthDays = Utils.getMonthPreDay(+curData[0], +curData[1]);
+    const currMonthDays = Utils.getMonthDays(curData[0], curData[1]);
+    const preCurrMonthDays = Utils.getMonthDays(`${preYear}`, `${preMonth}`);
+    const monthInfo = {
+      curData,
+      title: monthTitle(curData[0], curData[1]),
+      monthData: [
+        ...getPreDaysStatus(preMonthDays, "prev", `${preMonth}`, preYear, preCurrMonthDays),
+        ...getDaysStatus(currMonthDays, "active", curData[0], curData[1])
+      ]
+    };
+    monthInfo.cssHeight = 39 + (monthInfo.monthData.length > 35 ? 384 : 320);
+    let scrollTop2 = 0;
+    if (monthsData.length > 0) {
+      const monthEle = monthsData[monthsData.length - 1];
+      scrollTop2 = monthEle.scrollTop + monthEle.cssHeight;
+    }
+    monthInfo.scrollTop = scrollTop2;
+    if (type2 === "next") {
+      if (!endDates || !Utils.compareDate(`${endDates[0]}/${endDates[1]}/${Utils.getMonthDays(endDates[0], endDates[1])}`, `${curData[0]}/${curData[1]}/${curData[2]}`)) {
+        monthsData.push(monthInfo);
+      }
+    } else if (!startDates || !Utils.compareDate(`${curData[0]}/${curData[1]}/${curData[2]}`, `${startDates[0]}/${startDates[1]}/01`)) {
+      monthsData.unshift(monthInfo);
+    }
+    setMonthsData(monthsData);
+  };
+  const setReachedYearMonthInfo = (current) => {
+    const currentMonthsData = monthsData[current];
+    const [year, month] = currentMonthsData.curData;
+    if (currentMonthsData.title === yearMonthTitle)
+      return;
+    onPageChange && onPageChange([year, month, `${year}-${month}`]);
+    setYearMonthTitle(currentMonthsData.title);
+  };
+  const setDefaultRange = (monthNum, current) => {
+    let start = 0;
+    let 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 {
+      start = 0;
+      end = monthNum + 2;
+    }
+    setMonthDefaultRange([start, end]);
+    setTranslateY(monthsData[start].scrollTop);
+    setReachedYearMonthInfo(current);
+  };
+  const monthsViewScroll = (e) => {
+    if (monthsData.length <= 1) {
+      return;
+    }
+    const scrollTop2 = e.target.scrollTop;
+    let current = Math.floor(scrollTop2 / avgHeight);
+    const nextTop = monthsData[current + 1].scrollTop;
+    const nextHeight = monthsData[current + 1].cssHeight;
+    if (current === 0) {
+      if (scrollTop2 >= nextTop) {
+        current += 1;
+      }
+    } else if (current > 0 && current < monthsNum - 1) {
+      if (scrollTop2 >= nextTop) {
+        current += 1;
+      }
+      if (scrollTop2 < monthsData[current].scrollTop) {
+        current -= 1;
+      }
+    } else {
+      const viewPosition = Math.round(scrollTop2 + viewHeight);
+      if (current + 1 <= monthsNum && viewPosition >= nextTop + nextHeight) {
+        current += 1;
+      }
+      if (current >= 1 && scrollTop2 < monthsData[current - 1].scrollTop) {
+        current -= 1;
+      }
+    }
+    setDefaultRange(monthsNum, current);
+  };
+  const getMonthNum = () => {
+    const startDate = {
+      year: Number(startDates[0]),
+      month: Number(startDates[1])
+    };
+    const endDate = {
+      year: Number(endDates[0]),
+      month: Number(endDates[1])
+    };
+    let 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;
+  };
+  const getMonthsData = (monthNum) => {
+    getMonthData(startDates, "next");
+    let i = 1;
+    do {
+      getMonthData(getCurrMonthData("next"), "next");
+    } while (i++ < monthNum);
+  };
+  const requestAniFrameFunc = (current, monthNum) => {
+    const lastItem = monthsData[monthsData.length - 1];
+    const containerHeight = lastItem.cssHeight + lastItem.scrollTop;
+    requestAniFrame$1(() => {
+      if (monthsRef && monthsPanel && viewAreaRef) {
+        viewHeight = monthsRef.current.clientHeight;
+        monthsPanel.current.style.height = `${containerHeight}px`;
+        setScrollTop(monthsData[current].scrollTop);
+        nextTick(() => setScrollWithAnimation(true));
+      }
+    });
+    setAvgHeight(Math.floor(containerHeight / (monthNum + 1)));
+  };
+  const renderCurrentDate = () => {
+    let 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 = [
+          ...splitDate(currentDate[0]),
+          ...splitDate(currentDate[1])
+        ];
+      }
+    } else if (props.type === "multiple" && Array.isArray(currentDate)) {
+      if (currentDate.length > 0) {
+        const defaultArr = [];
+        const obj = {};
+        currentDate.forEach((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(...defaultArr);
+        defaultData = [...splitDate(defaultArr[0])];
+      }
+    } else if (currentDate) {
+      if (currentDate.length > 0) {
+        if (propStartDate && Utils.compareDate(currentDate, propStartDate)) {
+          defaultData = [...splitDate(propStartDate)];
+        } else if (propEndDate && !Utils.compareDate(currentDate, propEndDate)) {
+          defaultData = [...splitDate(propEndDate)];
+        } else {
+          defaultData = [...splitDate(currentDate)];
+        }
+      } else {
+        defaultData = [];
+      }
+    }
+    let current = 0;
+    let lastCurrent = 0;
+    if (defaultData.length > 0) {
+      monthsData.forEach((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 {
+      const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+      const currentMonth = (/* @__PURE__ */ new Date()).getMonth() + 1;
+      const currentYearMonthIndex = monthsData.findIndex((item) => {
+        return +item.curData[0] === currentYear && +item.curData[1] === currentMonth;
+      });
+      if (currentYearMonthIndex > -1) {
+        current = currentYearMonthIndex;
+      }
+    }
+    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") {
+        [...currentDate].forEach((item) => {
+          const dateArr = splitDate(item);
+          let currentIndex = current;
+          monthsData.forEach((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);
+      }
+    }
+    return current;
+  };
+  const initData = () => {
+    const monthNum = getMonthNum();
+    getMonthsData(monthNum);
+    const current = renderCurrentDate();
+    setDefaultRange(monthNum, current);
+    requestAniFrameFunc(current, monthNum);
+  };
+  const resetRender = () => {
+    state.currDateArray.splice(0);
+    monthsData.splice(0);
+    initData();
+  };
+  const scrollToDate = (date) => {
+    if (Utils.compareDate(date, propStartDate)) {
+      date = propStartDate;
+    } else if (!Utils.compareDate(date, propEndDate)) {
+      date = propEndDate;
+    }
+    const dateArr = splitDate(date);
+    monthsData.forEach((item, index) => {
+      if (item.title === monthTitle(dateArr[0], dateArr[1])) {
+        const currTop = monthsData[index].scrollTop;
+        if (monthsRef.current) {
+          const distance = currTop - monthsRef.current.scrollTop;
+          if (scrollAnimation) {
+            let flag = 0;
+            const interval = setInterval(() => {
+              flag++;
+              if (monthsRef.current) {
+                const offset = distance / 10;
+                monthsRef.current.scrollTop += offset;
+              }
+              if (flag >= 10) {
+                clearInterval(interval);
+                if (monthsRef.current) {
+                  monthsRef.current.scrollTop = currTop;
+                  setScrollTop(monthsRef.current.scrollTop);
+                }
+              }
+            }, 40);
+          } else {
+            monthsRef.current.scrollTop = currTop;
+            setScrollTop(monthsRef.current.scrollTop);
+          }
+        }
+      }
+    });
+  };
+  useEffect(() => {
+    initData();
+  }, []);
+  useEffect(() => {
+    setCurrentDate(resetDefaultValue() || []);
+    popup && resetRender();
+  }, [defaultValue]);
+  React.useImperativeHandle(ref, () => ({
+    scrollToDate
+  }));
+  const confirm = () => {
+    if (type === "range" && state.currDateArray.length === 2 || type !== "range") {
+      const chooseData = state.currDateArray.slice(0);
+      onConfirm && onConfirm(chooseData);
+      if (popup) {
+        onUpdate && onUpdate();
+      }
+    }
+  };
+  const chooseDay = (day, month, isFirst) => {
+    if (getClasses(day, month) === `${dayPrefix}-disabled`) {
+      return;
+    }
+    const days = [...month.curData];
+    days[2] = typeof day.day === "number" ? Utils.getNumTwoBit(day.day) : day.day;
+    days[3] = `${days[0]}/${days[1]}/${days[2]}`;
+    days[4] = Utils.getWhatDay(+days[0], +days[1], +days[2]);
+    if (type === "multiple") {
+      if (currentDate.length > 0) {
+        let hasIndex = "";
+        currentDate.forEach((item, index) => {
+          if (item === days[3]) {
+            hasIndex = index;
+          }
+        });
+        if (isFirst) {
+          state.currDateArray.push([...days]);
+        } else if (hasIndex !== "") {
+          currentDate.splice(hasIndex, 1);
+          state.currDateArray.splice(hasIndex, 1);
+        } else {
+          currentDate.push(days[3]);
+          state.currDateArray.push([...days]);
+        }
+      } else {
+        currentDate.push(days[3]);
+        state.currDateArray = [[...days]];
+      }
+    } else if (type === "range") {
+      const curDataLength = Object.values(currentDate).length;
+      if (curDataLength === 2 || curDataLength === 0) {
+        Array.isArray(currentDate) && currentDate.splice(0) && currentDate.push(days[3]);
+        state.currDateArray = [[...days]];
+      } else if (Utils.compareDate(currentDate[0], days[3])) {
+        Array.isArray(currentDate) && currentDate.push(days[3]);
+        state.currDateArray = [...state.currDateArray, [...days]];
+      } else {
+        Array.isArray(currentDate) && currentDate.unshift(days[3]);
+        state.currDateArray = [[...days], ...state.currDateArray];
+      }
+    } else {
+      setCurrentDate(days[3]);
+      state.currDateArray = [...days];
+    }
+    if (!isFirst) {
+      onClickDay && onClickDay(state.currDateArray);
+      if (autoBackfill || !popup) {
+        confirm();
+      }
+    }
+    setMonthsData(monthsData.slice());
+  };
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      "div",
+      { className: classes },
+      React.createElement(
+        "div",
+        { className: headerClasses },
+        showTitle && React.createElement("div", { className: `${classPrefix}-title` }, title || locale.calendaritem.title),
+        renderHeaderButtons && React.createElement("div", { className: `${classPrefix}-header-buttons` }, renderHeaderButtons()),
+        showSubTitle && React.createElement("div", { className: `${classPrefix}-sub-title` }, yearMonthTitle),
+        React.createElement("div", { className: `${classPrefix}-weeks`, ref: weeksPanel }, weeks.map((item) => React.createElement("div", { className: `${classPrefix}-week-item`, key: item }, item)))
+      ),
+      React.createElement(
+        ScrollView,
+        { scrollTop, scrollY: true, type: "list", scrollWithAnimation, className: `${classPrefix}-content`, onScroll: monthsViewScroll, ref: monthsRef },
+        React.createElement(
+          "div",
+          { className: `${classPrefix}-pannel`, ref: monthsPanel },
+          React.createElement("div", { className: "viewArea", ref: viewAreaRef, style: { transform: `translateY(${translateY}px)` } }, monthsData.slice(monthDefaultRange[0], monthDefaultRange[1]).map((month, key) => {
+            return React.createElement(
+              "div",
+              { className: `${classPrefix}-month`, key },
+              React.createElement("div", { className: `${classPrefix}-month-title` }, month.title),
+              React.createElement("div", { className: `${classPrefix}-days` }, month.monthData.map((day, i) => React.createElement(
+                "div",
+                { className: [
+                  `${classPrefix}-day`,
+                  getClasses(day, month)
+                ].join(" "), onClick: () => {
+                  chooseDay(day, month);
+                }, key: i },
+                React.createElement("div", { className: `${classPrefix}-day-day` }, renderDay ? renderDay(day) : day.day),
+                !isStartTip(day, month) && renderDayTop && React.createElement("div", { className: `${classPrefix}-day-info-top` }, renderDayTop(day)),
+                !isStartTip(day, month) && !isEndTip(day, month) && renderDayBottom && React.createElement("div", { className: `${classPrefix}-day-info-bottom` }, renderDayBottom(day)),
+                !isStartTip(day, month) && !isEndTip(day, month) && !renderDayBottom && showToday && isCurrDay(month, day.day) && React.createElement("div", { className: `${classPrefix}-day-info-curr` }, locale.calendaritem.today),
+                isStartTip(day, month) && React.createElement("div", { className: `${classPrefix}-day-info ${isStartAndEnd() ? `${classPrefix}-day-info-top` : ""}` }, startText || locale.calendaritem.start),
+                isEndTip(day, month) && React.createElement("div", { className: `${classPrefix}-day-info` }, endText || locale.calendaritem.end)
+              )))
+            );
+          }))
+        )
+      ),
+      popup && !autoBackfill ? React.createElement(
+        "div",
+        { className: "nut-calendar-footer" },
+        React.createElement("div", { className: "calendar-confirm-btn", onClick: confirm }, confirmText || locale.confirm)
+      ) : ""
+    )
+  );
+});
+CalendarItem.defaultProps = defaultProps;
+CalendarItem.displayName = "NutCalendarItem";
+export {
+  CalendarItem as C,
+  Utils as U
+};