@commercetools-uikit/search-select-input

Version:

A search select input component built on top of `@commercetools-uikit/async-select-input` to asynchronously load results (options) using the keyword that the user has entered.

uikit.commercetools.com

commercetools/ui-kit

134 lines (110 loc) • 27.9 kB

Markdown

# SearchSelectInput ## Description A search select input component built on top of \`@commercetools-uikit/async-select-input\` to asynchronously load results (options) using the keyword that the user has entered. ## Installation ``` yarn add @commercetools-uikit/search-select-input ``` ``` npm --save install @commercetools-uikit/search-select-input ``` Additionally install the peer dependencies (if not present) ``` yarn add react react-dom react-intl ``` ``` npm --save install react react-dom react-intl ``` ## Usage ```jsx import SearchSelectInput from '@commercetools-uikit/search-select-input'; const Example = () => { return ( <SearchSelectInput id="customers" name="customers" horizontalConstraint={7} optionType="single-lined" isAutofocussed={false} backspaceRemovesValue={true} isClearable={true} isDisabled={false} isReadOnly={false} isMulti={true} noOptionsMessage="No exact match found" loadingMessage="loading exact matches" placeholder="Select customers" // eslint-disable-next-line no-undef loadOptions={customLoadOptionsFunction} cacheOptions={false} /> ); }; export default Example; ``` ## Properties | Props | Type | Required | Default | Description | | -------------------------- | ----------------------------------------------------------------------------------------------------- | :------: | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `horizontalConstraint` | `union` Possible values: `, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input fields. | | `aria-label` | `AsyncProps['aria-label']` | | | Aria label (for assistive tech)
 
[Props from React select was used](https://react-select.com/props) | | `aria-labelledby` | `AsyncProps['aria-labelledby']` | | | HTML ID of an element that should be used as the label (for assistive tech)
 
[Props from React select was used](https://react-select.com/props) | | `aria-invalid` | `AsyncProps['aria-invalid']` | | | Indicate if the value entered in the input is invalid.
 
[Props from React select was used](https://react-select.com/props) | | `aria-errormessage` | `AsyncProps['aria-errormessage']` | | | HTML ID of an element containing an error message related to the input.
 
[Props from React select was used](https://react-select.com/props) | | `id` | `AsyncProps['inputId']` | | | The id of the search input. This forwarded as react-select's "inputId"
 
[Props from React select was used](https://react-select.com/props) | | `containerId` | `AsyncProps['id']` | | | The id to set on the SelectContainer component. This is forwarded as react-select's "id"
 
[Props from React select was used](https://react-select.com/props) | | `name` | `AsyncProps['name']` | | | Name of the HTML Input (optional - without this, no input will be rendered)
 
[Props from React select was used](https://react-select.com/props) | | `placeholder` | `AsyncProps['placeholder']` | | | Placeholder text for the select value
 
[Props from React select was used](https://react-select.com/props) | | `components` | `AsyncProps['components']` | | | Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
 
[Props from React select was used](https://react-select.com/props) | | `controlShouldRenderValue` | `AsyncProps['controlShouldRenderValue']` | | `true` | Control whether the selected values should be rendered in the control
 
[Props from React select was used](https://react-select.com/props) | | `tabIndex` | `AsyncProps['tabIndex']` | | | Sets the tabIndex attribute on the input
 
[Props from React select was used](https://react-select.com/props) | | `value` | `AsyncProps['value']` | | `null` | The value of the select; reflected by the selected option
 
[Props from React select was used](https://react-select.com/props) | | `backspaceRemovesValue` | `AsyncProps['backspaceRemovesValue']` | | | Remove the currently focused option when the user presses backspace
 
[Props from React select was used](https://react-select.com/props) | | `hasError` | `boolean` | | | Indicates the input field has an error | | `hasWarning` | `boolean` | | | Indicates the input field has a warning | | `isReadOnly` | `boolean` | | | Is the select read-only | | `isDisabled` | `boolean` | | | Is the select disabled | | `isClearable` | `boolean` | | | Is the select value clearable | | `isCondensed` | `boolean` | | | Whether the input and options are rendered with condensed paddings | | `isOptionDisabled` | `AsyncProps['isOptionDisabled']` | | | Override the built-in logic to detect whether an option is disabled
 
[Props from React select was used](https://react-select.com/props) | | `isMulti` | `AsyncProps['isMulti']` | | | Support multiple selected options
 
[Props from React select was used](https://react-select.com/props) | | `isAutofocussed` | `boolean` | | | Focus the control when it is mounted. Renamed autoFocus of react-select | | `noOptionsMessage` | `AsyncProps['noOptionsMessage']` | | | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
 
[Props from React select was used](https://react-select.com/props) | | `menuIsOpen` | `AsyncProps['menuIsOpen']` | | | Can be used to enforce the select input to be opened
 
[Props from React select was used](https://react-select.com/props) | | `maxMenuHeight` | `AsyncProps['maxMenuHeight']` | | `220` | Maximum height of the menu before scrolling
 
[Props from React select was used](https://react-select.com/props) | | `menuPortalTarget` | `AsyncProps['menuPortalTarget']` | | | Dom element to portal the select menu to
 
[Props from React select was used](https://react-select.com/props) | | `menuPortalZIndex` | `number` | | `1` | z-index value for the menu portal
 
Use in conjunction with `menuPortalTarget` | | `menuShouldBlockScroll` | `AsyncProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
 
[Props from React select was used](https://react-select.com/props) | | `closeMenuOnSelect` | `AsyncProps['closeMenuOnSelect']` | | | Whether the menu should close after a value is selected. Defaults to `true`.
 
[Props from React select was used](https://react-select.com/props) | | `showOptionGroupDivider` | `boolean` | | | Determines if option groups will be separated by a divider | | `defaultOptions` | `AsyncProps['defaultOptions']` | | | The default set of options to show before the user starts searching. When set to `true`, the results for `loadOptions('')` will be autoloaded.
 
[Props from React select was used](https://react-select.com/props) | | `onBlur` | `Function` [See signature.](#signature-onblur) | | | Handle blur events on the control | | `onChange` | `Function` [See signature.](#signature-onchange) | | | Called with a fake event when value changes.
 
The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | | `onFocus` | `AsyncProps['onFocus']` | | | Handle focus events on the control
 
[Props from React select was used](https://react-select.com/props) | | `onInputChange` | `AsyncProps['onInputChange']` | | | Handle change events on the input
 
[Props from React select was used](https://react-select.com/props) | | `tabSelectsValue` | `AsyncProps['tabSelectsValue']` | | | Select the currently focused option when the user presses tab
 
[Props from React select was used](https://react-select.com/props) | | `loadOptions` | `AsyncProps['loadOptions']` | ✅ | | Function that returns a promise, which is the set of options to be used once the promise resolves.
 
[Props from React select was used](https://react-select.com/props) | | `loadingMessage` | `union` Possible values: `string , (() => string)` | | | The text shown while the options are being loaded | | `cacheOptions` | `AsyncProps['cacheOptions']` | | | If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
 
[Props from React select was used](https://react-select.com/props) | | `filterOption` | `AsyncProps['filterOption']` | | | Custom method to filter whether an option should be displayed in the menu
 
[Props from React select was used](https://react-select.com/props) | | `optionType` | `union` Possible values: `'single-property' , 'double-property' , 'multiple-properties'` | | | The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info | | `iconLeft` | `ReactNode` | | | Icon to display on the left of the placeholder text and selected value. Has no effect when `isMulti` is enabled. | | `optionStyle` | `union` Possible values: `'list' , 'checkbox'` | | `'list'` | defines how options are rendered | | `appearance` | `union` Possible values: `'default' , 'filter'` | | `'default'` | Indicates the appearance of the input.
Filter appearance is meant to be used when the async-select is used as a filter. | | `count` | `number` | | | An additional value displayed on the select options menu. This value is only available in the checkbox option style when appearance is set to filter. | ## Signatures ### Signature `onBlur` ```ts (event: TCustomEvent) => void ``` ### Signature `onChange` ```ts (event: TCustomEvent, info: ActionMeta<unknown>) => void ``` The underlying `@commercetools-uikit/async-select-input` is built on top of [`react-select`](https://github.com/JedWatson/react-select) v3. `@commercetools-uikit/async-select-input` supports mostly the same properties as `react-select` with some minor changes in the behaviour of some of the props. The `@commercetools-uikit/search-select-input` which is built on top `@commercetools-uikit/async-select-input` has predefined values for some the props. The props that have predefined values in `@commercetools-uikit/search-select-input` are as follows: - `components.DropdownIndicator`: Default dropdown indicator is replaced with search icon indicator - `components.Option`: The option shown in the dropdown menu can be one of `singled-lined`, `brief-detailed`, or `extended-detailed` types. However, if someone still wants to have a different option layout, they can still pass their own `components.Option` to `@commercetools-uikit/search-select-input` - `isSearchable`: `true` - `iconLeft`: `undefined` See the [official documentation](https://react-select.com/components) for more information about the available props.