Commit 5e44ff54 authored by zhangwenshuai's avatar zhangwenshuai

update apolloTableContentMenu

parent 135695f3
...@@ -52,3 +52,12 @@ ...@@ -52,3 +52,12 @@
top: 0; top: 0;
left: 0; left: 0;
} }
.menuPop {
width: 110px;
:global(.ant-popover-inner-content) {
padding: @paddingSmX 0;
border-radius: @borderRadius;
background: #333333;
}
}
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Checkbox, message } from 'antd'; import { Checkbox, message, Popover } from 'antd';
import _ from 'lodash'; import _ from 'lodash';
import { config } from './base/config'; import { config } from './base/config';
import { getEditComponent } from './base'; import { getEditComponent } from './base';
...@@ -28,6 +28,7 @@ const Cell = (props: CellProps) => { ...@@ -28,6 +28,7 @@ const Cell = (props: CellProps) => {
cellEditable, cellEditable,
rowSelection, rowSelection,
columns, columns,
contentMenu,
} = props; } = props;
const { const {
columnType, columnType,
...@@ -93,7 +94,8 @@ const Cell = (props: CellProps) => { ...@@ -93,7 +94,8 @@ const Cell = (props: CellProps) => {
}; };
const selfRenderDetailCell = () => { 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; let detailConfig;
if (typeof renderDetailCell === 'function') { if (typeof renderDetailCell === 'function') {
detailConfig = renderDetailCell({ cellData, rowData: record, columnConfig }); detailConfig = renderDetailCell({ cellData, rowData: record, columnConfig });
...@@ -152,7 +154,7 @@ const Cell = (props: CellProps) => { ...@@ -152,7 +154,7 @@ const Cell = (props: CellProps) => {
return <Checkbox checked={checked} onClick={onToggle} />; return <Checkbox checked={checked} onClick={onToggle} />;
}; };
return ( const detail = (
<div <div
className={s.detailCell} className={s.detailCell}
onDoubleClick={() => { onDoubleClick={() => {
...@@ -162,7 +164,16 @@ const Cell = (props: CellProps) => { ...@@ -162,7 +164,16 @@ const Cell = (props: CellProps) => {
> >
{rowSelection && columnIndex === 0 && <div className={s.checkbox}>{getCheckbox()}</div>} {rowSelection && columnIndex === 0 && <div className={s.checkbox}>{getCheckbox()}</div>}
{showIndex && columnIndex === 0 && <div className={s.num}>{getIndex()}</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 ? ( {empty ? (
emptyPlaceholder || '-' emptyPlaceholder || '-'
) : ( ) : (
...@@ -180,6 +191,35 @@ const Cell = (props: CellProps) => { ...@@ -180,6 +191,35 @@ const Cell = (props: CellProps) => {
)} )}
</div> </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 = () => { const selfRenderEditCell = () => {
......
...@@ -305,6 +305,7 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -305,6 +305,7 @@ export default class AirTable extends Component<TableProps, TableState> {
emptyPlaceholder, emptyPlaceholder,
cellEditable, cellEditable,
rowSelection, rowSelection,
contentMenu,
} = this.props; } = this.props;
if (showColumns.length === 0 || showData.length === 0) { if (showColumns.length === 0 || showData.length === 0) {
return; return;
...@@ -331,6 +332,7 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -331,6 +332,7 @@ export default class AirTable extends Component<TableProps, TableState> {
emptyPlaceholder={emptyPlaceholder} emptyPlaceholder={emptyPlaceholder}
cellEditable={cellEditable} cellEditable={cellEditable}
rowSelection={position === 'right' ? false : rowSelection} rowSelection={position === 'right' ? false : rowSelection}
contentMenu={contentMenu}
/> />
); );
}; };
......
...@@ -60,6 +60,7 @@ class AirTable extends React.Component<CommonProps, CommonState> { ...@@ -60,6 +60,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
noDataPlaceholder, noDataPlaceholder,
columnWidth, columnWidth,
headerHeight, headerHeight,
contentMenu,
} = this.props; } = this.props;
const sortConfig = operateConfig const sortConfig = operateConfig
&& operateConfig.menusGroup && operateConfig.menusGroup
...@@ -93,6 +94,7 @@ class AirTable extends React.Component<CommonProps, CommonState> { ...@@ -93,6 +94,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
loading={loading} loading={loading}
rowSelection={rowSelection} rowSelection={rowSelection}
noDataPlaceholder={noDataPlaceholder} noDataPlaceholder={noDataPlaceholder}
contentMenu={contentMenu}
/> />
</div> </div>
{paginationConfig && <Pagination {...paginationConfig} />} {paginationConfig && <Pagination {...paginationConfig} />}
......
...@@ -70,6 +70,7 @@ export interface TableProps extends LoadConfigProps { ...@@ -70,6 +70,7 @@ export interface TableProps extends LoadConfigProps {
loading?: boolean; loading?: boolean;
rowSelection?: any; rowSelection?: any;
noDataPlaceholder?: any; noDataPlaceholder?: any;
contentMenu?:any;
} }
export interface TableState { export interface TableState {
columns: ColumnProps[]; columns: ColumnProps[];
...@@ -111,6 +112,7 @@ export interface CellProps { ...@@ -111,6 +112,7 @@ export interface CellProps {
emptyPlaceholder?: string; emptyPlaceholder?: string;
cellEditable?: boolean; cellEditable?: boolean;
rowSelection?: any; rowSelection?: any;
contentMenu?:any;
} }
export interface EditCellProps { export interface EditCellProps {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment