1 | import * as React from "react";
|
2 | import { AbstractPureComponent2 } from "../../common";
|
3 | import { ControlledProps2, HTMLInputProps, IControlledProps, IntentProps, MaybeElement, Props } from "../../common/props";
|
4 | import { IconName } from "../icon/icon";
|
5 | import type { InputSharedProps } from "./inputSharedProps";
|
6 | export declare type InputGroupProps = IInputGroupProps;
|
7 | /**
|
8 | * @deprecated use IInputGroupProps2.
|
9 | *
|
10 | * NOTE: This interface does not extend HTMLInputProps due to incompatiblity with `IControlledProps`.
|
11 | * Instead, we union the props in the component definition, which does work and properly disallows `string[]` values.
|
12 | */
|
13 | export interface IInputGroupProps extends IControlledProps, IntentProps, Props {
|
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, or if working with certain libraries like __redux-form__.
|
18 | *
|
19 | * @default false
|
20 | */
|
21 | asyncControl?: boolean;
|
22 | /**
|
23 | * Whether the input is non-interactive.
|
24 | * Note that `rightElement` must be disabled separately; this prop will not affect it.
|
25 | *
|
26 | * @default false
|
27 | */
|
28 | disabled?: boolean;
|
29 | /**
|
30 | * Whether the component should take up the full width of its container.
|
31 | */
|
32 | fill?: boolean;
|
33 | /** Ref handler or a ref object that receives HTML `<input>` element backing this component. */
|
34 | inputRef?: React.Ref<HTMLInputElement>;
|
35 | /**
|
36 | * Element to render on the left side of input. This prop is mutually exclusive
|
37 | * with `leftIcon`.
|
38 | */
|
39 | leftElement?: JSX.Element;
|
40 | /**
|
41 | * Name of a Blueprint UI icon to render on the left side of the input group,
|
42 | * before the user's cursor. This prop is mutually exclusive with `leftElement`.
|
43 | * Usage with content is deprecated. Use `leftElement` for elements.
|
44 | */
|
45 | leftIcon?: IconName | MaybeElement;
|
46 | /** Whether this input should use large styles. */
|
47 | large?: boolean;
|
48 | /** Whether this input should use small styles. */
|
49 | small?: boolean;
|
50 | /** Placeholder text in the absence of any value. */
|
51 | placeholder?: string;
|
52 | /**
|
53 | * Element to render on right side of input.
|
54 | * For best results, use a minimal button, tag, or small spinner.
|
55 | */
|
56 | rightElement?: JSX.Element;
|
57 | /** Whether the input (and any buttons) should appear with rounded caps. */
|
58 | round?: boolean;
|
59 | /**
|
60 | * HTML `input` type attribute.
|
61 | *
|
62 | * @default "text"
|
63 | */
|
64 | type?: string;
|
65 | }
|
66 | export declare type InputGroupProps2 = IInputGroupProps2;
|
67 | /** @deprecated use InputGroupProps2 */
|
68 | export interface IInputGroupProps2 extends Omit<HTMLInputProps, keyof ControlledProps2>, ControlledProps2, InputSharedProps {
|
69 | /**
|
70 | * Set this to `true` if you will be controlling the `value` of this input with asynchronous updates.
|
71 | * These may occur if you do not immediately call setState in a parent component with the value from
|
72 | * the `onChange` handler, or if working with certain libraries like __redux-form__.
|
73 | *
|
74 | * @default false
|
75 | */
|
76 | asyncControl?: boolean;
|
77 | /** Whether this input should use large styles. */
|
78 | large?: boolean;
|
79 | /** Whether this input should use small styles. */
|
80 | small?: boolean;
|
81 | /** Whether the input (and any buttons) should appear with rounded caps. */
|
82 | round?: boolean;
|
83 | /**
|
84 | * Name of the HTML tag that contains the input group.
|
85 | *
|
86 | * @default "div"
|
87 | */
|
88 | tagName?: keyof JSX.IntrinsicElements;
|
89 | /**
|
90 | * HTML `input` type attribute.
|
91 | *
|
92 | * @default "text"
|
93 | */
|
94 | type?: string;
|
95 | }
|
96 | export interface IInputGroupState {
|
97 | leftElementWidth?: number;
|
98 | rightElementWidth?: number;
|
99 | }
|
100 | /**
|
101 | * Input group component.
|
102 | *
|
103 | * @see https://blueprintjs.com/docs/#core/components/text-inputs.input-group
|
104 | */
|
105 | export declare class InputGroup extends AbstractPureComponent2<InputGroupProps2, IInputGroupState> {
|
106 | static displayName: string;
|
107 | state: IInputGroupState;
|
108 | private leftElement;
|
109 | private rightElement;
|
110 | private refHandlers;
|
111 | render(): React.ReactElement<{
|
112 | className: string;
|
113 | }, string | React.JSXElementConstructor<any>>;
|
114 | componentDidMount(): void;
|
115 | componentDidUpdate(prevProps: InputGroupProps2): void;
|
116 | protected validateProps(props: InputGroupProps2): void;
|
117 | private maybeRenderLeftElement;
|
118 | private maybeRenderRightElement;
|
119 | private updateInputWidth;
|
120 | }
|