Transfer穿梭框

Transfer穿梭框

表单控件。

何时使用

平铺选项便于用户选择操作，作用同Select.multiple。

代码演示

基本使用。

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 />,
  mountNode
);

绑定数据源

绑定数据源。

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: 'Huazhen', value: 'huazhen' },
  { text: 'Lucy', value: 'lucy' },
  { text: 'Niu', value: 'jiaqin' },
  { text: 'Shao', value: 'shao' },
];
const data = [{
  'first-name': 'huazhen',
  'last-name': 'wu',
}];
class App extends React.Component {
  optionDs = new DataSet({
    data: optionData,
    selection: 'single',
  });
  ds = new DataSet({
    data,
    fields: [
      { name: 'first-name', type: 'string', label: '名', textField: 'text', valueField: 'value', options: this.optionDs },
      { name: 'last-name', type: 'string', label: '姓' },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
  render() {
    return (
      <div>
        <Transfer dataSet={this.ds} name="first-name" />
        <Transfer dataSet={this.ds} name="last-name">
          <Option value="jack">Jack</Option>
          <Option value="lucy">Lucy</Option>
          <Option value="wu">Wu</Option>
        </Transfer>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

可搜索

可搜索。

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': 'huazhen',
}];
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>
        <Option value="huazhen">Huazhen</Option>
      </Transfer>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

受控穿梭框

受控穿梭框。

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 />,
  mountNode
);

值列表代码

值列表代码。

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 />,
  mountNode
);

单选

单选。

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>,
  mountNode
);