UNPKG

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