0.0.1 • Published 2 years ago
rts-temp v0.0.1
react-trans-selector
穿梭框形式的多态选择器。
支持全列展示(all)和分组展示(group),分组展示支持按组实时加载。
版本说明
1.2.17
SampleTransSelector左面板“可选”后面的冒号改成中文模式。
1.2.16
SampleTransSelector的默认zIndex升级为99999
SampleTransSelector支持自定义style属性
1.2.15
选择器遮罩zIndex改为10000
选择器模态框zIndex改为10001
1.2.14
修正13版本深拷贝导致的PromiseBuilder加载问题
升级选择器嵌入在弹出框时的遮罩不全问题
1.2.13
对传入的数据进行深度拷贝,不影响外部数据的使用。
分组展示(group)
全列展示(all)
Index
Usage
安装
yarn add "react-trans-selector"
基本示例
import React, { PureComponent } from "react"
import {SampleTransSelector} from "react-trans-selector"
export default class Demo extends PureComponent{
constructor(){
super()
this.state = {
visible: false
}
let that = this;
setTimeout(()=>{
that.setState({
visible: true
})
}, 1000)
}
handleOk = (value)=>{
alert(JSON.stringify(value))
this.setState({
visible: false
})
}
handleCancel=()=>{
this.setState({
visible: false
})
}
render(){
return <SampleTransSelector visible={this.state.visible}
dataSource={dataSource} checkedItems={checkedItems}
options={{title:"定制标题", maxChecked:1, mode:"group", showSearch:true}}
onOk={this.handleOk} onCancel={this.handleCancel}
></SampleTransSelector>
}
}
PromiseBuilder示例
import React, { PureComponent } from "react"
import {PromiseBuilder, SampleTransSelector} from "react-trans-selector"
let promiseBuilder = new PromiseBuilder(function(ctx){
return (resolve, reject)=>{
console.log("ctx",ctx)
setTimeout(function () {
//success
if(ctx && ctx.value){
let children = [];
switch(ctx.value){
case "000001":
children = group;
break;
case "000011":
children = subGroup1;
break;
case "000012":
children = subGroup2;
break;
case "000013":
children = subGroup3;
break;
case "010001":
children = leaf1;
break;
case "010002":
children = leaf2;
break;
default:;
}
console.log("resp:", {data:children})
resolve({data:children});
}else{
console.log("resp root:", {data:root})
resolve({data:[root]});
}
//fail
}, 10);
}
})
...
render(){
return <SampleTransSelector visible={this.state.visible}
dataSource={promiseBuilder} checkedItems={checkedItems}
options={{title:"定制标题", maxChecked:15, mode:"group", showSearch:true}}
onOk={this.handleOk} onCancel={this.handleCancel}
></SampleTransSelector>
}
API
SampleTransSelector
对TransSelector的一个应用封装,包含居中弹出和遮罩特性。
组件参数
参数 | 说明 | 类型 | 默认值 | |
---|---|---|---|---|
dataSource | 数据源 | [] | PromiseBuilder | - |
checkedItems | 已选择数据项 | [] | - | |
onOk | 确认按钮回调 | (checked items)=>[] | - | |
onCancel | 取消按钮回调 | ()=>{} | - | |
options | 可选项 | {} | - | |
options.maxChecked | 最大可选择数 | number | - | |
options.mode | all:全列展示|group:分组展示 | string | - |
dataSource 数据格式
基本数据格式
{
title:"标题1(根目录)",
value:"001",
[
{
title: "标题2",
value: "002",
children: [
{ title: "选项1", value: "00001", nodeType: 0 },
{ title: "选项2", value: "00002", nodeType: 0 },
{ title: "选项3", value: "00003", nodeType: 0 }
]
},
{ title: "标题3", value: "003", children:[] }
]
}
promiseBuilder数据格式
{title:"标题1(根目录)", vlaue:"001"}
=>
[
{title: "标题2", value: "002"},
{title: "标题3", value: "003"}
]
{title: "标题2", value: "002"}
=>
[
{ title: "选项1", value: "00001", nodeType: 0 },
{ title: "选项2", value: "00002", nodeType: 0 },
{ title: "选项3", value: "00003", nodeType: 0 }
]
数据说明
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 节点标题 | string | - |
value | 节点值 | string|number | - |
children | 子节点集 | [] | - |
nodeType | 节点类型 | 0:叶子节点,1:非叶子节点(可不设置) | - |
叶子节点(最终选项)必须带上 nodeType 属性,且值置为 0。
PromiseBuilder
Promise构造器。使用时通过 PromiseBuilder 定义编写数据获取逻辑,组件将通过 Promise.then 进行数据对接。
说明
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
ctx | 当前节点数据对象 | obj | - |
resolve | 数据获取成功回调,参数由组件内部定义 | - | - |
reject | 数据获取失败回调,参数由组件内部定义 | - | - |
其他说明:
all模式不支持 PromiseBuilder。
PromiseBuilder 获取组数据最多只会发起一次,获取的数据将放到children属性上,如果初始时已有children属性且有值(包含空数组[]),将不会发起promise请求。
Compatibility
License
Licensed under the MIT License
0.0.1
2 years ago