Function TimeField

starters/hooks/src/TimeField.tsx:18–44

(props: TimeFieldProps)

}

export function TimeField(props: TimeFieldProps) {
  let {locale} = useLocale();
  let state = useTimeFieldState({...props, locale});
  let ref = useRef<HTMLDivElement>(null);
  /*- begin highlight -*/
  let {labelProps, fieldProps} = useTimeField(props, state, ref);
  /*- end highlight -*/
  let [isFocusWithin, setFocusWithin] = useState(false);
  let {focusWithinProps} = useFocusWithin({onFocusWithinChange: setFocusWithin});

  return (
    <div className="react-aria-TimeField">
      <label className="react-aria-Label" {...labelProps}>
        {props.label}
      </label>
      <div
        {...mergeProps(fieldProps, focusWithinProps)}
        ref={ref}
        className="react-aria-DateInput inset"
        data-focus-within={isFocusWithin || undefined}>
        {state.segments.map((segment, i) => (
          <DateSegment key={i} segment={segment} state={state} />
        ))}
      </div>
    </div>
  );
}

function DateSegment({segment, state}: {segment: DateSegmentType; state: TimeFieldState}) {
  let ref = useRef<HTMLSpanElement>(null);