UNPKG

@blueprintjs/core

Version:
144 lines (143 loc) 5.24 kB
/// <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; }