Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

uxcore-cascade-multi-select

0.8.5 • Public • Published

uxcore-cascade-multi-select

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

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

Sauce Test Status

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

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>
  }
}

install

npm i uxcore-cascade-multi-select

Downloadsweekly downloads

63

version

0.8.5

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
Report a vulnerability