@npm.tangocode/tc_ui_components/src/documentation/ListPicker.md

[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #

## List Picker ##

### Description ###

A component with two lists where one is generated with the items selected from the first list.

### Props ###

1. __items__ (CheckItem[]) : This is the list with the items that can be selected by the user.

2. __checkedItems ?__ (CheckItem[]): The list of selected items.

3. __styles ?__ (ListPicker.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components

    * Container
        -Is the container is the outer element that holds the search bar and lists. Display and flex-direction can be customized

    * Median 
        -Is the separator between both lists

    * ListWrapper
        - Is the container that  holds the two lists.

    * SearchInput
        - The styles for the Search input bar

    * SearchContainer
        - The  container Div for the Search input.
        
    * ResetIcon
        - Styles for the reset search icon.

    ```ts
        styles={{
            Container?: <styled component>;
            Mediant?: <styled component>;
            ListWrapper?: <styled component>;          
            SearchInput?: <styled component>;
            SearchContainer?: <styled component>;
            ResetIcon?: <styled component>;
        }};
    ```

4. __listComponent ?__ (JSX.Element) : A custom list component can be used.

5. __listChange__ ((list: CheckItem[]) => void) : Callback function to notify list changes.

6. __id ?__ (string): A prefix id for all the html elements of the component

7. __name ?__ (string): A prefix name for all the html elements of the component

### Usage ###


```jsx
    <div style={{ width: "100vw", height: "300px" }}>
        <ListPicker
            items={this.listPickerItems()}            
            listChange={list => console.log("list", list)}
        />
    </div>
```

### Styling ###

```jsx
const newStyles = {
    Median: styles.listpicker.Median.extend`
        width: 40px;   `
    }

 render() {
        return (
    <div style={{ width: "100vw", height: "300px" }}>
        <ListPicker
            items={this.listPickerItems()}            
            listChange={list => console.log("list", list)}
            styles={newStyles}
        />
    </div>
        )
 }
```