@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
54 lines (53 loc) • 1.78 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const datepicker = require("@react-aria/datepicker");
const getDateValue = (date) => {
if (!date) return "";
const { hour, minute, second } = date;
return [hour, minute, second].map((el) => String(el).padStart(2, "0")).join(":");
};
const PlaceholderSegment = ({
segment,
state,
placeholder
}) => {
const ref = React.useRef(null);
const { segmentProps } = datepicker.useDateSegment(segment, state, ref);
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...segmentProps, children: (() => {
if (segment.type === "literal") return segment.text;
if (segment.isPlaceholder) return placeholder ?? segment.text;
return segment.text.padStart(2, "0");
})() });
};
const Placeholder = React.forwardRef(
function Placeholder2(props, ref) {
const { name, state, placeholders, onKeyDown, ...others } = props;
const { value, segments } = state;
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
"div",
{
ref,
onKeyDown: (event) => {
event.stopPropagation();
onKeyDown?.(event);
},
...others,
children: [
name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: getDateValue(value) }),
segments.map((segment) => /* @__PURE__ */ jsxRuntime.jsx(
PlaceholderSegment,
{
segment,
state,
placeholder: placeholders[segment.type]
},
segment.type
))
]
}
) });
}
);
exports.Placeholder = Placeholder;