chore(component/table): add tree Table selected demo

"fix aliyun#65"
WebEngineerLi · Apr 24, 2020 · e5ece03 · e5ece03
1 parent 78774c2
commit e5ece03
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 39 deletions.
diff --git a/packages/component/src/components/table/demo/demo20.js b/packages/component/src/components/table/demo/demo20.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Table } from '@alicloud/console-components'
 import styled from 'styled-components'
 
@@ -68,20 +68,6 @@ const data = [
   },
 ]
 
-const tableMixTree = (
-  <Table
-    dataSource={data}
-    primaryKey="key"
-    isTree
-    rowSelection={{ onChange: () => {} }}
-  >
-    <Table.Column title="Key" dataIndex="key" />
-    <Table.Column title="Name" dataIndex="name" />
-    <Table.Column title="Age" dataIndex="age" />
-    <Table.Column title="Address" dataIndex="address" />
-  </Table>
-)
-
 const tableMixExpanded = (
   <Table
     dataSource={data}
@@ -96,22 +82,6 @@ const tableMixExpanded = (
   </Table>
 )
 
-const tableMixSelectionTreeLock = (
-  <div style={{ width: '500px' }}>
-    <Table
-      dataSource={data}
-      primaryKey="key"
-      rowSelection={{ onChange: () => {} }}
-      isTree
-    >
-      <Table.Column title="Key" dataIndex="key" width={100} />
-      <Table.Column title="Name" dataIndex="name" lock width={100} />
-      <Table.Column title="Age" dataIndex="age" width={200} lock="right" />
-      <Table.Column title="Address" dataIndex="address" width={200} />
-    </Table>
-  </div>
-)
-
 const tableMixLock = (
   <div style={{ width: '500px' }}>
     <Table
@@ -157,18 +127,10 @@ const tableMixTreeLock = (
 
 const Demo20 = () => (
   <SWrapper>
-    <div className="row">
-      <h4>tree & select</h4>
-      {tableMixTree}
-    </div>
     <div className="row">
       <h4>extra & select</h4>
       {tableMixExpanded}
     </div>
-    <div className="row">
-      <h4>tree & lock column & select</h4>
-      {tableMixSelectionTreeLock}
-    </div>
     <div className="row">
       <h4>extra & lock column & select</h4>
       {tableMixExpandedLock}

diff --git a/packages/component/src/components/table/demo/demo27.js b/packages/component/src/components/table/demo/demo27.js
@@ -0,0 +1,151 @@
+import React, { useState, useCallback } from 'react'
+import { Table } from '@alicloud/console-components'
+import styled from 'styled-components'
+
+const data = [
+  {
+    key: 1,
+    name: 'a',
+    age: 32,
+    address: 'aa',
+    children: [
+      {
+        key: 11,
+        name: 'b',
+        age: 33,
+        address: 'bb',
+      },
+      {
+        key: 12,
+        name: 'c',
+        age: 33,
+        address: 'cc',
+        children: [
+          {
+            key: 121,
+            name: 'd',
+            age: 33,
+            address: 'dd',
+          },
+        ],
+      },
+      {
+        key: 13,
+        name: 'e',
+        age: 33,
+        address: 'ee',
+        children: [
+          {
+            key: 131,
+            name: 'f',
+            age: 33,
+            address: 'ff',
+            children: [
+              {
+                key: 1311,
+                name: 'g',
+                age: 33,
+                address: 'gg',
+              },
+              {
+                key: 1312,
+                name: 'h',
+                age: 33,
+                address: 'hh',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    key: 2,
+    name: 'i',
+    age: 32,
+    address: 'ii',
+    children: [],
+  },
+]
+
+const generateAllKeys = (dataSource) => {
+  let allKeys = []
+  dataSource.forEach((item) => {
+    allKeys.push(item.key)
+    if (item.children && Array.isArray(item.children)) {
+      allKeys = allKeys.concat(generateAllKeys(item.children))
+    }
+  })
+  return allKeys
+}
+
+const TableMixTree = () => {
+  const [selectedRowKeys, setSelectedRowKeys] = useState([])
+
+  const handleSelectAll = (selected, records) => {
+    if (selected) {
+      const allKeys = generateAllKeys(records)
+      setSelectedRowKeys(allKeys)
+    } else {
+      const keys = records.map((item) => item.key)
+      setSelectedRowKeys(keys)
+    }
+  }
+
+  const handleSelect = useCallback(
+    (selected, record) => {
+      if (selected) {
+        setSelectedRowKeys([record.key, ...selectedRowKeys])
+      } else {
+        // const selectedkeys = [...selectedRowKeys]
+        // const index = selectedkeys.indexOf(record.key)
+        // selectedkeys.splice(index, 1)
+        const selectedKeys = selectedRowKeys.filter(
+          (item) => item !== record.key
+        )
+        setSelectedRowKeys(selectedKeys)
+      }
+    },
+    [selectedRowKeys]
+  )
+
+  return (
+    <Table
+      dataSource={data}
+      primaryKey="key"
+      isTree
+      rowSelection={{
+        onSelectAll: handleSelectAll,
+        onSelect: handleSelect,
+        selectedRowKeys,
+      }}
+    >
+      <Table.Column title="Key" dataIndex="key" />
+      <Table.Column title="Name" dataIndex="name" />
+      <Table.Column title="Age" dataIndex="age" />
+      <Table.Column title="Address" dataIndex="address" />
+    </Table>
+  )
+}
+
+const Demo27 = () => (
+  <SWrapper>
+    <div className="row">
+      <h4>tree & select</h4>
+      <TableMixTree />
+    </div>
+  </SWrapper>
+)
+
+export default Demo27
+
+export const demoMeta = {
+  zhName: `树型Table`,
+  zhDesc: `演示了树型Table全选功能（包括children）`,
+}
+
+const SWrapper = styled.div`
+  .row {
+    margin-top: 10px;
+  }
+`
diff --git a/packages/component/src/components/table/demo/index.js b/packages/component/src/components/table/demo/index.js
@@ -25,6 +25,7 @@ import Demo23 from './demo23'
 import Demo24 from './demo24'
 import Demo25 from './demo25'
 import Demo26 from './demo26'
+import Demo27 from './demo27'
 import './index.less'
 
 const TableDemo = () => (
@@ -69,6 +70,8 @@ const TableDemo = () => (
     <Demo19 />
     <h2>混合模式</h2>
     <Demo20 />
+    <h2>树型Table全选子节点</h2>
+    <Demo27 />
     <h2>数据集为空</h2>
     <Demo21 />
     <h2>自定义Loading组件</h2>