@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
103 lines • 6.04 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { isBefore, isSameDay, isWeekend } from "date-fns";
import React, { useCallback } from "react";
import { DayPicker, dateMatchModifiers } from "react-day-picker";
import { Show } from "../../../layout/responsive/index.js";
import { useRenameCSS } from "../../../theme/Theme.js";
import { omit } from "../../../util/index.js";
import { useDateLocale } from "../../../util/i18n/i18n.hooks.js";
import { getLocaleFromString } from "../../Date.locale.js";
import { isDateRange } from "../../Date.typeutils.js";
import { clampDisplayMonth, isDateOutsideRange } from "../../date-utils/index.js";
import { DatePickerDayButton } from "./DatePicker.DayButton.js";
import { DatePickerMonths } from "./DatePicker.Months.js";
import { DatePickerWeekNumber } from "./DatePicker.WeekNumber.js";
/**
* To support backwards compatibility with the old datepicker,
* we need to provide a partial implementation of the classnames
*/
const LegacyClassNames = {
root: "rdp",
button_next: "button",
day: "rdp-cell",
day_button: "rdp-day rdp-button",
/* We set this directly on DayButton */
disabled: "",
hidden: "rdp-day_hidden",
outside: "rdp-day_outside",
selected: "rdp-day_selected",
weekday: "rdp-head_cell",
weekdays: "rdp-head_row",
week: "rdp-row",
weeks: "rdp-tbody",
month_grid: "rdp-table",
week_number: "rdp-weeknumber",
};
const ReactDayPicker = (_a) => {
var { className, dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, fixedWeeks = false, onWeekNumberClick, fromDate, toDate, month, mode: _mode, handleSelect, locale: _locale } = _a, rest = __rest(_a, ["className", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "fixedWeeks", "onWeekNumberClick", "fromDate", "toDate", "month", "mode", "handleSelect", "locale"]);
const { cn } = useRenameCSS();
const langProviderLocale = useDateLocale();
const locale = _locale ? getLocaleFromString(_locale) : langProviderLocale;
const mode = _mode !== null && _mode !== void 0 ? _mode : "single";
return (React.createElement(DayPicker, Object.assign({ captionLayout: dropdownCaption ? "dropdown" : "label", hideNavigation: true, locale: locale, mode: mode, onSelect: (newSelection, newDate) => {
/**
* In the case where we have:
* - Mode: "range"
* - selected: { from: undefined, to: Date }
*
* RDP returns undefined for newSelection. We need to manually handle this case.
*/
if (mode !== "range" || newSelection || !isDateRange(selected)) {
handleSelect(newSelection);
return;
}
if (!selected.to) {
handleSelect({ from: newDate, to: undefined });
return;
}
let range;
if (isSameDay(selected.to, newDate)) {
range = undefined;
}
else if (isBefore(newDate, selected.to)) {
range = { from: newDate, to: selected.to };
}
else {
range = { from: selected.to, to: newDate };
}
handleSelect(range);
}, selected: selected, classNames: LegacyClassNames, components: {
MonthCaption: () => React.createElement(React.Fragment, null),
DayButton: useCallback((props) => React.createElement(DatePickerDayButton, Object.assign({}, props, { locale: locale })), [locale]),
Month: useCallback((props) => (React.createElement(DatePickerMonths, Object.assign({}, props, { locale: locale, onWeekNumberClick: mode === "multiple" ? onWeekNumberClick : undefined }))), [locale, mode, onWeekNumberClick]),
Day: useCallback((props) => (React.createElement("td", Object.assign({}, omit(props, ["day", "modifiers"]), { className: "rdp-cell", role: undefined }))), []),
WeekNumber: useCallback((props) => (React.createElement(DatePickerWeekNumber, Object.assign({}, props, { showOnDesktop: true, onWeekNumberClick: mode === "multiple" ? onWeekNumberClick : undefined }))), [mode, onWeekNumberClick]),
/* On smaller screens we hide it to accomedate our custom week-selector */
WeekNumberHeader: useCallback((props) => (React.createElement(Show, { above: "sm", asChild: true },
React.createElement("th", Object.assign({}, props)))), []),
Weekdays: useCallback((props) => (React.createElement("thead", Object.assign({}, props, { className: "rdp-head", "aria-hidden": true }),
React.createElement("tr", { className: "rdp-head_row" }, props.children))), []),
}, className: cn("navds-date", className), disabled: (day) => {
return ((disableWeekends && isWeekend(day)) ||
dateMatchModifiers(day, disabled) ||
isDateOutsideRange({ day, fromDate, toDate }));
}, weekStartsOn: 1, modifiers: {
weekend: (day) => disableWeekends && isWeekend(day),
}, modifiersClassNames: {
weekend: "rdp-day__weekend",
},
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus: false, showWeekNumber: showWeekNumber, fixedWeeks: fixedWeeks, showOutsideDays: true, startMonth: fromDate, endMonth: toDate, month: clampDisplayMonth({ month, start: fromDate, end: toDate }) }, omit(rest, ["onSelect", "role", "id", "defaultSelected"]))));
};
export { ReactDayPicker };
//# sourceMappingURL=DatePicker.RDP.js.map