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