配置

craco.config.js

@@ -49,8 +49,18 @@ module.exports = {
         libraryTarget: 'umd',
         chunkLoadingGlobal: `webpackJsonp_${name}`,
         globalObject: 'window',
-      }
-    }
+      },
+      module: {
+        rules: [
+          {
+            test: /\.m?js/,
+            resolve: {
+              fullySpecified: false,
+            },
+          },
+        ],
+      },
+    },
   },
   devServer: {
     headers: {

package.json

@@ -11,10 +11,10 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^27.4.1",
-    "@types/node": "^17.0.21",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.12",
+    "@types/jest": "^27.5.1",
+    "@types/node": "^17.0.35",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
     "ahooks": "^3.1.7",
     "antd": "4.18.2",
     "axios": "^0.19.0",
@@ -30,7 +30,7 @@
     "local-storage": "^2.0.0",
     "react": "^17.0.1",
     "react-contexify": "^5.0.0",
-    "react-contextmenu": "^2.14.0",
+    "react-contextmenu": "2.14.0",
     "react-data-grid": "^7.0.0-beta.12",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
@@ -45,7 +45,7 @@
     "redux-saga": "^1.0.5",
     "showdown": "^1.9.1",
     "smooth-scroll": "^16.1.3",
-    "typescript": "^4.6.2",
+    "typescript": "^4.6.4",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/index.less

@@ -366,42 +366,3 @@ svg {
   max-height: 70vh;
   overflow: auto;
 }
-
-
-//virtual-table
-.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;
-
-    &: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;
-  }
-}

src/view/Manage/VirtualTable/test-table.module.less

@@ -38,8 +38,8 @@
   }
 }
 
-:global(.react-contextmenu-wrapper) {
-  display: contents;
+.virtualTable {
+  background-color: #000 !important;
 }
 
 .contextMenu {

src/view/Manage/VirtualTable/test-table.tsx

@@ -47,14 +47,6 @@ interface Props<Row> {
   onSelectedRowsChange?: (selectedRows: Array<any>) => void
 }
 
-function RowRenderer<Row, SR>(id: string) {
-  return (props: RowRendererProps<Row, SR>) => (
-    <ContextMenuTrigger id={id} collect={() => ({ rowIdx: props.rowIdx })}>
-      <GridRow {...props} />
-    </ContextMenuTrigger>
-  );
-}
-
 const CheckboxFormatter = forwardRef<HTMLInputElement, CheckboxFormatterProps>(
   function CheckboxFormatter({ onChange, ...props }: CheckboxFormatterProps, ref) {
     function handleChange(e: CheckboxChangeEvent) {
@@ -225,11 +217,9 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
   }, [loadMoreRows, rows])
 
   const contextMenuId = contextMenu?.id ?? nanoid()
-
   return (
-    <>
+    <div className={css.virtualTable}>
       <DataGrid
-        // className='virtual-table'
         ref={gridRef}
 
         {...rest}
@@ -239,19 +229,23 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
         components={{
           sortIcon: SortIcon,
           checkboxFormatter: CheckboxFormatter,
-          rowRenderer: (props) => {
-            return (
-              contextMenu ? <ContextMenuTrigger id={contextMenuId} collect={() => ({ rowIdx: props?.rowIdx })} disable={props.row.__type__===RowType.Detail}>
-                <GridRow
-                  id={props.row.id} 
-                  onContextMenu={(e: React.MouseEvent) => {
-                    setContextItem(props.row);
-                  }} 
-                  {...props} 
-                />
-              </ContextMenuTrigger> : <React.Fragment></React.Fragment>
-            )
-          },
+          // rowRenderer: (props) => {
+          //   return (
+          //     contextMenu ? <ContextMenuTrigger 
+          //       id={contextMenuId} 
+          //       collect={() => ({ rowIdx: props?.rowIdx })} 
+          //       disable={props.row.__type__===RowType.Detail}
+          //     >
+          //       <GridRow
+          //         id={props.row.id} 
+          //         onContextMenu={(e: React.MouseEvent) => {
+          //           setContextItem(props.row);
+          //         }} 
+          //         {...props} 
+          //       />
+          //     </ContextMenuTrigger> : <React.Fragment></React.Fragment>
+          //   )
+          // },
           noRowsFallback: <div style={{ textAlign: 'center', gridColumn: '1/-1' }}>
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
           </div>, 
@@ -278,15 +272,15 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
         // 滚动
         onScroll={loadMoreRows ? handleScroll : undefined}
       />
-      {contextMenu && createPortal(
+      {/* {contextMenu && createPortal(
         <div className={classNames(css.contextMenu)}>
           <ContextMenu id={contextMenuId} rtl={false}>
             {contextMenu.menu(contextItem)}
           </ContextMenu>
         </div>,
         document.body
-      )}
-    </>
+      )} */}
+    </div>
   );
 }
 

tsconfig.json

 {
   "compilerOptions": {
-    "target": "es2016",
-    "module": "esnext",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "skipLibCheck": true,
+    "target": "es5",
     "lib": [
       "dom",
       "dom.iterable",
       "esnext"
     ],
     "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,