replaces parent level hack to a prop passed down from parent.

concord-consortium · Oct 24, 2023 · ceb99f8 · ceb99f8
1 parent c2351cc
commit ceb99f8
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 22 deletions.
diff --git a/src/components/draggable-table-tags.tsx b/src/components/draggable-table-tags.tsx
@@ -85,36 +85,24 @@ interface DraggagleTableDataProps {
   style?: React.CSSProperties;
   isParent?: boolean;
   resizeCounter?: number;
+  parentLevel?: number;
 }
 
 export const DraggagleTableData: React.FC<DraggagleTableDataProps>
-                = ({collectionId, attrTitle, children, isParent, resizeCounter}) => {
+                = ({collectionId, attrTitle, children, isParent, resizeCounter, parentLevel=0}) => {
   const {dragOverId, dragSide} = useDraggableTableContext();
   const {style} = getIdAndStyle(collectionId, attrTitle, dragOverId, dragSide);
   const {tableScrollTop, scrollY} = useTableTopScrollTopContext();
 
   const cellRef = useRef<HTMLTableCellElement | null>(null);
 
-  // HACK!!!
-  let level = 0;
-  if (cellRef.current) {
-    let walker: HTMLElement|null = cellRef.current;
-    while (walker && !walker.classList.contains("tables-portraitTable")) {
-      if (walker.tagName === "TABLE") {
-        level++;
-      }
-      walker = walker.parentElement;
-    }
-  }
-  level = level / 2;
-
   const cellTextTop = useMemo (() =>{
     if (!cellRef.current || !isParent) {
       return 0;
     } else {
       const {top, bottom, height} = cellRef.current.getBoundingClientRect();
       const stickyHeaders = tableScrollTop === 0;
-      const stickyHeaderHeight = (kMinNumHeaders + level) * kCellHeight;
+      const stickyHeaderHeight = (kMinNumHeaders + parentLevel) * kCellHeight;
       const visibleTop = stickyHeaders ?  Math.max(top, stickyHeaderHeight) : top;
       const visibleBottom = Math.min(window.innerHeight, bottom);
       const availableHeight = Math.abs(visibleBottom - visibleTop);
@@ -139,7 +127,7 @@ export const DraggagleTableData: React.FC<DraggagleTableDataProps>
     }
   // resizeCounter is a hack to force rerender of text positioning when window is resized
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tableScrollTop, isParent, scrollY, level, resizeCounter]);
+  }, [tableScrollTop, isParent, scrollY, parentLevel, resizeCounter]);
 
 
   const textStyle: React.CSSProperties = {top: cellTextTop};

diff --git a/src/components/nested-table.tsx b/src/components/nested-table.tsx
@@ -109,7 +109,7 @@ export const NestedTable = (props: IProps) => {
   };
 
   const mapCellsFromValues = (collectionId: number, rowKey: string, values: IValues, isParent?: boolean,
-                              resizeCounter?: number) => {
+                              resizeCounter?: number, parentLevel?: number) => {
     return Object.keys(values).map((key, index) => {
       const val = values[key];
       if (typeof val === "string" || typeof val === "number") {
@@ -120,6 +120,7 @@ export const NestedTable = (props: IProps) => {
             key={`${rowKey}-${val}-${index}}`}
             isParent={isParent}
             resizeCounter={resizeCounter}
+            parentLevel={parentLevel}
           >
             {val}
           </DraggagleTableData>

diff --git a/src/components/portrait-view.tsx b/src/components/portrait-view.tsx
@@ -6,11 +6,12 @@ import { TableScrollTopContext, useTableScrollTop } from "../hooks/useTableScrol
 import css from "./tables.scss";
 
 export type PortraitViewRowProps = {collectionId: number, caseObj: IProcessedCaseObj, index?: null|number,
-                                    isParent: boolean, resizeCounter: number} & ITableProps;
+                                    isParent: boolean, resizeCounter: number, parentLevel?: number}
+                                    & ITableProps;
 
 export const PortraitViewRow = (props: PortraitViewRowProps) => {
   const {paddingStyle, mapCellsFromValues, mapHeadersFromValues, showHeaders,
-          getClassName, collectionId, caseObj, index, isParent, resizeCounter} = props;
+          getClassName, collectionId, caseObj, index, isParent, resizeCounter, parentLevel} = props;
 
   const {children, values} = caseObj;
 
@@ -30,7 +31,7 @@ export const PortraitViewRow = (props: PortraitViewRowProps) => {
           </tr>
         }
         <tr className={`${css[getClassName(caseObj)]} parent-row`}>
-          {mapCellsFromValues(collectionId, `parent-row-${index}`, values, isParent, resizeCounter)}
+          {mapCellsFromValues(collectionId, `parent-row-${index}`, values, isParent, resizeCounter, parentLevel)}
           <DroppableTableData collectionId={collectionId} style={paddingStyle}>
             <DraggableTableContainer collectionId={collectionId}>
               <table style={paddingStyle} className={`${css.subTable} ${css[getClassName(children[0])]}`}>
@@ -41,7 +42,8 @@ export const PortraitViewRow = (props: PortraitViewRowProps) => {
                       collectionId: child.collection.id,
                       caseObj: child,
                       index: i,
-                      isParent
+                      isParent,
+                      parentLevel: parentLevel !== undefined && parentLevel !== null ? parentLevel + 1 : undefined,
                     };
                     if (i === 0 && !child.children.length) {
                       return (
@@ -122,6 +124,7 @@ export const PortraitView = (props: ITableProps) => {
                 index={index}
                 isParent={true}
                 resizeCounter={resizeCounter}
+                parentLevel={0}
               />
             ))}
           </tbody>

diff --git a/src/types.tsx b/src/types.tsx
@@ -56,7 +56,7 @@ export interface ITableProps {
   selectedDataSet: IDataSet,
   collections: Array<ICollection>,
   mapCellsFromValues: (collectionId: number, rowKey: string, values: IValues, isParent?: boolean,
-      resizeCounter?: number) => void,
+      resizeCounter?: number, parentLevel?: number) => void,
   mapHeadersFromValues: (collectionId: number, rowKey: string, values: IValues) => void,
   getValueLength: (firstRow: Array<IValues>) => number
   paddingStyle: Record<string, string>