UNPKG

4.63 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}
104/**
105 * Time picker component.
106 *
107 * @see https://blueprintjs.com/docs/#datetime/timepicker
108 */
109export declare class TimePicker extends React.Component<TimePickerProps, ITimePickerState> {
110 static defaultProps: TimePickerProps;
111 static displayName: string;
112 constructor(props?: TimePickerProps, context?: any);
113 private timeInputIds;
114 render(): JSX.Element;
115 componentDidUpdate(prevProps: TimePickerProps): void;
116 private maybeRenderArrowButton;
117 private renderDivider;
118 private renderInput;
119 private maybeRenderAmPm;
120 private getInputChangeHandler;
121 private getInputBlurHandler;
122 private getInputFocusHandler;
123 private getInputKeyDownHandler;
124 private getInputKeyUpHandler;
125 private handleAmPmChange;
126 /**
127 * Generates a full ITimePickerState object with all text fields set to formatted strings based on value
128 */
129 private getFullStateFromValue;
130 private incrementTime;
131 private decrementTime;
132 private shiftTime;
133 private updateTime;
134 private updateState;
135 private getInitialValue;
136}