@hitachivantara/uikit-react-core/dist/TimePicker/Unit/Unit.js

UI Kit Core React components.

import { HvIcon } from "../../icons.js";
import { HvButton } from "../../Button/Button.js";
import { HvBaseInput } from "../../BaseInput/BaseInput.js";
import { useClasses } from "./Unit.styles.js";
import { theme } from "@hitachivantara/uikit-styles";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/TimePicker/Unit/Unit.tsx
var Unit = ({ id, state, segment, placeholder: placeholderProp, onChange, onAdd, onSub }) => {
	const { classes } = useClasses();
	const { type, text } = segment;
	const placeholder = placeholderProp ?? segment.placeholder;
	return /* @__PURE__ */ jsxs("div", {
		className: classes.root,
		children: [
			type !== "literal" && /* @__PURE__ */ jsx(HvIcon, {
				name: "CaretDown",
				size: "xs",
				rotate: true,
				onClick: onAdd
			}),
			type === "literal" && /* @__PURE__ */ jsx("div", {
				className: classes.separator,
				children: text
			}),
			type === "dayPeriod" && /* @__PURE__ */ jsx(HvButton, {
				icon: true,
				className: classes.periodToggle,
				onClick: onAdd,
				children: text
			}),
			[
				"hour",
				"minute",
				"second"
			].includes(type) && /* @__PURE__ */ jsx(HvBaseInput, {
				id,
				style: { ...theme.typography.title3 },
				classes: {
					input: classes.input,
					root: classes.inputRoot
				},
				onKeyDown: (event) => {
					if ("key" in event && event.key === "Enter") {
						event.preventDefault();
						event.stopPropagation();
					}
				},
				required: true,
				invalid: state.isInvalid,
				value: text.padStart(2, "0"),
				onChange,
				placeholder,
				inputProps: {
					autoComplete: "off",
					type: "number"
				}
			}),
			type !== "literal" && /* @__PURE__ */ jsx(HvIcon, {
				name: "CaretDown",
				size: "xs",
				onClick: onSub
			})
		]
	});
};
//#endregion
export { Unit };