Unable to integrate FixedSizeList (react-window) component with antd transfer component

Question

antd is great component library, however I am facing some challenges while integrating the react-window with Transfer component.

I am trying to render a huge list in the Transfer component and since the antd 3.x Transfer component lags as the items length increases so I thought of using the react-window component with the Transfer component.

In the link:- https://stackblitz.com/edit/react-ofcadv-gcds33?file=index.js

I am trying to integrate the react-window with the transfer component but unable to set up some of default behavior available in the antd transfer component. To view the default behavior of the antd component we can check by setting perfMode to false in the code base.

Some of the basic things like selectAll etc. doesn't work when using FixedSizeList component with the Transfer component.

Any help which will point me in the right direction is appreciated.

Steps to reproduce:-

1. Visit https://stackblitz.com/edit/react-ofcadv-gcds33?file=index.js
2. To enable virtualization goto line number 126 of index.js and set perfMode to true.
3. Select some elements and click on the right arrow.
4. selected elements shifts to the right bucket but doesn't get unchecked.

Answer 1

it seems like you are missing to pass selectedKeys.

Have a look at completely working solution below:

const { Transfer } = antd;
const ReactDragListView = window["react-drag-listview"];

const dataSource = [];
for (let i = 0; i < 20; i++) {
  dataSource.push({
    key: i.toString(),
    title: `Item ${i + 1}`
  });
}

const targetKeys = dataSource
  .filter(item => +item.key % 3 > 1)
  .map(item => item.key);

class TransferDemo extends React.Component {
  state = {
    targetKeys,
    selectedKeys: []
  };

  handleChange = nextTargetKeys => {
    this.setState({ targetKeys: nextTargetKeys });
  };

  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    this.setState({
      selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys]
    });
  };

  getDragProps = () => ({
    onDragEnd: (fromIndex, toIndex) => {
      const targetKeys = [...this.state.targetKeys];
      const item = targetKeys.splice(fromIndex, 1)[0];
      targetKeys.splice(toIndex, 0, item);

      this.handleChange(targetKeys);
    },
    nodeSelector: ".ant-transfer-list:last-child .ant-transfer-list-content > div"
  });

  render() {
    const { targetKeys, selectedKeys } = this.state;

    return (
      <div>
        <ReactDragListView {...this.getDragProps()}>
          <Transfer
            dataSource={dataSource}
            titles={["Source", "Target"]}
            targetKeys={targetKeys}
            selectedKeys={selectedKeys}
            onChange={this.handleChange}
            onSelectChange={this.handleSelectChange}
            render={item => item.title}
            listStyle={{ height: 300 }}
          />
        </ReactDragListView>
      </div>
    );
  }
}

ReactDOM.render(
  <TransferDemo />,
  document.getElementById('root')
);

Referring a link as well for you.

Good luck!