SHARE
TWEET

Untitled

a guest Jun 25th, 2019 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react";
  2. import ReactDOM from "react-dom";
  3. import "antd/dist/antd.css";
  4. import "./index.css";
  5. import { Transfer, Table, Tag } from "antd";
  6.  
  7. function difference(listOne, listTwo) {
  8.   const set1 = new Set(listOne);
  9.   const set2 = new Set(listTwo);
  10.   const difference = new Set([...set1].filter(x => !set2.has(x)));
  11.   return Array.from(difference);
  12. }
  13. // Customize Table Transfer
  14. const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
  15.   <Transfer {...restProps}>
  16.     {({
  17.       direction,
  18.       filteredItems,
  19.       onItemSelectAll,
  20.       onItemSelect,
  21.       selectedKeys: listSelectedKeys,
  22.       disabled: listDisabled
  23.     }) => {
  24.       const columns = direction === "left" ? leftColumns : rightColumns;
  25.  
  26.       const rowSelection = {
  27.         getCheckboxProps: item => ({ disabled: listDisabled || item.disabled }),
  28.         onSelectAll(selected, selectedRows) {
  29.           const treeSelectedKeys = selectedRows
  30.             .filter(item => !item.disabled)
  31.             .map(({ key }) => key);
  32.           const diffKeys = selected
  33.             ? difference(treeSelectedKeys, listSelectedKeys)
  34.             : difference(listSelectedKeys, treeSelectedKeys);
  35.           onItemSelectAll(diffKeys, selected);
  36.         },
  37.         onSelect({ key }, selected) {
  38.           onItemSelect(key, selected);
  39.         },
  40.         selectedRowKeys: listSelectedKeys
  41.       };
  42.  
  43.       return (
  44.         <Table
  45.           rowSelection={rowSelection}
  46.           columns={columns}
  47.           dataSource={filteredItems}
  48.           size="small"
  49.           // style={{ pointerEvents: listDisabled ? "none" : null }}
  50.           // onRowClick={(a,b) => {
  51.           //   console.log(JSON.stringify(a), " -- ", b)
  52.           // }}
  53.           onRow={({ key, itemDisabled }) => ({
  54.             onClick: () => {
  55.               console.log(key, "  key");
  56.               console.log(itemDisabled, " itemDisabled");
  57.               if (itemDisabled || listDisabled) return;
  58.               onItemSelect(key, !listSelectedKeys.includes(key));
  59.             }
  60.           })}
  61.         />
  62.       );
  63.     }}
  64.   </Transfer>
  65. );
  66.  
  67. const mockTags = ["eg", "gg", "e"];
  68.  
  69. const mockData = [];
  70. for (let i = 0; i < 20; i++) {
  71.   let data = {
  72.     key: i.toString(),
  73.     title: `eq${i + 1}`,
  74.     description: `description of eq${i + 1}`,
  75.     disabled: false, //i % 4 === 0,
  76.     tag: mockTags[i % 3]
  77.   };
  78.  
  79.   if (i % 2 === 0) {
  80.     const children = [
  81.       {
  82.         key: i.toString() + "children",
  83.         title: `children-${i + 1}`,
  84.         description: `children description-${i + 1}`,
  85.         disabled: false,
  86.         tag: "tag"
  87.       }
  88.     ];
  89.     data["children"] = children;
  90.   }
  91.   mockData.push(data);
  92. }
  93.  
  94. const originTargetKeys = mockData
  95.   .filter(item => +item.key % 3 > 1)
  96.   .map(item => item.key);
  97.  
  98. const leftTableColumns = [
  99.   {
  100.     dataIndex: "title",
  101.     title: "Name"
  102.   },
  103.   {
  104.     dataIndex: "tag",
  105.     title: "Tag",
  106.     render: tag => <Tag>{tag}</Tag>
  107.   },
  108.   {
  109.     dataIndex: "description",
  110.     title: "Description"
  111.   }
  112. ];
  113. const rightTableColumns = [
  114.   {
  115.     dataIndex: "title",
  116.     title: "Names"
  117.   },
  118.   {
  119.     dataIndex: "tag",
  120.     title: "Tag",
  121.     render: tag => <Tag>{tag}</Tag>
  122.   },
  123.   {
  124.     dataIndex: "description",
  125.     title: "Description"
  126.   }
  127. ];
  128.  
  129. class App extends React.Component {
  130.   state = {
  131.     targetKeys: originTargetKeys
  132.   };
  133.  
  134.   onChange = nextTargetKeys => {
  135.     this.setState({ targetKeys: nextTargetKeys });
  136.   };
  137.  
  138.   render() {
  139.     const { targetKeys, disabled } = this.state;
  140.     return (
  141.       <div>
  142.         <TableTransfer
  143.           className="table-transfer"
  144.           dataSource={mockData}
  145.           titles={[
  146.             <div>
  147.               <input type="checkbox" checked />
  148.               Equipment <input type="checkbox" checked /> Groups
  149.             </div>,
  150.             <div>
  151.               <input type="checkbox" checked />
  152.               Equipment <input type="checkbox" checked /> Groups
  153.             </div>
  154.           ]}
  155.           targetKeys={targetKeys}
  156.           disabled={disabled}
  157.           showSearch={true}
  158.           onChange={this.onChange}
  159.           filterOption={(inputValue, item) =>
  160.             item.title.indexOf(inputValue) !== -1 ||
  161.             item.tag.indexOf(inputValue) !== -1
  162.           }
  163.           leftColumns={leftTableColumns}
  164.           rightColumns={rightTableColumns}
  165.           locale={{
  166.             itemUnit: "Equipment",
  167.             itemsUnit: "Equipments",
  168.             notFoundContent: "The list is empty",
  169.             searchPlaceholder: "Search here"
  170.           }}
  171.         />
  172.       </div>
  173.     );
  174.   }
  175. }
  176.  
  177. ReactDOM.render(<App />, document.getElementById("container"));
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top