@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
218 lines (217 loc) • 8.01 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const date = require("@internationalized/date");
const utils$1 = require("@mui/material/utils");
const datepicker$1 = require("@react-aria/datepicker");
const datepicker = require("@react-stately/datepicker");
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 useUniqueId = require("../hooks/useUniqueId.cjs");
const icons = require("../icons.cjs");
const setId = require("../utils/setId.cjs");
const Placeholder = require("./Placeholder.cjs");
const TimePicker_styles = require("./TimePicker.styles.cjs");
const Unit = require("./Unit/Unit.cjs");
const FormElement = require("../FormElement/FormElement.cjs");
const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
const WarningText = require("../FormElement/WarningText/WarningText.cjs");
const toTime = (value) => {
if (!value) return value;
const { hours, minutes, seconds } = value;
return new date.Time(hours, minutes, seconds);
};
const HvTimePicker = React.forwardRef(
function HvTimePicker2(props, ref) {
const {
classes: classesProp,
className,
id: idProp,
name,
required,
disabled,
readOnly,
label,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
description,
"aria-describedby": ariaDescribedBy,
status,
statusMessage,
"aria-errormessage": ariaErrorMessage,
placeholder,
hoursPlaceholder = "hh",
minutesPlaceholder = "mm",
secondsPlaceholder = "ss",
value: valueProp,
defaultValue: defaultValueProp,
timeFormat,
showSeconds,
disableExpand,
locale = utils.DEFAULT_LOCALE,
onToggle,
onChange,
// misc properties:
disablePortal = true,
escapeWithReference = true,
dropdownProps = {},
...others
} = uikitReactUtils.useDefaultProps("HvTimePicker", props);
const id = useUniqueId.useUniqueId(idProp);
const { classes, cx } = TimePicker_styles.useClasses(classesProp);
const timeFieldRef = React.useRef(null);
const { ref: refProp, ...otherDropdownProps } = dropdownProps;
const dropdownForkedRef = utils$1.useForkRef(ref, refProp);
const stateProps = {
value: toTime(valueProp),
defaultValue: toTime(defaultValueProp),
label,
locale,
isRequired: required,
isReadOnly: readOnly,
isDisabled: disabled,
granularity: showSeconds === false ? "minute" : "second",
hourCycle: timeFormat === "12" ? 12 : 24,
onChange: (value) => {
if (!value) return;
const { hour: hours, minute: minutes, second: seconds } = value;
onChange?.({ hours, minutes, seconds });
}
};
const state = datepicker.useTimeFieldState(stateProps);
const { labelProps, fieldProps, descriptionProps } = datepicker$1.useTimeField(
{
...stateProps,
id,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": ariaDescribedBy
},
state,
timeFieldRef
);
const [open, setOpen] = React.useState(false);
const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
const [validationState] = useControlled.useControlled(status, "standBy");
const placeholders = React.useMemo(
() => ({
hour: hoursPlaceholder,
minute: minutesPlaceholder,
second: secondsPlaceholder
}),
[hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]
);
const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
const isStateInvalid = validationState === "invalid";
const errorMessageId = isStateInvalid ? canShowError ? setId.setId(id, "error") : ariaErrorMessage : void 0;
return /* @__PURE__ */ jsxRuntime.jsxs(
FormElement.HvFormElement,
{
name,
required,
disabled,
status: validationState,
className: cx(classes.root, className),
...others,
children: [
/* @__PURE__ */ jsxRuntime.jsx(
LabelContainer.HvLabelContainer,
{
label,
description,
classes: {
root: classes.labelContainer,
label: classes.label,
description: classes.description
},
labelProps,
descriptionProps
}
),
/* @__PURE__ */ jsxRuntime.jsx(
BaseDropdown.HvBaseDropdown,
{
ref: dropdownForkedRef,
role: "combobox",
variableWidth: true,
disabled,
readOnly,
placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsxRuntime.jsx(
Placeholder.Placeholder,
{
ref: timeFieldRef,
name,
state,
placeholders,
className: cx(classes.placeholder, {
[classes.placeholderDisabled]: disabled
}),
...fieldProps
}
),
classes: {
header: cx(classes.dropdownHeader, {
[classes.dropdownHeaderInvalid]: isStateInvalid
}),
panel: classes.dropdownPanel,
headerOpen: classes.dropdownHeaderOpen
},
placement: "right",
adornment: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Time", className: classes.icon }),
expanded: open,
onToggle: (evt, newOpen) => {
if (disableExpand) return;
setOpen(newOpen);
onToggle?.(evt, newOpen);
},
onContainerCreation: (containerRef) => {
containerRef?.getElementsByTagName("input")[0]?.focus();
},
"aria-haspopup": "dialog",
"aria-label": ariaLabel,
"aria-labelledby": fieldProps["aria-labelledby"],
"aria-describedby": fieldProps["aria-describedby"],
"aria-invalid": isStateInvalid ? true : void 0,
"aria-errormessage": errorMessageId,
disablePortal,
popperProps: {
modifiers: [
{ name: "preventOverflow", enabled: escapeWithReference }
]
},
...otherDropdownProps,
children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: timeFieldRef, className: classes.timePopperContainer, children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(
Unit.Unit,
{
state,
segment,
placeholder: placeholders[segment.type],
onAdd: () => state.increment(segment.type),
onSub: () => state.decrement(segment.type),
onChange: (evt, val) => {
state.setSegment(segment.type, Number(val));
}
},
i
)) })
}
),
canShowError && /* @__PURE__ */ jsxRuntime.jsx(
WarningText.HvWarningText,
{
id: setId.setId(id, "error"),
disableBorder: true,
className: classes.error,
children: validationMessage
}
)
]
}
);
}
);
exports.timePickerClasses = TimePicker_styles.staticClasses;
exports.HvTimePicker = HvTimePicker;