Skip to content

S
szse
Commit 93b1939f by zhaochengxiang
Options

虚拟table右键功能调整

parent 673845c2
Showing with 111 additions and 358 deletions
src/index.less
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
@import '~antd/dist/antd.less'; @import '~antd/dist/antd.less';
@import './mixins.less'; @import './mixins.less';
@import './variables.less'; @import './variables.less';
@import './view/Manage/VirtualTable/mixins.less';
//与center-home中的样式保持统一 //与center-home中的样式保持统一
body { body {
......
src/view/Manage/Model/Component/ExpandedModelTable.jsx
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Tooltip, Modal, Table, Typography } from 'antd'; import { Tooltip, Table, Typography } from 'antd';
import classnames from 'classnames'; import classnames from 'classnames';
import { Resizable } from 'react-resizable'; import { Resizable } from 'react-resizable';
import ResizeObserver from 'rc-resize-observer'; import ResizeObserver from 'rc-resize-observer';
import { ContextMenu, ContextMenuTrigger } from 'react-contextmenu';
import { nanoid } from 'nanoid';
import { createPortal } from 'react-dom';
import { MenuItem } from 'react-contextmenu';
import { dispatch } from '../../../../model'; import { dispatch } from '../../../../model';
import { showMessage, isSzseEnv, formatDate, getDataModelerRole } from '../../../../util'; import { isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
import { Action, CatalogId, ModelerId, DataModelerRoleReader } from '../../../../util/constant'; import { DataModelerRoleReader } from '../../../../util/constant';
// import Tag from "../../Tag"; // import Tag from "../../Tag";
import './ModelTable.less'; import './ModelTable.less';
...@@ -127,17 +124,14 @@ const ResizeableHeaderCell = props => { ...@@ -127,17 +124,14 @@ const ResizeableHeaderCell = props => {
const ExpandedModelTable = (props) => { const ExpandedModelTable = (props) => {
const { onChange, onItemAction, onHistory, onAutoCreateTable, onExpandedSelect, onExpandedChange, catalogId, keyword, id = null, pid = null, view, user, checked, dataMap } = props; const { onItemAction, onExpandedSelect, onExpandedChange, keyword, id = null, pid = null, view, checked, dataMap, onContextMenu, user } = props;
const [ tableWidth, setTableWidth ] = useState(0); const [ tableWidth, setTableWidth ] = useState(0);
const [ selectedRowKeys, setSelectedRowKeys ] = useState([]); const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
const [ data, setData ] = useState([]); const [ data, setData ] = useState([]);
const [ columns, setColumns ] = useState([]); const [ columns, setColumns ] = useState([]);
const [ currentItem, setCurrentItem ] = useState(null);
const [modal, contextHolder] = Modal.useModal();
const cols = [ const cols = [
{ {
title: '模型名称', title: '模型名称',
...@@ -293,69 +287,9 @@ const ExpandedModelTable = (props) => { ...@@ -293,69 +287,9 @@ const ExpandedModelTable = (props) => {
}) })
} }
const editItem = (record) => {
onItemAction && onItemAction(record, 'edit');
}
const detailItem = (record) => { const detailItem = (record) => {
onItemAction && onItemAction(record, 'detail', getDataModelerRole(user)===DataModelerRoleReader); onItemAction && onItemAction(record, 'detail', getDataModelerRole(user)===DataModelerRoleReader);
} }
const deployAction = (record) => {
onAutoCreateTable && onAutoCreateTable(record);
}
const stateAction = (record, action) => {
modal.confirm({
title: '提示!',
content: `您确定要${action.cnName||''}该模型吗?`,
onOk: () => {
dispatch({
type: 'datamodel.nextState',
payload: {
easyDataModelerDataModelId: record.id,
actionId: action.id
},
callback: () => {
showMessage('success', `模型${action.cnName||''}成功`);
if (action.id === '2') {
onChange && onChange();
} else {
getCheckoutDataModel();
}
}
})
}
});
}
const deleteItem = (record) => {
modal.confirm({
title: '提示!',
content: '您确定要删除该模型吗?',
onOk: () => {
dispatch({
type: 'datamodel.deleteDataModel',
payload: {
params: {
id: record.id
}
},
callback: () => {
showMessage('success', '模型删除成功');
onChange && onChange();
}
})
}
});
}
const historyItem = (record) => {
onHistory && onHistory(record.id);
}
const onExpandedSelectChange = keys => { const onExpandedSelectChange = keys => {
setSelectedRowKeys(keys); setSelectedRowKeys(keys);
onExpandedSelect && onExpandedSelect(keys, data[0].id); onExpandedSelect && onExpandedSelect(keys, data[0].id);
...@@ -378,30 +312,6 @@ const ExpandedModelTable = (props) => { ...@@ -378,30 +312,6 @@ const ExpandedModelTable = (props) => {
hideSelectAll: true, hideSelectAll: true,
}; };
const classes = classnames('model-table', {
'model-table-sub': id
});
const handleItemClick = (e, data) => {
const { key } = data;
if (key === 'edit') {
editItem(currentItem);
} else if (key === 'delete') {
deleteItem(currentItem);
} else if (key === 'history') {
historyItem(currentItem);
} else if (key === 'copy') {
window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(view==='dir')?(catalogId||''):''}&${ModelerId}=${currentItem.id}`);
} else if (key === 'createTable') {
deployAction(currentItem);
} else if (key.indexOf('action') !== -1) {
const index = (key.split('-'))[1];
const action = currentItem?.state?.supportedActions[index];
stateAction(currentItem, action);
}
}
const mergedColumns = () => { const mergedColumns = () => {
let newColumns = [...columns]; let newColumns = [...columns];
...@@ -416,33 +326,9 @@ const ExpandedModelTable = (props) => { ...@@ -416,33 +326,9 @@ const ExpandedModelTable = (props) => {
); );
} }
let disableEdit = false, disableDelete = false, editTip = '', deleteTip = '', editMenuTitle = '编辑'; const classes = classnames('model-table', {
'model-table-sub': id
if (!currentItem?.editable && currentItem?.state?.id!=='4') { });
disableEdit = true;
if (currentItem?.state?.id === '2') {
editTip = '待发布的模型不允许编辑';
}
}
if (!currentItem?.permitCheckOut && currentItem?.state?.id==='4') {
disableEdit = true;
editTip = `${currentItem.holder||''}正在编辑中, 不允许再编辑`;
editMenuTitle = `编辑(${currentItem.holder||''}正在编辑中)`;
}
if (!currentItem?.deletable) {
disableDelete = true;
if (currentItem?.state?.id === '2') {
deleteTip = '待发布的模型不允许删除';
} else if (currentItem?.state?.id === '4') {
deleteTip = '已发布的模型不允许删除';
}
}
const contextMenuId = nanoid()
return ( return (
<div className={classes}> <div className={classes}>
...@@ -456,16 +342,7 @@ const ExpandedModelTable = (props) => { ...@@ -456,16 +342,7 @@ const ExpandedModelTable = (props) => {
components={{ components={{
header: { header: {
cell: ResizeableHeaderCell, cell: ResizeableHeaderCell,
}, }
body: {
row: (props) => {
return (
<ContextMenuTrigger id={contextMenuId} >
<tr {...props} />
</ContextMenuTrigger>
)
},
},
}} }}
columns={mergedColumns()} columns={mergedColumns()}
rowKey={'id'} rowKey={'id'}
...@@ -475,55 +352,12 @@ const ExpandedModelTable = (props) => { ...@@ -475,55 +352,12 @@ const ExpandedModelTable = (props) => {
onRow={(record, index) => { onRow={(record, index) => {
return { return {
onContextMenu: event => { onContextMenu: event => {
setCurrentItem(record); onContextMenu && onContextMenu(event, record);
}, },
} }
}} }}
/> />
</ResizeObserver> </ResizeObserver>
{createPortal(
<ContextMenu id={contextMenuId} rtl={false}>
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem data={{ key: 'edit' }} disabled={disableEdit} onClick={handleItemClick}>
<Tooltip title={editTip}>
{ editMenuTitle }
</Tooltip>
</MenuItem>
}
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem data={{ key: 'delete' }} disabled={disableDelete} onClick={handleItemClick}>
<Tooltip title={deleteTip}>
删除
</Tooltip>
</MenuItem>
}
<MenuItem data={{ key: 'history' }} onClick={handleItemClick}>
历史版本
</MenuItem>
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem data={{ key: 'copy' }} onClick={handleItemClick}>
复制模型
</MenuItem>
}
{
getDataModelerRole(user)!==DataModelerRoleReader && (currentItem?.state?.supportedActions||[]).length>0 && currentItem?.state?.supportedActions.map((item, index) => {
return (
<MenuItem data={{ key: `action-${index}` }} onClick={handleItemClick}>
{item.cnName||''}
</MenuItem>
);
})
}
{
getDataModelerRole(user)!==DataModelerRoleReader &&currentItem?.deployable && <MenuItem id='createTable' onClick={handleItemClick}>
建表
</MenuItem>
}
</ContextMenu>
,
document.body
)}
{ contextHolder }
</div> </div>
); );
} }
......
src/view/Manage/Model/Component/ModelTable.jsx
import React, { useState, useEffect, useRef, useMemo } from "react"; import React, { useState, useEffect, useRef, useMemo } from "react";
import { Tooltip, Modal, Table, Typography } from 'antd'; import { Tooltip, Modal, Table, Typography } from 'antd';
import SmoothScroll from 'smooth-scroll'; import SmoothScroll from 'smooth-scroll';
import { MenuItem } from 'react-contextmenu';
import LocalStorage from 'local-storage'; import LocalStorage from 'local-storage';
import DataGrid from '../../VirtualTable'; import DataGrid from '../../VirtualTable';
...@@ -10,8 +9,11 @@ import { showMessage, getQueryParam, isSzseEnv, formatDate, getDataModelerRole } ...@@ -10,8 +9,11 @@ import { showMessage, getQueryParam, isSzseEnv, formatDate, getDataModelerRole }
import { AnchorId, AnchorTimestamp, Action, CatalogId, ModelerId, DataModelerRoleReader } from '../../../../util/constant'; import { AnchorId, AnchorTimestamp, Action, CatalogId, ModelerId, DataModelerRoleReader } from '../../../../util/constant';
import ExpandedModelTable from "./ExpandedModelTable"; import ExpandedModelTable from "./ExpandedModelTable";
// import Tag from "../../Tag"; // import Tag from "../../Tag";
import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
import './ModelTable.less'; import './ModelTable.less';
import 'react-contexify/dist/ReactContexify.css';
const { Text } = Typography; const { Text } = Typography;
...@@ -97,6 +99,7 @@ const ModelTable = (props) => { ...@@ -97,6 +99,7 @@ const ModelTable = (props) => {
const [ selectedRowKeys, setSelectedRowKeys ] = useState([]); const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
const [ expandedSelectedRowKeys, setExpandedSelectedRowKeys ] = useState([]); const [ expandedSelectedRowKeys, setExpandedSelectedRowKeys ] = useState([]);
const [ currentItem, setCurrentItem ] = useState(null);
const expandedDataMapRef = useRef(new Map()); const expandedDataMapRef = useRef(new Map());
const shouldScrollRef = useRef(false); const shouldScrollRef = useRef(false);
...@@ -106,6 +109,11 @@ const ModelTable = (props) => { ...@@ -106,6 +109,11 @@ const ModelTable = (props) => {
const [modal, contextHolder] = Modal.useModal(); const [modal, contextHolder] = Modal.useModal();
const MENU_ID = 'model-table-contextmenu';
const { show } = useContextMenu({
id: MENU_ID,
});
const cols = [ const cols = [
{ {
name: '序号', name: '序号',
...@@ -378,6 +386,7 @@ const ModelTable = (props) => { ...@@ -378,6 +386,7 @@ const ModelTable = (props) => {
id={row?.checkedOutId} id={row?.checkedOutId}
pid={row?.id} pid={row?.id}
checked={expandedSelectedRowKeys.indexOf(row?.checkedOutId)!==-1} checked={expandedSelectedRowKeys.indexOf(row?.checkedOutId)!==-1}
onContextMenu={onExpandedTableContextMenu}
dataMap={expandedDataMapRef.current} dataMap={expandedDataMapRef.current}
onExpandedSelect={onExpandedTableSelectChange} onExpandedSelect={onExpandedTableSelectChange}
onExpandedChange={onExpandedDataMapChange} onExpandedChange={onExpandedDataMapChange}
...@@ -389,91 +398,59 @@ const ModelTable = (props) => { ...@@ -389,91 +398,59 @@ const ModelTable = (props) => {
} }
} }
const handleItemClick = (e, data) => { const onExpandedTableContextMenu = (e, item) => {
const { key, item } = data; setCurrentItem(item);
displayMenu(e);
}
const displayMenu = (e) => {
show(e);
}
const handleItemClick = ({ event, props, data, triggerEvent }) => {
const key = event.currentTarget.id;
if (key === 'edit') { if (key === 'edit') {
editItem(item); editItem(currentItem);
} else if (key === 'delete') { } else if (key === 'delete') {
deleteItem(item); deleteItem(currentItem);
} else if (key === 'history') { } else if (key === 'history') {
historyItem(item); historyItem(currentItem);
} else if (key === 'copy') { } else if (key === 'copy') {
window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(view==='dir')?(catalogId||''):''}&${ModelerId}=${item.id}`); window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(view==='dir')?(catalogId||''):''}&${ModelerId}=${currentItem.id}`);
} else if (key === 'createTable') { } else if (key === 'createTable') {
deployAction(item); deployAction(currentItem);
} else if (key.indexOf('action') !== -1) { } else if (key.indexOf('action') !== -1) {
const index = (key.split('-'))[1]; const index = (key.split('-'))[1];
const action = item?.state?.supportedActions[index]; const action = currentItem?.state?.supportedActions[index];
stateAction(item, action); stateAction(currentItem, action);
} }
} }
const onMenuRender = (row) => { let disableEdit = false, disableDelete = false, editTip = '', deleteTip = '', editMenuTitle = '编辑';
let disableEdit = false, disableDelete = false, editTip = '', deleteTip = '', editMenuTitle = '编辑';
if (!row?.editable && row?.state?.id!=='4') { if (!currentItem?.editable && currentItem?.state?.id!=='4') {
disableEdit = true; disableEdit = true;
if (row?.state?.id === '2') { if (currentItem?.state?.id === '2') {
editTip = '待发布的模型不允许编辑'; editTip = '待发布的模型不允许编辑';
}
} }
}
if (!row?.permitCheckOut && row?.state?.id==='4') { if (!currentItem?.permitCheckOut && currentItem?.state?.id==='4') {
disableEdit = true; disableEdit = true;
editTip = `${row.holder||''}正在编辑中, 不允许再编辑`; editTip = `${currentItem.holder||''}正在编辑中, 不允许再编辑`;
editMenuTitle = `编辑(${row.holder||''}正在编辑中)`; editMenuTitle = `编辑(${currentItem.holder||''}正在编辑中)`;
} }
if (!row?.deletable) { if (!currentItem?.deletable) {
disableDelete = true; disableDelete = true;
if (row?.state?.id === '2') { if (currentItem?.state?.id === '2') {
deleteTip = '待发布的模型不允许删除'; deleteTip = '待发布的模型不允许删除';
} else if (row?.state?.id === '4') { } else if (currentItem?.state?.id === '4') {
deleteTip = '已发布的模型不允许删除'; deleteTip = '已发布的模型不允许删除';
}
} }
return <React.Fragment>
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem key='edit' data={{ key: 'edit', item: row }} disabled={disableEdit} onClick={handleItemClick}>
<Tooltip title={editTip}>
{ editMenuTitle }
</Tooltip>
</MenuItem>
}
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem data={{ key: 'delete', item: row }} disabled={disableDelete} onClick={handleItemClick}>
<Tooltip title={deleteTip}>
删除
</Tooltip>
</MenuItem>
}
<MenuItem data={{ key: 'history', item: row }} onClick={handleItemClick}>
历史版本
</MenuItem>
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem data={{ key: 'copy', item: row }} onClick={handleItemClick}>
复制模型
</MenuItem>
}
{
getDataModelerRole(user)!==DataModelerRoleReader && (row?.state?.supportedActions||[]).length>0 && row?.state?.supportedActions.map((item, index) => {
return (
<MenuItem key={index} data={{ key: `action-${index}`, item: row }} onClick={handleItemClick}>
{item.cnName||''}
</MenuItem>
);
})
}
{
getDataModelerRole(user)!==DataModelerRoleReader &&row?.deployable && <MenuItem data={{ key: "createTable", item: row }} onClick={handleItemClick}>
建表
</MenuItem>
}
</React.Fragment>
} }
return ( return (
...@@ -488,13 +465,53 @@ const ModelTable = (props) => { ...@@ -488,13 +465,53 @@ const ModelTable = (props) => {
return (row.id === anchorId)?'anchor':'' return (row.id === anchorId)?'anchor':''
}} }}
expandable={expandable} expandable={expandable}
contextMenu={{ onContextMenu={(e, row) => {
menu: onMenuRender setCurrentItem(row);
displayMenu(e);
}} }}
selectedRows={selectedRowKeys} selectedRows={selectedRowKeys}
onSelectedRowsChange={onSelectChange} onSelectedRowsChange={onSelectChange}
getComparator={getComparator} getComparator={getComparator}
/> />
<RcMenu id={MENU_ID}>
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <RcItem id="edit" disabled={disableEdit} onClick={handleItemClick}>
<Tooltip title={editTip}>
{ editMenuTitle }
</Tooltip>
</RcItem>
}
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <RcItem id="delete" disabled={disableDelete} onClick={handleItemClick}>
<Tooltip title={deleteTip}>
删除
</Tooltip>
</RcItem>
}
<RcItem id="history" onClick={handleItemClick}>
历史版本
</RcItem>
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <RcItem id="copy" onClick={handleItemClick}>
复制模型
</RcItem>
}
{
getDataModelerRole(user)!==DataModelerRoleReader && (currentItem?.state?.supportedActions||[]).length>0 && currentItem?.state?.supportedActions.map((item, index) => {
return (
<RcItem id={`action-${index}`} onClick={handleItemClick}>
{item.cnName||''}
</RcItem>
);
})
}
{
getDataModelerRole(user)!==DataModelerRoleReader &&currentItem?.deployable && <RcItem id='createTable' onClick={handleItemClick}>
建表
</RcItem>
}
</RcMenu>
{ contextHolder } { contextHolder }
</div> </div>
); );
......
src/view/Manage/VirtualTable/index.less
...@@ -47,8 +47,4 @@ ...@@ -47,8 +47,4 @@
padding-right: 8px !important; padding-right: 8px !important;
} }
} }
.react-contextmenu-wrapper {
display: contents;
}
} }
\ No newline at end of file
src/view/Manage/VirtualTable/index.tsx
import React, { ReactElement, useCallback, useEffect, useMemo, useState, forwardRef } from 'react'; import React, { useCallback, useEffect, useMemo, useState, forwardRef } from 'react';
import { createPortal } from 'react-dom';
import { ContextMenu, ContextMenuTrigger } from 'react-contextmenu';
import DataGrid, { Column, DataGridProps, Row as GridRow, RowsChangeData, SortColumn, SortIconProps, SelectColumn } from 'react-data-grid'; import DataGrid, { Column, DataGridProps, Row as GridRow, RowsChangeData, SortColumn, SortIconProps, SelectColumn } from 'react-data-grid';
import type { DataGridHandle, CheckboxFormatterProps } from 'react-data-grid'; import type { DataGridHandle, CheckboxFormatterProps } from 'react-data-grid';
import { Checkbox, Empty } from 'antd'; import { Checkbox, Empty } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox'; import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import { DownOutlined, UpOutlined } from '@ant-design/icons'; import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { nanoid } from 'nanoid';
import { downNode, upNode } from './virtual-table-helper'; import { downNode, upNode } from './virtual-table-helper';
import './index.less'; import './index.less';
...@@ -33,10 +30,7 @@ export interface RowData { ...@@ -33,10 +30,7 @@ export interface RowData {
interface Props<Row> { interface Props<Row> {
gridRef?: React.RefObject<DataGridHandle> gridRef?: React.RefObject<DataGridHandle>
contextMenu?: { onContextMenu?: (event: React.MouseEvent, row: RowData) => void
id: string
menu: (row: RowData | undefined) => ReactElement
}
checkable: Boolean checkable: Boolean
expandable?: { expandable?: {
expandedRowHeight?: number expandedRowHeight?: number
...@@ -114,15 +108,12 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat ...@@ -114,15 +108,12 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
expandable, expandable,
getComparator, getComparator,
loadMoreRows, loadMoreRows,
onSelectedRowsChange, onSelectedRowsChange, columns, rows, checkable, selectedRows, rowHeight = 45, rowClassName, onContextMenu, ...rest } = props
contextMenu, columns, rows, checkable, selectedRows, rowHeight = 45, rowClassName, ...rest } = props
const rowKeyGetter = (row: Row): K => { const rowKeyGetter = (row: Row): K => {
return row.id as K; return row.id as K;
} }
const [contextItem, setContextItem] = useState<RowData|undefined>(undefined)
// 初始化onRowsChange // 初始化onRowsChange
const onRowsChange = useCallback((rows: RowData[], { indexes }: RowsChangeData<Row, SR>) => { const onRowsChange = useCallback((rows: RowData[], { indexes }: RowsChangeData<Row, SR>) => {
const row = rows[indexes[0]]; const row = rows[indexes[0]];
...@@ -209,7 +200,6 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat ...@@ -209,7 +200,6 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
loadMoreRows?.(rows.length) loadMoreRows?.(rows.length)
}, [loadMoreRows, rows]) }, [loadMoreRows, rows])
const contextMenuId = contextMenu?.id ?? nanoid()
return ( return (
<div className='virtual-table'> <div className='virtual-table'>
<DataGrid <DataGrid
...@@ -223,20 +213,16 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat ...@@ -223,20 +213,16 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
checkboxFormatter: CheckboxFormatter, checkboxFormatter: CheckboxFormatter,
rowRenderer: (props) => { rowRenderer: (props) => {
return ( return (
contextMenu ? <ContextMenuTrigger <GridRow
id={contextMenuId} className={rowClassName(props.row)}
collect={() => ({ rowIdx: props?.rowIdx })} id={`row-${props.row.id}`}
disable={props.row.__type__===RowType.Detail} onContextMenu={(e: React.MouseEvent) => {
> if (props.row.__type__ !== RowType.Detail) {
<GridRow onContextMenu && onContextMenu(e, props.row);
className={rowClassName(props.row)} }
id={`row-${props.row.id}`} }}
onContextMenu={(e: React.MouseEvent) => { {...props}
setContextItem(props.row); />
}}
{...props}
/>
</ContextMenuTrigger> : <React.Fragment></React.Fragment>
) )
}, },
noRowsFallback: <div style={{ textAlign: 'center', gridColumn: '1/-1' }}> noRowsFallback: <div style={{ textAlign: 'center', gridColumn: '1/-1' }}>
...@@ -259,13 +245,6 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat ...@@ -259,13 +245,6 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
// 滚动 // 滚动
onScroll={loadMoreRows ? handleScroll : undefined} onScroll={loadMoreRows ? handleScroll : undefined}
/> />
{contextMenu && createPortal(
<ContextMenu id={contextMenuId} rtl={false}>
{contextMenu.menu(contextItem)}
</ContextMenu>
,
document.body
)}
</div> </div>
); );
} }
......
src/view/Manage/VirtualTable/mixins.less deleted 100644 → 0
.react-contextmenu {
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
color: #373a3c;
font-size: 16px;
margin-block-start: 2px;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
min-inline-size: 160px;
outline: none;
opacity: 0;
padding-top: 5px;
padding-bottom: 5px;
padding-inline: 0;
pointer-events: none;
text-align: start;
transition: opacity 250ms ease !important;
}
.react-contextmenu.react-contextmenu--visible {
opacity: 1;
pointer-events: auto;
}
.react-contextmenu-item {
background: 0 0;
border: 0;
color: #373a3c;
cursor: pointer;
font-weight: 400;
line-height: 1.5;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
text-align: inherit;
white-space: nowrap;
}
.react-contextmenu-item.react-contextmenu-item--active,
.react-contextmenu-item.react-contextmenu-item--selected {
color: #fff;
background-color: #20a0ff;
border-color: #20a0ff;
text-decoration: none;
}
.react-contextmenu-item.react-contextmenu-item--disabled,
.react-contextmenu-item.react-contextmenu-item--disabled:hover {
background-color: transparent;
border-color: rgba(0, 0, 0, 0.15);
color: #878a8c;
}
.react-contextmenu-item--divider {
border-block-end: 1px solid rgba(0, 0, 0, 0.15);
cursor: inherit;
margin-block-end: 3px;
padding-block: 2px;
padding-inline: 0;
}
.react-contextmenu-item--divider:hover {
background-color: transparent;
border-color: rgba(0, 0, 0, 0.15);
}
.react-contextmenu-item.react-contextmenu-submenu {
padding: 0;
}
.react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item::after {
content: '▶';
display: inline-block;
position: absolute;
inset-inline-end: 7px;
}
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