fix: fixed Table header selection status bug when all row keys are disabled and selected #2001 (#2014)

Co-authored-by: shijia.me <[email protected]>

cypress/e2e/table.spec.js

@@ -240,4 +240,10 @@ describe('table', () => {
         cy.get('[data-cy=section] .semi-table-expand-icon').eq(0).click({ force: true });
         cy.get('[data-cy=section] .semi-table-row-hidden').should('have.length', 7);
     });
+
+    it('test header selected status when all rows are disabled and selected ', () => {
+        cy.visit('http://localhost:6006/iframe.html?id=table--fixed-all-disabled-and-selected&viewMode=story');
+        cy.get('button').contains('点击全选').click();
+        cy.get('.semi-table-thead .semi-checkbox-checked').should('exist')
+    });
 });

packages/semi-foundation/table/foundation.ts

@@ -989,7 +989,8 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
             }
             return true;
         } else {
-            return false;
+            const isAllSelected = allKeys.every(rowKey => selectedRowKeysSet.has(rowKey));
+            return isAllSelected || false;
         }
     }
 

packages/semi-ui/table/_story/table.stories.jsx

@@ -106,7 +106,8 @@ export {
     FixedPagination,
     ShowHeader,
     KeepDOM,
-    SortIcon
+    SortIcon,
+    FixedAllDisabledAndSelected
 } from './v2';
 export { default as FixSelectAll325 } from './Demos/rowSelection';
 

packages/semi-ui/table/_story/v2/FixedAllDisabledAndSelected/index.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import { Table } from '@douyinfe/semi-ui';
+
+export default function App() {
+    const [selectAll, setSelectAll] = useState(false);
+    const [clueIds, setClueIds] = useState([]);
+    const columns = [
+        {
+            title: '排行',
+            dataIndex: 'index',
+        },
+        {
+            title: 'name',
+            dataIndex: 'name',
+        },
+    ];
+    const data = Array(20)
+        .fill(0)
+        .map((_, index) => {
+            return {
+                key: index,
+                name: `name ${index}`,
+                index: index,
+                clue_id: index,
+            };
+        });
+    const rowSelection = {
+        disabled: selectAll,
+        getCheckboxProps: record => {
+            if (selectAll) {
+                return {
+                    disabled: true,
+                };
+            }
+            return {};
+        },
+
+        onChange: (selectedRowKeys, selectedRows) => {
+            console.log(`select all onChange: ${selectedRowKeys}`, selectedRows);
+            console.log(selectedRowKeys);
+            setClueIds(selectedRows.map(row => row.clue_id));
+        },
+        selectedRowKeys: clueIds,
+    };
+    useEffect(() => {
+        if (selectAll) {
+            let newIds = data.map(row => row.clue_id);
+            console.log(newIds);
+            setClueIds(newIds);
+        }
+    }, [selectAll]);
+
+    return (
+        <div>
+            <button
+                onClick={() => {
+                    setSelectAll(true);
+                }}
+            >
+                点击全选
+            </button>
+            <Table columns={columns} dataSource={data} rowSelection={rowSelection} />
+        </div>
+    );
+}

packages/semi-ui/table/_story/v2/index.js

@@ -27,3 +27,4 @@ export { default as FixedPagination } from './FixedPagination';
 export { default as ShowHeader } from './ShowHeader';
 export { default as KeepDOM } from './KeepDOM';
 export { default as SortIcon } from './SortIcon';
+export { default as FixedAllDisabledAndSelected } from './FixedAllDisabledAndSelected';