@npm.tangocode/tc_ui_components
Version:
[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #
135 lines (107 loc) • 6.16 kB
Markdown
A customizable DropDown component.
1. __customInput ?__ (any) : If you have your own custom input component you can use it with this prop
2. __customInputProps ?__ (any) : The props for the custom input
3. __customEmptyStateMessage ?__ (JSX.Element) : A JSX Element to be shown in the drop down, in case there are no options to show. The element will be shown exactly as passed.
4. __emptyStateMessage ?__ (string) : A string to be shown in the drop down, in case there are no options to show. The message will be shown with a default style, but it can be changed (see prop styles).
5. __inputValue__ (string) : The value to be shown in the input.
6. __onSelectOption__ ((value: { toString: () => string }) => void;) : Function to be called when an option is selected. It passes the new value.
7. __placeholder ?__ (string) : Placeholder for the input.
8. __readOnly ?__ (boolean) : Indicates whether the input is editable or not. If not, the drop down will never be displayed. By default, it is false.
9. __showDropDownOnEmpty ?__ (boolean) : Indicates whether the drop down will be shown when no suggestions match the input value or not. Use in true when passing an empty state message. By default, it is false.
10. __styles ?__ (DropDown.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.
* InputDropDownDrawer is the component used inside InputSuggest that renders the input and the drop down.
* Container is a div that has all the content of InputDropDownDrawer.
* Input is the input where the user types.
* InputSelectIconOnCollapse is the div that contains the icon where the user clicks to expand the drop down.
* InputSelectIconOnExpand is the div the contains the icon where the user clicks to collapse the drop down.
* InputWrapper is a div that contains the Input.
* DropDownDrawer is a component used inside InputDropDownDrawer that renders the drop down.
* Container is a div that has all the content of DropDownDrawer.
* List is a ul that has all the options (li).
* DropDownEmptyState is a component used inside DropDownDrawer that renders the empty state message.
* Container is a div that has all the content of DropDownEmptyState.
* Message is a div that styles the emptyStateMessage.
* DropDownItem is a component used inside DropDownDrawer that renders an option.
* HighlightedItemChunk is a span that contains the highlighted parts of the option.
* ListItemFocused is a div that has all the content of DropDownItem when the option is focused.
* ListItemNotFocused is a div that has all the content of DropDownItem when the option is not focused.
* RegularItemChunk is a span that contains the regular parts of the option.
```ts
styles={{
Container?: <styled component>;
Input?: <styled component>;
InputSelectIconOnCollapse?: <styled component>;
InputSelectIconOnExpand?: <styled component>;
InputWrapper?: <styled component>;
DropDownDrawer?: {
Container?: <styled component>;
List?: <styled component>;
DropDownEmptyState?: {
Container?: <styled component>;
Message?: <styled component>;
};
DropDownItem?: {
HighlightedItemChunk?: <styled component>;
ListItemFocused?: <styled component>;
ListItemNotFocused?: <styled component>;
RegularItemChunk?: <styled component>;
};
};
}};
```
11. __suggestOptions__ ({ toString: () => string }[]) : <span style="color:red">Required</span>. The definition of all posible suggestions. It supports a list of anything that can be transformed in a string using the function toString() (['a', 'b', 'c'] is a valid value). All the suggestions will be shown when the drop down is displayed.
12. __id ?__ (string): A prefix id for all the html elements of the component
13. __name ?__ (string): A prefix name for all the html elements of the component
### Usage ###
The initial state of the component just shows the input. The drop down is displayed once the user clicks in the input. After that, the following features are available:
When pressing Arrow Down or Arrow Up, the drop down is displayed, switching the focused option.
When pressing Enter when an option is focused, the drop down is closed and the component notifies that the new value should be the option selected.
When pressing Escape or Tab when the drop down is being displayed, the drop down is not displayed anymore.
The following DropDow was created with the props:
```jsx
<div style={{ width: '200px' }}>
<DropDown
inputValue={'Los Angeles'}
onSelectOption={(value: string) => { }}
suggestOptions={[
'Cleveland',
'Chicago',
'Indianapolis',
'Los Angeles',
'Milwaukee',
'New York',
'San Francisco'
]}
/>
</div >
```
Resulting, after clicking on the input, in the render of:
```jsx
const newStyles = {
Container: styles.inputDropDownDrawer.Container.extend`
color: black; `
}
return(
<div style={{width: '400px'}}>
<DropDown
inputValue={'Los Angeles'}
onSelectOption={(value: string) => { }}
styles={newStyles}
suggestOptions={[
'Cleveland',
'Chicago',
'Indianapolis',
'Los Angeles',
'Milwaukee',
'New York',
'San Francisco'
]}
/>
</div>
)
```