Merge pull request #2558 from XiaoMi/feature/table(#2556)

feat(table): #2556
XiaoMi · Jul 27, 2023 · 0ad4a7a · 0ad4a7a
2 parents 0d0c43a + dbda0b1
commit 0ad4a7a
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 27 deletions.
diff --git a/.changeset/long-starfishes-relate.md b/.changeset/long-starfishes-relate.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Table feat: 增加树形结构排序
diff --git a/.changeset/orange-brooms-shave.md b/.changeset/orange-brooms-shave.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/tree-utils": minor
+---
+
+feat: 增加 flattedTreeSort 函数
diff --git a/.changeset/rude-moles-unite.md b/.changeset/rude-moles-unite.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/table": patch
+---
+
+feat: 增加树形结构排序
diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts
@@ -5,6 +5,7 @@ import {
   getLeafChildren,
   // getNodeAncestors,
   getNodeRootParent,
+  flattedTreeSort,
   // getNodeRootParent,
 } from '@hi-ui/tree-utils'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -15,6 +16,7 @@ import {
   TableRowEventData,
   TableRowSelection,
   FlattedTableColumnItemData,
+  FlattedTableRowData,
 } from './types'
 import { PaginationProps } from '@hi-ui/pagination'
 import { useColWidth } from './hooks/use-col-width'
@@ -526,17 +528,18 @@ export const useTable = ({
   //* *************** 根据排序列处理数据 ************** *//
 
   const showData = useMemo(() => {
-    let _data = transitionData.concat()
+    let _data: FlattedTableRowData[] = cloneTree(transitionData)
 
     if (activeSorterColumn) {
-      const sorter =
-        columns.filter((d) => d.dataKey === activeSorterColumn)[0] &&
-        columns.filter((d) => d.dataKey === activeSorterColumn)[0].sorter
+      const sorter = columns.filter((d) => d.dataKey === activeSorterColumn)[0]?.sorter
+
       if (sorter) {
-        _data =
-          activeSorterType === 'ascend'
-            ? [..._data].sort(sorter)
-            : [..._data].sort(sorter).reverse()
+        activeSorterType === 'ascend' ? _data.sort(sorter) : _data.sort(sorter).reverse()
+
+        // 平铺的树形结构排序
+        if (_data.some((d) => d.depth !== 0)) {
+          _data = flattedTreeSort(_data)
+        }
       }
     }
 

diff --git a/packages/ui/table/stories/table-tree.stories.tsx b/packages/ui/table/stories/table-tree.stories.tsx
@@ -10,51 +10,94 @@ export const TableTree = () => {
       <h1>TableTree for Table</h1>
       <div className="table-TableTree__wrap" style={{ minWidth: 660 }}>
         <Table
-          striped
+          // striped
           // fixedToColumn={'a'}
           // expandedRowKeys={[1]}
           // rowSelection={{}}
           // expandedRender={(row, index) => {
           //   return <div>12313</div>
           // }}
+          // maxHeight={'calc(100vh - 900px)'}
+          columns={[
+            {
+              title: 'A',
+              dataKey: 'a',
+              sorter(pre, next) {
+                return pre.raw.b - next.raw.b
+              },
+            },
+            { title: 'B', dataKey: 'b' },
+            { title: 'C', dataKey: 'c' },
+            { title: 'D', dataKey: 'd' },
+          ]}
           data={[
+            { a: 'a-4', b: '4', c: 'c-4', d: 'd-4', key: 4 },
+            {
+              a: 'a-3',
+              b: '3',
+              c: 'c-3',
+              d: 'd-3',
+              key: 3,
+              children: [
+                {
+                  a: 'a-3-2',
+                  b: '32',
+                  c: 'c-3-2',
+                  d: 'd-3-2',
+                  key: 32,
+                },
+                {
+                  a: 'a-3-1',
+                  b: '31',
+                  c: 'c-3-1',
+                  d: 'd-3-1',
+                  key: 31,
+                },
+              ],
+            },
             {
               a: 'a-1',
-              b: 'b-1',
+              b: '1',
               c: 'c-1',
               d: 'd-1',
               key: 1,
               children: [
+                { a: 'a-1-3', b: '13', c: 'c-1-3', d: 'd-1-3', key: 13 },
                 {
                   a: 'a-1-1',
-                  b: 'b-1-1',
+                  b: '11',
                   c: 'c-1-1',
                   d: 'd-1-1',
-                  key: '1-1',
+                  key: 11,
                   children: [
                     {
                       a: 'a-1-1-1',
-                      b: 'b-1-1-1',
+                      b: '111',
                       c: 'c-1-1-1',
-                      d:
-                        'd-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1',
-                      key: '1-1-1',
+                      d: 'd-1-1-1d-1-1-1d-1-1-1d-1-1-1',
+                      key: 111,
+                    },
+                    {
+                      a: 'a-1-1-3',
+                      b: '113',
+                      c: 'c-1-1-3',
+                      d: 'd-1-1-1d-1-1-1d-1-1-1d-1-1-3',
+                      key: 113,
+                    },
+                    {
+                      a: 'a-1-1-2',
+                      b: '112',
+                      c: 'c-1-1-2',
+                      d: 'd-1-1-1d-1-1-1d-1-1-1d-1-1-2',
+                      key: 112,
                     },
-                    { a: 'a-1-1-2', b: 'b-1-1-2', c: 'c-1-1-2', d: 'd-1-1-2', key: '1-1-2' },
                   ],
                 },
-                { a: 'a-1-2', b: 'b-1-2', c: 'c-1-2', d: 'd-1-2', key: '1-2' },
+                { a: 'a-1-2', b: '12', c: 'c-1-2', d: 'd-1-2', key: 12 },
               ],
             },
-            { a: 'a-2', b: 'b-2', c: 'c-2', d: 'd-2', key: 2 },
-            { a: 'a-3', b: 'b-3', c: 'c-3', d: 'd-3', key: 3 },
-            { a: 'a-4', b: 'b-4', c: 'c-4', d: 'd-4', key: 4 },
-          ]}
-          columns={[
-            { title: 'A', dataKey: 'a' },
-            { title: 'B', dataKey: 'b' },
-            { title: 'C', dataKey: 'c' },
-            { title: 'D', dataKey: 'd' },
+
+            { a: 'a-2', b: '2', c: 'c-2', d: 'd-2', key: 2 },
           ]}
         />
       </div>

diff --git a/packages/utils/tree-utils/src/index.ts b/packages/utils/tree-utils/src/index.ts
@@ -707,3 +707,52 @@ export const getTreeNodesWithChildren = <T extends BaseTreeNodeData>(tree: T[])
 
   return nodes
 }
+
+/**
+ * 对平铺的树结构按照树形结构进行排序
+ * 因为 children 字段可能参与了其他逻辑处理，为不影响其他逻辑，增加一个 showChildren 字段，用于存放需要显示的子节点，并且按照 showChildren 转换成树结构
+ * @param flattedNode
+ * @returns
+ */
+export const flattedTreeSort = <T extends BaseFlattedTreeNodeData<any> & { showChildren?: T[] }>(
+  flattedNode: T[]
+) => {
+  const len = flattedNode.length
+
+  for (let i = 0; i < len; i++) {
+    const item = flattedNode[i]
+    const { depth, parent } = item
+
+    if (depth !== 0) {
+      for (let j = 0; j < len; j++) {
+        if (parent?.id === flattedNode[j].id) {
+          if (!flattedNode[j].showChildren) {
+            flattedNode[j].showChildren = []
+          }
+
+          !flattedNode[j].showChildren?.some((d) => d.id === item.id) &&
+            flattedNode[j].showChildren?.push(item)
+
+          break
+        }
+      }
+    }
+  }
+
+  const parentNodes = flattedNode.filter((d) => d.depth === 0)
+  const flattedNodes: T[] = []
+
+  const flattenNodes = (nodes: T[]) => {
+    nodes.forEach((d) => {
+      flattedNodes.push(d)
+
+      if (d.showChildren) {
+        flattenNodes(d.showChildren)
+      }
+    })
+  }
+
+  flattenNodes(parentNodes)
+
+  return flattedNodes
+}