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

Name	Type	Required	Default	Comments
prefixCls	string	false	'kuma-cascader'	默认的类名前缀
className	string	false	''	自定义类名
options	array	false	[]	选项数据源，格式可见下方Demo
value	array	false	[]	可由外部控制的值
defaultValue	array	false	[]	初始默认值
dropdownClassName	string	false	''	dropdown 容器的自定义样式
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'	次级菜单展开方式，支持 click 和 hover
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	null	dropdown中每一列的宽度, 如为空，整体宽度等于input输入框的宽度
displayMode	string	false	dropdown	select 或者 dropdown 或者 search(已废弃)
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
onlyStringValue	boolean	false	false	选中数据之后的值，直接给字符串而不是级联结构
searchOption	function	false	null	(已废弃) 开启关键词搜索的配置，当 dispalyMode 为 search 时启用，具体配置方式参考下方
showSearch	boolean	false	false	是否开启搜索模式
onSearch	function	false	null	开启关键词过滤模式，可以通过外部重新设置 options，onSearch 不能与 optionFilterProps 和 optionFilterCount 一起使用，onSearch 优先级更高
optionFilterProps	string[]	false	['label']	showSearch=true 时，optionFilterProp 为 options[i] 中的属性名称，此时搜索会进行过滤
optionFilterCount	number	false	20	当使用过滤功能时 dropdown 里最多显示的条数
cascaderHeight	number	false	null	级联选择区域的高度
useFullPathValue	boolean	false	false	使用全路径值匹配模式，该模式允许父子级，不同子级的 ID 一致

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

Name	Type	Required	Default	Comments
value	array	Yes	[]	受控值
options	array	Yes	[]	候选集，格式参考上方
onChange	function	Yes	null	value 改变的回调函数
columnWidth	number	No	null	每一列的宽度
cascaderHeight	number	NO	null	级联选择区域的高度
renderCustomItem	function	No	null	自定义渲染选项