Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from "react";
- import ReactDOM from "react-dom";
- import "antd/dist/antd.css";
- import "./index.css";
- import { Transfer, Table, Tag } from "antd";
- function difference(listOne, listTwo) {
- const set1 = new Set(listOne);
- const set2 = new Set(listTwo);
- const difference = new Set([...set1].filter(x => !set2.has(x)));
- return Array.from(difference);
- }
- // Customize Table Transfer
- const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
- <Transfer {...restProps}>
- {({
- direction,
- filteredItems,
- onItemSelectAll,
- onItemSelect,
- selectedKeys: listSelectedKeys,
- disabled: listDisabled
- }) => {
- const columns = direction === "left" ? leftColumns : rightColumns;
- const rowSelection = {
- getCheckboxProps: item => ({ disabled: listDisabled || item.disabled }),
- onSelectAll(selected, selectedRows) {
- const treeSelectedKeys = selectedRows
- .filter(item => !item.disabled)
- .map(({ key }) => key);
- const diffKeys = selected
- ? difference(treeSelectedKeys, listSelectedKeys)
- : difference(listSelectedKeys, treeSelectedKeys);
- onItemSelectAll(diffKeys, selected);
- },
- onSelect({ key }, selected) {
- onItemSelect(key, selected);
- },
- selectedRowKeys: listSelectedKeys
- };
- return (
- <Table
- rowSelection={rowSelection}
- columns={columns}
- dataSource={filteredItems}
- size="small"
- // style={{ pointerEvents: listDisabled ? "none" : null }}
- // onRowClick={(a,b) => {
- // console.log(JSON.stringify(a), " -- ", b)
- // }}
- onRow={({ key, itemDisabled }) => ({
- onClick: () => {
- console.log(key, " key");
- console.log(itemDisabled, " itemDisabled");
- if (itemDisabled || listDisabled) return;
- onItemSelect(key, !listSelectedKeys.includes(key));
- }
- })}
- />
- );
- }}
- </Transfer>
- );
- const mockTags = ["eg", "gg", "e"];
- const mockData = [];
- for (let i = 0; i < 20; i++) {
- let data = {
- key: i.toString(),
- title: `eq${i + 1}`,
- description: `description of eq${i + 1}`,
- disabled: false, //i % 4 === 0,
- tag: mockTags[i % 3]
- };
- if (i % 2 === 0) {
- const children = [
- {
- key: i.toString() + "children",
- title: `children-${i + 1}`,
- description: `children description-${i + 1}`,
- disabled: false,
- tag: "tag"
- }
- ];
- data["children"] = children;
- }
- mockData.push(data);
- }
- const originTargetKeys = mockData
- .filter(item => +item.key % 3 > 1)
- .map(item => item.key);
- const leftTableColumns = [
- {
- dataIndex: "title",
- title: "Name"
- },
- {
- dataIndex: "tag",
- title: "Tag",
- render: tag => <Tag>{tag}</Tag>
- },
- {
- dataIndex: "description",
- title: "Description"
- }
- ];
- const rightTableColumns = [
- {
- dataIndex: "title",
- title: "Names"
- },
- {
- dataIndex: "tag",
- title: "Tag",
- render: tag => <Tag>{tag}</Tag>
- },
- {
- dataIndex: "description",
- title: "Description"
- }
- ];
- class App extends React.Component {
- state = {
- targetKeys: originTargetKeys
- };
- onChange = nextTargetKeys => {
- this.setState({ targetKeys: nextTargetKeys });
- };
- render() {
- const { targetKeys, disabled } = this.state;
- return (
- <div>
- <TableTransfer
- className="table-transfer"
- dataSource={mockData}
- titles={[
- <div>
- <input type="checkbox" checked />
- Equipment <input type="checkbox" checked /> Groups
- </div>,
- <div>
- <input type="checkbox" checked />
- Equipment <input type="checkbox" checked /> Groups
- </div>
- ]}
- targetKeys={targetKeys}
- disabled={disabled}
- showSearch={true}
- onChange={this.onChange}
- filterOption={(inputValue, item) =>
- item.title.indexOf(inputValue) !== -1 ||
- item.tag.indexOf(inputValue) !== -1
- }
- leftColumns={leftTableColumns}
- rightColumns={rightTableColumns}
- locale={{
- itemUnit: "Equipment",
- itemsUnit: "Equipments",
- notFoundContent: "The list is empty",
- searchPlaceholder: "Search here"
- }}
- />
- </div>
- );
- }
- }
- ReactDOM.render(<App />, document.getElementById("container"));
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement