uxcoreuxcore-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 devUsage
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 组成的数组。
- arr
- reset(): 使 Transfer 回到与 data 对应的状态。
Props
| 参数 | 类型 | 必需 | 默认值 | 说明 |
|---|---|---|---|---|
| height | number | optional | 220 | transfer高度 |
| data | array | required | - | 用于初始化 transfer 的数据，格式见 Usage，其中 name 和 value 字段必有 |
| disabled | boolean | optional | false | 是否启用 disable 模式 |
| showSearch | boolean | optional | true | 是否显示搜索条 |
| searchPlaceholder | string | optional | 定位输入内容 | |
| leftTitle | string | optional | '未选中的' | 左侧标题 |
| rightTitle | string | optional | '已选中的' | 右侧标题 |
| onChange | func | optional | noop | 选中情况变化时触发，返回选中和未选中的项 |
| isAsc | boolean | optional | false | 是否让新穿梭的值排在尾部 |