uxcore-transfer v0.4.4

uxcore-transfer

TL;DR

transfer ui component for react

setup develop environment

$ git clone https://github.com/uxcore/uxcore-transfer
$ cd uxcore-transfer
$ npm install
$ npm run dev

Usage

let Transfer = require("uxcore-transfer");
let mockData = [];
let len = Math.random() * 10 + 40;
for (let i = 0; i < len; i++) {
    mockData.push({
        name: '内容' + (i + 1),
        value: (i + 1),
        description: '内容' + (i + 1) + '的描述',
        chosen: Math.random() * 2 > 1,
        keywords: ['neirong' + (i + 1)], // used in search & location
        disabled: i > 15
    });
}

class TransferDemo extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            disable: false
        }
    }

    _handleChange(data) {
        console.log(data);
    }

    handleClick() {
        this.refs.transfer.selectItems([2, 3]);
    }

    handleClick2() {
        this.setState({
            disable: !this.state.disable
        })
    }

    render() {
        var me = this;
        return (
            <div>
                <Transfer showSearch={true} disabled={me.state.disable} ref="transfer" data={mockData} onChange={me._handleChange.bind(me)}/>
                <Button onClick={me.handleClick.bind(me)}>手动更改被选中的项</Button>
                <Button onClick={me.handleClick2.bind(me)}>更改 mode</Button>
            </div>
        );
    }
}

demo

见 http://uxcore.github.io/uxcore/components/transfer/

API

• selectItems(arr): 使对应 value 的变成高亮状态 (selected)。 参数： * arr Array 一个由 value 组成的数组。
• reset(): 使 Transfer 回到与 data 对应的状态。

Props