UNPKG

@blueprintjs/core

Version:
135 lines (134 loc) 5.15 kB
/// <reference types="react" /> import { AbstractPureComponent2, IRef } from "../../common"; import { HTMLInputProps, IControlledProps, IControlledProps2, IIntentProps, IProps, MaybeElement } from "../../common/props"; import { IconName } from "../icon/icon"; /** * @deprecated use IInputGroupProps2. * * NOTE: This interface does not extend HTMLInputProps due to incompatiblity with `IControlledProps`. * Instead, we union the props in the component definition, which does work and properly disallows `string[]` values. */ export interface IInputGroupProps extends IControlledProps, IIntentProps, IProps { /** * Set this to `true` if you will be controlling the `value` of this input with asynchronous updates. * These may occur if you do not immediately call setState in a parent component with the value from * the `onChange` handler, or if working with certain libraries like __redux-form__. * * @default false */ asyncControl?: boolean; /** * Whether the input is non-interactive. * Note that `rightElement` must be disabled separately; this prop will not affect it. * * @default false */ disabled?: boolean; /** * Whether the component should take up the full width of its container. */ fill?: boolean; /** Ref handler or a ref object that receives HTML `<input>` element backing this component. */ inputRef?: IRef<HTMLInputElement>; /** * Element to render on the left side of input. This prop is mutually exclusive * with `leftIcon`. */ leftElement?: JSX.Element; /** * Name of a Blueprint UI icon to render on the left side of the input group, * before the user's cursor. This prop is mutually exclusive with `leftElement`. * Usage with content is deprecated. Use `leftElement` for elements. */ leftIcon?: IconName | MaybeElement; /** Whether this input should use large styles. */ large?: boolean; /** Whether this input should use small styles. */ small?: boolean; /** 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 input (and any buttons) should appear with rounded caps. */ round?: boolean; /** * HTML `input` type attribute. * * @default "text" */ type?: string; } export interface IInputGroupProps2 extends Omit<HTMLInputProps, keyof IControlledProps2>, IControlledProps2, IIntentProps, IProps { /** * Set this to `true` if you will be controlling the `value` of this input with asynchronous updates. * These may occur if you do not immediately call setState in a parent component with the value from * the `onChange` handler, or if working with certain libraries like __redux-form__. * * @default false */ asyncControl?: boolean; /** * Whether the input is non-interactive. * Note that `rightElement` must be disabled separately; this prop will not affect it. * * @default false */ disabled?: boolean; /** * Whether the component should take up the full width of its container. */ fill?: boolean; /** Ref handler or a ref object that receives HTML `<input>` element backing this component. */ inputRef?: IRef<HTMLInputElement>; /** * Element to render on the left side of input. This prop is mutually exclusive * with `leftIcon`. */ leftElement?: JSX.Element; /** * Name of a Blueprint UI icon to render on the left side of the input group, * before the user's cursor. This prop is mutually exclusive with `leftElement`. * Usage with content is deprecated. Use `leftElement` for elements. */ leftIcon?: IconName | MaybeElement; /** Whether this input should use large styles. */ large?: boolean; /** Whether this input should use small styles. */ small?: boolean; /** 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 input (and any buttons) should appear with rounded caps. */ round?: boolean; /** * HTML `input` type attribute. * * @default "text" */ type?: string; } export interface IInputGroupState { leftElementWidth?: number; rightElementWidth?: number; } export declare class InputGroup extends AbstractPureComponent2<IInputGroupProps2, IInputGroupState> { static displayName: string; state: IInputGroupState; private leftElement; private rightElement; private refHandlers; render(): JSX.Element; componentDidMount(): void; componentDidUpdate(prevProps: IInputGroupProps2): void; protected validateProps(props: IInputGroupProps2): void; private maybeRenderLeftElement; private maybeRenderRightElement; private updateInputWidth; }