How to also transfer the children across the compo

问题:

I am working with the antd's transfer component and antd's table component.

I have a table inside the transfer component, where each row could have multiple children. Currently, I am able to transfer parents across the transfer component. Is there a way, I could also transfer children across the transfer component? I currently could not understand how to do this.

I have also created a small working example on

The component in the sandbox looks as :

Currently, I am able to transfer the row with all the children across the component. For example, eq1 with children-1. I also want the capability to transfer only the children like children-3 of eq3 in the above image. How could I do this?

Here is the code using which I created the above view:

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"));