Revert "FIX: Focusing filter controls does not scroll corresponding g…

…rid (#2328)" This reverts commit 43f0558.
origam · Dec 22, 2023 · 08adf86 · 08adf86
1 parent 784f90e
commit 08adf86
Show file tree

Hide file tree

Showing 5 changed files with 3 additions and 42 deletions.
diff --git a/frontend-html/src/gui/Components/ScreenElements/Table/Scrollee.tsx b/frontend-html/src/gui/Components/ScreenElements/Table/Scrollee.tsx
@@ -21,7 +21,6 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { IScrolleeProps } from "./types";
 import S from "./Scrollee.module.css";
-import { action } from "mobx";
 
 /*
   Component translating its content according to scrollOffsetSource.
@@ -30,25 +29,6 @@ import { action } from "mobx";
 // TODO: Maybe add hideOverflow property to disable content clipping? (or allow some custom class?)
 @observer
 export default class Scrollee extends React.Component<IScrolleeProps> {
-
-  @action.bound
-  handleFocus(event: any)  {
-    const tableElement = event.target.closest(this.props.controlScrollStateSelector);
-    const tableRect = tableElement?.getBoundingClientRect();
-    const targetRect = event.target.getBoundingClientRect();
-    const overLeft = Math.min(0, targetRect.left - tableRect.left);
-    const overRight = Math.max(0, targetRect.right - tableRect?.right);
-    if(overRight) {
-      this.props.scrollOffsetSource.scrollBy({
-        deltaLeft: overRight + (this.props.controlScrollStatePadding?.right || 0)
-      })
-    } else if(overLeft) {
-      this.props.scrollOffsetSource.scrollBy({
-        deltaLeft: overLeft - (this.props.controlScrollStatePadding?.left || 0)
-      })
-    }
-  }
-
   public render() {
     return (
       <div
@@ -58,7 +38,6 @@ export default class Scrollee extends React.Component<IScrolleeProps> {
           height: this.props.height,
           zIndex: this.props.zIndex || 0,
         }}
-        onFocus={this.props.controlScrollStateByFocus ? this.handleFocus : undefined}
       >
         <div
           className={S.scrolleeShifted}

diff --git a/frontend-html/src/gui/Components/ScreenElements/Table/SimpleScrollState.ts b/frontend-html/src/gui/Components/ScreenElements/Table/SimpleScrollState.ts
@@ -34,13 +34,6 @@ export class SimpleScrollState implements IScrollState {
     }
   }
 
-  scrollBy(coords: {deltaLeft?: number; deltaTop?: number}) {
-    this.scrollTo({
-      scrollLeft: coords.deltaLeft !== undefined ? this.scrollLeft + coords.deltaLeft : undefined,
-      scrollTop: coords.deltaTop !== undefined ? this.scrollTop + coords.deltaTop : undefined
-    })
-  }
-
   @observable scrollTop = 0;
   @observable scrollLeft = 0;
 

diff --git a/frontend-html/src/gui/Components/ScreenElements/Table/Table.module.scss b/frontend-html/src/gui/Components/ScreenElements/Table/Table.module.scss
@@ -32,7 +32,7 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
   position: relative;
   width: 100%;
   height: 100%;
-  overflow: clip;
+  overflow: hidden;
 }
 
 .loadingOverlay {

diff --git a/frontend-html/src/gui/Components/ScreenElements/Table/Table.tsx b/frontend-html/src/gui/Components/ScreenElements/Table/Table.tsx
@@ -434,7 +434,7 @@ export class RawTable extends React.Component<ITableProps & { isVisible: boolean
         : undefined;
 
     return (
-      <div className={`${S.table} tableContainer`}>
+      <div className={S.table}>
         {this.props.isLoading && (
           <div className={S.loadingOverlay}>
             <div className={S.loadingIcon}>
@@ -468,9 +468,6 @@ export class RawTable extends React.Component<ITableProps & { isVisible: boolean
                         fixedVert={true}
                         zIndex={100}
                         width={contentRect.bounds!.width - 10 - this.fixedColumnsWidth}
-                        controlScrollStateByFocus={true}
-                        controlScrollStateSelector=".tableContainer"
-                        controlScrollStatePadding={{ left: 40, right: 40 }}
                       >
                         <DragDropContext onDragEnd={(result) => this.onColumnDragEnd(result)}>
                           <Droppable droppableId="headers" direction="horizontal" >

diff --git a/frontend-html/src/gui/Components/ScreenElements/Table/types.ts b/frontend-html/src/gui/Components/ScreenElements/Table/types.ts
@@ -91,8 +91,6 @@ export interface IScrollState extends IScrollOffsetSource, IScrollOffsetTarget {
   scrollToFunction: ((coords: { scrollLeft?: number; scrollTop?: number }) => void) | undefined;
 
   scrollTo(coords: { scrollLeft?: number; scrollTop?: number }): void;
-
-  scrollBy(coords: {deltaLeft?: number; deltaTop?: number}): void;
 }
 
 export interface IScrollOffsetSource {
@@ -186,15 +184,9 @@ export interface IScrolleeProps {
   fixedHoriz?: boolean;
   fixedVert?: boolean;
   zIndex?: number | undefined;
-  scrollOffsetSource: IScrollState;
+  scrollOffsetSource: IScrollOffsetSource;
   offsetLeft?: number;
   offsetTop?: number;
-  controlScrollStateByFocus?: boolean;
-  controlScrollStateSelector?: string;
-  controlScrollStatePadding?: {
-    left: number, 
-    right: number, 
-  }
 }
 
 export interface IHeaderRowProps {