selector2
Version:
Virtual selector component for react.js
417 lines (382 loc) • 15.9 kB
JSX
import React from 'react';
import ReactDOM from 'react-dom';
import Selector2 from './Selector2.jsx';
import '../stylesheet/selector2.less';
import '../stylesheet/selector2-docs.less';
class Selector2Example extends React.Component {
constructor(props) {
super(props);
this.state = {
remote: {
url: './mocks/options.json',
field: 'results',
loading: 'loading...',
defaults: 'label-1, label-2'
},
options: [
{
label: 'hello-01',
value: 'hello-01'
},
{
label: 'disabled',
value: 'disabled',
disabled: true
},
{
label: 'hello-02',
value: 'hello-02'
},
{
label: 'hello-03',
value: 'hello-03'
},
{
label: 'hello-04',
value: 'hello-04'
},
{
label: 'hello-05',
value: 'hello-05'
},
{
label: 'hello-06',
value: 'hello-06'
},
{
label: 'hello-07',
value: 'hello-07'
},
{
label: 'hello-08',
value: 'hello-08'
},
{
label: 'hello-09',
value: 'hello-09'
},
{
label: 'hello-10',
value: 'hello-10'
},
{
label: 'hello-11',
value: 'hello-11'
}
],
defaults: ['hello-02', 'hello-05'],
countries: {
options: [
{
label: '阿尔巴尼亚',
value: '阿尔巴尼亚'
},
{
label: '阿尔及利亚',
value: '阿尔及利亚'
},
{
label: '阿富汗',
value: '阿富汗'
},
{
label: '阿根廷',
value: '阿根廷'
}
],
defaults: '阿尔及利亚'
},
groups: {
options: [
{
group: 'group-1',
options: [
{
label: 'group-label-1-1',
value: 'group-label-1-1'
},
{
label: 'group-label-1-2',
value: 'group-label-1-2'
},
{
label: 'group-label-1-3',
value: 'group-label-1-3',
disabled: true
},
{
label: 'group-label-1-4',
value: 'group-label-1-4'
}
]
},
{
group: 'group-2',
options: [
{
label: 'group-label-2-1',
value: 'group-label-2-1'
},
{
label: 'group-label-2-2',
value: 'group-label-2-2'
}
]
},
{
group: 'group-3',
options: [
{
label: 'group-label-3-1',
value: 'group-label-3-1'
},
{
label: 'group-label-3-2',
value: 'group-label-3-2'
},
{
label: 'group-label-3-3',
value: 'group-label-3-3'
}
]
}
],
defaults: ['group-label-3-2', 'group-label-2-2']
}
};
this.displayName = 'Selector2Example';
}
handleUpdateRemote() {
this.setState({
remote: {
url: './mocks/options-1.json?norce=foo&time=1234567890',
field: 'results',
loading: 'reloading...',
defaults: 'label-3, label-4, label-5, label-6'
}
});
}
render() {
return (
<div className="form-horizontal">
<div className="form-group">
<Selector2 autoOpen={true} options={ this.state.groups.options } theme={'sm selector-default'} defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
<div className="form-group">
<Selector2 options={ this.state.groups.options } defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
<div className="form-group">
<Selector2 options={ this.state.groups.options } theme={'lg selector-default'} defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
<div className="form-group">
<Selector2 options={ this.state.groups.options } multiple={ true } theme={'sm selector-danger'} defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
<div className="form-group">
<Selector2 options={ this.state.groups.options } multiple={ true } theme={'warning'} defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
<div className="form-group">
<Selector2 options={ this.state.groups.options } multiple={ true } theme={'lg selector-success'} defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
<div className="form-group">
<div className="input-group">
<div className="input-group-btn">
<button type="button" className="btn btn-success">Go!</button>
</div>
<Selector2 options={ this.state.groups.options } multiple={ true } theme={'success'} defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group">
<Selector2 options={ this.state.groups.options } multiple={ true } theme={'success'} defaults={this.state.groups.defaults} onSelectClose={ true } />
<div className="input-group-btn">
<button type="button" className="btn btn-success">Go!</button>
</div>
</div>
</div>
<div className="form-group">
<div className="row">
<div className="col-lg-6">
<div className="input-group">
<div className="input-group-btn">
<button type="button" className="btn btn-default">Action</button>
<button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span className="caret"></span>
<span className="sr-only">Toggle Dropdown</span>
</button>
<ul className="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" className="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<Selector2 options={ this.state.groups.options } defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
</div>
<div className="col-lg-6">
<div className="input-group">
<Selector2 options={ this.state.groups.options } defaults={this.state.groups.defaults} onSelectClose={ true } />
<div className="input-group-btn">
<button type="button" className="btn btn-default">Action</button>
<button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span className="caret"></span>
<span className="sr-only">Toggle Dropdown</span>
</button>
<ul className="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" className="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="form-group">
<div className="row">
<div className="col-xs-6">
<div className="input-group">
<span className="input-group-addon"><input type="radio" /></span>
<Selector2 options={ this.state.groups.options } theme={'sm selector-default'} defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
</div>
<div className="col-xs-6">
<div className="input-group">
<span className="input-group-addon"><input type="checkbox" name="" id=""/></span>
<Selector2 options={ this.state.groups.options } theme={'sm selector-default'} defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
</div>
</div>
</div>
<div className="form-group">
<div className="row">
<div className="col-xs-6">
<div className="input-group">
<span className="input-group-addon">分组单选：</span>
<Selector2 options={ this.state.groups.options } theme={'sm selector-default'} defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
</div>
<div className="col-xs-6">
<div className="input-group">
<span className="input-group-addon">分组单选：</span>
<Selector2 options={ this.state.groups.options } theme={'sm selector-default'} defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
</div>
</div>
</div>
<div className="form-group">
<div className="input-group">
<span className="input-group-addon">分组单选：</span>
<Selector2 options={ this.state.groups.options } theme={'sm selector-default'} disabled={true} defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group">
<span className="input-group-addon">远程获取：</span>
<Selector2 defaults={ this.state.remote.defaults } remote={ this.state.remote } onSelectClose={ true } multiple={true} />
<div className="input-group-btn">
<button className="btn btn-success" onClick={ this.handleUpdateRemote.bind(this) }>update</button>
</div>
</div>
</div>
<div className="form-group">
<div className="input-group">
<span className="input-group-addon">分组单选：</span>
<Selector2 options={ this.state.groups.options } theme={'sm selector-default'} defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group">
<span className="input-group-addon">分组单选：</span>
<Selector2 options={ this.state.groups.options } theme={'lg selector-default'} defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group">
<span className="input-group-addon">分组单选：</span>
<Selector2 options={ this.state.groups.options } defaults={this.state.groups.defaults} onSelectClose={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group">
<span className="input-group-addon">分组多选：</span>
<Selector2 options={ this.state.groups.options } defaults={this.state.groups.defaults} multiple={true} onSelectClose={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group has-success">
<span className="input-group-addon">分组多选：</span>
<Selector2 options={ this.state.groups.options } defaults={this.state.groups.defaults} multiple={true} onSelectClose={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group has-error">
<span className="input-group-addon">分组多选：</span>
<Selector2 options={ this.state.groups.options } defaults={this.state.groups.defaults} multiple={true} onSelectClose={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group has-warning">
<span className="input-group-addon">分组多选：</span>
<Selector2 options={ this.state.groups.options } defaults={this.state.groups.defaults} multiple={true} onSelectClose={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group">
<span className="input-group-addon">单选：</span>
<Selector2 options={ this.state.options } onChange={(arg) => {console.log(arg)}} defaults={ this.state.defaults } onSelectClose={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group">
<span className="input-group-addon">默认皮肤：</span>
<Selector2 options={ this.state.options } defaults={ this.state.defaults } multiple={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group">
<span className="input-group-addon">warning：</span>
<Selector2 options={ this.state.options } defaults={ this.state.defaults } multiple={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group">
<span className="input-group-addon">danger：</span>
<Selector2 options={ this.state.options } defaults={ this.state.defaults } multiple={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group">
<span className="input-group-addon">success：</span>
<Selector2 options={ this.state.options } defaults={ this.state.defaults } multiple={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group">
<span className="input-group-addon">选择后关闭下拉列表：</span>
<Selector2 options={ this.state.options } defaults={ this.state.defaults } multiple={ true } onSelectClose={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group">
<span className="input-group-addon">选择后不关闭下拉列表：</span>
<Selector2 options={ this.state.options } defaults={ this.state.defaults } multiple={ true } />
</div>
</div>
<div className="form-group">
<div className="input-group">
<span className="input-group-addon">自定义模板：</span>
<Selector2 options={ this.state.countries.options } defaults={ this.state.countries.defaults } multiple={ false } onSelectClose={ true } template={{
option: '<i class="example-country" style="background-position: 0px -<%= unique * 11 %>px"></i><%= label %>',
selected: '<i class="example-country" style="background-position: 0px -<%= unique * 11 %>px"></i><%= label %>'
}} clearable={ false } />
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Selector2Example />, document.getElementById('virtual-selector'));