UNPKG

4.51 kBTypeScriptView Raw
1import * as React from "react";
2import { Props } from "@blueprintjs/core";
3import { TimeUnit } from "./common/timeUnit";
4export declare const TimePrecision: {
5 MILLISECOND: "millisecond";
6 MINUTE: "minute";
7 SECOND: "second";
8};
9export declare type TimePrecision = typeof TimePrecision[keyof typeof TimePrecision];
10export declare type TimePickerProps = ITimePickerProps;
11/** @deprecated use TimePickerProps */
12export interface ITimePickerProps extends Props {
13 /**
14 * Whether to focus the first input when it opens initially.
15 *
16 * @default false
17 */
18 autoFocus?: boolean;
19 /**
20 * Initial time the `TimePicker` will display.
21 * This should not be set if `value` is set.
22 */
23 defaultValue?: Date;
24 /**
25 * Whether the time picker is non-interactive.
26 *
27 * @default false
28 */
29 disabled?: boolean;
30 /**
31 * Callback invoked on blur event emitted by specific time unit input
32 */
33 onBlur?: (event: React.FocusEvent<HTMLInputElement>, unit: TimeUnit) => void;
34 /**
35 * Callback invoked when the user changes the time.
36 */
37 onChange?: (newTime: Date) => void;
38 /**
39 * Callback invoked on focus event emitted by specific time unit input
40 */
41 onFocus?: (event: React.FocusEvent<HTMLInputElement>, unit: TimeUnit) => void;
42 /**
43 * Callback invoked on keydown event emitted by specific time unit input
44 */
45 onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>, unit: TimeUnit) => void;
46 /**
47 * Callback invoked on keyup event emitted by specific time unit input
48 */
49 onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>, unit: TimeUnit) => void;
50 /**
51 * The precision of time the user can set.
52 *
53 * @default TimePrecision.MINUTE
54 */
55 precision?: TimePrecision;
56 /**
57 * Whether all the text in each input should be selected on focus.
58 *
59 * @default false
60 */
61 selectAllOnFocus?: boolean;
62 /**
63 * Whether to show arrows buttons for changing the time.
64 *
65 * @default false
66 */
67 showArrowButtons?: boolean;
68 /**
69 * Whether to use a 12 hour format with an AM/PM dropdown.
70 *
71 * @default false
72 */
73 useAmPm?: boolean;
74 /**
75 * The latest time the user can select. The year, month, and day parts of the `Date` object are ignored.
76 * While the `maxTime` will be later than the `minTime` in the basic case,
77 * it is also allowed to be earlier than the `minTime`.
78 * This is useful, for example, to express a time range that extends before and after midnight.
79 * If the `maxTime` and `minTime` are equal, then the valid time range is constrained to only that one value.
80 */
81 maxTime?: Date;
82 /**
83 * The earliest time the user can select. The year, month, and day parts of the `Date` object are ignored.
84 * While the `minTime` will be earlier than the `maxTime` in the basic case,
85 * it is also allowed to be later than the `maxTime`.
86 * This is useful, for example, to express a time range that extends before and after midnight.
87 * If the `maxTime` and `minTime` are equal, then the valid time range is constrained to only that one value.
88 */
89 minTime?: Date;
90 /**
91 * The currently set time.
92 * If this prop is provided, the component acts in a controlled manner.
93 */
94 value?: Date | null;
95}
96export interface ITimePickerState {
97 hourText?: string;
98 minuteText?: string;
99 secondText?: string;
100 millisecondText?: string;
101 value?: Date;
102 isPm?: boolean;
103}
104export declare class TimePicker extends React.Component<TimePickerProps, ITimePickerState> {
105 static defaultProps: TimePickerProps;
106 static displayName: string;
107 constructor(props?: TimePickerProps, context?: any);
108 render(): JSX.Element;
109 componentDidUpdate(prevProps: TimePickerProps): void;
110 private maybeRenderArrowButton;
111 private renderDivider;
112 private renderInput;
113 private maybeRenderAmPm;
114 private getInputChangeHandler;
115 private getInputBlurHandler;
116 private getInputFocusHandler;
117 private getInputKeyDownHandler;
118 private getInputKeyUpHandler;
119 private handleAmPmChange;
120 /**
121 * Generates a full ITimePickerState object with all text fields set to formatted strings based on value
122 */
123 private getFullStateFromValue;
124 private incrementTime;
125 private decrementTime;
126 private shiftTime;
127 private updateTime;
128 private updateState;
129 private getInitialValue;
130}