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
• API
• Compatibility
• License

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