1 | /// <reference types="react" />
|
2 | import { AbstractPureComponent, HTMLInputProps, Position } from "../../common";
|
3 | import type { InputSharedProps } from "./inputSharedProps";
|
4 | export 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 | }
|
108 | export 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 | */
|
121 | export 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 | }
|