import 'antd/dist/antd.less'; import { storiesOf } from '@storybook/react'; import React from 'react'; import { Transfer } from 'antd'; class App extends React.Component { state = { mockData: [], targetKeys: [], }; componentDidMount() { this.getMock(); } getMock = () => { const targetKeys = []; const mockData = []; for (let i = 0; i < 20; i++) { const data = { key: i.toString(), title: `content${i + 1}`, description: `description of content${i + 1}`, chosen: Math.random() * 2 > 1, }; if (data.chosen) { targetKeys.push(data.key); } mockData.push(data); } this.setState({ mockData, targetKeys }); }; filterOption = (inputValue, option) => option.description.indexOf(inputValue) > -1; handleChange = targetKeys => { this.setState({ targetKeys }); }; handleSearch = (dir, value) => { console.log('search:', dir, value); }; render() { return ( <Transfer dataSource={this.state.mockData} showSearch filterOption={this.filterOption} targetKeys={this.state.targetKeys} onChange={this.handleChange} onSearch={this.handleSearch} render={item => item.title} /> ); } } storiesOf('antd/transfer', module).add('search', () => <App />, { docs: { page: () => (<><h1 id="enus">en-US</h1> <p>Transfer with a search box.</p></>) } });