@fremtind/jkl-datepicker-react
Version:
Jøkul react datepicker component
367 lines (366 loc) • 13 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var DatePicker_exports = {};
__export(DatePicker_exports, {
DatePicker: () => DatePicker
});
module.exports = __toCommonJS(DatePicker_exports);
var import_jkl_icon_button_react = require("@fremtind/jkl-icon-button-react");
var import_jkl_icons_react = require("@fremtind/jkl-icons-react");
var import_jkl_input_group_react = require("@fremtind/jkl-input-group-react");
var import_jkl_popover_react = require("@fremtind/jkl-popover-react");
var import_jkl_text_input_react = require("@fremtind/jkl-text-input-react");
var import_classnames = __toESM(require("classnames"));
var import_startOfDay = __toESM(require("date-fns/startOfDay"));
var import_react = __toESM(require("react"));
var import_react_dom = require("react-dom");
var import_Calendar = require("./internal/Calendar");
var import_utils = require("./internal/utils");
var import_utils2 = require("./utils");
var import_validation = require("./validation");
const DatePicker = (0, import_react.forwardRef)(
(props, forwardedInputRef) => {
const _a = props, {
"data-testautoid": testAutoId,
id,
className = "",
label = "Velg dato",
labelProps,
defaultValue,
defaultShow = false,
value,
disableBeforeDate: disableBefore,
disableAfterDate: disableAfter,
yearsToShow,
name,
helpLabel,
errorLabel,
invalid,
density,
days,
months,
monthLabel,
yearLabel,
placeholder = "dd.mm.\xE5\xE5\xE5\xE5",
width = "11.25rem",
onChange,
onBlur,
onFocus,
onKeyDown,
action,
showCalendarLabel = "\xC5pne kalender",
hideCalendarLabel = "Lukk kalender",
supportLabelProps,
tooltip,
textInputProps
} = _a, rest = __objRest(_a, [
"data-testautoid",
"id",
"className",
"label",
"labelProps",
"defaultValue",
"defaultShow",
"value",
"disableBeforeDate",
"disableAfterDate",
"yearsToShow",
"name",
"helpLabel",
"errorLabel",
"invalid",
"density",
"days",
"months",
"monthLabel",
"yearLabel",
"placeholder",
"width",
"onChange",
"onBlur",
"onFocus",
"onKeyDown",
"action",
"showCalendarLabel",
"hideCalendarLabel",
"supportLabelProps",
"tooltip",
"textInputProps"
]);
if (value && defaultValue) {
console.warn(
"DatePicker m\xE5 enten v\xE6re controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert."
);
}
const disableBeforeDate = (0, import_utils2.parseDateString)(disableBefore);
const minDate = disableBeforeDate ? (0, import_startOfDay.default)(disableBeforeDate) : void 0;
const disableAfterDate = (0, import_utils2.parseDateString)(disableAfter);
const maxDate = disableAfterDate ? (0, import_startOfDay.default)(disableAfterDate) : void 0;
const [date, setDate] = (0, import_react.useState)(
(0, import_utils.getInitialDate)(value, defaultValue, minDate, maxDate)
);
const [error, setError] = (0, import_react.useState)(null);
const [showCalendar, setShowCalendar] = (0, import_react.useState)(defaultShow);
const calendarRef = (0, import_react.useRef)(null);
const datepickerRef = (0, import_react.useRef)(null);
const iconButtonRef = (0, import_react.useRef)(null);
const inputRef = (0, import_react.useRef)(null);
const unifiedInputRef = (0, import_react.useCallback)(
(instance) => {
inputRef.current = instance;
if (forwardedInputRef) {
if (typeof forwardedInputRef === "function") {
forwardedInputRef(instance);
} else {
forwardedInputRef.current = instance;
}
}
},
[inputRef, forwardedInputRef]
);
const handleFocus = (0, import_react.useCallback)(
(e) => {
if (!onFocus || !datepickerRef.current) {
return;
}
const nextFocusIsInside = datepickerRef.current.contains(
e.relatedTarget
);
if (!nextFocusIsInside) {
onFocus(e, date, { error, value: e.target.value });
}
},
[onFocus, date, error]
);
const handleBlur = (0, import_react.useCallback)(
(e) => {
if (onBlur) {
onBlur(e, date, { error, value: e.target.value });
}
},
[onBlur, date, error]
);
const handleKeyDownAction = (0, import_react.useCallback)(
(e) => {
if (e.key === "Escape") {
setShowCalendar(false);
e.preventDefault();
e.stopPropagation();
}
if (action == null ? void 0 : action.onKeyDown) {
action.onKeyDown(e);
}
},
[setShowCalendar, action]
);
const handleChange = (0, import_react.useCallback)(
(e) => {
let nextDate = null;
let nextError = null;
if (e.target.value) {
const val = (0, import_utils2.parseDateString)(e.target.value);
if (!val) {
nextError = "WRONG_FORMAT";
} else if (minDate && !(0, import_validation.isWithinLowerBound)(val, minDate)) {
nextError = "OUTSIDE_LOWER_BOUND";
} else if (maxDate && !(0, import_validation.isWithinUpperBound)(val, maxDate)) {
nextError = "OUTSIDE_UPPER_BOUND";
} else {
setShowCalendar(false);
}
nextDate = val || null;
}
setError(nextError);
setDate(nextDate);
if (onChange) {
onChange(e, nextDate, {
error: nextError,
value: e.target.value
});
}
},
[onChange, setError, setDate, setShowCalendar, minDate, maxDate]
);
const clickCalendar = (0, import_react.useCallback)(
(e) => {
(0, import_react_dom.flushSync)(() => {
setShowCalendar(!showCalendar);
});
const calendarEl = calendarRef.current;
const button = calendarEl && calendarEl.querySelector(
'[aria-pressed="true"]'
);
window.requestAnimationFrame(() => button && button.focus());
if (action == null ? void 0 : action.onClick) {
action.onClick(e);
}
},
[setShowCalendar, showCalendar, action, calendarRef]
);
const handleClickCalendarDay = (0, import_react.useCallback)(
({ date: date2 }) => {
setShowCalendar(false);
setDate(date2);
if (inputRef.current) {
const node = inputRef.current;
node.value = (0, import_utils2.formatInput)(date2);
const event = document.createEvent("HTMLEvents");
event.initEvent("input", true, false);
node.dispatchEvent(event);
node.focus();
if (onChange) {
onChange(
event,
date2,
{
error: null,
value: node.value
}
);
}
}
},
[setShowCalendar, setDate, onChange]
);
const handleTabOutsideCalendar = (0, import_react.useCallback)(
(e) => {
e.preventDefault();
setShowCalendar(false);
iconButtonRef.current && iconButtonRef.current.focus();
},
[setShowCalendar]
);
return /* @__PURE__ */ import_react.default.createElement(
import_jkl_input_group_react.InputGroup,
__spreadProps(__spreadValues({
id,
className: (0, import_classnames.default)("jkl-datepicker", className)
}, rest), {
ref: datepickerRef,
label,
labelProps,
density,
helpLabel,
errorLabel,
supportLabelProps,
tooltip,
render: (inputProps) => /* @__PURE__ */ import_react.default.createElement(
import_jkl_text_input_react.BaseTextInput,
__spreadValues(__spreadValues({
"data-focused": showCalendar ? "true" : void 0,
ref: unifiedInputRef,
"data-testid": "jkl-datepicker__input",
"data-testautoid": testAutoId,
className: "jkl-datepicker__input",
name,
defaultValue,
density,
value,
type: "text",
placeholder,
width,
onFocus: handleFocus,
onBlur: handleBlur,
onChange: handleChange,
actionButton: /* @__PURE__ */ import_react.default.createElement(
import_jkl_popover_react.Popover,
{
positionReference: inputRef,
open: showCalendar,
onOpenChange: () => setShowCalendar(!showCalendar),
offset: 8
},
/* @__PURE__ */ import_react.default.createElement(
import_jkl_popover_react.Popover.Trigger,
__spreadProps(__spreadValues({}, action), {
"data-testid": "jkl-datepicker__trigger",
className: "jkl-text-input-action-button",
title: showCalendar ? hideCalendarLabel : showCalendarLabel,
tabIndex: 0,
onClick: clickCalendar,
onKeyDown: handleKeyDownAction,
asChild: true
}),
/* @__PURE__ */ import_react.default.createElement(import_jkl_icon_button_react.IconButton, null, /* @__PURE__ */ import_react.default.createElement(import_jkl_icons_react.CalendarIcon, null))
),
/* @__PURE__ */ import_react.default.createElement(import_jkl_popover_react.Popover.Content, { initialFocus: -1, padding: 24 }, /* @__PURE__ */ import_react.default.createElement(
import_Calendar.Calendar,
{
ref: calendarRef,
density,
date,
minDate,
maxDate,
days,
months,
monthLabel,
yearLabel,
yearsToShow,
onDateSelected: handleClickCalendarDay,
onTabOutside: handleTabOutsideCalendar
}
))
)
}, textInputProps), inputProps)
)
})
);
}
);
DatePicker.displayName = "DatePicker";
//# sourceMappingURL=DatePicker.js.map