From 2c82bb10199ca28e240f5f6216691f6cdfb63c61 Mon Sep 17 00:00:00 2001
From: zhangwenshuai <zhangwenshuai@mttop.cn>
Date: Tue, 2 Jun 2020 17:45:59 +0800
Subject: [PATCH] add expand

---
 components/apolloTable/component/Cell.less  | 17 ++++++++++
 components/apolloTable/component/Cell.tsx   | 37 +++++++++++----------
 components/apolloTable/component/Table.less | 10 +++---
 components/apolloTable/component/Table.tsx  |  4 +--
 components/apolloTable/utils/utils.tsx      |  5 ++-
 5 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/components/apolloTable/component/Cell.less b/components/apolloTable/component/Cell.less
index 20e1af5..dda1c1c 100644
--- a/components/apolloTable/component/Cell.less
+++ b/components/apolloTable/component/Cell.less
@@ -21,6 +21,23 @@
     .checkbox {
         margin-right: 10px;
     }
+    .expand{
+        text-align: center;
+        width: 20px;
+        border-radius: 50%;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: @marginSm;
+        cursor: pointer;
+        &:hover{
+            background: #d0f0fd;
+        }
+        .expandIcon{
+            width: 16px;
+        }
+    }
     .content {
         flex: 1;
         overflow: hidden;
diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx
index 0042b7b..b5f6360 100644
--- a/components/apolloTable/component/Cell.tsx
+++ b/components/apolloTable/component/Cell.tsx
@@ -9,6 +9,7 @@ import FormHelper from '../utils/formHelper';
 import firstIcon from '../assets/first.png';
 import secondIcon from '../assets/second.png';
 import thirdIcon from '../assets/third.png';
+import expandIcon from '../assets/extend.png';
 import { transferAttr } from './base/_utils/transferAttr';
 
 const Cell = (props: CellProps) => {
@@ -36,6 +37,7 @@ const Cell = (props: CellProps) => {
         renderEditCell,
         cellRenderProps,
         readOnlyFlag,
+        showExpand,
     } = columnConfig;
     const [status, setStatus] = useState('detail');
 
@@ -111,23 +113,23 @@ const Cell = (props: CellProps) => {
         const { current = 1, pageSize = 20 } = paginationConfig || {};
 
         const getIndex = () => {
-            if (current === 1) {
-                let src = '';
-                switch (rowIndex) {
-                    case 0:
-                        src = firstIcon;
-                        break;
-                    case 1:
-                        src = secondIcon;
-                        break;
-                    case 2:
-                        src = thirdIcon;
-                        break;
-                    default:
-                        return rowIndex + 1;
-                }
-                return <img className={s.icon} alt="" src={src} />;
-            }
+            // if (current === 1) {
+            //     let src = '';
+            //     switch (rowIndex) {
+            //         case 0:
+            //             src = firstIcon;
+            //             break;
+            //         case 1:
+            //             src = secondIcon;
+            //             break;
+            //         case 2:
+            //             src = thirdIcon;
+            //             break;
+            //         default:
+            //             return rowIndex + 1;
+            //     }
+            //     return <img className={s.icon} alt="" src={src} />;
+            // }
             return (current - 1) * pageSize + rowIndex + 1;
         };
         const getCheckbox = () => {
@@ -160,6 +162,7 @@ const Cell = (props: CellProps) => {
             >
                 {rowSelection && columnIndex === 0 && <div className={s.checkbox}>{getCheckbox()}</div>}
                 {showIndex && columnIndex === 0 && <div className={s.num}>{getIndex()}</div>}
+                {showExpand && columnIndex === 0 && <div className={s.expand}><img onClick={showExpand.bind(null,{rowId:record.id})} className={s.expandIcon} alt="" src={expandIcon}/></div>}
                 {empty ? (
                     emptyPlaceholder || '-'
                 ) : (
diff --git a/components/apolloTable/component/Table.less b/components/apolloTable/component/Table.less
index d098167..18227d4 100644
--- a/components/apolloTable/component/Table.less
+++ b/components/apolloTable/component/Table.less
@@ -44,15 +44,15 @@
 .sideGrid {
     overflow: hidden !important;
     outline: none;
-    .bodyCell {
-        font-size: 20px;
-        color: @textGeneralColor;
-        font-weight: @weightRegular;
-    }
 }
 .centerGrid {
     outline: none;
 }
+.bodyCell {
+    font-size: 20px;
+    color: @textGeneralColor;
+    font-weight: @weightRegular;
+}
 
 .headerGrid {
     width: 100%;
diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx
index 2c716e2..1f3b724 100644
--- a/components/apolloTable/component/Table.tsx
+++ b/components/apolloTable/component/Table.tsx
@@ -278,8 +278,8 @@ export default class AirTable extends Component<TableProps, TableState> {
     ) => {
         const columnConfig = showColumns[columnIndex];
         const { cellClassName, cellStyle } = columnConfig;
-        const className = getMergeClassName(rowClassName, cellClassName, { columnIndex });
-        const mergedCellStyle = getMergeStyle(rowStyle, cellStyle, { columnIndex });
+        const className = getMergeClassName(rowClassName, cellClassName, { columnIndex, columnConfig });
+        const mergedCellStyle = getMergeStyle(rowStyle, cellStyle, { columnIndex, columnConfig });
         return this.renderBodyCell(
             { showColumns, showData, position },
             {
diff --git a/components/apolloTable/utils/utils.tsx b/components/apolloTable/utils/utils.tsx
index 4f27c31..a5d3c7d 100644
--- a/components/apolloTable/utils/utils.tsx
+++ b/components/apolloTable/utils/utils.tsx
@@ -93,7 +93,10 @@ export function getMergeClassName(
         mergeClassName = '';
     }
     if (typeof mergeClassName === 'function') {
-        className = `${className} ${mergeClassName(mergeData)}`;
+        const mergeClass = mergeClassName(mergeData);
+        if (mergeClass) {
+            className = `${className} ${mergeClass}`;
+        }
     } else {
         className = `${className} ${mergeClassName}`;
     }
-- 
2.21.0