virtual-selector/src/javascript/virtual-selector-example.jsx

Virtual selector component for react.js

import React from 'react';
import ReactDOM from 'react-dom';
import VirtualSelector from './VirtualSelector.jsx';
import '../stylesheet/virtual-selector.less';
import '../stylesheet/virtual-selector-docs.less';

class VirtualSelectorExample extends React.Component {

  displayName = 'VirtualSelectorExample';

  constructor(props) {
    super(props);

    this.state = {
      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']
      }
    };
  }

  render() {
    return (
      <div className="virtual-selector-example">
        <div className="example-container">
          <span className="label">远程获取：</span>
          <VirtualSelector defaults={['label-1', 'label-2']} remote={{
            url: './mocks/options.json',
            field: 'results',
            loading: 'loading...'
          }} onSelectClose={ true } multiple={true} />
        </div>
        <div className="example-container">
          <span className="label">分组单选：</span>
          <VirtualSelector options={ this.state.groups.options } defaults={this.state.groups.defaults} onSelectClose={ true } />
        </div>
        <div className="example-container">
          <span className="label">分组多选：</span>
          <VirtualSelector options={ this.state.groups.options } defaults={this.state.groups.defaults} multiple={true} onSelectClose={ true } />
        </div>
        <div className="example-container">
          <span className="label">单选：</span>
          <VirtualSelector options={ this.state.options } onChange={(arg) => {console.log(arg)}} defaults={ this.state.defaults } onSelectClose={ true } />
        </div>
        <div className="example-container">
          <span className="label">默认皮肤：</span>
          <VirtualSelector options={ this.state.options } defaults={ this.state.defaults } multiple={ true  } />
        </div>
        <div className="example-container">
          <span className="label">info：</span>
          <VirtualSelector options={ this.state.options } defaults={ this.state.defaults } multiple={ true  } theme={'info'}/>
        </div>
        <div className="example-container">
          <span className="label">purple：</span>
          <VirtualSelector options={ this.state.options } defaults={ this.state.defaults } multiple={ true  } theme={'purple'}/>
        </div>
        <div className="example-container">
          <span className="label">danger：</span>
          <VirtualSelector options={ this.state.options } defaults={ this.state.defaults } multiple={ true  } theme={'danger'}/>
        </div>
        <div className="example-container">
          <span className="label">success：</span>
          <VirtualSelector options={ this.state.options } defaults={ this.state.defaults } multiple={ true  } theme={'success'}/>
        </div>
        <div className="example-container">
          <span className="label">inverse：</span>
          <VirtualSelector options={ this.state.options } defaults={ this.state.defaults } multiple={ true  } theme={'inverse'}/>
        </div>
        <div className="example-container">
          <span className="label">选择后关闭下拉列表：</span>
          <VirtualSelector options={ this.state.options } defaults={ this.state.defaults } multiple={ true  } onSelectClose={ true } theme={'danger'} />
        </div>
        <div className="example-container">
          <span className="label">选择后不关闭下拉列表：</span>
          <VirtualSelector options={ this.state.options } defaults={ this.state.defaults } multiple={ true  } />
        </div>
        <div className="example-container">
          <span className="label">自定义模板：</span>
          <VirtualSelector 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>
    );
  }
}

ReactDOM.render(<VirtualSelectorExample />, document.getElementById('virtual-selector'));