From 5e44ff5490d889b1f9f4ed92b70a09d9bb3420ea Mon Sep 17 00:00:00 2001
From: zhangwenshuai <zhangwenshuai@mttop.cn>
Date: Wed, 3 Jun 2020 18:35:03 +0800
Subject: [PATCH] update apolloTableContentMenu

---
 components/apolloTable/component/Cell.less    |  9 ++++
 components/apolloTable/component/Cell.tsx     | 48 +++++++++++++++++--
 components/apolloTable/component/Table.tsx    |  2 +
 components/apolloTable/component/index.tsx    |  2 +
 .../apolloTable/component/interface.tsx       |  2 +
 5 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/components/apolloTable/component/Cell.less b/components/apolloTable/component/Cell.less
index dda1c1c..fba0e6b 100644
--- a/components/apolloTable/component/Cell.less
+++ b/components/apolloTable/component/Cell.less
@@ -52,3 +52,12 @@
     top: 0;
     left: 0;
 }
+.menuPop {
+    width: 110px;
+
+    :global(.ant-popover-inner-content) {
+        padding: @paddingSmX 0;
+        border-radius: @borderRadius;
+        background: #333333;
+    }
+}
diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx
index b5f6360..a3acf2a 100644
--- a/components/apolloTable/component/Cell.tsx
+++ b/components/apolloTable/component/Cell.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Checkbox, message } from 'antd';
+import { Checkbox, message, Popover } from 'antd';
 import _ from 'lodash';
 import { config } from './base/config';
 import { getEditComponent } from './base';
@@ -28,6 +28,7 @@ const Cell = (props: CellProps) => {
         cellEditable,
         rowSelection,
         columns,
+        contentMenu,
     } = props;
     const {
         columnType,
@@ -93,7 +94,8 @@ const Cell = (props: CellProps) => {
     };
 
     const selfRenderDetailCell = () => {
-        let empty = !cellData || cellData.length === 0 || (cellData.length === 1 && !cellData[0].text && !cellData[0].value);
+        let empty =
+            !cellData || cellData.length === 0 || (cellData.length === 1 && !cellData[0].text && !cellData[0].value);
         let detailConfig;
         if (typeof renderDetailCell === 'function') {
             detailConfig = renderDetailCell({ cellData, rowData: record, columnConfig });
@@ -152,7 +154,7 @@ const Cell = (props: CellProps) => {
             return <Checkbox checked={checked} onClick={onToggle} />;
         };
 
-        return (
+        const detail = (
             <div
                 className={s.detailCell}
                 onDoubleClick={() => {
@@ -162,7 +164,16 @@ 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>}
+                {showExpand && columnIndex === 0 && (
+                    <div className={s.expand}>
+                        <img
+                            onClick={showExpand.bind(null, { rowId: record.id })}
+                            className={s.expandIcon}
+                            alt=""
+                            src={expandIcon}
+                        />
+                    </div>
+                )}
                 {empty ? (
                     emptyPlaceholder || '-'
                 ) : (
@@ -180,6 +191,35 @@ const Cell = (props: CellProps) => {
                 )}
             </div>
         );
+        console.log('contentMenu', contentMenu);
+
+        return contentMenu ? (
+            <Popover
+                overlayClassName={s.menuPop}
+                trigger="contextMenu"
+                placement="rightTop"
+                content={
+                    <div role="presentation" className={style.menuContainer}>
+                        {contentMenu.map((item: any, i: number) => {
+                            return (
+                                <div
+                                    key={i}
+                                    role="presentation"
+                                    className={style.menu}
+                                    onClick={item.onClick.bind(null, record)}
+                                >
+                                    {item.label}
+                                </div>
+                            );
+                        })}
+                    </div>
+                }
+            >
+                {detail}
+            </Popover>
+        ) : (
+            detail
+        );
     };
 
     const selfRenderEditCell = () => {
diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx
index 1f3b724..79b425d 100644
--- a/components/apolloTable/component/Table.tsx
+++ b/components/apolloTable/component/Table.tsx
@@ -305,6 +305,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             emptyPlaceholder,
             cellEditable,
             rowSelection,
+            contentMenu,
         } = this.props;
         if (showColumns.length === 0 || showData.length === 0) {
             return;
@@ -331,6 +332,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                 emptyPlaceholder={emptyPlaceholder}
                 cellEditable={cellEditable}
                 rowSelection={position === 'right' ? false : rowSelection}
+                contentMenu={contentMenu}
             />
         );
     };
diff --git a/components/apolloTable/component/index.tsx b/components/apolloTable/component/index.tsx
index f62c432..f1c4682 100644
--- a/components/apolloTable/component/index.tsx
+++ b/components/apolloTable/component/index.tsx
@@ -60,6 +60,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
             noDataPlaceholder,
             columnWidth,
             headerHeight,
+            contentMenu,
         } = this.props;
         const sortConfig = operateConfig
             && operateConfig.menusGroup
@@ -93,6 +94,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
                         loading={loading}
                         rowSelection={rowSelection}
                         noDataPlaceholder={noDataPlaceholder}
+                        contentMenu={contentMenu}
                     />
                 </div>
                 {paginationConfig && <Pagination {...paginationConfig} />}
diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx
index afe2a22..febf48d 100644
--- a/components/apolloTable/component/interface.tsx
+++ b/components/apolloTable/component/interface.tsx
@@ -70,6 +70,7 @@ export interface TableProps extends LoadConfigProps {
     loading?: boolean;
     rowSelection?: any;
     noDataPlaceholder?: any;
+    contentMenu?:any;
 }
 export interface TableState {
     columns: ColumnProps[];
@@ -111,6 +112,7 @@ export interface CellProps {
     emptyPlaceholder?: string;
     cellEditable?: boolean;
     rowSelection?: any;
+    contentMenu?:any;
 }
 
 export interface EditCellProps {
-- 
2.21.0