1 | /// <reference types="react" />
|
2 | import type { IconName } from "@blueprintjs/icons";
|
3 | import { AbstractPureComponent2, HTMLInputProps, IntentProps, IRef, MaybeElement, Position, Props } from "../../common";
|
4 | export declare type NumericInputProps = INumericInputProps;
|
5 | /** @deprecated use NumericInputProps */
|
6 | export interface INumericInputProps extends IntentProps, Props {
|
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 | * Whether the input is non-interactive.
|
44 | *
|
45 | * @default false
|
46 | */
|
47 | disabled?: boolean;
|
48 | /** Whether the numeric input should take up the full width of its container. */
|
49 | fill?: boolean;
|
50 | /**
|
51 | * Ref handler that receives HTML `<input>` element backing this component.
|
52 | */
|
53 | inputRef?: IRef<HTMLInputElement>;
|
54 | /**
|
55 | * If set to `true`, the input will display with larger styling.
|
56 | * This is equivalent to setting `Classes.LARGE` via className on the
|
57 | * parent control group and on the child input group.
|
58 | *
|
59 | * @default false
|
60 | */
|
61 | large?: boolean;
|
62 | /**
|
63 | * Name of a Blueprint UI icon (or an icon element) to render on the left side of input.
|
64 | */
|
65 | leftIcon?: IconName | MaybeElement;
|
66 | /**
|
67 | * The locale name, which is passed to the component to format the number and allowing to type the number in the specific locale.
|
68 | * [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).
|
69 | *
|
70 | * @default ""
|
71 | */
|
72 | locale?: string;
|
73 | /**
|
74 | * The increment between successive values when <kbd>shift</kbd> is held.
|
75 | * Pass explicit `null` value to disable this interaction.
|
76 | *
|
77 | * @default 10
|
78 | */
|
79 | majorStepSize?: number | null;
|
80 | /** The maximum value of the input. */
|
81 | max?: number;
|
82 | /** The minimum value of the input. */
|
83 | min?: number;
|
84 | /**
|
85 | * The increment between successive values when <kbd>alt</kbd> is held.
|
86 | * Pass explicit `null` value to disable this interaction.
|
87 | *
|
88 | * @default 0.1
|
89 | */
|
90 | minorStepSize?: number | null;
|
91 | /** The placeholder text in the absence of any value. */
|
92 | placeholder?: string;
|
93 | /**
|
94 | * Element to render on right side of input.
|
95 | * For best results, use a minimal button, tag, or small spinner.
|
96 | */
|
97 | rightElement?: JSX.Element;
|
98 | /**
|
99 | * Whether the entire text field should be selected on focus.
|
100 | *
|
101 | * @default false
|
102 | */
|
103 | selectAllOnFocus?: boolean;
|
104 | /**
|
105 | * Whether the entire text field should be selected on increment.
|
106 | *
|
107 | * @default false
|
108 | */
|
109 | selectAllOnIncrement?: boolean;
|
110 | /**
|
111 | * The increment between successive values when no modifier keys are held.
|
112 | *
|
113 | * @default 1
|
114 | */
|
115 | stepSize?: number;
|
116 | /**
|
117 | * The value to display in the input field.
|
118 | */
|
119 | value?: number | string;
|
120 | /** The callback invoked when the value changes due to a button click. */
|
121 | onButtonClick?(valueAsNumber: number, valueAsString: string): void;
|
122 | /** The callback invoked when the value changes due to typing, arrow keys, or button clicks. */
|
123 | onValueChange?(valueAsNumber: number, valueAsString: string, inputElement: HTMLInputElement | null): void;
|
124 | }
|
125 | export interface INumericInputState {
|
126 | currentImeInputInvalid: boolean;
|
127 | prevMinProp?: number;
|
128 | prevMaxProp?: number;
|
129 | shouldSelectAfterUpdate: boolean;
|
130 | stepMaxPrecision: number;
|
131 | value: string;
|
132 | }
|
133 | export declare class NumericInput extends AbstractPureComponent2<HTMLInputProps & NumericInputProps, INumericInputState> {
|
134 | static displayName: string;
|
135 | static VALUE_EMPTY: string;
|
136 | static VALUE_ZERO: string;
|
137 | static defaultProps: NumericInputProps;
|
138 | static getDerivedStateFromProps(props: NumericInputProps, state: INumericInputState): {
|
139 | stepMaxPrecision: number;
|
140 | value: string;
|
141 | prevMaxProp: number | undefined;
|
142 | prevMinProp: number | undefined;
|
143 | };
|
144 | private static CONTINUOUS_CHANGE_DELAY;
|
145 | private static CONTINUOUS_CHANGE_INTERVAL;
|
146 | private static getStepMaxPrecision;
|
147 | private static roundAndClampValue;
|
148 | state: INumericInputState;
|
149 | private didPasteEventJustOccur;
|
150 | private delta;
|
151 | inputElement: HTMLInputElement | null;
|
152 | private inputRef;
|
153 | private intervalId?;
|
154 | private incrementButtonHandlers;
|
155 | private decrementButtonHandlers;
|
156 | render(): JSX.Element;
|
157 | componentDidUpdate(prevProps: NumericInputProps, prevState: INumericInputState): void;
|
158 | protected validateProps(nextProps: HTMLInputProps & NumericInputProps): void;
|
159 | private renderButtons;
|
160 | private renderInput;
|
161 | private getButtonEventHandlers;
|
162 | private handleButtonClick;
|
163 | private startContinuousChange;
|
164 | private stopContinuousChange;
|
165 | private handleContinuousChange;
|
166 | private handleInputFocus;
|
167 | private handleInputBlur;
|
168 | private handleInputKeyDown;
|
169 | private handleCompositionEnd;
|
170 | private handleCompositionUpdate;
|
171 | private handleInputKeyPress;
|
172 | private handleInputPaste;
|
173 | private handleInputChange;
|
174 | private handleNextValue;
|
175 | private incrementValue;
|
176 | private getIncrementDelta;
|
177 | private roundAndClampValue;
|
178 | private updateDelta;
|
179 | }
|