CB-3678 feat: update react-data-grid (#1997)

Co-authored-by: mr-anton-t <[email protected]>
dbeaver · Sep 14, 2023 · edc15b6 · edc15b6
1 parent 39dfa3e
commit edc15b6
Show file tree

Hide file tree

Showing 50 changed files with 5,311 additions and 4,463 deletions.
diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx
@@ -20,12 +20,14 @@ export type CheckboxMod = 'primary' | 'surface' | 'small';
 const checkboxStyles = css`
   checkbox {
     composes: theme-checkbox from global;
+    box-sizing: content-box !important;
   }
   checkbox-input {
     composes: theme-checkbox_native-control from global;
   }
   checkbox-background {
     composes: theme-checkbox__background from global;
+    box-sizing: border-box !important;
   }
   checkbox-checkmark {
     composes: theme-checkbox__checkmark from global;

diff --git a/webapp/packages/core-blocks/src/useCombinedHandler.ts b/webapp/packages/core-blocks/src/useCombinedHandler.ts
@@ -7,7 +7,7 @@
  */
 import { useObjectRef } from './useObjectRef';
 
-export function useCombinedHandler<T extends any[]>(...handlers: Array<((...args: T) => any) | undefined>): (...args: T) => void {
+export function useCombinedHandler<T extends any[]>(...handlers: Array<((...args: T) => any) | null | undefined>): (...args: T) => void {
   const optionsRef = useObjectRef({ handlers });
   const state = useObjectRef(
     () => ({

diff --git a/webapp/packages/core-theming/src/styles/_branding.scss b/webapp/packages/core-theming/src/styles/_branding.scss
@@ -6,7 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 
-@mixin stripes-background($color) {
+@mixin stripes-background($color, $important: false) {
   // background-image: linear-gradient(
   //   45deg,
   //   transparent 37.5%,
@@ -18,7 +18,7 @@
   //   $color 100%
   // );
   // background-size: 8px 8px;
-  background-color: $color;
+  background-color: $color #{if($important, '!important', '')};
 }
 
 @mixin delimiter($color) {

diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellEditor.m.css b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellEditor.m.css
@@ -0,0 +1,23 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.editor {
+  composes: theme-typography--body2 from global;
+}
+.box {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 100%;
+}
+.inlineEditor {
+  font-size: 12px;
+  left: -1px;
+  top: 0;
+}
diff --git a/...ew/src/DataGrid/CellEditor/CellEditor.tsx → ...readsheet-new/src/DataGrid/CellEditor.tsx b/...ew/src/DataGrid/CellEditor/CellEditor.tsx → ...readsheet-new/src/DataGrid/CellEditor.tsx
@@ -9,41 +9,24 @@ import { observer } from 'mobx-react-lite';
 import { forwardRef, useContext, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
-import styled, { css } from 'reshadow';
 
+import { s, useS } from '@cloudbeaver/core-blocks';
 import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
 import { InlineEditor } from '@cloudbeaver/core-ui';
 import type { IResultSetElementKey, IResultSetRowKey } from '@cloudbeaver/plugin-data-viewer';
-import type { EditorProps } from '@cloudbeaver/plugin-react-data-grid';
-
-import { DataGridContext, IColumnResizeInfo } from '../DataGridContext';
-import { TableDataContext } from '../TableDataContext';
-
-const styles = css`
-  editor {
-    composes: theme-typography--body2 from global;
-  }
-  box {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 0;
-    height: 100%;
-  }
-  InlineEditor {
-    font-size: 12px;
-    left: -1px;
-    top: 0;
-  }
-`;
+import type { RenderEditCellProps } from '@cloudbeaver/plugin-react-data-grid';
+
+import style from './CellEditor.m.css';
+import { DataGridContext, IColumnResizeInfo } from './DataGridContext';
+import { TableDataContext } from './TableDataContext';
 
 export interface IEditorRef {
   focus: () => void;
 }
 
 const lockNavigation = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter'];
 
-export const CellEditor = observer<Pick<EditorProps<IResultSetRowKey>, 'row' | 'column' | 'onClose'>, IEditorRef>(
+export const CellEditor = observer<Pick<RenderEditCellProps<IResultSetRowKey>, 'row' | 'column' | 'onClose'>, IEditorRef>(
   forwardRef(function CellEditor({ row, column, onClose }, ref) {
     const dataGridContext = useContext(DataGridContext);
     const tableDataContext = useContext(TableDataContext);
@@ -54,6 +37,7 @@ export const CellEditor = observer<Pick<EditorProps<IResultSetRowKey>, 'row' | '
       placement: 'right',
       modifiers: [{ name: 'flip', enabled: false }],
     });
+    const styles = useS(style);
 
     if (!dataGridContext || !tableDataContext || column.columnDataIndex === null) {
       throw new Error('DataGridContext should be provided');
@@ -114,10 +98,10 @@ export const CellEditor = observer<Pick<EditorProps<IResultSetRowKey>, 'row' | '
       event.stopPropagation();
     };
 
-    return styled(styles)(
-      <box
+    return (
+      <div
         ref={setElementRef}
-        as="div"
+        className={s(styles, { box: true })}
         onKeyDown={handleKeyDown}
         onClick={preventClick}
         onDoubleClick={preventClick}
@@ -126,11 +110,12 @@ export const CellEditor = observer<Pick<EditorProps<IResultSetRowKey>, 'row' | '
       >
         {
           createPortal(
-            <editor ref={setPopperRef} as="div" style={popper.styles.popper} {...popper.attributes.popper}>
+            <div ref={setPopperRef} className={s(styles, { editor: true })} style={popper.styles.popper} {...popper.attributes.popper}>
               <InlineEditor
                 ref={inputRef}
                 value={value}
                 controlsPosition="inside"
+                className={s(styles, { inlineEditor: true })}
                 edited
                 hideSave
                 hideCancel
@@ -143,11 +128,11 @@ export const CellEditor = observer<Pick<EditorProps<IResultSetRowKey>, 'row' | '
                 onChange={handleChange}
                 onUndo={handleUndo}
               />
-            </editor>,
+            </div>,
             dataGridContext.getEditorPortal()!,
           ) as any
         }
-      </box>,
+      </div>
     );
   }),
 );
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellContext.ts b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellContext.ts
@@ -18,6 +18,7 @@ export interface ICellContext {
   position: CellPosition;
   isEditing: boolean;
   isSelected: boolean;
+  isFocused: boolean;
   editionState: DatabaseEditChangeType | null;
 }
 

diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx
@@ -9,7 +9,7 @@ import { computed, observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useContext, useEffect } from 'react';
 
-import { getComputed, useMouse, useObjectRef, useObservableRef } from '@cloudbeaver/core-blocks';
+import { getComputed, useCombinedHandler, useMouse, useObjectRef, useObservableRef } from '@cloudbeaver/core-blocks';
 import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
 import { clsx } from '@cloudbeaver/core-utils';
 import { DatabaseEditChangeType, IResultSetElementKey, IResultSetRowKey, isBooleanValuePresentationAvailable } from '@cloudbeaver/plugin-data-viewer';
@@ -22,7 +22,7 @@ import { TableDataContext } from '../TableDataContext';
 import { CellContext } from './CellContext';
 
 export const CellRenderer = observer<CellRendererProps<IResultSetRowKey, unknown>>(function CellRenderer(props) {
-  const { row, column, isCellSelected, selectCell } = props;
+  const { row, column, isCellSelected, onDoubleClick, selectCell } = props;
   const dataGridContext = useContext(DataGridContext);
   const tableDataContext = useContext(TableDataContext);
   const selectionContext = useContext(DataGridSelectionContext);
@@ -49,6 +49,9 @@ export const CellRenderer = observer<CellRendererProps<IResultSetRowKey, unknown
       get isSelected(): boolean {
         return selectionContext.isSelected(this.position.rowIdx, this.position.idx) || false;
       },
+      get isFocused(): boolean {
+        return this.isEditing ? false : this.isCellSelected;
+      },
       get editionState(): DatabaseEditChangeType | null {
         if (!this.cell) {
           return null;
@@ -61,13 +64,15 @@ export const CellRenderer = observer<CellRendererProps<IResultSetRowKey, unknown
       row: observable.ref,
       column: observable.ref,
       rowIdx: observable.ref,
+      isCellSelected: observable.ref,
       position: computed,
       cell: computed,
       isEditing: computed,
       isSelected: computed,
+      isFocused: computed,
       editionState: computed,
     },
-    { row, column, rowIdx },
+    { row, column, rowIdx, isCellSelected },
   );
 
   const classes = getComputed(() =>
@@ -120,7 +125,7 @@ export const CellRenderer = observer<CellRendererProps<IResultSetRowKey, unknown
           false,
         );
       },
-      doubleClick(event: React.MouseEvent<HTMLDivElement>) {
+      doubleClick(args: any, event: React.MouseEvent<HTMLDivElement>) {
         if (
           !this.isEditable(this.column) ||
           // !this.dataGridContext.isGridInFocus()
@@ -136,18 +141,17 @@ export const CellRenderer = observer<CellRendererProps<IResultSetRowKey, unknown
       row,
       column,
       rowIdx,
-      isCellSelected,
       selectionContext,
       dataGridContext,
       editingContext,
-      tableDataContext,
       isEditable,
       selectCell,
     },
     ['doubleClick', 'mouseUp', 'mouseDown'],
   );
 
   useEffect(() => () => editingContext.closeEditor(cellContext.position), []);
+  const handleDoubleClick = useCombinedHandler(state.doubleClick, onDoubleClick);
 
   return (
     <CellContext.Provider value={cellContext}>
@@ -158,9 +162,8 @@ export const CellRenderer = observer<CellRendererProps<IResultSetRowKey, unknown
         data-column-index={column.idx}
         onMouseDown={state.mouseDown}
         onMouseUp={state.mouseUp}
-        onDoubleClick={state.doubleClick}
         {...props}
-        isCellSelected={cellContext.isEditing ? false : isCellSelected}
+        onDoubleClick={handleDoubleClick}
       />
     </CellContext.Provider>
   );

diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx
@@ -27,6 +27,7 @@ import {
 } from '@cloudbeaver/plugin-data-viewer';
 import type { DataGridHandle, Position } from '@cloudbeaver/plugin-react-data-grid';
 import DataGrid from '@cloudbeaver/plugin-react-data-grid';
+import '@cloudbeaver/plugin-react-data-grid/lib/lib/styles.css';
 
 import { CellPosition, EditingContext } from '../Editing/EditingContext';
 import { useEditing } from '../Editing/useEditing';
@@ -293,7 +294,7 @@ export const DataGridTable = observer<IDataPresentationProps<any, IDatabaseResul
       if (selectionAction.isFocused(key)) {
         const rowTop = rowIdx * rowHeight;
         const gridDiv = dataGridDivRef.current;
-        dataGridRef.current?.scrollToColumn(idx);
+        dataGridRef.current?.scrollToCell({ idx });
 
         if (gridDiv) {
           if (rowTop < gridDiv.scrollTop - rowHeight + headerHeight) {
@@ -364,10 +365,10 @@ export const DataGridTable = observer<IDataPresentationProps<any, IDatabaseResul
     const column = tableData.getColumn(position.idx);
     const row = tableData.getRow(position.rowIdx);
 
-    if (column && row) {
+    if (column?.columnDataIndex && row) {
       selectionAction.focus({
         row,
-        column: { index: 0, ...column.columnDataIndex },
+        column: { ...column.columnDataIndex },
       });
     }
   };
@@ -432,14 +433,14 @@ export const DataGridTable = observer<IDataPresentationProps<any, IDatabaseResul
                 defaultColumnOptions={{
                   minWidth: 80,
                   resizable: true,
-                  formatter: CellFormatter,
+                  renderCell: props => <CellFormatter {...props} />,
                 }}
                 rows={tableData.rows}
                 rowKeyGetter={ResultSetDataKeysUtils.serialize}
                 headerRowHeight={headerHeight}
                 rowHeight={rowHeight}
-                components={{
-                  cellRenderer: CellRenderer,
+                renderers={{
+                  renderCell: (key, props) => <CellRenderer key={key} {...props} />,
                 }}
                 onSelectedCellChange={handleFocusChange}
                 onColumnResize={(idx, width) => columnResize.execute({ column: idx, width })}

diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.m.css b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.m.css
@@ -0,0 +1,26 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.wrapper {
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.container {
+  flex: 1;
+  overflow: hidden;
+}
+
+.menuContainer {
+  width: 25px;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}