Transfer 穿梭框

双栏穿梭选择框。

何时使用

• 需要在多个可选项中进行多选时。
• 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。

穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。

选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。其中，左边一栏为 source，右边一栏为 target，API 的设计也反映了这两个概念。

代码演示

基本使用

基本使用。

import React from 'react';
import ReactDOM from 'react-dom';
import { Transfer, Switch } from 'choerodon-ui/pro';
​
function handleChange(value, oldValue) {
  console.log('[basic new]', value, '[basic old]', oldValue);
}
​
const { Option } = Transfer;
​
class App extends React.Component {
  state = { disabled: false };
​
  handleDisableChange = value => this.setState({ disabled: value });
​
  render() {
    return (
      <div>
        <Switch onChange={this.handleDisableChange}>disabled</Switch>
        <br />
        <Transfer onChange={handleChange} disabled={this.state.disabled} titles={['Source', 'Target']}>
          <Option value="jack">Jack</Option>
          <Option value="lucy">Lucy</Option>
          <Option value="wu">Wu</Option>
        </Transfer>
      </div>
    );
  }
}
​
ReactDOM.render(
  <App />,
  document.getElementById('container')
);
​

受控穿梭框

受控穿梭框。

import React from 'react';
import ReactDOM from 'react-dom';
import { Transfer } from 'choerodon-ui/pro';
​
const { Option } = Transfer;
​
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'wu',
    };
  }
​
  handleChange = (value, oldValue) => {
    console.log('[constrolled]', 'newValue', value, '[oldValue]', oldValue);
    this.setState({
      value,
    });
  }
​
  render() {
    return (
      <Transfer value={this.state.value} onChange={this.handleChange}>
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="wu">Wu</Option>
      </Transfer>
    );
  }
}
​
ReactDOM.render(
  <App />,
  document.getElementById('container')
);
​

绑定数据源

绑定数据源。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Transfer, Row, Col } from 'choerodon-ui/pro';
​
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log(
    '[dataset newValue]',
    value,
    '[oldValue]',
    oldValue,
    '[record.get(name)]',
    record.get(name),
  );
}
​
const { Option } = Transfer;
​
const optionData = [
  { text: 'Jack', value: 'jack' },
  { text: 'Zhangsan', value: 'zhangsan' },
  { text: 'Lucy', value: 'lucy' },
  { text: 'Niu', value: 'jiaqin' },
  { text: 'Shao', value: 'shao' },
];
​
const data = [
  {
    'first-name': 'zhangsan',
    'last-name': 'wu',
  },
];
​
class App extends React.Component {
  optionDs = new DataSet({
    data: optionData,
    selection: 'single',
  });

值列表代码

值列表代码。

import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Transfer, Button, Row, Col } from 'choerodon-ui/pro';
​
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log('[dataset newValue]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
}
​
class App extends React.Component {
  flag = false;
​
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'sex', type: 'string', lookupCode: 'HR.EMPLOYEE_GENDER', defaultValue: 'F' },
      { name: 'sex2', type: 'string', lookupUrl: '/common/code/HR.EMPLOYEE_GENDER/' },
      { name: 'lov', type: 'string', lovCode: 'LOV_CODE', defaultValue: 'SYS.PROFILE_LEVEL_ID' },
      { name: 'lov2', type: 'string', lovCode: 'LOV_CODE', defaultValue: ['SYS.PROFILE_LEVEL_ID', 'SYS.RESOURCE_TYPE'], multiple: true },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
​
  changeLookupCode = () => {
    this.flag = !this.flag;
    this.ds.getField('sex').set('lookupCode', this.flag ? 'SYS.USER_STATUS' : 'HR.EMPLOYEE_GENDER');
  };
​
  render() {
    return (
      <Row gutter={10}>
        <Col span={18}>
          <Transfer dataSet={this.ds} name="sex" placeholder="请选择" />
        </Col>
        <Col span={6}>
          <Button onClick={this.changeLookupCode}>修改lookupCode</Button>
        </Col>
        <Col span={24}>
          <Transfer dataSet={this.ds} name="sex2" placeholder="请选择" />
        </Col>
        <Col span={24}>
          <Transfer dataSet={this.ds} name="lov" placeholder="请选择" />
        </Col>
        <Col span={24}>
          <Transfer dataSet={this.ds} name="lov2" placeholder="请选择" />
        </Col>
      </Row>
    );
  }
}
​
ReactDOM.render(
  <App />,
  document.getElementById('container')
);
​

可搜索

可搜索。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Transfer } from 'choerodon-ui/pro';
​
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log(
    '[searchable]',
    value,
    '[oldValue]',
    oldValue,
    `[record.get('${name}')]`,
    record.get(name),
  );
}
​
const { Option } = Transfer;
​
const data = [
  {
    'last-name': 'zhangsan',
  },
];
​
class App extends React.Component {
  ds = new DataSet({
    data,
    fields: [{ name: 'last-name', type: 'string', label: '姓' }],
    events: {
      update: handleDataSetChange,
    },
  });
​
  render() {
    return (
      <Transfer dataSet={this.ds} name="last-name" searchable>
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>

单选

单选。

import React from 'react';
import ReactDOM from 'react-dom';
import { Transfer, Switch } from 'choerodon-ui/pro';
​
function handleChange(value, oldValue) {
  console.log('[basic new]', value, '[basic old]', oldValue);
}
​
const { Option } = Transfer;
​
ReactDOM.render(
  <Transfer multiple={false} onChange={handleChange}>
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="wu">Wu</Option>
  </Transfer>,
  document.getElementById('container')
);
​

API

Transfer

更多属性请参考 Select。

Transfer.OptGroup

Transfer.Option