import * as React from 'react'; import { css } from '@patternfly/react-styles'; import datePickerStyles from '@patternfly/react-styles/css/components/DatePicker/date-picker'; import menuStyles from '@patternfly/react-styles/css/components/Menu/menu'; import { getUniqueId } from '../../helpers'; import { Popper } from '../../helpers/Popper/Popper'; import { Menu, MenuContent, MenuList, MenuItem } from '../Menu'; import { InputGroup, InputGroupItem } from '../InputGroup'; import { TextInput, TextInputProps } from '../TextInput'; import { KeyTypes } from '../../helpers/constants'; import { parseTime, validateTime, makeTimeOptions, amSuffix, pmSuffix, getHours, getMinutes, isWithinMinMax, getSeconds } from './TimePickerUtils'; import { HelperText, HelperTextItem } from '../HelperText'; import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon'; import cssDatePickerFormControlWidth from '@patternfly/react-tokens/dist/esm/c_date_picker__input_c_form_control_Width'; export interface TimePickerProps extends Omit, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> { /** Additional classes added to the time picker. */ className?: string; /** Accessible label for the time picker */ 'aria-label'?: string; /** Flag indicating the time picker is disabled */ isDisabled?: boolean; /** String to display in the empty time picker field as a hint for the expected time format */ placeholder?: string; /** Character to display between the hour and minute */ delimiter?: string; /** A time string. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format */ time?: string | Date; /** Error message to display when the time is provided in an invalid format. */ invalidFormatErrorMessage?: string; /** Error message to display when the time provided is not within the minTime/maxTime constriants */ invalidMinMaxErrorMessage?: string; /** True if the time is 24 hour time. False if the time is 12 hour time */ is24Hour?: boolean; /** Optional event handler called each time the value in the time picker input changes. */ onChange?: ( event: React.FormEvent, time: string, hour?: number, minute?: number, seconds?: number, isValid?: boolean ) => void; /** Optional validator can be provided to override the internal time validator. */ validateTime?: (time: string) => boolean; /** Id of the time picker */ id?: string; /** Width of the time picker. */ width?: string; /** The container to append the menu to. Defaults to 'inline'. * If your menu is being cut off you can append it to an element higher up the DOM tree. * Some examples: * menuAppendTo="parent" * menuAppendTo={() => document.body} * menuAppendTo={document.getElementById('target')} */ menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent'; /** Size of step between time options in minutes.*/ stepMinutes?: number; /** Additional props for input field */ inputProps?: TextInputProps; /** A time string indicating the minimum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format */ minTime?: string | Date; /** A time string indicating the maximum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format */ maxTime?: string | Date; /** Includes number of seconds with the chosen time and allows users to manually edit the seconds value. */ includeSeconds?: boolean; /** Flag to control the opened state of the time picker menu */ isOpen?: boolean; /** Handler invoked each time the open state of time picker updates */ setIsOpen?: (isOpen?: boolean) => void; /** z-index of the time picker */ zIndex?: number; } interface TimePickerState { isInvalid: boolean; isTimeOptionsOpen: boolean; timeState: string; focusedIndex: number; scrollIndex: number; timeRegex: RegExp; minTimeState: string; maxTimeState: string; } class TimePicker extends