uxcore-cascade-select

React cascade select

NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads

Sauce Test Status

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

Name Type Required Default Comments
prefixCls string false 'kuma-cascader' 默认的类名前缀
className string false '' 自定义类名
options array false [] 选项数据源,格式可见下方Demo
value array false null 可由外部控制的值
defaultValue array false [] 初始默认值
placeholder string false 'Please Select' or '请选择' placeholder
onChange function false function(value, selectedOptions) 选择完成后回调
disabled boolean false false 是否禁用
clearable boolean false false 是否支持清除
changeOnSelect boolean false false 是否将每次选择立刻显示在控件中
expandTrigger string false 'click' 次级菜单展开方式,支持 clickhover
beforeRender function false (value, selectedOptions) => selectedOptions.map(o => o && o.label).join(' / ') 处理要显示的内容
cascadeSize number false 3 级联的层级数
getPopupContainer function():HTMLElement false - 返回一个 html 元素用作 Popup 面板的容器,默认是插在body 中的一个 div
locale string false 'zh-cn' 'en-us'
miniMode boolean false true 是否是简洁显示风格
columnWidth number false 100 dropdown中每一列的宽度
displayMode string false dropdown select 或者 dropdown
getSelectPlaceholder func false function(idx){ return '请选择' } select显示模式下的placeholder生成函数
size string false large 尺寸,枚举值:large, middle, small
isMustSelectLeaf bool false false 是否必须选择到叶子节点
onSelect function false null 异步加载层级,需要 return 一个数组,具体用法参考下方 demo

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
   */ 
  onSelect={(resolve, reject, key, level) => {
    ajax({
      url: 'xxx/xx.json',
      data: {
        key
      },
      success(content) {
        resolve(content); // content必须为array
      },
      error() {
        reject();
      }
    })
  }}
/>