UNPKG

4.64 kBTypeScriptView Raw
1import * as React from 'react';
2import { TextInputProps } from '../TextInput';
3export interface TimePickerProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
4 /** Additional classes added to the time picker. */
5 className?: string;
6 /** Accessible label for the time picker */
7 'aria-label'?: string;
8 /** Flag indicating the time picker is disabled */
9 isDisabled?: boolean;
10 /** String to display in the empty time picker field as a hint for the expected time format */
11 placeholder?: string;
12 /** Character to display between the hour and minute */
13 delimiter?: string;
14 /** A time string. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format */
15 time?: string | Date;
16 /** Error message to display when the time is provided in an invalid format. */
17 invalidFormatErrorMessage?: string;
18 /** Error message to display when the time provided is not within the minTime/maxTime constriants */
19 invalidMinMaxErrorMessage?: string;
20 /** True if the time is 24 hour time. False if the time is 12 hour time */
21 is24Hour?: boolean;
22 /** Optional event handler called each time the value in the time picker input changes. */
23 onChange?: (time: string, hour?: number, minute?: number, seconds?: number, isValid?: boolean) => void;
24 /** Optional validator can be provided to override the internal time validator. */
25 validateTime?: (time: string) => boolean;
26 /** Id of the time picker */
27 id?: string;
28 /** Width of the time picker. */
29 width?: string;
30 /** The container to append the menu to. Defaults to 'inline'.
31 * If your menu is being cut off you can append it to an element higher up the DOM tree.
32 * Some examples:
33 * menuAppendTo="parent"
34 * menuAppendTo={() => document.body}
35 * menuAppendTo={document.getElementById('target')}
36 */
37 menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
38 /** Size of step between time options in minutes.*/
39 stepMinutes?: number;
40 /** Additional props for input field */
41 inputProps?: TextInputProps;
42 /** A time string indicating the minimum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format */
43 minTime?: string | Date;
44 /** A time string indicating the maximum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format */
45 maxTime?: string | Date;
46 /** Includes number of seconds with the chosen time and allows users to manually edit the seconds value. */
47 includeSeconds?: boolean;
48}
49interface TimePickerState {
50 isInvalid: boolean;
51 isOpen: boolean;
52 timeState: string;
53 focusedIndex: number;
54 scrollIndex: number;
55 timeRegex: RegExp;
56 minTimeState: string;
57 maxTimeState: string;
58}
59export declare class TimePicker extends React.Component<TimePickerProps, TimePickerState> {
60 static displayName: string;
61 private baseComponentRef;
62 private toggleRef;
63 private inputRef;
64 private menuRef;
65 static defaultProps: {
66 className: string;
67 isDisabled: boolean;
68 time: string;
69 is24Hour: boolean;
70 invalidFormatErrorMessage: string;
71 invalidMinMaxErrorMessage: string;
72 placeholder: string;
73 delimiter: string;
74 'aria-label': string;
75 width: string;
76 menuAppendTo: string;
77 stepMinutes: number;
78 inputProps: {};
79 minTime: string;
80 maxTime: string;
81 };
82 constructor(props: TimePickerProps);
83 componentDidMount(): void;
84 componentWillUnmount(): void;
85 onDocClick: (event: MouseEvent | TouchEvent) => void;
86 handleGlobalKeys: (event: KeyboardEvent) => void;
87 componentDidUpdate(prevProps: TimePickerProps, prevState: TimePickerState): void;
88 updateFocusedIndex: (increment: number) => void;
89 getIndexToScroll: (index: number) => number;
90 scrollToIndex: (index: number) => void;
91 focusSelection: (index: number) => void;
92 scrollToSelection: (time: string) => void;
93 getRegExp: (includeSeconds?: boolean) => RegExp;
94 getOptions: () => HTMLElement[];
95 isValidFormat: (time: string) => boolean;
96 isValidTime: (time: string) => boolean;
97 isValid: (time: string) => boolean;
98 onToggle: (isOpen: boolean) => void;
99 onSelect: (e: any) => void;
100 onInputClick: (e: any) => void;
101 onInputChange: (newTime: string) => void;
102 onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
103 render(): JSX.Element;
104}
105export {};
106//# sourceMappingURL=TimePicker.d.ts.map
\No newline at end of file