@commercetools-uikit/selectable-search-input

SelectableSearchInput

Description

A controlled selectable search input component for single-line strings with validation states.

Installation

yarn add @commercetools-uikit/selectable-search-input

npm --save install @commercetools-uikit/selectable-search-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

import SelectableSearchInput from '@commercetools-uikit/selectable-search-input';

const value = {
  text: 'foo',
  option: 'bar',
};

const Example = () => (
  <SelectableSearchInput
    value={value}
    onChange={(event) => alert(event.target.value)}
    onSubmit={(val) => alert(val)}
    onReset={() => alert('reset')}
    options={[
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
    ]}
    selectDataProps={[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]}
    inputDataProps={[{ 'prop-3': 'value-1' }, { 'prop-4': 'value-2' }]}
  />
);

export default Example;

Properties

Props	Type	Required	Default	Description
id	string			Used as HTML id property. An id is auto-generated when it is not specified.
autoComplete	string			Used as HTML autocomplete property
aria-invalid	boolean			Indicate if the value entered in the input is invalid.
aria-errormessage	string			HTML ID of an element containing an error message related to the input.
name	string			Used as HTML name of the input component property.
value	Object See signature.	✅		Value of the input. Consists of text input and selected option.
_experimentalValue	Object See signature.
onChange	Function See signature.			Called with the event of the input or dropdown when either the selectable dropdown or the text input have changed. The change event from the text input has a suffix of .textInput and the change event from the dropdown has a suffix of .dropdown.
onBlur	Function See signature.			Called when input is blurred
onFocus	Function See signature.			Called when input is focused
onSubmit	Function See signature.	✅		Handler when the search button is clicked.
onReset	Function See signature.			Handler when the clear button is clicked.
isAutofocussed	boolean			Focus the input on initial render
isDisabled	boolean			Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
isReadOnly	boolean			Indicates that the field is displaying read-only content
hasError	boolean			Indicates if the input has invalid values
hasWarning	boolean			Indicates if the input has warning values
placeholder	string			Placeholder text for the input
isClearable	boolean		true	Indicates if the input should be cleared when the clear button is clicked. Defaults to true.
isCondensed	boolean			Use this property to reduce the paddings of the component for a ui compact variant
horizontalConstraint	union Possible values: 10 , 11 , 12 , 13 , 14 , 15 , 16 , 'scale' , 'auto'		'scale'	Horizontal size limit of the input fields.
options	union Possible values: TOption[] , TOptionObject[]	✅		Array of options that populate the select menu
menuPortalZIndex	number		1	z-index value for the menu portal Use in conjunction with menuPortalTarget
menuPortalTarget	ReactSelectProps['menuPortalTarget']			Dom element to portal the select menu to Props from React select was used
menuShouldBlockScroll	ReactSelectProps['menuShouldBlockScroll']			whether the menu should block scroll while open Props from React select was used
onMenuInputChange	ReactSelectProps['onInputChange']			Handle change events on the menu input Props from React select was used
noMenuOptionsMessage	ReactSelectProps['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
isMenuSearchable	ReactSelectProps['isSearchable']			Whether to enable search functionality. Props from React select was used
maxMenuHeight	ReactSelectProps['maxMenuHeight']			Maximum height of the menu before scrolling Props from React select was used
closeMenuOnSelect	ReactSelectProps['closeMenuOnSelect']			Whether the menu should close after a value is selected. Defaults to true. Props from React select was used
menuHorizontalConstraint	union Possible values: 3 , 4 , 5		3	Horizontal size limit for the dropdown menu.
showSubmitButton	boolean		true	Show submit button in the input
selectDataProps	Record			used to pass data-* props to the select component. eg: selectDataProps={[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]}
inputDataProps	Record			used to pass data-* props to the input element. eg: inputDataProps={[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]}
selectCustomComponents	ReactSelectProps['components']			Map of components to overwrite the default ones, see what components you can override Props from React select was used
rightActionIcon	ReactElement			Custom action icon to be displayed on the right side of the input.
rightActionProps	TIconButtonProps			Props for the right-action icon-button. Required when rightActionIcon is provided. At least a label and an onClick prop/function need to be provided.

Signatures

Signature value

{
  text: string;
  option: string;
}

Signature _experimentalValue

{
  text: string;
  option: string;
}

Signature onChange

(event: TCustomEvent) => void

Signature onBlur

(event: TCustomEvent) => void

Signature onFocus

(event: TCustomEvent) => void

Signature onSubmit

(value: TValue) => void

Signature onReset

() => void

data-* props

The component further forwards all data- attributes to the underlying input component.

Static methods

SelectableSearchInput.isEmpty

Returns true when the value is considered empty, which is when the value is empty or consists of spaces only.

SelectableSearchInput.isEmpty({
  text: '',
  option: '',
}); // -> true
SelectableSearchInput.isEmpty({
  text: '    ',
  option: 'bar',
}); // -> true
SelectableSearchInput.isEmpty({
  text: 'foo',
  option: 'bar',
}); // -> false

Main Functions and use cases are:

• Input field for single-line strings. Used for selectable search.