Transaction Table Resize

packages/desktop-client/e2e/transactions.test.js

@@ -50,7 +50,9 @@ test.describe('Transactions', () => {
       await filterTooltip.applyButton.click();
 
       // Assert that there are no transactions
-      await expect(accountPage.transactionTable).toHaveText('No transactions');
+      await expect(accountPage.transactionTable).toContainText(
+        'No transactions',
+      );
       await expect(page).toMatchThemeScreenshots();
     });
 

packages/desktop-client/src/components/ColumnWidthContext.jsx

@@ -0,0 +1,198 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+  useMemo,
+} from 'react';
+
+import { AUTO_SIZE } from 'loot-core/client/constants';
+
+import { useSyncedPref } from '../hooks/useSyncedPref';
+
+const ColumnWidthContext = createContext();
+
+export const ColumnWidthProvider = ({ children, prefName }) => {
+  const [columnSizePrefs, setColumnSizePrefs] = useSyncedPref(prefName);
+  const [columnWidths, setColumnWidths] = useState({});
+  const [fixedSizedColumns, setFixedSizedColumns] = useState({});
+  const positionAccumulatorRef = useRef(0);
+  const [clientWidth, setClientWidth] = useState(0);
+  const [editMode, setEditMode] = useState(false);
+
+  useEffect(() => {
+    if (columnSizePrefs) {
+      setColumnWidths(JSON.parse(columnSizePrefs));
+    }
+  }, [columnSizePrefs]);
+
+  const currentTotalWidth = useMemo(() => {
+    return Object.values(columnWidths).reduce((acc, width) => acc + width, 0);
+  }, [columnWidths]);
+
+  const otherColumnsWidth = useMemo(() => {
+    return Object.entries(fixedSizedColumns)
+      .filter(([key]) => !(key in columnWidths))
+      .reduce((acc, [, width]) => acc + width + 10, 0);
+  }, [fixedSizedColumns, columnWidths]);
+
+  const totalWidth = useCallback(() => {
+    const widthSum = otherColumnsWidth + currentTotalWidth + 10;
+    return widthSum > clientWidth ? widthSum : clientWidth;
+  }, [currentTotalWidth, otherColumnsWidth, clientWidth]);
+
+  const savePrefs = useCallback(
+    value => {
+      setColumnSizePrefs(JSON.stringify(value ?? columnWidths));
+    },
+    [columnWidths, setColumnSizePrefs],
+  );
+
+  const removeColumn = columnName => {
+    const { [columnName]: _, ...newObj } = columnWidths;
+    setColumnWidths(newObj);
+    savePrefs(newObj);
+  };
+
+  const resetAllColumns = () => {
+    setColumnWidths({});
+    savePrefs({});
+  };
+
+  const handleDoubleClick = columnName => {
+    updateColumnWidth(columnName, -1);
+
+    setTimeout(() => {
+      let maximum = -1;
+      document
+        .querySelectorAll(`[data-resizeable-column=${columnName}]`)
+        .forEach(row => {
+          const rect = row.getBoundingClientRect();
+          const styles = getComputedStyle(row);
+          const localValue = Math.max(
+            rect.width +
+              parseFloat(styles.marginLeft) +
+              parseFloat(styles.marginRight),
+            110,
+          );
+
+          maximum = Math.max(localValue, maximum);
+        });
+
+      const newObj = updateColumnWidth(columnName, maximum);
+
+      savePrefs(newObj);
+    }, 100);
+  };
+
+  const getViewportWidth = useCallback(() => clientWidth, [clientWidth]);
+
+  const updateColumnWidth = useCallback(
+    (columnName, accumulatedDelta) => {
+      const existingColumnWidth = columnWidths[columnName] || 0;
+      const newWidth = accumulatedDelta;
+
+      if (newWidth === AUTO_SIZE) {
+        const newObj = {
+          ...columnWidths,
+          [columnName]: newWidth,
+        };
+        setColumnWidths(newObj);
+        return newObj;
+      }
+
+      const currentTotalWidth = Object.values(columnWidths).reduce(
+        (acc, width) => acc + width,
+        0,
+      );
+      const otherColumnsWidth = Object.values(fixedSizedColumns).reduce(
+        (acc, width) => acc + width + 10,
+        0,
+      );
+
+      const proposedTotalWidth =
+        currentTotalWidth - existingColumnWidth + newWidth + otherColumnsWidth;
+
+      const viewportWidth = getViewportWidth();
+      const adjustedWidth =
+        proposedTotalWidth > viewportWidth
+          ? viewportWidth - otherColumnsWidth
+          : newWidth;
+
+      const newObj = {
+        ...columnWidths,
+        [columnName]: Math.max(adjustedWidth, 110),
+      };
+
+      setColumnWidths(newObj);
+
+      return newObj;
+    },
+    [columnWidths, fixedSizedColumns, getViewportWidth],
+  );
+
+  const handleMoveProps = (columnName, ref, resizerRef) => {
+    const updatePosition = deltaX => {
+      positionAccumulatorRef.current += deltaX;
+      updateColumnWidth(columnName, positionAccumulatorRef.current);
+    };
+
+    return {
+      onMoveStart() {
+        if (resizerRef.current) {
+          resizerRef.current.classList.add('dragging');
+          let columnWidth = columnWidths[columnName];
+          if (!columnWidth) {
+            const rect = ref.getBoundingClientRect();
+            columnWidth = rect.width;
+          }
+          const startWidth = columnWidth;
+          positionAccumulatorRef.current = startWidth;
+        }
+      },
+      onMove(e) {
+        if (resizerRef.current) {
+          updatePosition(e.deltaX);
+        }
+      },
+      onMoveEnd() {
+        savePrefs();
+        if (resizerRef.current) {
+          resizerRef.current.classList.remove('dragging');
+        }
+        positionAccumulatorRef.current = 0;
+      },
+    };
+  };
+
+  return (
+    <ColumnWidthContext.Provider
+      value={{
+        columnWidths,
+        handleMoveProps,
+        setFixedSizedColumns,
+        handleDoubleClick,
+        totalWidth,
+        removeColumn,
+        clientWidth,
+        setClientWidth,
+        resetAllColumns,
+        editMode,
+        setEditMode,
+        fixedSizedColumns,
+      }}
+    >
+      {children}
+    </ColumnWidthContext.Provider>
+  );
+};
+
+export const useColumnWidth = () => {
+  const context = useContext(ColumnWidthContext);
+  if (!context) {
+    throw new Error('useColumnWidth must be used within a ColumnWidthProvider');
+  }
+  return context;
+};

packages/desktop-client/src/components/FixedSizeList.tsx

@@ -45,20 +45,23 @@ type FixedSizeListProps = {
     scrollDirection: FixedSizeListState['scrollDirection'];
     scrollOffset: FixedSizeListState['scrollOffset'];
     scrollUpdateWasRequested: FixedSizeListState['scrollUpdateWasRequested'];
+    scrollLeftOffset: FixedSizeListState['scrollLeftOffset'];
   }) => void;
   indexForKey?: (key: string | number) => number;
   height?: number;
   width?: number;
   header?: ReactNode;
   innerRef?: Ref<HTMLDivElement>;
   itemKey?: (index: number) => string | number;
+  totalWidth?: number;
 };
 
 type FixedSizeListState = {
   isScrolling: boolean;
   scrollDirection: 'forward' | 'backward';
   scrollOffset: number;
   scrollUpdateWasRequested: boolean;
+  scrollLeftOffset: number;
 };
 
 export class FixedSizeList extends PureComponent<
@@ -103,6 +106,7 @@ export class FixedSizeList extends PureComponent<
           ? this.props.initialScrollOffset
           : 0,
       scrollUpdateWasRequested: false,
+      scrollLeftOffset: 0,
     };
   }
 
@@ -203,6 +207,7 @@ export class FixedSizeList extends PureComponent<
       itemKey = defaultItemKey,
       useIsScrolling,
       width,
+      totalWidth,
     } = this.props;
     const { isScrolling } = this.state;
 
@@ -256,7 +261,7 @@ export class FixedSizeList extends PureComponent<
         style={{
           height,
           width,
-          overflow: 'hidden auto',
+          overflow: 'visible auto',
         }}
       >
         <View>{header}</View>
@@ -265,7 +270,7 @@ export class FixedSizeList extends PureComponent<
           style={{
             position: 'relative',
             height: estimatedTotalSize,
-            width: '100%',
+            width: `${Math.max(totalWidth || 0, width || 0)}px`,
             pointerEvents: isScrolling ? 'none' : undefined,
           }}
         >
@@ -412,11 +417,17 @@ export class FixedSizeList extends PureComponent<
   );
 
   _callOnScroll = memoizeOne(
-    (scrollDirection, scrollOffset, scrollUpdateWasRequested) =>
+    (
+      scrollDirection,
+      scrollOffset,
+      scrollUpdateWasRequested,
+      scrollLeftOffset,
+    ) =>
       this.props.onScroll({
         scrollDirection,
         scrollOffset,
         scrollUpdateWasRequested,
+        scrollLeftOffset,
       }),
   );
 
@@ -440,12 +451,17 @@ export class FixedSizeList extends PureComponent<
     }
 
     if (typeof this.props.onScroll === 'function') {
-      const { scrollDirection, scrollOffset, scrollUpdateWasRequested } =
-        this.state;
+      const {
+        scrollDirection,
+        scrollOffset,
+        scrollUpdateWasRequested,
+        scrollLeftOffset,
+      } = this.state;
       this._callOnScroll(
         scrollDirection,
         scrollOffset,
         scrollUpdateWasRequested,
+        scrollLeftOffset,
       );
     }
   }
@@ -522,24 +538,41 @@ export class FixedSizeList extends PureComponent<
   }
 
   _onScrollVertical = (event: UIEvent<HTMLDivElement>) => {
-    const { scrollTop } = event.currentTarget;
+    const { scrollTop, scrollLeft } = event.currentTarget;
 
     this.setState(prevState => {
-      if (prevState.scrollOffset === scrollTop) {
+      if (
+        prevState.scrollOffset === scrollTop &&
+        prevState.scrollLeftOffset === scrollLeft
+      ) {
         // Scroll position may have been updated by cDM/cDU,
         // In which case we don't need to trigger another render,
         // And we don't want to update state.isScrolling.
         return null;
       }
+      const newState = {
+        isScrolling: scrollTop !== prevState.scrollOffset,
+        scrollDirection:
+          prevState.scrollOffset < scrollTop ? 'forward' : 'backward',
+        scrollOffset: scrollTop,
+        scrollUpdateWasRequested: false,
+        scrollLeftOffset: scrollLeft,
+      };
 
-      const scrollOffset = scrollTop;
+      this._callOnScroll(
+        newState.scrollDirection,
+        newState.scrollOffset,
+        newState.scrollUpdateWasRequested,
+        newState.scrollLeftOffset,
+      );
 
       return {
-        isScrolling: true,
+        isScrolling: scrollTop !== prevState.scrollOffset,
         scrollDirection:
-          prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
-        scrollOffset,
+          prevState.scrollOffset < scrollTop ? 'forward' : 'backward',
+        scrollOffset: scrollTop,
         scrollUpdateWasRequested: false,
+        scrollLeftOffset: scrollLeft,
       };
     }, this._resetIsScrollingDebounced);
   };

packages/desktop-client/src/components/Resizer.css

@@ -0,0 +1,32 @@
+.resizer-container {
+  position: relative;
+  width: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  z-index: 1500;
+}
+
+.resizer-container-enabled {
+  cursor: col-resize;
+}
+
+.resizer-container-enabled::before {
+  content: '';
+  display: block;
+  width: 2px;
+  height: 80%;
+  background-color: inherit;
+  border-radius: 2px;
+  box-shadow: inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.7),
+              inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.7);
+  transition: box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+.resizer-container-enabled:hover::before {
+  box-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1),
+              -0.5px -0.5px 1px rgba(255, 255, 255, 0.1);
+  background-color: rgba(0, 0, 0, 0.05);
+}