@zenithui/day-picker
Version:
A ZenithUi Time Picker is React component enables users to select a date or date range from calendar.
74 lines (73 loc) • 4.15 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__ from "../utils.js";
import * as __WEBPACK_EXTERNAL_MODULE__header_js_dac28ef2__ from "./header.js";
import * as __WEBPACK_EXTERNAL_MODULE__hooks_use_day_picker_js_4816b2bd__ from "../hooks/use-day-picker.js";
import * as __WEBPACK_EXTERNAL_MODULE__years_js_2310e977__ from "./years.js";
import * as __WEBPACK_EXTERNAL_MODULE__months_js_b954d5aa__ from "./months.js";
import * as __WEBPACK_EXTERNAL_MODULE__days_js_15ee5e1a__ from "./days.js";
import * as __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__ from "@zenithui/utils";
const DayPicker = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
const { selected, classNames, onSelect, disableNavigation = false, disabled, hideNavigation = false, hideOutsideDates = false, hideWeekdays = false } = props;
if ("range" === props.mode && void 0 !== selected && selected instanceof Date) {
console.error("[DayPicker] Range mode requires a DateRange object, not a single Date.");
return null;
}
if ("single" === props.mode && void 0 !== selected && !(selected instanceof Date)) {
console.error("[DayPicker] Single mode requires a single Date, not a DateRange.");
return null;
}
const [state, setState] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("day");
const [currentMonth, setCurrentMonth] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)((0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.getInitialDate)(selected));
const [range, setRange] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(selected && "range" === props.mode ? (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.getInitialRange)(selected) : {
from: null,
to: null
});
const [focus, setFocus] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
const noOp = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{}, []);
const contextValue = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
currentMonth,
focus,
range,
state,
hideOutsideDates,
disableNavigation,
hideWeekdays,
selected: selected ?? null,
classNames,
disabled,
mode: props.mode,
onSelect: onSelect ?? noOp,
setCurrentMonth,
setFocus,
setRange,
setState
}), [
currentMonth,
focus,
range,
state,
hideOutsideDates,
disableNavigation,
hideWeekdays,
selected,
classNames,
disabled,
props.mode,
onSelect,
noOp
]);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__hooks_use_day_picker_js_4816b2bd__.DayPickerContext.Provider, {
value: contextValue,
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
ref: ref,
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)("zenithui-calendar", classNames?.calendar),
children: [
hideNavigation ? null : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__header_js_dac28ef2__.DayPickerHeader, {}),
"year" === state ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__years_js_2310e977__.DayPickerYears, {}) : "month" === state ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__months_js_b954d5aa__.DayPickerMonths, {}) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__days_js_15ee5e1a__.DayPickerDays, {})
]
})
});
});
const components_rslib_entry_ = DayPicker;
export { components_rslib_entry_ as default };