roko-date-picker
Version:
A simple single/multi date picker
131 lines (130 loc) • 5 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MainProvider = exports.Context = void 0;
const react_1 = __importStar(require("react"));
const e_calendar_picker_1 = require("../../domain/enums/e.calendar.picker");
const data_defaults_1 = require("../../domain/data/data.defaults");
const date_fns_1 = require("date-fns");
exports.Context = (0, react_1.createContext)({
mode: "single",
range: data_defaults_1.defaultRange,
setRange: () => Function,
theme: data_defaults_1.defaultTheme,
blockedDates: [],
minDate: undefined,
maxDate: undefined,
blockedWeekDay: [],
onChange: () => Function,
pickerType: e_calendar_picker_1.eCalendarPicker.currentMonth,
setPickerType: () => Function,
currentDate: new Date(),
onSetCurrentDate: () => Function,
onAdjustDate: () => Function,
});
const MainProvider = ({ children, mode = "single", range, setRange, theme = data_defaults_1.defaultTheme, blockedDates = [], minDate, maxDate, blockedWeekDay = [], }) => {
// #region States
const [currenRange, setCurrentrange] = (0, react_1.useState)(range);
const [currentDate, setCurrentDate] = (0, react_1.useState)(new Date());
const [pickerType, setPickerType] = (0, react_1.useState)(e_calendar_picker_1.eCalendarPicker.currentMonth);
// #endregion
// #region call backs
const onChange = (0, react_1.useCallback)((args) => {
setCurrentrange((prevRange) => {
switch (mode) {
case "single":
setRange([args]);
return [args];
default:
if (prevRange.length === 1) {
const newRange = (0, date_fns_1.isAfter)(args, prevRange[0]) || (0, date_fns_1.isSameDay)(args, prevRange[0])
? [...prevRange, args]
: [args];
setRange(newRange);
return newRange;
}
else {
setRange([args]);
return [args];
}
}
});
}, [mode, setRange]);
const onSetCurrentDate = (0, react_1.useCallback)((args) => {
setCurrentDate(args);
setPickerType((prev) => prev - 1);
}, [mode, setCurrentDate]);
const onAdjustDate = (0, react_1.useCallback)((isNext) => {
setCurrentDate((prev) => {
const currentDate = new Date(prev);
const changeFactor = isNext ? 1 : -1;
switch (pickerType) {
case e_calendar_picker_1.eCalendarPicker.currentYear:
currentDate.setFullYear(currentDate.getFullYear() + changeFactor);
break;
case e_calendar_picker_1.eCalendarPicker.currentDecade:
currentDate.setFullYear(currentDate.getFullYear() + 12 * changeFactor);
break;
default:
currentDate.setMonth(currentDate.getMonth() + changeFactor);
break;
}
return currentDate;
});
}, [pickerType]);
// #endregion
// #region variables
const memoValue = (0, react_1.useMemo)(() => ({
mode,
range: currenRange,
setRange,
theme: theme ?? data_defaults_1.defaultTheme,
blockedDates,
minDate,
maxDate,
blockedWeekDay,
onChange,
pickerType,
setPickerType,
currentDate,
onSetCurrentDate,
onAdjustDate,
}), [
mode,
range,
setRange,
theme,
blockedDates,
minDate,
maxDate,
blockedWeekDay,
onChange,
pickerType,
onSetCurrentDate,
]);
// #endregion
return <exports.Context.Provider value={memoValue}>{children}</exports.Context.Provider>;
};
exports.MainProvider = MainProvider;