@intility/bifrost-react-datepicker
Version:
React detepicker for Intility's design system, Bifrost.
493 lines (490 loc) • 13.1 kB
JavaScript
"use client";
import { c as _c } from "react-compiler-runtime";
import { createContext, forwardRef, useContext, useMemo, useState } from "react";
import classNames from "classnames";
import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons/faExclamationTriangle";
import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
import { faClock } from "@fortawesome/free-solid-svg-icons/faClock";
import { faCalendarAlt } from "@fortawesome/free-solid-svg-icons/faCalendarAlt";
import ReactDatePickerDefaultExport, { CalendarContainer } from "react-datepicker";
import Label from "@intility/bifrost-react/Label";
import Icon from "@intility/bifrost-react/Icon";
import Feedback from "@intility/bifrost-react/Feedback";
import Description from "@intility/bifrost-react/Description";
import Dropdown from "@intility/bifrost-react/Dropdown";
import useLocale from "@intility/bifrost-react/hooks/useLocale";
import useUniqueId from "@intility/bifrost-react/hooks/useUniqueId";
import enGbLocale from "./locales/en-gb.js";
import nbNoLocale from "./locales/nb-no.js";
import svSeLocale from "./locales/sv-se.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function CalendarContainerOverride(props) {
const $ = _c(7);
const {
ref,
placement
} = useContext(DatePickerCtx);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = [0, 4];
$[0] = t0;
} else {
t0 = $[0];
}
let t1;
if ($[1] !== props) {
t1 = /*#__PURE__*/_jsx(CalendarContainer, {
...props
});
$[1] = props;
$[2] = t1;
} else {
t1 = $[2];
}
const t2 = placement || "bottom";
const t3 = ref?.input;
let t4;
if ($[3] !== t1 || $[4] !== t2 || $[5] !== t3) {
t4 = /*#__PURE__*/_jsx(Dropdown, {
unstyled: true,
noArrow: true,
offset: t0,
visible: true,
content: t1,
placement: t2,
reference: t3
});
$[3] = t1;
$[4] = t2;
$[5] = t3;
$[6] = t4;
} else {
t4 = $[6];
}
return t4;
}
const DatePickerCtx = /*#__PURE__*/createContext({
ref: null
});
const ReactDatePicker = ReactDatePickerDefaultExport.default ?? ReactDatePickerDefaultExport;
// copied from DatePicker internals
// magic hack that lets us Omit `icon` but keep the discriminated union intact
// more info: https://github.com/microsoft/TypeScript/issues/31501#issuecomment-1280579305
// eslint-disable-next-line @typescript-eslint/no-explicit-any
/**
* Datepicker input for use in forms
*
* @see https://bifrost.intility.com/react/datepicker
*
* @example
* <DatePicker
* label="Select a date"
* selected={date}
* onChange={(newDate) => setDate(newDate)}
* />
*/
export const DatePicker = /*#__PURE__*/forwardRef((t0, ref) => {
const $ = _c(96);
let className;
let description;
let feedback;
let icon;
let id;
let label;
let props;
let style;
let t1;
let t10;
let t11;
let t12;
let t2;
let t3;
let t4;
let t5;
let t6;
let t7;
let t8;
let t9;
if ($[0] !== t0) {
({
label,
hideLabel: t1,
icon,
rightIcon: t2,
disabled: t3,
readOnly: t4,
state: t5,
feedback,
required: t6,
description,
requiredNoLabel: t7,
optional: t8,
className,
style,
isClearable: t9,
id,
timeIntervals: t10,
inline: t11,
small: t12,
...props
} = t0);
$[0] = t0;
$[1] = className;
$[2] = description;
$[3] = feedback;
$[4] = icon;
$[5] = id;
$[6] = label;
$[7] = props;
$[8] = style;
$[9] = t1;
$[10] = t10;
$[11] = t11;
$[12] = t12;
$[13] = t2;
$[14] = t3;
$[15] = t4;
$[16] = t5;
$[17] = t6;
$[18] = t7;
$[19] = t8;
$[20] = t9;
} else {
className = $[1];
description = $[2];
feedback = $[3];
icon = $[4];
id = $[5];
label = $[6];
props = $[7];
style = $[8];
t1 = $[9];
t10 = $[10];
t11 = $[11];
t12 = $[12];
t2 = $[13];
t3 = $[14];
t4 = $[15];
t5 = $[16];
t6 = $[17];
t7 = $[18];
t8 = $[19];
t9 = $[20];
}
const hideLabel = t1 === undefined ? false : t1;
const rightIcon = t2 === undefined ? false : t2;
const disabled = t3 === undefined ? false : t3;
const readOnly = t4 === undefined ? false : t4;
const state = t5 === undefined ? "default" : t5;
const required = t6 === undefined ? false : t6;
const requiredNoLabel = t7 === undefined ? false : t7;
const optional = t8 === undefined ? false : t8;
const isClearable = t9 === undefined ? false : t9;
const timeIntervals = t10 === undefined ? 30 : t10;
const inline = t11 === undefined ? false : t11;
const small = t12 === undefined ? false : t12;
const inputId = useUniqueId(id);
const feedbackId = inputId + "-bf-feedback-id";
const descriptionId = inputId + "-bf-description-id";
const t13 = feedback && feedbackId;
const t14 = description && descriptionId;
let t15;
if ($[21] !== props.ariaDescribedBy || $[22] !== t13 || $[23] !== t14) {
t15 = [props.ariaDescribedBy, t13, t14].filter(Boolean);
$[21] = props.ariaDescribedBy;
$[22] = t13;
$[23] = t14;
$[24] = t15;
} else {
t15 = $[24];
}
const describedby = t15.join(" ");
const {
dateOptions
} = useLocale();
const [datePickerRef, setDatePickerRef] = useState(null);
let t16;
if ($[25] !== datePickerRef || $[26] !== props.popperPlacement) {
t16 = {
placement: props.popperPlacement,
ref: datePickerRef
};
$[25] = datePickerRef;
$[26] = props.popperPlacement;
$[27] = t16;
} else {
t16 = $[27];
}
const contextValue = t16;
let datepickerLocale = enGbLocale;
bb0: switch (dateOptions.locale) {
case "nb-no":
{
datepickerLocale = nbNoLocale;
break bb0;
}
case "sv-se":
{
datepickerLocale = svSeLocale;
}
}
const mode = props?.showYearPicker && "year" || props?.showMonthYearPicker && "monthYear" || props?.showTimeSelectOnly && "time" || (props?.showTimeSelect || props?.showTimeInput) && "dateTime" || "date";
let displayIcon;
if (state === "warning" || state === "alert") {
displayIcon = faExclamationTriangle;
} else {
if (state === "success") {
displayIcon = faCheck;
} else {
if (icon) {
displayIcon = icon;
} else {
if (mode === "time") {
displayIcon = faClock;
} else {
displayIcon = faCalendarAlt;
}
}
}
}
const placeholderText = datepickerLocale.placeholder[mode];
const dateFormat = datepickerLocale.format[mode];
let t17;
if ($[28] !== dateOptions.locale) {
t17 = function firstLetterOfDay(day) {
if (typeof day === "string") {
return day.slice(0, 1).toUpperCase();
}
if (day instanceof Date) {
return day.toLocaleString(dateOptions.locale, {
weekday: "narrow"
}).toUpperCase();
}
return day;
};
$[28] = dateOptions.locale;
$[29] = t17;
} else {
t17 = $[29];
}
const firstLetterOfDay = t17;
const t18 = state === "success";
const t19 = state === "warning";
const t20 = state === "alert";
let t21;
if ($[30] !== className || $[31] !== inline || $[32] !== small || $[33] !== t18 || $[34] !== t19 || $[35] !== t20) {
t21 = classNames(className, "bf-datepicker-container", {
"bf-datepicker-success": t18,
"bf-datepicker-warning": t19,
"bf-datepicker-alert": t20,
"bf-datepicker-small": small,
"bf-datepicker-inline": inline
});
$[30] = className;
$[31] = inline;
$[32] = small;
$[33] = t18;
$[34] = t19;
$[35] = t20;
$[36] = t21;
} else {
t21 = $[36];
}
let t22;
if ($[37] !== disabled || $[38] !== hideLabel || $[39] !== inputId || $[40] !== label || $[41] !== optional || $[42] !== readOnly || $[43] !== required || $[44] !== requiredNoLabel) {
t22 = !hideLabel && /*#__PURE__*/_jsx(Label, {
htmlFor: inputId,
required: required && !requiredNoLabel,
optional: optional,
disabled: disabled,
readOnly: readOnly,
children: label
});
$[37] = disabled;
$[38] = hideLabel;
$[39] = inputId;
$[40] = label;
$[41] = optional;
$[42] = readOnly;
$[43] = required;
$[44] = requiredNoLabel;
$[45] = t22;
} else {
t22 = $[45];
}
let t23;
if ($[46] !== description || $[47] !== descriptionId) {
t23 = /*#__PURE__*/_jsx(Description, {
id: descriptionId,
children: description
});
$[46] = description;
$[47] = descriptionId;
$[48] = t23;
} else {
t23 = $[48];
}
const t24 = !rightIcon;
let t25;
if ($[49] !== isClearable || $[50] !== props.showTimeSelect || $[51] !== props.showTimeSelectOnly || $[52] !== rightIcon || $[53] !== t24) {
t25 = classNames("bf-datepicker-icon-container", {
"bf-datepicker-icon-right": rightIcon,
"bf-datepicker-icon-left": t24,
"bf-show-time-select": props.showTimeSelect,
"bf-show-time-select-only": props.showTimeSelectOnly,
"bf-datepicker-clearable": isClearable
});
$[49] = isClearable;
$[50] = props.showTimeSelect;
$[51] = props.showTimeSelectOnly;
$[52] = rightIcon;
$[53] = t24;
$[54] = t25;
} else {
t25 = $[54];
}
let t26;
if ($[55] !== className) {
t26 = classNames("bf-datepicker", "bf-open-sans", className);
$[55] = className;
$[56] = t26;
} else {
t26 = $[56];
}
let t27;
if ($[57] !== ref) {
t27 = r => {
setDatePickerRef(r);
if (typeof ref === "function") {
ref(r);
} else {
if (ref) {
ref.current = r;
}
}
};
$[57] = ref;
$[58] = t27;
} else {
t27 = $[58];
}
const t28 = inline ? undefined : CalendarContainerOverride;
let t29;
if ($[59] !== dateFormat || $[60] !== datepickerLocale.format.time || $[61] !== datepickerLocale.locale || $[62] !== describedby || $[63] !== disabled || $[64] !== firstLetterOfDay || $[65] !== inline || $[66] !== inputId || $[67] !== isClearable || $[68] !== placeholderText || $[69] !== props || $[70] !== readOnly || $[71] !== t26 || $[72] !== t27 || $[73] !== t28 || $[74] !== timeIntervals) {
t29 = /*#__PURE__*/_jsx(ReactDatePicker, {
readOnly: readOnly,
className: t26,
id: inputId,
dateFormat: dateFormat,
timeFormat: datepickerLocale.format.time,
showMonthDropdown: true,
useShortMonthInDropdown: true,
showYearDropdown: true,
yearDropdownItemNumber: 5,
disabled: disabled,
locale: datepickerLocale.locale,
placeholderText: placeholderText,
isClearable: isClearable,
inline: inline,
formatWeekDay: firstLetterOfDay,
fixedHeight: true,
timeIntervals: timeIntervals,
autoComplete: "off",
ref: t27,
calendarContainer: t28,
...props,
ariaDescribedBy: describedby
});
$[59] = dateFormat;
$[60] = datepickerLocale.format.time;
$[61] = datepickerLocale.locale;
$[62] = describedby;
$[63] = disabled;
$[64] = firstLetterOfDay;
$[65] = inline;
$[66] = inputId;
$[67] = isClearable;
$[68] = placeholderText;
$[69] = props;
$[70] = readOnly;
$[71] = t26;
$[72] = t27;
$[73] = t28;
$[74] = timeIntervals;
$[75] = t29;
} else {
t29 = $[75];
}
let t30;
if ($[76] !== displayIcon || $[77] !== inline) {
t30 = !inline && /*#__PURE__*/_jsx("span", {
className: "bf-datepicker-icon",
children: /*#__PURE__*/_jsx(Icon, {
icon: displayIcon
})
});
$[76] = displayIcon;
$[77] = inline;
$[78] = t30;
} else {
t30 = $[78];
}
let t31;
if ($[79] !== t25 || $[80] !== t29 || $[81] !== t30) {
t31 = /*#__PURE__*/_jsxs("div", {
className: t25,
children: [t29, t30]
});
$[79] = t25;
$[80] = t29;
$[81] = t30;
$[82] = t31;
} else {
t31 = $[82];
}
let t32;
if ($[83] !== feedback || $[84] !== feedbackId) {
t32 = /*#__PURE__*/_jsx(Feedback, {
id: feedbackId,
children: feedback
});
$[83] = feedback;
$[84] = feedbackId;
$[85] = t32;
} else {
t32 = $[85];
}
let t33;
if ($[86] !== style || $[87] !== t21 || $[88] !== t22 || $[89] !== t23 || $[90] !== t31 || $[91] !== t32) {
t33 = /*#__PURE__*/_jsxs("div", {
className: t21,
style: style,
"data-testid": "bf-datepicker-container",
children: [t22, t23, t31, t32]
});
$[86] = style;
$[87] = t21;
$[88] = t22;
$[89] = t23;
$[90] = t31;
$[91] = t32;
$[92] = t33;
} else {
t33 = $[92];
}
let t34;
if ($[93] !== contextValue || $[94] !== t33) {
t34 = /*#__PURE__*/_jsx(DatePickerCtx.Provider, {
value: contextValue,
children: t33
});
$[93] = contextValue;
$[94] = t33;
$[95] = t34;
} else {
t34 = $[95];
}
return t34;
});
DatePicker.displayName = "DatePicker";
export default DatePicker;