@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
344 lines (343 loc) • 12.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const utils$1 = require("@mui/material/utils");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const utils = require("../Calendar/utils.cjs");
const LabelContainer = require("../FormElement/LabelContainer.cjs");
const useControlled = require("../hooks/useControlled.cjs");
const useLabels = require("../hooks/useLabels.cjs");
const useUniqueId = require("../hooks/useUniqueId.cjs");
const icons = require("../icons.cjs");
const setId = require("../utils/setId.cjs");
const useSavedState = require("../utils/useSavedState.cjs");
const DatePicker_styles = require("./DatePicker.styles.cjs");
const useVisibleDate = require("./useVisibleDate.cjs");
const utils$2 = require("./utils.cjs");
const Calendar = require("../Calendar/Calendar.cjs");
const Button = require("../Button/Button.cjs");
const FormElement = require("../FormElement/FormElement.cjs");
const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
const utils$3 = require("../FormElement/utils.cjs");
const WarningText = require("../FormElement/WarningText/WarningText.cjs");
const ActionBar = require("../ActionBar/ActionBar.cjs");
const DEFAULT_LABELS = {
/** Apply button label. */
applyLabel: "Apply",
/** Cancel button label. */
cancelLabel: "Cancel",
/** Clear button label. */
clearLabel: "Clear",
/** Invalid Date label. */
invalidDateLabel: "Invalid date"
};
const HvDatePicker = React.forwardRef(
function HvDatePicker2(props, ref) {
const {
classes: classesProp,
className,
id,
name,
required,
disabled,
readOnly,
label,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
description,
"aria-describedby": ariaDescribedBy,
onChange,
onCancel,
onClear,
status,
statusMessage,
"aria-errormessage": ariaErrorMessage,
placeholder,
labels: labelsProp,
value,
startValue,
endValue,
expanded,
defaultExpanded,
onToggle,
rangeMode = false,
startAdornment,
horizontalPlacement = "right",
locale = utils.DEFAULT_LOCALE,
showActions,
showClear,
disablePortal = true,
escapeWithReference = true,
dropdownProps = {},
calendarProps,
...others
} = uikitReactUtils.useDefaultProps("HvDatePicker", props);
const { classes, cx } = DatePicker_styles.useClasses(classesProp);
const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
const elementId = useUniqueId.useUniqueId(id);
const [validationState, setValidationState] = useControlled.useControlled(
status,
"standBy"
);
const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
const [calendarOpen, setCalendarOpen] = useControlled.useControlled(
expanded,
Boolean(defaultExpanded)
);
const [startDate, setStartDate, rollbackStartDate] = useSavedState.useSavedState(
rangeMode ? startValue : value
);
const [endDate, setEndDate, rollbackEndDate] = useSavedState.useSavedState(endValue);
const [visibleDate, dispatchAction] = useVisibleDate.default(startDate, endDate);
const focusTarget = React.useRef(null);
const { ref: refProp, ...otherDropdownProps } = dropdownProps;
const dropdownForkedRef = utils$1.useForkRef(ref, refProp);
React.useEffect(() => {
setStartDate(rangeMode ? startValue : value, true);
setEndDate(endValue, true);
}, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);
const endDateIsSet = React.useRef(false);
endDateIsSet.current = endDate != null;
React.useEffect(() => {
if (startDate != null) {
dispatchAction({
type: "month_year",
target: endDateIsSet.current ? "left" : "best",
year: startDate.getFullYear(),
month: startDate.getMonth() + 1
});
}
}, [dispatchAction, startDate]);
React.useEffect(() => {
if (endDate != null) {
dispatchAction({
type: "month_year",
target: "right",
year: endDate.getFullYear(),
month: endDate.getMonth() + 1
});
}
}, [dispatchAction, endDate]);
const handleApply = () => {
setStartDate(startDate, true);
setEndDate(endDate ?? startDate, true);
onChange?.(startDate, endDate);
setValidationState(() => {
if (required && (!utils.isDate(startDate) || rangeMode && !utils.isDate(endDate))) {
return "invalid";
}
return "valid";
});
setCalendarOpen(false);
};
const handleCancel = () => {
rollbackStartDate();
rollbackEndDate();
onCancel?.();
setCalendarOpen(false);
};
const handleClear = () => {
setStartDate(void 0, false);
setEndDate(void 0, false);
onClear?.();
};
const handleCalendarClose = () => {
if (rangeMode || showActions) {
handleCancel();
}
};
const handleToggle = (evt, open) => {
if (evt === null) return;
onToggle?.(evt, open);
setCalendarOpen(open);
if (!open) handleCalendarClose();
};
const focusOnContainer = () => {
focusTarget.current?.focus();
};
const handleDateChange = (event, newDate) => {
if (!utils.isDate(newDate)) return;
const autoSave = !showActions && !rangeMode;
if (rangeMode) {
if (!startDate || startDate && endDate || newDate < startDate) {
setStartDate(newDate);
setEndDate(void 0);
} else {
setEndDate(newDate);
}
} else {
setStartDate(newDate, autoSave);
}
if (autoSave) {
onChange?.(newDate);
setValidationState(() => {
if (required && !utils.isDate(newDate)) {
return "invalid";
}
return "valid";
});
setCalendarOpen(false);
}
};
const handleInputDateChange = (event, newDate, position) => {
if (!utils.isDate(newDate)) return;
if (!rangeMode) {
handleDateChange(event, newDate);
return;
}
if (position === "left") {
if (endDate) setStartDate(newDate > endDate ? endDate : newDate);
} else if (position === "right") {
if (!startDate) {
if (endDate) setStartDate(newDate > endDate ? endDate : newDate);
return;
}
setEndDate(newDate < startDate ? startDate : newDate);
}
};
const renderActions = () => /* @__PURE__ */ jsxRuntime.jsxs(ActionBar.HvActionBar, { className: cx({ [classes.actionContainer]: showClear }), children: [
showClear && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.leftContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
Button.HvButton,
{
id: setId.setId(id, "action", "clear"),
className: classes.action,
variant: "primaryGhost",
onClick: handleClear,
children: labels?.clearLabel
}
) }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.rightContainer, children: [
/* @__PURE__ */ jsxRuntime.jsx(
Button.HvButton,
{
id: setId.setId(id, "action", "apply"),
className: classes.action,
variant: "primaryGhost",
onClick: handleApply,
children: labels?.applyLabel
}
),
/* @__PURE__ */ jsxRuntime.jsx(
Button.HvButton,
{
id: setId.setId(id, "action", "cancel"),
className: classes.action,
variant: "primaryGhost",
onClick: handleCancel,
children: labels?.cancelLabel
}
)
] })
] });
const dateValue = rangeMode ? { startDate, endDate } : startDate;
const dateString = utils$2.getDateLabel(dateValue, rangeMode, locale);
const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
const isStateInvalid = utils$3.isInvalid(validationState);
let errorMessageId;
if (isStateInvalid) {
errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
}
return /* @__PURE__ */ jsxRuntime.jsxs(
FormElement.HvFormElement,
{
id,
name,
value: dateValue,
status: validationState,
disabled,
required,
className: cx(classes.root, className),
readOnly,
...others,
children: [
/* @__PURE__ */ jsxRuntime.jsx(
LabelContainer.HvLabelContainer,
{
label,
description,
labelId: setId.setId(elementId, "label"),
descriptionId: setId.setId(elementId, "description"),
classes: {
root: classes.labelContainer,
label: classes.label,
description: classes.description
}
}
),
/* @__PURE__ */ jsxRuntime.jsxs(
BaseDropdown.HvBaseDropdown,
{
ref: dropdownForkedRef,
role: "combobox",
classes: {
root: classes.dropdown,
panel: classes.panel,
header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),
headerOpen: classes.dropdownHeaderOpen,
placeholder: cx(classes.inputText, {
[classes.dateText]: dateString
}),
container: classes.container
},
readOnly,
disabled,
disablePortal,
variableWidth: true,
placement: horizontalPlacement,
expanded: calendarOpen,
onToggle: handleToggle,
onClickOutside: handleCalendarClose,
onContainerCreation: focusOnContainer,
placeholder: dateString || placeholder || "",
adornment: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Calendar", className: classes.icon }),
popperProps: {
modifiers: [
{ name: "preventOverflow", enabled: escapeWithReference }
]
},
"aria-haspopup": "dialog",
"aria-label": ariaLabel,
"aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
"aria-invalid": isStateInvalid ? true : void 0,
"aria-errormessage": errorMessageId,
"aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
...otherDropdownProps,
children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { ref: focusTarget, tabIndex: -1 }),
/* @__PURE__ */ jsxRuntime.jsx(
Calendar.HvCalendar,
{
id: setId.setId(id, "calendar"),
startAdornment,
onChange: handleDateChange,
onInputChange: handleInputDateChange,
onVisibleDateChange: (_event, type, month, target) => {
dispatchAction({ type, target, month });
},
locale,
...visibleDate,
...calendarProps,
invalidDateLabel: labels?.invalidDateLabel
}
),
(rangeMode || showActions) && renderActions()
]
}
),
canShowError && /* @__PURE__ */ jsxRuntime.jsx(
WarningText.HvWarningText,
{
id: setId.setId(elementId, "error"),
disableBorder: true,
className: cx(classes.error),
children: validationMessage
}
)
]
}
);
}
);
exports.datePickerClasses = DatePicker_styles.staticClasses;
exports.HvDatePicker = HvDatePicker;