@blueprintjs/core
Version:
Core styles & components
144 lines (143 loc) • 5.24 kB
TypeScript
/// <reference types="react" />
import { IconName } from "@blueprintjs/icons";
import { AbstractPureComponent2, HTMLInputProps, IIntentProps, IProps, MaybeElement, Position } from "../../common";
export interface INumericInputProps extends IIntentProps, IProps {
/**
* Whether to allow only floating-point number characters in the field,
* mimicking the native `input[type="number"]`.
* @default true
*/
allowNumericCharactersOnly?: boolean;
/**
* The position of the buttons with respect to the input field.
* @default Position.RIGHT
*/
buttonPosition?: typeof Position.LEFT | typeof Position.RIGHT | "none";
/**
* Whether the value should be clamped to `[min, max]` on blur.
* The value will be clamped to each bound only if the bound is defined.
* Note that native `input[type="number"]` controls do *NOT* clamp on blur.
* @default false
*/
clampValueOnBlur?: boolean;
/**
* Whether the input is non-interactive.
* @default false
*/
disabled?: boolean;
/** Whether the numeric input should take up the full width of its container. */
fill?: boolean;
/**
* Ref handler that receives HTML `<input>` element backing this component.
*/
inputRef?: (ref: HTMLInputElement | null) => any;
/**
* If set to `true`, the input will display with larger styling.
* This is equivalent to setting `Classes.LARGE` via className on the
* parent control group and on the child input group.
* @default false
*/
large?: boolean;
/**
* Name of a Blueprint UI icon (or an icon element) to render on the left side of input.
*/
leftIcon?: IconName | MaybeElement;
/**
* The increment between successive values when <kbd>shift</kbd> is held.
* Pass explicit `null` value to disable this interaction.
* @default 10
*/
majorStepSize?: number | null;
/** The maximum value of the input. */
max?: number;
/** The minimum value of the input. */
min?: number;
/**
* The increment between successive values when <kbd>alt</kbd> is held.
* Pass explicit `null` value to disable this interaction.
* @default 0.1
*/
minorStepSize?: number | null;
/** The placeholder text in the absence of any value. */
placeholder?: string;
/**
* Element to render on right side of input.
* For best results, use a minimal button, tag, or small spinner.
*/
rightElement?: JSX.Element;
/**
* Whether the entire text field should be selected on focus.
* @default false
*/
selectAllOnFocus?: boolean;
/**
* Whether the entire text field should be selected on increment.
* @default false
*/
selectAllOnIncrement?: boolean;
/**
* The increment between successive values when no modifier keys are held.
* @default 1
*/
stepSize?: number;
/** The value to display in the input field. */
value?: number | string;
/** The callback invoked when the value changes due to a button click. */
onButtonClick?(valueAsNumber: number, valueAsString: string): void;
/** The callback invoked when the value changes due to typing, arrow keys, or button clicks. */
onValueChange?(valueAsNumber: number, valueAsString: string): void;
}
export interface INumericInputState {
prevMinProp?: number;
prevMaxProp?: number;
prevValueProp?: number | string;
shouldSelectAfterUpdate: boolean;
stepMaxPrecision: number;
value: string;
}
export declare class NumericInput extends AbstractPureComponent2<HTMLInputProps & INumericInputProps, INumericInputState> {
static displayName: string;
static VALUE_EMPTY: string;
static VALUE_ZERO: string;
static defaultProps: INumericInputProps;
static getDerivedStateFromProps(props: INumericInputProps, state: INumericInputState): {
stepMaxPrecision: number;
value: string;
prevMinProp: number;
prevMaxProp: number;
prevValueProp: string | number;
};
private static CONTINUOUS_CHANGE_DELAY;
private static CONTINUOUS_CHANGE_INTERVAL;
private static getStepMaxPrecision;
private static getSanitizedValue;
state: INumericInputState;
private didPasteEventJustOccur;
private delta;
private inputElement;
private intervalId;
private incrementButtonHandlers;
private decrementButtonHandlers;
render(): JSX.Element;
componentDidUpdate(prevProps: INumericInputProps, prevState: INumericInputState): void;
protected validateProps(nextProps: HTMLInputProps & INumericInputProps): void;
private renderButtons;
private renderInput;
private inputRef;
private getButtonEventHandlers;
private handleButtonClick;
private startContinuousChange;
private stopContinuousChange;
private handleContinuousChange;
private handleInputFocus;
private handleInputBlur;
private handleInputKeyDown;
private handleInputKeyPress;
private handleInputPaste;
private handleInputChange;
private invokeValueCallback;
private incrementValue;
private getIncrementDelta;
private getSanitizedValue;
private updateDelta;
}