@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
54 lines (53 loc) • 2.01 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const uikitStyles = require("@hitachivantara/uikit-styles");
const icons = require("../../icons.cjs");
const Unit_styles = require("./Unit.styles.cjs");
const Button = require("../../Button/Button.cjs");
const BaseInput = require("../../BaseInput/BaseInput.cjs");
const Unit = ({
id,
state,
segment,
placeholder: placeholderProp,
onChange,
onAdd,
onSub
}) => {
const { classes } = Unit_styles.useClasses();
const { type, text } = segment;
const placeholder = placeholderProp ?? segment.placeholder;
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: true, onClick: onAdd }),
type === "literal" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.separator, children: text }),
type === "dayPeriod" && /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, className: classes.periodToggle, onClick: onAdd, children: text }),
["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsxRuntime.jsx(
BaseInput.HvBaseInput,
{
id,
style: {
...uikitStyles.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__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", onClick: onSub })
] });
};
exports.Unit = Unit;