@rainliu/y-ui/dist/lib/calendar/index.js

# @rainliu/y-ui > 一款基于 React 的现代化 UI 组件库，提供优雅、简洁且易于使用的组件，助力快速开发高质量的 Web 应用。

'use strict';

var react = require('react');
var cs = require('classnames');
var dayjs = require('dayjs');
var ahooks = require('ahooks');
var jsxRuntime = require('react/jsx-runtime');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var cs__default = /*#__PURE__*/_interopDefault(cs);
var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);

// src/index.tsx

// src/locale/zh-CN.ts
var CalendarLocale = {
  formatYear: "YYYY \u5E74",
  formatMonth: "YYYY \u5E74 MM \u6708",
  today: "\u4ECA\u5929",
  month: {
    January: "\u4E00\u6708",
    February: "\u4E8C\u6708",
    March: "\u4E09\u6708",
    April: "\u56DB\u6708",
    May: "\u4E94\u6708",
    June: "\u516D\u6708",
    July: "\u4E03\u6708",
    August: "\u516B\u6708",
    September: "\u4E5D\u6708",
    October: "\u5341\u6708",
    November: "\u5341\u4E00\u6708",
    December: "\u5341\u4E8C\u6708"
  },
  week: {
    monday: "\u5468\u4E00",
    tuesday: "\u5468\u4E8C",
    wednesday: "\u5468\u4E09",
    thursday: "\u5468\u56DB",
    friday: "\u5468\u4E94",
    saturday: "\u5468\u516D",
    sunday: "\u5468\u65E5"
  }
};
var zh_CN_default = CalendarLocale;

// src/locale/en-US.ts
var CalendarLocale2 = {
  formatYear: "YYYY",
  formatMonth: "MMM YYYY",
  today: "Today",
  month: {
    January: "January",
    February: "February",
    March: "March",
    April: "April",
    May: "May",
    June: "June",
    July: "July",
    August: "August",
    September: "September",
    October: "October",
    November: "November",
    December: "December"
  },
  week: {
    monday: "Monday",
    tuesday: "Tuesday",
    wednesday: "Wednesday",
    thursday: "Thursday",
    friday: "Friday",
    saturday: "Saturday",
    sunday: "Sunday"
  }
};
var en_US_default = CalendarLocale2;

// src/locale/index.ts
var localeInfo = {
  "zh-CN": zh_CN_default,
  "en-US": en_US_default
};
var LocaleContext = react.createContext("zh-CN");
var getAllDays = (date) => {
  const days = new Array(6 * 7).fill(null);
  const daysInMonth = date.daysInMonth();
  const startDate = date.startOf("month");
  const day = startDate.day();
  for (let i = 0; i < day; i++) {
    days[i] = {
      date: startDate.subtract(day - i, "day"),
      currentMonth: false
    };
  }
  for (let i = day; i < days.length; i++) {
    days[i] = {
      date: startDate.add(i - day, "day"),
      currentMonth: i < daysInMonth + day
    };
  }
  return days;
};
function MonthCalendar(props) {
  const { value, dateRender, dateCellRender, selectChange, curMonth } = props;
  const weekList = [
    "sunday",
    "monday",
    "tuesday",
    "wednesday",
    "thursday",
    "friday",
    "saturday"
  ];
  const allDays = getAllDays(curMonth);
  const locale = react.useContext(LocaleContext);
  const locales = localeInfo[locale];
  function renderDay(days) {
    const rows = [];
    for (let i = 0; i < 6; i++) {
      const row = [];
      for (let j = 0; j < 7; j++) {
        const item = days[i * 7 + j];
        row[j] = /* @__PURE__ */ jsxRuntime.jsx(
          "div",
          {
            className: "calendar-month-body-cell " + (item.currentMonth ? "calendar-month-body-cell-current" : ""),
            children: dateRender ? dateRender(item.date) : /* @__PURE__ */ jsxRuntime.jsxs(
              "div",
              {
                className: "calendar-month-body-cell-date",
                onClick: () => selectChange?.(item.date),
                children: [
                  /* @__PURE__ */ jsxRuntime.jsx(
                    "div",
                    {
                      className: cs__default.default(
                        "calendar-month-body-cell-date-value",
                        value?.format("YYYY-MM-DD") === item.date.format("YYYY-MM-DD") ? "calendar-month-body-cell-date-selected" : ""
                      ),
                      children: item.date.date()
                    }
                  ),
                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "calendar-month-cell-body-date-content", children: dateCellRender?.(item.date) })
                ]
              }
            )
          },
          item.date.format("YYYY-MM-DD")
        );
      }
      rows.push(
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "calendar-month-body-row", children: row }, `row-${i}`)
      );
    }
    return rows;
  }
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "calendar-month", children: [
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "calendar-month-week-list", children: weekList.map((w) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "calendar-month-week-list-item", children: locales.week[w] }, `week-${w}`)) }),
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "calendar-month-body", children: renderDay(allDays) })
  ] });
}
var MonthCalendar_default = MonthCalendar;
function Header(props) {
  const { curMonth, monthChange, todayChange } = props;
  const locale = react.useContext(LocaleContext);
  const locales = localeInfo[locale];
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "calendar-header", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "calendar-header-left", children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        className: "calendar-header-icon",
        onClick: () => monthChange?.(curMonth, "prev"),
        children: "<"
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "calendar-header-value", children: curMonth?.format(locales.formatMonth) }),
    /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        className: "calendar-header-icon",
        onClick: () => monthChange?.(curMonth, "next"),
        children: ">"
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx("button", { className: "calendar-header-btn", onClick: () => todayChange?.(), children: locales.today })
  ] }) });
}
var Header_default = Header;
function Calendar(props) {
  const { value, style, classname, locale, onChange } = props;
  const classnames = cs__default.default("calendar", classname);
  const [curDate, setCurDate] = ahooks.useControllableValue(value, {
    defaultValue: dayjs__default.default(/* @__PURE__ */ new Date())
  });
  const [curMonth, setCurMonth] = react.useState(curDate);
  const selectChangeDay = (d) => {
    changeDate(d);
  };
  const monthChange = (d, type) => {
    setCurMonth(type === "prev" ? d.subtract(1, "month") : d.add(1, "month"));
  };
  const todayChange = () => {
    const date = dayjs__default.default(/* @__PURE__ */ new Date());
    changeDate(date);
  };
  const changeDate = (date) => {
    setCurDate(date);
    setCurMonth(date);
    onChange?.(date);
  };
  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(LocaleContext.Provider, { value: locale || navigator.language, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classnames, style, children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      Header_default,
      {
        curMonth,
        monthChange,
        todayChange
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx(
      MonthCalendar_default,
      {
        ...props,
        value: curDate,
        curMonth,
        selectChange: selectChangeDay
      }
    )
  ] }) }) });
}

exports.Calendar = Calendar;
//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map