Developer InlineInput
Wrap over the inline-input elements.
import InlineInput from 'intergalactic/inline-input';
<InlineInput />;import InlineInput from 'intergalactic/inline-input';
<InlineInput />;InlineInputProps
& {...}| Name | Type | Description |
|---|---|---|
| state | "normal" | "valid" | "invalid" | Visual state of inline input |
| loading | boolean | Disabled input and shows spinner instead of confirm control |
| disabled | boolean | Disabled input and controls |
| onConfirm | (value: string, event: React.MouseEvent | React.FocusEvent | React.KeyboardEvent) => void | Fired with entered value when user clicks confirm control or hits `Enter` or `Space` |
| onCancel | (prevValue: string, event: React.MouseEvent | React.FocusEvent | React.KeyboardEvent) => void | Fired with value (or defaultValue) that was provided during component mount when user clicks cancel control or hits `Escape` |
| value | string | Text value of input. Should be used with `onChange` property together |
| defaultValue | string | Initial text value of input |
| autoFocus | boolean | Makes component to catch browser focus on component mount |
| placeholder | string | Gray text displayed in empty input |
| onBlurBehavior | "cancel" | "confirm" | "none" | defines callback (`onCancel` or `onConfirm`) triggered when `blur` event out of container fired Triggered after all previous macrotasks completed (internally called inside of `setTimeout`) |
| locale | string |
InlineInput.Value
This component represents the native tag input and accepts all its properties, such as value and onChange.
import InlineInput from 'intergalactic/inline-input';
<InlineInput.Value />;import InlineInput from 'intergalactic/inline-input';
<InlineInput.Value />;InlineInputValueProps
& {...}| Name | Type | Description |
|---|---|---|
| id | string | id attribute of input tag |
| autoFocus | boolean | when `true`, element is focused immediately after mount |
| value | string | value of input tag |
| defaultValue | string | uncontrolled value of input tag |
| onChange | (value: string, event: React.ChangeEvent) => void | callback invoked on every change of input tag value |
| state | "normal" | "valid" | "invalid" | visual state of component |
| loading | boolean | shows spinner in `InlineInput.ConfirmControl` and disables other interactive elements |
| disabled | boolean | disables interactive elements |
| placeholder | string | gray text in empty input tag |
InlineInput.Addon
The addon inside the container (most often it is an icon or short text) places the correct indent units depending on the size.
When you click on Addon, the focus shifts to the input. You can cancel this by returning the return false in the onClick handler.
import InlineInput from 'intergalactic/inline-input';
<InlineInput.Addon />;import InlineInput from 'intergalactic/inline-input';
<InlineInput.Addon />;InlineInput.ConfirmControl
The addon with hint tooltip and icon. By default is displayed with middle-size Check icon. Addon click triggers InlineInput onConfirm callback.
When loading property is provided to InlineInput, InlineInput.ConfirmControl icon replaced with spinner.
import InlineInput from 'intergalactic/inline-input';
<InlineInput.ConfirmControl />;import InlineInput from 'intergalactic/inline-input';
<InlineInput.ConfirmControl />;InlineInputConfirmControlProps
& {...}| Name | Type | Description |
|---|---|---|
| title | string | Text of tooltip |
| icon | React.FC | Icon component |
InlineInput.CancelControl
The addon with hint tooltip and icon. By default is displayed with middle-size Close icon. Addon click triggers InlineInput onCancel callback.
import InlineInput from 'intergalactic/inline-input';
<InlineInput.CancelControl />;import InlineInput from 'intergalactic/inline-input';
<InlineInput.CancelControl />;InlineInputCancelControlProps
& {...}| Name | Type | Description |
|---|---|---|
| title | string | Text of tooltip |
| icon | React.FC | Icon component |