@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
287 lines (283 loc) • 9.18 kB
JavaScript
"use client";
import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { ChevronLeftIcon } from "../icon/icons/chevron-left-icon.js";
import { ChevronRightIcon } from "../icon/icons/chevron-right-icon.js";
import { resetFieldProps } from "../field/use-field-props.js";
import { SelectRoot } from "../select/select.js";
import { calendarStyle } from "./calendar.style.js";
import { CalendarContext, CalendarDescendantsContext, useCalendar, useCalendarContext, useCalendarDay } from "./use-calendar.js";
import { useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/calendar/calendar.tsx
const { ComponentContext, PropsContext: CalendarPropsContext, useComponentContext, usePropsContext: useCalendarPropsContext, withContext, withProvider } = createSlotComponent("calendar", calendarStyle);
/**
* `Calendar` is a component for displaying or selecting dates in a calendar.
*
* @see https://yamada-ui.com/docs/components/calendar
*/
const CalendarRoot = withProvider(({ children, day, buttonProps, controlProps, dayProps, monthProps, monthSelectProps, navigationProps, nextButtonProps, prevButtonProps, selectProps, weekdayProps, weekdaysProps, weekProps, weeksProps, yearSelectProps,...props }) => {
const { descendants, disabled, endOfMonth, excludeDate, holidays, locale, max, maxDate, minDate, month, monthDays, monthItems, multiple, range, startDayOfWeek, startOfMonth, today, value, weekdays, weekendDays, yearItems, getMonthProps, getMonthSelectProps, getNavigationProps, getNextButtonProps, getPrevButtonProps, getRootProps, getStatusProps, getWeekdayProps, getYearSelectProps, onChange, onMonthChange, onNextMonth, onPrevMonth } = useCalendar(props);
return /* @__PURE__ */ jsx(CalendarDescendantsContext, {
value: descendants,
children: /* @__PURE__ */ jsx(CalendarContext, {
value: useMemo(() => ({
disabled,
endOfMonth,
excludeDate,
holidays,
locale,
max,
maxDate,
minDate,
month,
multiple,
range,
startDayOfWeek,
startOfMonth,
today,
value,
weekendDays,
onChange,
onMonthChange,
onNextMonth,
onPrevMonth
}), [
disabled,
endOfMonth,
excludeDate,
holidays,
locale,
max,
maxDate,
minDate,
month,
multiple,
range,
startDayOfWeek,
startOfMonth,
today,
value,
weekendDays,
onChange,
onMonthChange,
onNextMonth,
onPrevMonth
]),
children: /* @__PURE__ */ jsx(ComponentContext, {
value: useMemo(() => ({
day,
monthDays,
monthItems,
weekdays,
yearItems,
buttonProps,
controlProps,
dayProps,
getMonthProps,
getMonthSelectProps,
getNavigationProps,
getNextButtonProps,
getPrevButtonProps,
getStatusProps,
getWeekdayProps,
getYearSelectProps,
monthProps,
monthSelectProps,
navigationProps,
nextButtonProps,
prevButtonProps,
selectProps,
weekdayProps,
weekdaysProps,
weekProps,
weeksProps,
yearSelectProps
}), [
day,
monthDays,
monthItems,
weekdays,
yearItems,
buttonProps,
controlProps,
dayProps,
getMonthProps,
getMonthSelectProps,
getNavigationProps,
getNextButtonProps,
getPrevButtonProps,
getStatusProps,
getWeekdayProps,
getYearSelectProps,
monthProps,
monthSelectProps,
navigationProps,
nextButtonProps,
prevButtonProps,
selectProps,
weekdayProps,
weekdaysProps,
weekProps,
weeksProps,
yearSelectProps
]),
children: /* @__PURE__ */ jsx(styled.div, {
...getRootProps(),
children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CalendarNavigation, {}), /* @__PURE__ */ jsx(CalendarMonth, {})] })
})
})
})
});
}, "root")();
const CalendarNavigation = withContext("nav", ["row", "navigation"])(void 0, ({ children,...rest }) => {
const { getNavigationProps, navigationProps } = useComponentContext();
const computedChildren = useMemo(() => {
if (children) return children;
return /* @__PURE__ */ jsxs(Fragment$1, { children: [
/* @__PURE__ */ jsx(CalendarPrevButton, {}),
/* @__PURE__ */ jsx(CalendarControl, {}),
/* @__PURE__ */ jsx(CalendarNextButton, {})
] });
}, [children]);
return {
...getNavigationProps({
...navigationProps,
...rest
}),
children: computedChildren
};
});
const CalendarControl = withContext("div", "control")(void 0, ({ children,...rest }) => {
const { month } = useCalendarContext();
const { controlProps, getStatusProps } = useComponentContext();
const computedChildren = useMemo(() => {
if (children) return (0, utils_exports.runIfFn)(children, { month });
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CalendarMonthSelect, {}), /* @__PURE__ */ jsx(CalendarYearSelect, {})] });
}, [children, month]);
return {
...controlProps,
...rest,
children: /* @__PURE__ */ jsxs(Fragment$1, { children: [computedChildren, /* @__PURE__ */ jsx(styled.div, { ...getStatusProps() })] })
};
});
const CalendarPrevButton = withContext("button", ["button", "prev"])(void 0, ({ children = /* @__PURE__ */ jsx(ChevronLeftIcon, {}),...rest }) => {
const { buttonProps, getPrevButtonProps, prevButtonProps } = useComponentContext();
return {
children,
...getPrevButtonProps({
...buttonProps,
...prevButtonProps,
...rest
})
};
});
const CalendarNextButton = withContext("button", ["button", "next"])(void 0, ({ children = /* @__PURE__ */ jsx(ChevronRightIcon, {}),...rest }) => {
const { buttonProps, getNextButtonProps, nextButtonProps } = useComponentContext();
return {
children,
...getNextButtonProps({
...buttonProps,
...nextButtonProps,
...rest
})
};
});
const CalendarSeparator = withContext("span", "separator")({
children: "/",
role: "separator"
});
const CalendarYearSelect = withContext((props) => {
const { yearItems, getYearSelectProps, selectProps, yearSelectProps } = useComponentContext();
const { contentProps, rootProps,...rest } = {
...selectProps,
...yearSelectProps,
...props
};
return /* @__PURE__ */ jsx(SelectRoot, {
variant: "plain",
items: yearItems,
minH: "{cell-size}",
contentProps: {
minW: "{select-content-size}",
...contentProps
},
rootProps: {
fontSize: "{select-font-size}",
w: "{select-root-size}",
...rootProps
},
...resetFieldProps,
...getYearSelectProps(rest)
});
}, ["select", "years"])();
const CalendarMonthSelect = withContext((props) => {
const { monthItems, getMonthSelectProps, monthSelectProps, selectProps } = useComponentContext();
const { contentProps, rootProps,...rest } = {
...selectProps,
...monthSelectProps,
...props
};
return /* @__PURE__ */ jsx(SelectRoot, {
variant: "plain",
items: monthItems,
minH: "{cell-size}",
contentProps: {
minW: "{select-content-size}",
...contentProps
},
rootProps: {
fontSize: "{select-font-size}",
w: "{select-root-size}",
...rootProps
},
...resetFieldProps,
...getMonthSelectProps(rest)
});
}, ["select", "months"])();
const CalendarMonth = withContext("table", "month")(void 0, ({ day: dayProp,...rest }) => {
const { day, monthDays, weekdays, dayProps, getMonthProps, getWeekdayProps, monthProps, weekdayProps, weekdaysProps, weekProps, weeksProps } = useComponentContext();
dayProp ??= day;
const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(styled.thead, {
"aria-hidden": true,
children: /* @__PURE__ */ jsx(CalendarWeekDays, {
...weekdaysProps,
children: weekdays.map(({ label, value }, index) => /* @__PURE__ */ jsx(CalendarWeekday, {
...getWeekdayProps({
...weekdayProps,
value
}),
children: label
}, index))
})
}), /* @__PURE__ */ jsx(CalendarWeeks, {
...weeksProps,
children: monthDays.map((week, index) => /* @__PURE__ */ jsx(CalendarWeek, {
...weekProps,
children: week.map(({ label, value }) => /* @__PURE__ */ jsx(CalendarDay, {
...dayProps,
value,
children: (0, utils_exports.runIfFn)(dayProp, { value }) ?? /* @__PURE__ */ jsx(styled.span, { children: label })
}, value.toDateString()))
}, index))
})] });
return {
...getMonthProps({
...monthProps,
...rest
}),
children
};
});
const CalendarWeekDays = withContext("tr", ["row", "weekdays"])();
const CalendarWeekday = withContext("th", ["cell", "weekday"])();
const CalendarWeeks = withContext("tbody", "weeks")();
const CalendarWeek = withContext("tr", ["row", "week"])();
const CalendarDay = withContext("td", ["cell", "day"])(void 0, (props) => {
const { getDayProps } = useCalendarDay(props);
return getDayProps();
});
//#endregion
export { CalendarControl, CalendarMonth, CalendarMonthSelect, CalendarNavigation, CalendarNextButton, CalendarPrevButton, CalendarPropsContext, CalendarRoot, CalendarYearSelect, useCalendarPropsContext };
//# sourceMappingURL=calendar.js.map