Skip to content

S
szse
Commit dbe5d4d9 by zhaochengxiang
Options

调整代码

parent 286e5033
Showing with 122 additions and 257 deletions
src/index.less
......@@ -2,6 +2,7 @@
@import '~antd/dist/antd.less';
@import './mixins.less';
@import './variables.less';
@import './view/Manage/VirtualTable/mixins.less';
//与center-home中的样式保持统一
body {
......@@ -365,121 +366,4 @@ svg {
.yy-notification-notice-description {
max-height: 70vh;
overflow: auto;
}
.rdg {
border: none !important;
}
.rdg-header-row {
.rdg-cell {
box-shadow: none !important;
background-color: #f2f5fc!important;
border-block-end: none !important;
border-inline-end: none !important;
font-weight: normal !important;
outline: none !important;
&:before {
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 1.6em;
background-color: rgba(0,0,0,.06);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: background-color .3s;
content: "";
}
}
}
.rdg-row {
&:hover {
background-color: #fafafa;
}
.rdg-cell {
box-shadow: none !important;
color: #363636 !important;
border-block-end: 1px solid #f0f0f0 !important;
border-inline-end: none !important;
outline: none !important;
}
}
.react-contextmenu-wrapper {
display: contents;
}
.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-block: 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-block: 3px;
padding-inline: 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;
}
}
\ No newline at end of file
src/view/Manage/Model/Component/ExpandedModelTable.jsx
......@@ -249,6 +249,7 @@ const ExpandedModelTable = (props) => {
useEffect(() => {
setSelectedRowKeys(checked?[id]:[]);
console.log('data map', dataMap);
if (dataMap.has(id)) {
setData([dataMap.get(id)]);
} else {
......
src/view/Manage/Model/Component/ModelTable.jsx
......@@ -4,7 +4,7 @@ import SmoothScroll from 'smooth-scroll';
import { MenuItem } from 'react-contextmenu';
import LocalStorage from 'local-storage';
import DataGrid from '../../VirtualTable/test-table';
import DataGrid from '../../VirtualTable';
import { dispatch } from '../../../../model';
import { showMessage, getQueryParam, isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
import { AnchorId, AnchorTimestamp, Action, CatalogId, ModelerId, DataModelerRoleReader } from '../../../../util/constant';
......@@ -12,7 +12,6 @@ import ExpandedModelTable from "./ExpandedModelTable";
// import Tag from "../../Tag";
import './ModelTable.less';
import 'react-contexify/dist/ReactContexify.css';
const { Text } = Typography;
......@@ -99,8 +98,8 @@ const ModelTable = (props) => {
const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
const [ expandedSelectedRowKeys, setExpandedSelectedRowKeys ] = useState([]);
const expandedDataMapRef = useRef(new Map());
const shouldScrollRef = useRef(false);
const expandedDataMapRef = useRef(new Set());
const anchorId = getQueryParam(AnchorId, props?.location?.search);
const anchorTimestamp = getQueryParam(AnchorTimestamp, props?.location?.search);
......@@ -257,9 +256,7 @@ const ModelTable = (props) => {
const modelEventChange = (e) => {
if (e.key === 'modelChange') {
const newExpandedDataMap = new Set(expandedDataMapRef.current);
newExpandedDataMap.delete(LocalStorage.get('modelId'));
expandedDataMapRef.current = newExpandedDataMap;
expandedDataMapRef.current.delete(LocalStorage.get('modelId'));
}
}
......@@ -357,9 +354,7 @@ const ModelTable = (props) => {
}
const onExpandedDataMapChange = (id, value) => {
const newExpandedDataMap = new Set(expandedDataMapRef.current);
newExpandedDataMap.set(id, value);
expandedDataMapRef.current = newExpandedDataMap;
expandedDataMapRef.current.set(id, value);
}
let expandRow = undefined;
......
src/view/Manage/VirtualTable/index.less 0 → 100644
.anchor {
background-color: #e7f7ff;
}
\ No newline at end of file
src/view/Manage/VirtualTable/test-table.tsx → src/view/Manage/VirtualTable/index.tsx
......@@ -3,15 +3,14 @@ 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 type { DataGridHandle, CheckboxFormatterProps } from 'react-data-grid';
import classNames from 'classnames';
import { Checkbox, Empty } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { nanoid } from 'nanoid';
import { downNode, upNode } from './test-table-helper';
import { downNode, upNode } from './virtual-table-helper';
import css from './test-table.module.less'
import './index.less';
export enum RowAction {
None, Expand, Select
......@@ -213,7 +212,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
const contextMenuId = contextMenu?.id ?? nanoid()
return (
<div className={css.virtualTable}>
<React.Fragment>
<DataGrid
ref={gridRef}
......@@ -262,21 +261,19 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
selectedRows={new Set(selectedRows||[])}
onSelectedRowsChange={(values: Set<any>) => {
console.log('values', values);
onSelectedRowsChange && onSelectedRowsChange(Array.from(values));
}}
// 滚动
onScroll={loadMoreRows ? handleScroll : undefined}
/>
{contextMenu && createPortal(
<div className={classNames(css.contextMenu)}>
<ContextMenu id={contextMenuId} rtl={false}>
{contextMenu.menu(contextItem)}
</ContextMenu>
</div>,
<ContextMenu id={contextMenuId} rtl={false}>
{contextMenu.menu(contextItem)}
</ContextMenu>
,
document.body
)}
</div>
</React.Fragment>
);
}
......
src/view/Manage/VirtualTable/test-table.module.less → src/view/Manage/VirtualTable/mixins.less
:global{
.rdg {
border: none !important;
}
.rdg {
border: none !important;
}
.rdg-header-row {
.rdg-cell {
box-shadow: none !important;
background-color: #f2f5fc!important;
border-block-end: none !important;
border-inline-end: none !important;
font-weight: normal !important;
outline: none !important;
.rdg-header-row {
.rdg-cell {
box-shadow: none !important;
background-color: #f2f5fc!important;
border-block-end: none !important;
border-inline-end: none !important;
font-weight: normal !important;
outline: none !important;
&:before {
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 1.6em;
background-color: rgba(0,0,0,.06);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: background-color .3s;
content: "";
}
&:before {
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 1.6em;
background-color: rgba(0,0,0,.06);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: background-color .3s;
content: "";
}
}
}
.rdg-row {
.rdg-cell {
box-shadow: none !important;
color: #363636 !important;
border-block-end: 1px solid #f0f0f0 !important;
border-inline-end: none !important;
outline: none !important;
}
.rdg-row {
&:hover {
background-color: #fafafa;
}
}
.contextMenu {
border: 1px solid black;
:global{
.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-block: 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-block: 3px;
padding-inline: 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;
}
.rdg-cell {
box-shadow: none !important;
color: #363636 !important;
border-block-end: 1px solid #f0f0f0 !important;
border-inline-end: none !important;
outline: none !important;
}
}
.anchor {
background-color: #e7f7ff;
.react-contextmenu-wrapper {
display: contents;
}
.loadMoreRowsClassname {
inline-size: 180px;
padding-block: 8px;
padding-inline: 16px;
.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-block: 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-block: 3px;
padding-inline: 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-block-end: 8px;
inset-inline-end: 8px;
color: white;
line-height: 35px;
background: rgb(0 0 0 / 0.6);
}
\ No newline at end of file
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