Transfer 穿梭框

双栏穿梭选择框。

何时使用

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

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

代码演示

基本用法

最基本的用法,展示了 dataSourcetargetKeys、每行的渲染函数 render 以及回调函数 onChange onSelectChange onScroll 的用法。

Transfer穿梭框 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Transfer } from 'choerodon-ui';
  4. const mockData = [];
  5. for (let i = 0; i < 20; i++) {
  6. mockData.push({
  7. key: i.toString(),
  8. title: `content${i + 1}`,
  9. description: `description of content${i + 1}`,
  10. disabled: i % 3 < 1,
  11. });
  12. }
  13. const targetKeys = mockData
  14. .filter(item => +item.key % 3 > 1)
  15. .map(item => item.key);
  16. class App extends React.Component {
  17. state = {
  18. targetKeys,
  19. selectedKeys: [],
  20. }
  21. handleChange = (nextTargetKeys, direction, moveKeys) => {
  22. this.setState({ targetKeys: nextTargetKeys });
  23. console.log('targetKeys: ', targetKeys);
  24. console.log('direction: ', direction);
  25. console.log('moveKeys: ', moveKeys);
  26. }
  27. handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
  28. this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
  29. console.log('sourceSelectedKeys: ', sourceSelectedKeys);
  30. console.log('targetSelectedKeys: ', targetSelectedKeys);

带搜索框

带搜索框的穿梭框,可以自定义搜索函数。

Transfer穿梭框 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Transfer } from 'choerodon-ui';
  4. class App extends React.Component {
  5. state = {
  6. mockData: [],
  7. targetKeys: [],
  8. }
  9. componentDidMount() {
  10. this.getMock();
  11. }
  12. getMock = () => {
  13. const targetKeys = [];
  14. const mockData = [];
  15. for (let i = 0; i < 20; i++) {
  16. const data = {
  17. key: i.toString(),
  18. title: `content${i + 1}`,
  19. description: `description of content${i + 1}`,
  20. chosen: Math.random() * 2 > 1,
  21. };
  22. if (data.chosen) {
  23. targetKeys.push(data.key);
  24. }
  25. mockData.push(data);
  26. }
  27. this.setState({ mockData, targetKeys });
  28. }
  29. filterOption = (inputValue, option) => {
  30. return option.description.indexOf(inputValue) > -1;
  31. }
  32. handleChange = (targetKeys) => {

高级用法

穿梭框高级用法,可配置操作文案,可定制宽高,可对底部进行自定义渲染。

Transfer穿梭框 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Transfer, Button } from 'choerodon-ui';
  4. class App extends React.Component {
  5. state = {
  6. mockData: [],
  7. targetKeys: [],
  8. }
  9. componentDidMount() {
  10. this.getMock();
  11. }
  12. getMock = () => {
  13. const targetKeys = [];
  14. const mockData = [];
  15. for (let i = 0; i < 20; i++) {
  16. const data = {
  17. key: i.toString(),
  18. title: `content${i + 1}`,
  19. description: `description of content${i + 1}`,
  20. chosen: Math.random() * 2 > 1,
  21. };
  22. if (data.chosen) {
  23. targetKeys.push(data.key);
  24. }
  25. mockData.push(data);
  26. }
  27. this.setState({ mockData, targetKeys });
  28. }
  29. handleChange = (targetKeys) => {
  30. this.setState({ targetKeys });
  31. }
  32. renderFooter = () => {
  33. return (
  34. <Button
  35. size="small"
  36. style={{ float: 'right', margin: 5 }}
  37. onClick={this.getMock}

自定义渲染行数据

自定义渲染每一个 Transfer Item,可用于渲染复杂数据。

Transfer穿梭框 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Transfer } from 'choerodon-ui';
  4. class App extends React.Component {
  5. state = {
  6. mockData: [],
  7. targetKeys: [],
  8. }
  9. componentDidMount() {
  10. this.getMock();
  11. }
  12. getMock = () => {
  13. const targetKeys = [];
  14. const mockData = [];
  15. for (let i = 0; i < 20; i++) {
  16. const data = {
  17. key: i.toString(),
  18. title: `content${i + 1}`,
  19. description: `description of content${i + 1}`,
  20. chosen: Math.random() * 2 > 1,
  21. };
  22. if (data.chosen) {
  23. targetKeys.push(data.key);
  24. }
  25. mockData.push(data);
  26. }
  27. this.setState({ mockData, targetKeys });
  28. }
  29. handleChange = (targetKeys, direction, moveKeys) => {
  30. console.log(targetKeys, direction, moveKeys);
  31. this.setState({ targetKeys });
  32. }
  33. renderItem = (item) => {
  34. const customLabel = (
  35. <span className="custom-item">
  36. {item.title} - {item.description}
  37. </span>

大数据性能测试

2000 条数据。

Transfer穿梭框 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Transfer } from 'choerodon-ui';
  4. class App extends React.Component {
  5. state = {
  6. mockData: [],
  7. targetKeys: [],
  8. }
  9. componentDidMount() {
  10. this.getMock();
  11. }
  12. getMock = () => {
  13. const targetKeys = [];
  14. const mockData = [];
  15. for (let i = 0; i < 2000; i++) {
  16. const data = {
  17. key: i.toString(),
  18. title: `content${i + 1}`,
  19. description: `description of content${i + 1}`,
  20. chosen: Math.random() * 2 > 1,
  21. };
  22. if (data.chosen) {
  23. targetKeys.push(data.key);
  24. }
  25. mockData.push(data);
  26. }
  27. this.setState({ mockData, targetKeys });
  28. }
  29. handleChange = (targetKeys, direction, moveKeys) => {
  30. console.log(targetKeys, direction, moveKeys);
  31. this.setState({ targetKeys });
  32. }

API

参数说明类型默认值
className自定义类string
dataSource数据源,其中的数据将会被渲染到左边一栏中,targetKeys 中指定的除外。TransferItem[][]
filterOption接收 inputValue option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 false(inputValue, option): boolean
footer底部渲染函数(props): ReactNode
lazyTransfer 使用了 react-lazy-load 优化性能,这里可以设置相关参数。设为 false 可以关闭懒加载。object|boolean{ height: 32, offset: 32 }
listStyle两个穿梭框的自定义样式object
notFoundContent当列表为空时显示的内容string|ReactNode‘列表为空’
operations操作文案集合,顺序从下至上string[][‘>’, ‘<’]
render每行数据渲染函数,该函数的入参为 dataSource 中的项,返回值为 ReactElement。或者返回一个普通对象,其中 label 字段为 ReactElement,value 字段为 titleFunction(record)
searchPlaceholder搜索框的默认值string‘请输入搜索内容’
selectedKeys设置哪些项应该被选中string[][]
showSearch是否显示搜索框booleanfalse
targetKeys显示在右侧框数据的key集合string[][]
titles标题集合,顺序从左至右string[][‘’, ‘’]
onChange选项在两栏之间转移时的回调函数(targetKeys, direction, moveKeys): void
onScroll选项列表滚动时的回调函数(direction, event): void
onSearchChange搜索框内容时改变时的回调函数(direction: ‘left’|’right’, event: Event): void-
onSelectChange选中项发生改变时的回调函数(sourceSelectedKeys, targetSelectedKeys): void

注意

按照 React 的规范,所有的组件数组必须绑定 key。在 Transfer 中,dataSource里的数据值需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。

如果你的数据没有这个属性,务必使用 rowKey 来指定数据列的主键。

  1. // 比如你的数据主键是 uid
  2. return <Transfer rowKey={record => record.uid} />;