@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
299 lines (295 loc) • 10.8 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_chevron_left_icon = require('../icon/icons/chevron-left-icon.cjs');
const require_chevron_right_icon = require('../icon/icons/chevron-right-icon.cjs');
const require_use_field_props = require('../field/use-field-props.cjs');
const require_select = require('../select/select.cjs');
const require_calendar_style = require('./calendar.style.cjs');
const require_use_calendar = require('./use-calendar.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/calendar/calendar.tsx
const { ComponentContext, PropsContext: CalendarPropsContext, useComponentContext, usePropsContext: useCalendarPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("calendar", require_calendar_style.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 } = require_use_calendar.useCalendar(props);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_calendar.CalendarDescendantsContext, {
value: descendants,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_calendar.CalendarContext, {
value: (0, react.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__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
value: (0, react.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__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
...getRootProps(),
children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarNavigation, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarMonth, {})] })
})
})
})
});
}, "root")();
const CalendarNavigation = withContext("nav", ["row", "navigation"])(void 0, ({ children,...rest }) => {
const { getNavigationProps, navigationProps } = useComponentContext();
const computedChildren = (0, react.useMemo)(() => {
if (children) return children;
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarPrevButton, {}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarControl, {}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarNextButton, {})
] });
}, [children]);
return {
...getNavigationProps({
...navigationProps,
...rest
}),
children: computedChildren
};
});
const CalendarControl = withContext("div", "control")(void 0, ({ children,...rest }) => {
const { month } = require_use_calendar.useCalendarContext();
const { controlProps, getStatusProps } = useComponentContext();
const computedChildren = (0, react.useMemo)(() => {
if (children) return (0, require_utils_index.utils_exports.runIfFn)(children, { month });
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarMonthSelect, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarYearSelect, {})] });
}, [children, month]);
return {
...controlProps,
...rest,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [computedChildren, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, { ...getStatusProps() })] })
};
});
const CalendarPrevButton = withContext("button", ["button", "prev"])(void 0, ({ children = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_left_icon.ChevronLeftIcon, {}),...rest }) => {
const { buttonProps, getPrevButtonProps, prevButtonProps } = useComponentContext();
return {
children,
...getPrevButtonProps({
...buttonProps,
...prevButtonProps,
...rest
})
};
});
const CalendarNextButton = withContext("button", ["button", "next"])(void 0, ({ children = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_right_icon.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__ */ (0, react_jsx_runtime.jsx)(require_select.SelectRoot, {
variant: "plain",
items: yearItems,
minH: "{cell-size}",
contentProps: {
minW: "{select-content-size}",
...contentProps
},
rootProps: {
fontSize: "{select-font-size}",
w: "{select-root-size}",
...rootProps
},
...require_use_field_props.resetFieldProps,
...getYearSelectProps(rest)
});
}, ["select", "years"])();
const CalendarMonthSelect = withContext((props) => {
const { monthItems, getMonthSelectProps, monthSelectProps, selectProps } = useComponentContext();
const { contentProps, rootProps,...rest } = {
...selectProps,
...monthSelectProps,
...props
};
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.SelectRoot, {
variant: "plain",
items: monthItems,
minH: "{cell-size}",
contentProps: {
minW: "{select-content-size}",
...contentProps
},
rootProps: {
fontSize: "{select-font-size}",
w: "{select-root-size}",
...rootProps
},
...require_use_field_props.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.thead, {
"aria-hidden": true,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarWeekDays, {
...weekdaysProps,
children: weekdays.map(({ label, value }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarWeekday, {
...getWeekdayProps({
...weekdayProps,
value
}),
children: label
}, index))
})
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarWeeks, {
...weeksProps,
children: monthDays.map((week, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarWeek, {
...weekProps,
children: week.map(({ label, value }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarDay, {
...dayProps,
value,
children: (0, require_utils_index.utils_exports.runIfFn)(dayProp, { value }) ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.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 } = require_use_calendar.useCalendarDay(props);
return getDayProps();
});
//#endregion
exports.CalendarControl = CalendarControl;
exports.CalendarMonth = CalendarMonth;
exports.CalendarMonthSelect = CalendarMonthSelect;
exports.CalendarNavigation = CalendarNavigation;
exports.CalendarNextButton = CalendarNextButton;
exports.CalendarPrevButton = CalendarPrevButton;
exports.CalendarPropsContext = CalendarPropsContext;
exports.CalendarRoot = CalendarRoot;
exports.CalendarYearSelect = CalendarYearSelect;
exports.useCalendarPropsContext = useCalendarPropsContext;
//# sourceMappingURL=calendar.cjs.map