Merge pull request #56 from kne-union/linzp

修改样式问题

Author: zhipenglin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kne/info-page",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "一般用在复杂的详情展示页面，InfoPage提供了一个标准的展示信息的格式",
   "syntax": {
     "esmodules": true

src/TableView/Header.js

@@ -29,7 +29,8 @@ const Header = p => {
           <span className={classnames(style['col-content'], 'info-page-table-col-content')}>
             {rowSelection.allowSelectedAll ? (
               (() => {
-                const checkedAll = rowSelection.isSelectedAll || dataSource.every(item => rowSelection.selectedRowKeys && rowSelection.selectedRowKeys.indexOf(get(item, typeof rowKey === 'function' ? rowKey(item) : rowKey)) > -1);
+                const checkedAll =
+                  rowSelection.isSelectedAll || (dataSource && dataSource.every(item => rowSelection.selectedRowKeys && rowSelection.selectedRowKeys.indexOf(get(item, typeof rowKey === 'function' ? rowKey(item) : rowKey)) > -1));
                 return (
                   <Checkbox
                     checked={checkedAll}
@@ -41,7 +42,9 @@ const Header = p => {
                       } else {
                         typeof rowSelection.onIsSelectAllChange === 'function'
                           ? rowSelection.onIsSelectAllChange(true)
-                          : rowSelection.onChange(
+                          : dataSource &&
+                            dataSource.length > 0 &&
+                            rowSelection.onChange(
                               dataSource.map(item => {
                                 return get(item, typeof rowKey === 'function' ? rowKey(item) : rowKey);
                               })

src/TableView/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import Header from './Header';
 import { Checkbox, Col, Empty, Row } from 'antd';
 import { CheckOutlined } from '@ant-design/icons';
@@ -22,7 +22,7 @@ const TableView = p => {
     p
   );
   const { className, dataSource, columns, rowKey, rowSelection, valueIsEmpty, emptyIsPlaceholder, placeholder, empty, onRowSelect, render, ...others } = props;
-
+  const dataSourceMapRef = useRef(new Map());
   const defaultSpan = useMemo(() => {
     const assignedSpan = columns.reduce((a, b) => {
       return a + (b.span || 0);
@@ -35,9 +35,11 @@ const TableView = p => {
   const header = <Header {...props} defaultSpan={defaultSpan} colsSize={colsSize} setColsSize={setColsSize} />;
 
   const renderBody = dataSource => {
+    const getId = item => get(item, typeof rowKey === 'function' ? rowKey(item) : rowKey);
     return dataSource && dataSource.length > 0 ? (
       dataSource.map(item => {
-        const id = get(item, typeof rowKey === 'function' ? rowKey(item) : rowKey);
+        const id = getId(item);
+        dataSourceMapRef.current.set(id, item);
         const isChecked = rowSelection?.selectedRowKeys && rowSelection.selectedRowKeys.indexOf(id) > -1;
         return (
           <Row
@@ -64,16 +66,23 @@ const TableView = p => {
               if (rowSelection.type === 'checkbox') {
                 const selectedRowKeys = (rowSelection.selectedRowKeys || []).slice(0);
                 isChecked ? selectedRowKeys.splice(rowSelection.selectedRowKeys.indexOf(id), 1) : selectedRowKeys.push(id);
-                rowSelection.onChange(selectedRowKeys);
+                rowSelection.onChange(
+                  selectedRowKeys,
+                  selectedRowKeys.map(id => dataSourceMapRef.current.get(id))
+                );
               } else {
-                rowSelection.onChange(rowSelection.selectedRowKeys.length && rowSelection.selectedRowKeys[0] === id ? [] : [id]);
+                const selectedRowKeys = rowSelection.selectedRowKeys.length && rowSelection.selectedRowKeys[0] === id ? [] : [id];
+                rowSelection.onChange(
+                  selectedRowKeys,
+                  selectedRowKeys.map(id => dataSourceMapRef.current.get(id))
+                );
               }
             }}
           >
             {rowSelection && rowSelection.type === 'checkbox' && (
               <Col className={classnames(style['col'], 'info-page-table-col')}>
                 <span className={classnames(style['col-content'], 'info-page-table-col-content')}>
-                  <Checkbox disabled={item.disabled || rowSelection.isSelectedAll} checked={rowSelection.isSelectedAll || isChecked} />
+                  <Checkbox disabled={item.disabled || rowSelection.isSelectedAll} checked={(rowSelection.isSelectedAll && !item.disabled) || isChecked} />
                 </span>
               </Col>
             )}
@@ -177,5 +186,5 @@ const TableView = p => {
     </div>
   );
 };
-
+TableView.Header = Header;
 export default TableView;