uxcore-cascade-select v0.9.4

uxcore-cascade-select

React cascade select

Development

git clone https://github.com/uxcore/uxcore-cascade-select
cd uxcore-cascade-select
npm install
npm run server

if you'd like to save your install time，you can use uxcore-tools globally.

npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-cascade-select
cd uxcore-cascade-select
npm install
npm run dep
npm run start

Test Case

npm run test

Coverage

npm run coverage

Demo

http://uxcore.github.io/components/cascade-select

Contribute

Yes please! See the CONTRIBUTING for details.

API

import CascadeSelect from 'uxcore-cascade-select'
import { render } from 'react-dom'

render(<CascadeSelect />, document.getElementById('root'))

Props

Demos

props.options

const options = [{
  value: 'zhejiang',
  label: '浙江',
  children: [{
    value: 'hangzhou',
    label: '杭州',
    children: [{
      value: 'xihu',
      label: '西湖',
    }],
  }],
}, {
  value: 'jiangsu',
  label: '江苏',
  children: [{
    value: 'nanjing',
    label: '南京',
    children: [{
      value: 'zhonghuamen',
      label: '中华门',
    }],
  }],
}];

当不指定 dropdown 宽度时，还可以使用css来定制dropdown宽度

.kuma-cascader-submenu-empty,
.kuma-dropdown-menu-submenu {
  width: 400px; // 你想要的 dropdown 宽度
}

props.onSelect

<CascadeSelect
  /**
   * @param resolve 请求成功了调用resolve()
   * @param reject 请求失败则调用reject()
   * @param key key为父级的value
   * @param level level为父级所在的层数，如上面的options的['zhengjiang']， level为1
   */ 
  showSearch={true}
  onSelect={(resolve, reject, key, level) => {
    ajax({
      url: 'xxx/xx.json',
      data: {
        key
      },
      success(content) {
        resolve(content); // content必须为array
      },
      error() {
        reject();
      }
    })
  }}
/>

props.searchOption

{
  doSearch(keyword, afterSearch) { // 异步搜索函数
    // keyword 为搜索的关键词
    // afterSearch 为搜索完成之后需要将结果显示在页面中，afterSearch 接收的参数为 [{ label, value }, ...]
    Fetch('/search?keyword=' + keyword).then(result => afterSearch(result))
  }
}

props.optionFilterProp

<CascadeSelect
  options={this.state.options}
  showSearch={true}
  optionFilterProps={['label']}
  optionFilterCount={10}
/>

只用面板

只是用面板时 props.value 必须是受控模式

<CascadeSelect.CascadeSubmenu
  options={options}
  value={this.state.value}
  onChange={(value) => {
    this.setState({ value });
  }}
  renderCustomItem={(item) => {
    return <span style={{ color: 'red' }}>{item.label}</span>
  }}
/>

CascadeSelect.CascadeSubmenu.props