@crossed/ui/lib/module/forms/Calendar/Calendar.js

A universal & performant styling library for React Native, Next.js & React

import { jsx, jsxs } from "react/jsx-runtime";
import { XBox, YBox } from "../../layout";
import {
  forwardRef,
  memo,
  useId,
  useMemo,
  useState
} from "react";
import { useCalendar } from "@crossed/use-calendar";
import { DayButton } from "./DayButton";
import { capFirstLetter } from "./utils";
import { WeekDay } from "./WeekDay";
import { SelectYear } from "./SelectYear";
import { SelectMonth } from "./SelectMonth";
const Calendar = memo(
  forwardRef(({ locale = "default", style, ...props }, ref) => {
    const { months, getDayProps, setMonth, setYear, monthsByYear } = useCalendar(props);
    const id = useId();
    const [yearSelected, setYearSelected] = useState(
      (props.selectedDate || /* @__PURE__ */ new Date()).getFullYear()
    );
    const itemsMonth = useMemo(() => {
      const formatter = new Intl.DateTimeFormat(locale, {
        month: "long"
      });
      let months2 = monthsByYear.get(yearSelected);
      if (!months2)
        months2 = new Set(Array.from(Array(12).keys()));
      return Array.from(months2).map((month) => {
        const d = new Date(yearSelected, month);
        const nameMonth = formatter.format(d);
        return {
          label: capFirstLetter(nameMonth),
          value: month.toString()
        };
      });
    }, [monthsByYear, yearSelected]);
    return /* @__PURE__ */ jsx(YBox, { style, ref, children: months.map(({ year, month, weeks }) => /* @__PURE__ */ jsxs(YBox, { space: "xs", children: [
      /* @__PURE__ */ jsxs(XBox, { alignItems: "stretch", space: "xl", children: [
        /* @__PURE__ */ jsx(
          SelectMonth,
          {
            month,
            onChange: setMonth,
            months: itemsMonth
          }
        ),
        /* @__PURE__ */ jsx(
          SelectYear,
          {
            year,
            onChange: (e) => {
              setYearSelected(e);
              setYear(e);
            },
            years: Array.from(monthsByYear).map(([year2]) => year2)
          }
        )
      ] }),
      /* @__PURE__ */ jsxs(YBox, { space: "xs", children: [
        /* @__PURE__ */ jsx(
          WeekDay,
          {
            days: weeks[0].length > 0 ? weeks[0] : weeks[1],
            locale
          }
        ),
        weeks.map((week, i) => /* @__PURE__ */ jsx(XBox, { justifyContent: "between", children: week.map((day, j) => {
          const { onClick, ...props2 } = getDayProps({ day });
          return /* @__PURE__ */ jsx(
            DayButton,
            {
              day,
              ...props2,
              onPress: onClick
            },
            `${id}-day-${j}`
          );
        }) }, `${id}-week-${i}`))
      ] })
    ] }, `${id}-month-${month}`)) });
  })
);
export {
  Calendar
};
//# sourceMappingURL=Calendar.js.map