uxcore-cascade-multi-select

级联多选组件，推荐所有层级的每一个候选 option 的 key 都是不重复的。

Development

git clone https://github.com/uxcore/uxcore-cascade-multi-select
cd uxcore-cascade-multi-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-multi-select
cd uxcore-cascade-multi-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-multi-select

Contribute

Yes please! See the CONTRIBUTING for details.

CascadeMultiSelect

API

Props

| 选项 | 描述 | 类型 | 必填 | 默认值 | |---|---|---|---|---| | prefixCls | 默认的类名前缀 | String | false| "kuma-cascade-multi" | | className | 自定义类名 | String | false | "" | | dropdownClassName | dropdown 部分的定制类名 | String | false | "" | | config | 每一级的特殊配置项，可参考下方案例 | Array | false | [] | | options | 横向级联的数据，可参考下方案例 | Array | true | [] | | value | 可由外部控制的值，可参考下方案例 | Array | false | [] | | defaultValue | 初始默认的值，格式同 value | Array | false | [] | | cascadeSize | 级联层级数 | number | false | 3 | | placeholder | placeholder | string | false | 'Please Select' 或 '请选择' | | notFoundContent | 没有子项级联数据时显示内容 | String | false | 'No Data' 或 '没有数据' | | allowClear | 是否允许清空 | bool | false | true | | disabled | 禁用模式，只能看到被禁掉的输入框 | bool | false | false | | readOnly | 只读模式，只能看到纯文本 | bool | false | false | | locale | 'zh-cn' or 'en-us' | String | false | 'zh-cn' | | onSelect | 选中选项的回调函数 | function | false | (valueList, labelList, leafList, cascadeSelected) => {} | | onItemClick | 点击选项事件，返回选项信息 | function | false | (item) => {} | | onOk | 点击确认按钮回调函数 | function | false | (valueList, labelList, leafList, cascadeSelected) => {} | | onCancel | 取消选择时回调函数，通常不点确定，直接隐藏下拉框也会触发这个函数 | function | false | () => {} | | beforeRender | 处理在input中预显示的内容，具体用法参考下方的案例 | function | false | (value, options) => {} | | keyCouldDuplicated | 是否允许除了第一级和最后一级以外的 id 重复 | bool | false | false | | isCleanDisabledLabel | 已禁用选项是否可被清除 | bool | false | false | labelWithPath | 是否启用已选Label按层级方式显示 | bool | false | false

props.config

** 示例 **

const config = [{
  checkable: false,
  showSearch: true, // 显示过滤项，默认为 false
}, {
  checkable: false, // 设置第二级不可选
}, {
  checkable: false,
}]

config 为一个数组，每一项的配置如下：

• checkable: (boolean) 该级是否可选，默认为 true
• showSearch: (boolean) 该级是否展示过滤搜索框，默认为 false

props.options

| 选项 | 描述 | 类型 | 必填 | 默认值 | |---|---|---|---|---| | value | 选项的值 | String | true| "" | | label | 选项的名称 | String | true | "" | | children | 选项的子项集 | Array | false | [] | | disabled | 是否禁止选中 | boolean | false | undefined |

** 示例 **

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

props.value

props.value 传递的是 key 构成的数组，这里的 key 可以是任意级别，除非当 prop keyCouldDuplicated 为 true 时，必须传 叶子节点的 key 数组。

const value = ['xihu', 'bingjiang'];

** 示例 **

<CascadeMultiSelect
  options={options}
  value={['xihu', 'nanjing']}
/>

props.beforeRender

props.beforeRender = (value, options) => { return '渲染你自己想要的字符串'; }

beforeRender 返回一个字符串，用来渲染进展开面板触发器的 input 内容。beforeRender 有两个参数，第一个 value 就是当前所有选中的 value 值数组，比较重要的是 options，options 对应的就是 props.options，并且带有每一个选项的选中状态。比如，对于 [{ label: 'label1', children: [{ label: 'label1-1' }] }]，当用户选中了 label1 时，options 的结构为：

[{ label: 'label1', checked: true, children: [{ label: 'label1-1', checked: true }] }]

你在业务中通过获取 checked 的值，就可以知道用户选中了哪些选项，此外，当用户未全选某一级时，还会有 halfChecked 属性。

props.onSelect

(valueList, labelList, leafList, cascadeList) => {
  valueList: 选中选项的value列表
  labelList: 选中选项的label列表
  leafList: 选中所有子项的{value, label}列表
  cascadeList: 所有级联结构，如果 item 被选中，则会有一个属性 `checked: true`
}

注：如果选项的子集全部选中，则返回该选项值

CascadeMultiPanel

API

Props

| 选项 | 描述 | 类型 | 必填 | 默认值 | |---|---|---|---|---| | className | 自定义类名 | String | false | "" | | prefixCls | 默认的类名前缀 | String | false| "kuma-cascade-multi" | | config | 配置项 | Array | false | [] | | options | 横向级联的数据 | Array | true | [] | | value | 可由外部控制的值 | Array | false | [] | | cascadeSize | 级联层级数 | number | false | 3 | | notFoundContent | 没有子项级联数据时显示内容 | String | false | 'No Data' 或 '没有数据' | | allowClear | 是否允许清空 | bool | false | true | | locale | 'zh-cn' or 'en-us' | String | false | 'zh-cn' | | onSelect | 选中选项的回调函数 | function | false | (valueList, labelList, leafList) => {} | | onItemClick | 点击选项事件，返回选项信息 | function | false | (item) => {} | | keyCouldDuplicated | 是否允许除了第一级和最后一级以外的 id 重复 | bool | false | false |

CascadeMultiModal

API

Props

| 选项 | 描述 | 类型 | 必填 | 默认值 | |---|---|---|---|---| | prefixCls | 默认的类名前缀 | String | false| "kuma-cascade-multi" | | className | 自定义类名 | String | false | "" | | config | 配置项 | Array | false | [] | | options | 横向级联的数据 | Array | true | [] | | value | 可由外部控制的值 | Array | false | [] | | cascadeSize | 级联层级数 | number | false | 3 | | notFoundContent | 没有子项级联数据时显示内容 | String | false | 'No Data' 或 '没有数据' | | allowClear | 是否允许清空 | bool | false | true | | locale | 'zh-cn' or 'en-us' | String | false | 'zh-cn' | | onSelect | 选中选项的回调函数 | function | false | (valueList, labelList, leafList) => {} | | onItemClick | 点击选项事件，返回选项信息 | function | false | (item, level) => {} | | title | 标题 | String | false | '级联选择' | | width | dialog 宽度 | Number | false | 672 | | onOk | 成功按钮回调函数 | Function | false | (valueList, labelList, leafList) => {} | | onCancel | 取消的回调函数 | Function | false | () => {} |

props 复用 uxcore-cascade-multi-select 的 props.

继承了部分Dialog的props,

onOk

(valueList, labelList, leafList, cascadeList) => {
  valueList: 选中选项的value列表
  labelList: 选中选项的label列表
  leafList: 选中所有子项的{value, label}列表
  cascadeList: 所有级联结构，如果 item 被选中，则会有一个属性 `checked: true`
}

使用方法

import CascadeMultiSelect from 'uxcore-cascade-multi-select';

const {
  CascadeMultiPanel,
  CascadeMultiModal,
} = CascadeMultiSelect;

render() {
  return () {
    <div>
      <CascadeMultiPanel />
      <CascadeMultiSelect />
      <CascadeMultiModal />
    </div>
  }
}