---
name: Picker
menu: Components
---

# Picker
import Picker from './index'
import Button from '../button/index'
import './style/index.scss'
import { Playground, Props } from 'docz'

## Props & Methods
<Props of={Picker}/>

## Basic Usage
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props) {
            super(props);
            this.state = {
            visibleBasic: false,
            };
            this.mockOptions = this.mockOptions.bind(this);
        }
        mockOptions(count, name) {
            if (!name) {
                name = Math.random();
            }
            let re = [];
            for (let i = 0; i < count; i++) {
                re.push({ id: `${i}-${name}`, selected: false });
            }
            return re;
        }
        render(){
            return <>
            <Button onClick={() => this.setState({ visibleBasic: true })}>Click me to pick</Button>
            <Picker
                visible={this.state.visibleBasic}
                name="课程包"
                maxSelected={5}
                detail="支持选择最多关联5门课程（包）"
                data={this.mockOptions(40)}
                onClose={() => this.setState({ visibleBasic: false })}
                onSave={(data) => {console.log('selected:', data);}}
                onChange={(data) => {console.log(data);}}
            />
            </>
        }
    }
    return <Example />
}}
</Playground>

## Nested Data
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props) {
            super(props);
            this.state = {
            visibleNest: false,
            };
        }
        render(){
            return <>
            <Button onClick={() => this.setState({ visibleNest: true })}>Nested</Button>
            <Picker
                visible={this.state.visibleNest}
                name="嵌套课程包"
                data={[
                {
                    id: 1,
                    display: <strong style={{ color: 'red' }}>红</strong>,
                    search: '红',
                }, {
                    id: 2,
                    display: <strong style={{ color: 'blue' }}>蓝</strong>,
                    search: '蓝色',
                }, {
                    id: 3,
                    display: <strong style={{ color: 'green' }}>绿</strong>,
                    search: '绿色',
                },
                ]}
                onClose={() => this.setState({ visibleNest: false })}
                onSave={() => this.setState({ visibleNest: false })} />
            </>
        }
    }
    return <Example/>
}
}
</Playground>

## Selected Settings
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props) {
            super(props);
            this.state = {
            visibleSelected: false,
            visibleMaxSelected: false,
            };
        }
        render(){
            return <>
            <Button onClick={() => this.setState({ visibleSelected: true })}>Select one by default</Button>
            <Picker
                visible={this.state.visibleSelected}
                name="设置选中课程包"
                data={[
                {
                    id: 1,
                    display: 'Option 1',
                    name: '1',
                }, {
                    id: 2,
                    display: 'Option 2',
                    name: '2',
                }, {
                    id: 3,
                    display: 'Option 3',
                    name: '3',
                },
                ]}
                selectedIdList={[1]}
                preselectedIdList={[2]}
                maxSelected={3}
                onClose={() => this.setState({ visibleSelected: false })}
                onSave={() => this.setState({ visibleSelected: false })}
            />
            <Button onClick={() => this.setState({ visibleMaxSelected: true })}>Set max selected</Button>
            <Picker
                visible={this.state.visibleMaxSelected}
                name="最多选中数课程包"
                maxSelected={1}
                data={[
                {
                    id: 1,
                    display: 'Option 1',
                    name: '1',
                }, {
                    id: 2,
                    display: 'Option 2',
                    name: '2',
                }, {
                    id: 3,
                    display: 'Option 3',
                    name: '3',
                },
                ]}
                onClose={() => this.setState({ visibleMaxSelected: false })}
                onSave={() => this.setState({ visibleMaxSelected: false })}
            />
            </>
        }
    }
    return <Example/>
}}
</Playground>

## Async
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props) {
            super(props);
            this.state = {
            visibleAsync: false,
            visibleAsyncSearch: false,
            visibleAsyncLoadmore: false,
            dataAsyncSearch: null,
            dataAsync: null,
            dataAsyncLoadmore: null,
            loadingAsyncLoadmore: false,
            };
            this.onAsnycSearch = this.onAsnycSearch.bind(this);
            this.onAsnycLoadmore = this.onAsnycLoadmore.bind(this);
            this.mockOptions = this.mockOptions.bind(this);
        }
        componentDidMount() {
            this.timer = window.setTimeout(() => {
            this.setState({
                dataAsync: this.mockOptions(40),
                dataAsyncSearch: this.mockOptions(40),
                dataAsyncLoadmore: this.mockOptions(40),
            });
            }, 5000);
        }
        componentWillUnmount() {
            window.clearTimeout(this.timer);
        }
        onAsnycSearch(searchKeyword, data) {
            this.setState({
            loadingAsyncSearch: true,
            });
            this.timer = window.setTimeout(() => {
            this.setState({
                dataAsyncSearch: data.concat(this.mockOptions(10, searchKeyword)),
                loadingAsyncSearch: false,
            });
            }, 1000);
        }
        onAsnycLoadmore(searchKeyword, data) {
            this.setState({
            loadingAsyncLoadmore: true,
            });
            this.timer = window.setTimeout(() => {
            if (data != null) {
                this.setState({
                dataAsyncLoadmore: data.concat(this.mockOptions(10, searchKeyword)),
                loadingAsyncLoadmore: false,
                });
            }
            }, 1000);
        }
        mockOptions(count, name) {
            if (!name) {
                name = Math.random();
            }
            let re = [];
            for (let i = 0; i < count; i++) {
                re.push({ id: `${i}-${name}`, selected: false });
            }
            return re;
        }
        render(){
            return <>
            <Button onClick={() => this.setState({ visibleAsync: true })}>Async Data</Button>
            <Picker
                visible={this.state.visibleAsync}
                name="异步课程包"
                data={this.dataAsync}
                onClose={() => this.setState({ visibleAsync: false })}
                onSave={() => this.setState({ visibleAsync: false })}
            />
            <Button onClick={() => this.setState({ visibleAsyncSearch: true })}>Async Search</Button>
            <Picker
                visible={this.state.visibleAsyncSearch}
                name="异步搜索"
                maxSelected={3}
                data={this.state.dataAsyncSearch}
                onClose={() => this.setState({ visibleAsyncSearch: false })}
                onSave={() => this.setState({ visibleAsyncSearch: false })}
                onSearch={this.onAsnycSearch}
                loading={this.loadingAsyncSearch}
            />
            <Button onClick={() => this.setState({ visibleAsyncLoadmore: true })}>Async Load More</Button>
            <Picker
            visible={this.state.visibleAsyncLoadmore}
            name="异步加载更多"
            maxSelected={3}
            data={this.state.dataAsyncLoadmore}
            onClose={() => this.setState({ visibleAsyncLoadmore: false })}
            onSave={() => this.setState({ visibleAsyncLoadmore: false })}
            onNeedMoreData={this.onAsnycLoadmore}
            loading={this.state.loadingAsyncLoadmore}
            />
            </>
        }
    }
    return <Example/>
}
}
</Playground>

## Warning Message
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props) {
            super(props);
            this.state = {
            visibleWarning: false,
            warning: '',
            };
        }
        render(){
            return <>
            <Button onClick={() => this.setState({ warning: `${this.state.warning}警告信息`, visibleWarning: true })}>Set Warning Message</Button>
            <Picker
                visible={this.state.visibleWarning}
                name="动态设置警告信息"
                maxSelected={3}
                data={[
                {
                    id: 1,
                    display: 'Option 1',
                    name: '1',
                }, {
                    id: 2,
                    display: 'Option 2',
                    name: '2',
                }, {
                    id: 3,
                    display: 'Option 3',
                    name: '3',
                },
                ]}
                warning={this.state.warning}
                onClose={() => this.setState({ visibleWarning: false })}
                onSave={() => this.setState({ visibleWarning: false })}
            />
            </>
        }
    }
    return <Example/>
}}
</Playground>