lpgray / uxcore-cascade-select

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	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'	次级菜单展开方式，支持 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	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();
      }
    })
  }}
/>