@harvest-profit/npk
Version:
NPK UI Design System
93 lines • 5.85 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 helpers_1 = require("../DateInput/helpers");
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', isoType = null, autoDismiss = true, onChange: onExternalChange, range = false, visibleMonths = 1 }) => {
let includeTime = true;
if (range) {
const externalRangeValue = externalValue;
includeTime = (0, helpers_1.isoDateIncludesTime)(externalRangeValue.start) || (0, helpers_1.isoDateIncludesTime)(externalRangeValue.start);
}
else {
includeTime = (0, helpers_1.isoDateIncludesTime)(externalValue);
}
if (isoType === 'DateTime')
includeTime = true;
if (isoType === 'Date')
includeTime = false;
const formatter = (0, helpers_1.useValueFormatter)(output, includeTime);
let value;
if (range) {
const externalRangeValue = externalValue;
value = { start: formatter.from(externalRangeValue?.start), end: formatter.from(externalRangeValue?.end) };
}
else {
value = formatter.from(externalValue);
}
const rangeValue = 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(formatter.to(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: formatter.to(newValue), end: null });
}
else {
setSelectingStart(true); // The next click will select the start date
if (newValue < rangeValue?.start) { // Swap the start and end dates if the new value is before the start date
onExternalChange({ start: formatter.to(newValue), end: formatter.to(rangeValue?.start) });
}
else {
onExternalChange({ start: formatter.to(rangeValue?.start), end: formatter.to(newValue) });
}
if (autoDismiss && menuContext)
menuContext.setOpen(false);
}
};
const state = {
onChange,
range,
selectingStart,
hoveredDate,
setHoveredDate,
value: range ? { start: rangeValue?.start, end: rangeValue?.end } : value,
selectingValue: range ? (selectingStart ? rangeValue?.start : rangeValue?.end) : value,
};
const initialVisibleDate = range ? (rangeValue.start || rangeValue.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((0, utils_1.subtract)(visibleDate, 1, 'month')), 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((0, utils_1.add)(visibleDate, 1, 'month')), 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