# Dropdown

Generic Dropdown component to display checked value

```js
import Dropdown from 'deepsight-react-components/Dropdown';

return <Dropdown ... />
```

## Props

| prop                     | type       | required | default                                                                          | description                                                                        |
|:-------------------------|:-----------|:--------:|:---------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------|
| `width`                  | `string`   | `false`  | `240px`                                                                          | The width the apply on the component                                               |
| `height`                 | `string`   | `false`  | `40px`                                                                           | The height the apply on the component                                              |
| `customStyle`            | `object`   | `false`  | `{}`                                                                             | The custom style to apply on the component                                         |
| `items`                  | `Item[]`   |  `true`  | `[]`                                                                             | The list of items to see displayed in the drop list                                |
| `selectedItems`          | `Item[]`   |  `true`  | `[]`                                                                             | The list of selected items within the given list of items                          |
| `onSelectionChange`      | `Function` |  `true`  | `none`                                                                           | The callback to apply on selection change event                                    |
| `onTriggerDropdownList`  | `Function` | `false`  | `null`                                                                           | The callback to apply on DropdownList trigger                                      |
| `placeholder`            | `string`   | `false`  | `''`                                                                             | The placeholder to apply on the dropdown input                                     |
| `label`                  | `string`   | `false`  | `null`                                                                           | The label to apply on the dropdown input                                           |
| `iconSrc`                | `string`   | `false`  | `null`                                                                           | The source of the icon to display in dropdown input                                |
| `iconCustomStyle`        | `object`   | `false`  | `{}`                                                                             | The default style to apply on the icon of the dropdown input                       |
| `isUniqueSelection`      | `boolean`  | `false`  | `true`                                                                           | Whether the dropdown is configured to be a unique selection                        |
| `isSearchDisabled`       | `boolean`  | `false`  | `false`                                                                          | Whether we can search values within the list                                       |
| `isDisabled`             | `boolean`  | `false`  | `false`                                                                          | Whether we can open the drop list                                                  |
| `isRequired`             | `boolean`  | `false`  | `false`                                                                          | Whether the dropdown field is required                                             |
| `isErrorState`             | `boolean`  | `false`  | `false`                                                                          | Whether the dropdown input is render with error state (red)                                             |
| `searchPlaceholder`      | `string`   | `false`  | `'Rechercher...'`                                                                | The placeholder to apply on the search input in the dropdown list                  |
| `sortBy`                 | `function` | `false`  | `(itemsList) => _.sortBy(itemsList, (item) => { return item.value.toLowerCase()` | A function to sort the dropdown items list by default sorted by alphabetical order |
| `button`                 | `Button`   | `false`  | `null`                                                                           | A button which can be displayed on the end of dropList                             |
| `labelStyle`             | `object`   | `false`  | `{}`                                                                             | A prop to add custom styles to the label                                           |
| `customListStyle`        | `object`   | `false`  | `{}`                                                                             | A prop to add custom styles to the DropdownListContainer styled components         |
| `tooltipText`            | `string`   | `false`  | `null`                                                                           | A prop to add a tooltip next to the label
| `shouldInterpretTooltipHTML`| `boolean`| `false`  | `null`                                                                          | A prop ton interpret `tooltipText` inner HTML                                          |
| `link`                   | `object`   | `false`  | `null`                                                                           | A prop to add a clickable icon next to the label                                   |
| `searchDebounceTimeInMs` | `number`   | `false`  | `300`                                                                            | The debounce time in milliseconds before applying onChange search method           |
| `onSearchChange`         | `function` | `false`  | `null`                                                                           | Override the search bar, returns the value of the search and makes the searchBar non-functionnal, this will be used when searching for data outside of the Dropdown component (paginated fetch for example)
| `displayName`            | `boolean`  | `false`  | `false`                                                                          | When true, displays the `name` property of items instead of the `value` property  |

## Item

| prop          | type       | required | default    | description                                 |
|:--------------|:-----------|:--------:|:-----------|:--------------------------------------------|
| `id`          | `number`   |  `true`  | None       | The unique id that differentiates the items |
| `value`       | `string`   |  `true`  | `''`       | The displayed value in the list and input   |
| `name`        | `string`   | `false`  | `null`     | The display name used when `displayName` prop is true |
| `renderValue` | `Function` | `false`  | `() => {}` | A function that returns a custom rendering  |
| `isDisabled`  | `boolean`  | `false`  | `false`    | Whether an item can be selected or not      |

## Button

| prop          | type       | required | default    | description                                     |
|:--------------|:-----------|:--------:|:-----------|:------------------------------------------------|
| `text`        | `string`   |  `true`  | `''`       | The text display in the button                  |
| `handleClick` | `Function` |  `true`  | `() => {}` | The function called on click event              |
| `iconSrc`     | `string`   |  `true`  | `null`     | The source of the icon to display in the button |
| `isDisabled`  | `boolean`  |  `true`  | None       | Whether the button can be clicked or not        |

## Pagination

| prop                      | type       | required | default    | description                                     |
|:--------------------------|:-----------|:--------:|:-----------|:------------------------------------------------|
| `handleFetchMoreData`     | `function` | `true`  | None        | Execute a given function when clicking on the button 'show more results', or making a search
| `displayShowMoreResult`   | `boolean`  | `true`  | None        | Display or no the 'show more results' button
| `isLoading`               | `boolean`  | `true`  | None        | Set the component in a loading state