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

UI Kit Core React components.

import { forwardRef, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useDateSegment } from "react-aria/useDateField";
//#region src/TimePicker/Placeholder.tsx
/** Convert `Date` into `hh:mm:ss` format */
var getDateValue = (date) => {
	if (!date) return "";
	const { hour, minute, second } = date;
	return [
		hour,
		minute,
		second
	].map((el) => String(el).padStart(2, "0")).join(":");
};
var PlaceholderSegment = ({ segment, state, value }) => {
	const ref = useRef(null);
	const { segmentProps } = useDateSegment(segment, state, ref);
	if (segment.type === "literal" && segment.text === "⁦") return;
	return /* @__PURE__ */ jsx("div", {
		ref,
		...segmentProps,
		children: value
	});
};
var Placeholder = forwardRef(function Placeholder(props, ref) {
	const { name, state, placeholders, onKeyDown, ...others } = props;
	const { value, segments } = state;
	return /* @__PURE__ */ jsxs("div", {
		ref,
		onKeyDown: (event) => {
			event.stopPropagation();
			onKeyDown?.(event);
		},
		...others,
		children: [name && /* @__PURE__ */ jsx("input", {
			type: "hidden",
			name,
			value: getDateValue(value)
		}), segments.map((segment, i) => /* @__PURE__ */ jsx(PlaceholderSegment, {
			segment,
			state,
			value: renderSegment(segment, placeholders[segment.type])
		}, segment.type === "literal" ? `literal-${i}` : segment.type))]
	});
});
function renderSegment(segment, placeholder) {
	if (segment.type === "literal") return segment.text;
	if (segment.isPlaceholder) return placeholder ?? segment.text;
	return segment.text.padStart(2, "0");
}
//#endregion
export { Placeholder };