@harvest-profit/npk
Version:
NPK UI Design System
91 lines • 5.49 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Calendar_module_css_1 = __importDefault(require("./Calendar.module.css"));
const regular_1 = require("@harvest-profit/npk/icons/regular");
const Button_1 = __importDefault(require("../Button"));
const Month_1 = __importDefault(require("./Month"));
const utils_1 = require("./utils");
const Menu_1 = require("../Menu");
const defaultPresets = [
{ label: 'Today', date: (0, utils_1.today)() },
{ label: 'Last Month', date: (0, utils_1.lastMonth)() },
{ label: 'Next Month', date: (0, utils_1.nextMonth)() },
{ label: 'Last Year', date: (0, utils_1.lastYear)() },
{ label: 'Next Year', date: (0, utils_1.nextYear)() },
];
const Calendar = ({ presets = true, value: externalValue, output = 'ISO', autoDismiss = true, onChange: onExternalChange, range = false, visibleMonths = 1 }) => {
let fromFormat = v => v;
let toFormat = v => v;
switch (output) {
case 'ISO':
fromFormat = utils_1.fromISO;
toFormat = utils_1.toISO;
break;
case 'timestamp':
fromFormat = utils_1.fromTimestamp;
toFormat = utils_1.toTimestamp;
break;
default:
break;
}
let value = externalValue;
if (range) {
value = { start: fromFormat(value?.start), end: fromFormat(value?.end) };
}
else {
value = fromFormat(value);
}
const [selectingStart, setSelectingStart] = (0, react_1.useState)(true); // For range selection, true if we are selecting the start date
const [hoveredDate, setHoveredDate] = (0, react_1.useState)(); // For range selection, the date that is currently hovered to show the potential range the user is selecting when setting the end date.
const menuContext = (0, react_1.useContext)(Menu_1.MenuContext);
const onChange = (newValue) => {
if (!range) {
onExternalChange(toFormat(newValue));
if (autoDismiss && menuContext)
menuContext.setOpen(false);
return;
}
setHoveredDate(null); // We are no longer hovering if we've made a selection
if (selectingStart) {
setSelectingStart(false); // We are now selecting the end date
onExternalChange({ start: toFormat(newValue), end: null });
}
else {
setSelectingStart(true); // The next click will select the start date
if (newValue < value?.start) { // Swap the start and end dates if the new value is before the start date
onExternalChange({ start: toFormat(newValue), end: toFormat(value?.start) });
}
else {
onExternalChange({ start: toFormat(value?.start), end: toFormat(newValue) });
}
if (autoDismiss && menuContext)
menuContext.setOpen(false);
}
};
const state = {
onChange,
range,
selectingStart,
hoveredDate,
setHoveredDate,
value: range ? { start: value?.start, end: value?.end } : value,
selectingValue: range ? (selectingStart ? value?.start : value?.end) : value,
};
const initialVisibleDate = range ? (value.start || value.end) : value;
const [visibleDate, setVisibleDate] = (0, react_1.useState)(initialVisibleDate || new Date());
let presetButtons = [];
if (presets === true) {
presetButtons = defaultPresets;
}
else if (Array.isArray(presets)) {
presetButtons.push(...presets);
}
return ((0, jsx_runtime_1.jsxs)("div", { className: Calendar_module_css_1.default.Calendar, children: [(0, jsx_runtime_1.jsxs)("header", { children: [(0, jsx_runtime_1.jsx)("h4", { "data-component": "calendar-title", children: (0, utils_1.nameForVisibleDates)(visibleDate, visibleMonths) }), (0, jsx_runtime_1.jsx)("span", { "data-component": "calendar-backwards", children: (0, jsx_runtime_1.jsx)(Button_1.default, { autoDismiss: false, onClick: () => setVisibleDate(new Date(new Date(visibleDate).setMonth(visibleDate.getMonth() - 1))), icon: regular_1.BackwardIndicatorIcon, "aria-label": "Previous month" }) }), (0, jsx_runtime_1.jsx)("span", { "data-component": "calendar-forwards", children: (0, jsx_runtime_1.jsx)(Button_1.default, { autoDismiss: false, onClick: () => setVisibleDate(new Date(new Date(visibleDate).setMonth(visibleDate.getMonth() + 1))), icon: regular_1.ForwardIndicatorIcon, "aria-label": "Next month" }) }), presetButtons.length > 0 && ((0, jsx_runtime_1.jsx)("span", { "data-component": "calendar-actions", children: (0, jsx_runtime_1.jsx)("span", { children: presetButtons.map((preset) => ((0, jsx_runtime_1.jsx)(Button_1.default, { invisible: true, variant: "primary", size: "sm", autoDismiss: false, onClick: () => setVisibleDate(preset.date), children: preset.label }, preset.label))) }) }))] }), visibleMonths > 1 ? ((0, jsx_runtime_1.jsx)("span", { children: [...Array(visibleMonths)].map((_, i) => ((0, jsx_runtime_1.jsx)(Month_1.default, { visibleDate: visibleDate, monthOffset: i, state: state }, i))) })) : ((0, jsx_runtime_1.jsx)(Month_1.default, { visibleDate: visibleDate, state: state }))] }));
};
exports.default = Calendar;
//# sourceMappingURL=index.js.map