easySelect

@aligov/components-easy-select

简易下拉选择器

何时使用

相比 next 的 Select，功能上多了一个下拉数据自动请求，外部不用关注请求，只要获取选择结果即可

Install

tnpm install @alife/whale-easy-select --save

API

除有说明的属性，其他同 next 的 select

成员 说明 类型 默认值
auto 是否自动请求，在初始的时候就请求数据 Boolean false
autoSearchValue 自动请求时的请求值，非 undefined 且 auto 为 true 时有效 Any undefined
service 必填，请求服务
签名:
Function(value: String) => promise		 Function 无
initDataSource 初始数据源，可以是静态的数组或函数（同步或异步函数），函数接受一个入参，来自初始化时 props 中的 value/autoSearchValue/defaultValue Array、Function []
onlySelect 是否只能用下拉选择的值，不能使用自己输入的值，默认可以使用自己输入的值 Boolean false
transformSearchValue 用于搜索时把选择的值转换后再发送 NOTE::不建议使用，业务在 service 里转换即可 Function func.noop
isMultiFooter mode为multiple时是否有底部全选部分 Boolean true
filterLocal 是否本地过滤，若开启，则搜索时仅从本地数据源过滤，不会再请求远程数据。（auto 还是有效） Boolean false
fetchWhenEmptySearch 搜索为空时是否也触发请求，默认false，即默认 clear 时不会触发请求 Boolean false

注意

当使用动态搜索时，需要将filterLocal设置为false.

DEMO 列表

模糊搜索；支持保留输入值，也支持从下拉框选择

本 Demo 演示一行文字的用法。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import EasySelect from '@aligov/components-easy-select';

// 这里模拟的一个 service，获取模糊匹配的 datasource
const service = (param) => { // EasySelect 回传的 param 为用户输入值
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([
        {value: 'tb', label: '淘宝中国控股有限公司'},
        {value: 'tbhk', label: '淘宝香港股份有限公司'},
      ]);
    }, 300);
  });
}

class App extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      value: undefined
    };
  }

  handleChange = (newValue, actionType, item) => {
    console.log(newValue, actionType, item)
    this.setState({
      value: newValue
    });
  }

  render() {
    const {value} = this.state;
    return <EasySelect
      placeholder="随便输或输入'淘宝'下拉选择"
      value={value}
      service={service}
      onChange={this.handleChange}
      fetchWhenEmptySearch
    />;
  }
}

ReactDOM.render((
  <App />
), mountNode);

结合 field 使用

本 Demo 演示一行文字的用法。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Field, Button } from '@alifd/next';
import EasySelect from '@aligov/components-easy-select';

// 这里模拟的一个 service，获取模糊匹配的 datasource
const service = (param) => { // WhaleEasySelect 回传的 param 为用户输入值
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([
        {value: 'tb', label: '淘宝中国控股有限公司'},
        {value: 'tbhk', label: '淘宝香港股份有限公司'},
      ]);
    }, 300);
  });
}

class App extends Component {
  constructor(props, context) {
    super(props, context);
  
    this.field = new Field(this, {
      autoUnmount: true
    });
  }

  handleSubmit = () => {
    console.log(this.field.getValues());
  }

  render() {
    const { init } = this.field;

    return <div>
      <EasySelect
        {...init('value')}
        placeholder="输入'淘宝'下拉选择"
        service={service}
        onlySelect
      />
      <Button type="primary" onClick={this.handleSubmit}>提交</Button>
    </div>;
  }
}

ReactDOM.render((
  <App />
), mountNode);

自动请求下拉数据，本地搜索

本 Demo 演示一行文字的用法。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import EasySelect from '@aligov/components-easy-select';

// 这里模拟的一个 service，获取模糊匹配的 datasource
const service = (param) => { // EasySelect 回传的 param 为用户输入值
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([ // 作为 datasource，格式为 [{value, label}]
        {value: 'tb', label: '淘宝中国控股有限公司'},
        {value: 'tbhk', label: '淘宝香港股份有限公司'},
        {value: 'test', label: '测试公司'},
      ]);
    }, 300);
  });
}

function mockSource1() {
  return [
    {value: 'tb', label: '淘宝中国控股有限公司'},
    {value: 'tbhk', label: '淘宝香港股份有限公司'},
  ];
}

function mockSource2() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([{value: 'tb', label: '淘宝中国控股有限公司'}, {value: 'tbhk', label: '淘宝香港股份有限公司'},
      ]);
    }, 3000);
  });
}

class App extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      value: 'tb'
    };
  }

  handleChange = (newValue, actionType, item) => {
    console.log(newValue, actionType, item)
    this.setState({
      value: newValue
    });
  }

  render() {
    const {value} = this.state;

    return (
      <div>
        <h2>静态初始化数据源</h2>
        <EasySelect
          onlySelect
          placeholder="请输入"
          value={value}
          initDataSource={[{value: 'tb', label: '淘宝中国控股有限公司'}]}
          service={service}
          onChange={this.handleChange}
        />

        <h2>初始化数据源为函数</h2>
        <EasySelect
          onlySelect
          placeholder="请输入"
          defaultValue={value}
          initDataSource={mockSource1}
          service={service}
        />

        <h2>初始化数据源为3秒延迟的异步函数</h2>
        <EasySelect
          onlySelect
          placeholder="请输入"
          defaultValue={value}
          initDataSource={mockSource2}
          service={service}
        />
      </div>
    );
  }
}

ReactDOM.render((
  <App/>
), mountNode);

only select

本 Demo 演示一行文字的用法。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import EasySelect from '@aligov/components-easy-select';

const service = (param) => { // WhaleEasySelect 回传的 param 为用户输入值
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([ // 作为 datasource，格式为 [{value, label}]
        {value: 'tb', label: '淘宝中国控股有限公司'},
        {value: 'tbhk', label: '淘宝香港股份有限公司'},
      ]);
    }, 300);
  });
}

class App extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      value: ''
    };
  }

  handleChange = (newValue, actionType, item) => {
    console.log(newValue, actionType, item)
    this.setState({
      value: newValue
    });
  }

  render() {
    const {value} = this.state;

    return <EasySelect
      auto
      onlySelect
      placeholder="请选择"
      value={value}
      service={service}
      onChange={this.handleChange}
      showSearch={false}
      hasArrow
      hasClear={false}
    />;
}

}

ReactDOM.render((
  <App />
), mountNode);

Simple Usage

本 Demo 演示一行文字的用法。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import EasySelect from '@aligov/components-easy-select';

// 这里模拟的一个 service，获取模糊匹配的 datasource
const service = (param) => { // WhaleEasySelect 回传的 param 为用户输入值
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      switch(param){
        case '支付宝':
          resolve([ // 作为 datasource，格式为 [{value, label}]
            {value: 'alipay', label: '支付宝有限公司'},
            {value: 'alipayHk', label: '支付宝香港有限公司'},
          ]);
          break;
        case '淘宝':
          resolve([
            {value: 'tb', label: '淘宝中国控股有限公司'},
            {value: 'tbhk', label: '淘宝香港股份有限公司'},
          ]);
          break;
          default:;
      }
    }, 300);
  });
}

class App extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      value: undefined
    };
  }

  handleChange = (newValue, actionType, item) => {
    console.log(newValue, actionType, item)
    this.setState({
      value: newValue
    });
  }

  render() {
    const {value} = this.state;
    return <EasySelect
      onlySelect
      placeholder="输入'支付宝'或'淘宝'试一下"
      value={value}
      service={service}
      onChange={this.handleChange}
    />;
  }
}

ReactDOM.render((
  <App />
), mountNode);