UNPKG

6.05 kBTypeScriptView Raw
1/// <reference types="react" />
2import { AbstractPureComponent, HTMLInputProps, Position } from "../../common";
3import type { InputSharedProps } from "./inputSharedProps";
4export interface NumericInputProps extends InputSharedProps {
5 /**
6 * Whether to allow only floating-point number characters in the field,
7 * mimicking the native `input[type="number"]`.
8 *
9 * @default true
10 */
11 allowNumericCharactersOnly?: boolean;
12 /**
13 * Set this to `true` if you will be controlling the `value` of this input with asynchronous updates.
14 * These may occur if you do not immediately call setState in a parent component with the value from
15 * the `onChange` handler.
16 */
17 asyncControl?: boolean;
18 /**
19 * The position of the buttons with respect to the input field.
20 *
21 * @default Position.RIGHT
22 */
23 buttonPosition?: typeof Position.LEFT | typeof Position.RIGHT | "none";
24 /**
25 * Whether the value should be clamped to `[min, max]` on blur.
26 * The value will be clamped to each bound only if the bound is defined.
27 * Note that native `input[type="number"]` controls do *NOT* clamp on blur.
28 *
29 * @default false
30 */
31 clampValueOnBlur?: boolean;
32 /**
33 * In uncontrolled mode, this sets the default value of the input.
34 * Note that this value is only used upon component instantiation and changes to this prop
35 * during the component lifecycle will be ignored.
36 *
37 * @default ""
38 */
39 defaultValue?: number | string;
40 /**
41 * If set to `true`, the input will display with larger styling.
42 * This is equivalent to setting `Classes.LARGE` via className on the
43 * parent control group and on the child input group.
44 *
45 * @default false
46 */
47 large?: boolean;
48 /**
49 * The locale name, which is passed to the component to format the number and allowing to type the number in the specific locale.
50 * [See MDN documentation for more info about browser locale identification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).
51 *
52 * @default ""
53 */
54 locale?: string;
55 /**
56 * The increment between successive values when <kbd>shift</kbd> is held.
57 * Pass explicit `null` value to disable this interaction.
58 *
59 * @default 10
60 */
61 majorStepSize?: number | null;
62 /** The maximum value of the input. */
63 max?: number;
64 /** The minimum value of the input. */
65 min?: number;
66 /**
67 * The increment between successive values when <kbd>alt</kbd> is held.
68 * Pass explicit `null` value to disable this interaction.
69 *
70 * @default 0.1
71 */
72 minorStepSize?: number | null;
73 /**
74 * Whether the entire text field should be selected on focus.
75 *
76 * @default false
77 */
78 selectAllOnFocus?: boolean;
79 /**
80 * Whether the entire text field should be selected on increment.
81 *
82 * @default false
83 */
84 selectAllOnIncrement?: boolean;
85 /**
86 * If set to `true`, the input will display with smaller styling.
87 * This is equivalent to setting `Classes.SMALL` via className on the
88 * parent control group and on the child input group.
89 *
90 * @default false
91 */
92 small?: boolean;
93 /**
94 * The increment between successive values when no modifier keys are held.
95 *
96 * @default 1
97 */
98 stepSize?: number;
99 /**
100 * The value to display in the input field.
101 */
102 value?: number | string;
103 /** The callback invoked when the value changes due to a button click. */
104 onButtonClick?(valueAsNumber: number, valueAsString: string): void;
105 /** The callback invoked when the value changes due to typing, arrow keys, or button clicks. */
106 onValueChange?(valueAsNumber: number, valueAsString: string, inputElement: HTMLInputElement | null): void;
107}
108export interface NumericInputState {
109 currentImeInputInvalid: boolean;
110 prevMinProp?: number;
111 prevMaxProp?: number;
112 shouldSelectAfterUpdate: boolean;
113 stepMaxPrecision: number;
114 value: string;
115}
116/**
117 * Numeric input component.
118 *
119 * @see https://blueprintjs.com/docs/#core/components/numeric-input
120 */
121export declare class NumericInput extends AbstractPureComponent<HTMLInputProps & NumericInputProps, NumericInputState> {
122 static displayName: string;
123 static VALUE_EMPTY: string;
124 static VALUE_ZERO: string;
125 private numericInputId;
126 static defaultProps: NumericInputProps;
127 static getDerivedStateFromProps(props: NumericInputProps, state: NumericInputState): {
128 stepMaxPrecision: number;
129 value: string;
130 prevMaxProp: number | undefined;
131 prevMinProp: number | undefined;
132 };
133 private static CONTINUOUS_CHANGE_DELAY;
134 private static CONTINUOUS_CHANGE_INTERVAL;
135 private static getStepMaxPrecision;
136 private static roundAndClampValue;
137 state: NumericInputState;
138 private didPasteEventJustOccur;
139 private delta;
140 inputElement: HTMLInputElement | null;
141 private inputRef;
142 private intervalId?;
143 private incrementButtonHandlers;
144 private decrementButtonHandlers;
145 private getCurrentValueAsNumber;
146 render(): JSX.Element;
147 componentDidUpdate(prevProps: NumericInputProps, prevState: NumericInputState): void;
148 protected validateProps(nextProps: HTMLInputProps & NumericInputProps): void;
149 private renderButtons;
150 private renderInput;
151 private getButtonEventHandlers;
152 private handleButtonClick;
153 private startContinuousChange;
154 private stopContinuousChange;
155 private handleContinuousChange;
156 private handleInputFocus;
157 private handleInputBlur;
158 private handleInputKeyDown;
159 private handleCompositionEnd;
160 private handleCompositionUpdate;
161 private handleInputKeyPress;
162 private handleInputPaste;
163 private handleInputChange;
164 private handleNextValue;
165 private incrementValue;
166 private getIncrementDelta;
167 private roundAndClampValue;
168 private updateDelta;
169}