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

Core React components for the NEXT Design System.

import { jsx, Fragment, jsxs } from "react/jsx-runtime";
import { forwardRef, useRef } from "react";
import { useDateSegment } from "@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 = useRef(null);
  const { segmentProps } = useDateSegment(segment, state, ref);
  return /* @__PURE__ */ 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 = forwardRef(
  function Placeholder2(props, ref) {
    const { name, state, placeholders, onKeyDown, ...others } = props;
    const { value, segments } = state;
    return /* @__PURE__ */ jsx(Fragment, { children: /* @__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,
              placeholder: placeholders[segment.type]
            },
            i
          ))
        ]
      }
    ) });
  }
);
export {
  Placeholder
};