@zenithui/day-picker
Version:
A ZenithUi Time Picker is React component enables users to select a date or date range from calendar.
56 lines (55 loc) • 3.68 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 && selected instanceof Date) throw new Error("Range mode requires an array of two dates or Range Object");
if ("single" === props.mode && !(selected instanceof Date)) throw new Error("Single mode requires a single date or 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)((0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.getInitialRange)(selected));
const [focus, setFocus] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
if ("range" === props.mode) {
if (range.from instanceof Date && range.to instanceof Date) onSelect(range);
}
}, [
range
]);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__hooks_use_day_picker_js_4816b2bd__.DayPickerContext.Provider, {
value: {
currentMonth,
focus,
range,
state,
hideOutsideDates,
disableNavigation,
hideWeekdays,
selected,
classNames,
disabled,
mode: props.mode,
onSelect,
setCurrentMonth,
setFocus,
setRange,
setState
},
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 };