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

Core React components for the NEXT Design System.

import { jsxs, jsx } from "react/jsx-runtime";
import { theme } from "@hitachivantara/uikit-styles";
import { HvIcon } from "../../icons.js";
import { useClasses } from "./Unit.styles.js";
import { HvButton } from "../../Button/Button.js";
import { HvBaseInput } from "../../BaseInput/BaseInput.js";
const 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 })
  ] });
};
export {
  Unit
};