feat(table): double-click resizes adjacent columns

Double clicking a divider resizes the two adjacent columns.

Created a data-col field to be able to look up the columns from the
ColumnResizerRow component. Then inside columnResizerRow there is a
double-click function on the dividers that resizes the adjecent columns
to the fit the size of their content.

Author: AAntonSB

packages/core/src/Table/ColumnResizerRow.tsx

@@ -97,6 +97,73 @@ const ResizeMarker = styled.div<{
 `
 
 /**
+ * widthLookup
+ *
+ * This lookup returns the size a column would need to
+ * accommodate it's largest element without overflow.
+ */
+const widthLookup = (
+  tableRef: React.RefObject<HTMLDivElement>,
+  separator: number
+): readonly [number, number] => {
+  const column1Elements = tableRef.current?.querySelectorAll(
+    `[data-col="${separator}"]`
+  )
+  let maxColumn1Width = 0
+  for (const el of column1Elements ?? []) {
+    maxColumn1Width = Math.max(
+      maxColumn1Width,
+      el.children[0].getBoundingClientRect().width
+    )
+  }
+
+  const column2Elements = tableRef.current?.querySelectorAll(
+    `[data-col="${separator + 1}"]`
+  )
+  let maxColumn2Width = 0
+  for (const el of column2Elements ?? []) {
+    maxColumn2Width = Math.max(
+      maxColumn2Width,
+      el.children[0].getBoundingClientRect().width
+    )
+  }
+
+  return [
+    maxColumn1Width + TABLE_DIMENSIONS.PADDING_LEFT,
+    maxColumn2Width + TABLE_DIMENSIONS.PADDING_LEFT,
+  ]
+}
+
+interface UpdateWidthsArgs {
+  readonly tableRef: React.RefObject<HTMLDivElement>
+  readonly separator: number
+  readonly currentSizes: ReadonlyArray<number>
+  readonly minColumnWidth: number
+}
+
+const updateWidths = ({
+  tableRef,
+  separator,
+  currentSizes,
+  minColumnWidth,
+}: UpdateWidthsArgs) => {
+  const [col1, col2] = widthLookup(tableRef, separator)
+  const prevCol1 = currentSizes[separator]
+  const prevCol2 = currentSizes[separator + 1]
+
+  const newCol1 = Math.min(Math.max(col1, minColumnWidth), prevCol1)
+  const newCol2 = Math.min(Math.max(col2, minColumnWidth), prevCol2)
+
+  const scaleFactor = (prevCol1 + prevCol2) / (newCol1 + newCol2)
+
+  const newWidths = [...currentSizes]
+  newWidths[separator] = newCol1 * scaleFactor
+  newWidths[separator + 1] = newCol2 * scaleFactor
+
+  return newWidths
+}
+
+/*
  * ColumnResizer
  *
  * A draggable resize handle that will dispatch a new
@@ -108,14 +175,17 @@ interface ColumnResizerProps {
   readonly divider: ColumnDivider
   readonly setDragging: (dragging: boolean) => void
   readonly onDragEnd: (t: readonly [number, number]) => void
+  readonly index: number
 }
 
 const ColumnResizer: React.FunctionComponent<ColumnResizerProps> = ({
   divider,
   setDragging,
   onDragEnd,
+  index,
 }) => {
-  const { minColumnWidth } = useContext(TableContext)
+  const { minColumnWidth, dispatchWidthsAction, columnWidths, tableRef } =
+    useContext(TableContext)
 
   const [[tx], onDragStart, dragging] = useDraggable(onDragEnd)
   const txClipped = clipTranslation(tx, divider, minColumnWidth)
@@ -130,8 +200,25 @@ const ColumnResizer: React.FunctionComponent<ColumnResizerProps> = ({
     }
   }, [dragging, setDragging])
 
+  const optimizeColWidths = useCallback(() => {
+    if (tableRef === undefined) return
+
+    dispatchWidthsAction({
+      type: WidthActionType.UPDATE_WIDTHS,
+      widths: updateWidths({
+        tableRef,
+        separator: index,
+        currentSizes: columnWidths,
+        minColumnWidth,
+      }),
+    })
+  }, [tableRef, minColumnWidth, index, columnWidths, dispatchWidthsAction])
+
   return (
-    <ResizeContainer left={divider.offset + txClipped}>
+    <ResizeContainer
+      onDoubleClick={optimizeColWidths}
+      left={divider.offset + txClipped}
+    >
       <ResizeHandle onPointerDown={onDragStart} />
       <ResizeMarker dragging={dragging} />
     </ResizeContainer>
@@ -215,6 +302,7 @@ export const ColumnResizerRow: React.FunctionComponent<ColumnResizerRowProps> =
             <ColumnResizer
               setDragging={setDragging}
               key={`${i}:${divider.offset}`}
+              index={i}
               divider={divider}
               onDragEnd={dragEndHandlers[i]}
             />

packages/core/src/Table/Table.tsx

@@ -8,7 +8,6 @@ import React, {
   useState,
 } from 'react'
 import styled from 'styled-components'
-
 import { spacing } from '../designparams'
 
 import { ColumnResizerRow } from './ColumnResizerRow'
@@ -168,6 +167,7 @@ const reduceWidths = (state: WidthsState, action: WidthAction): WidthsState => {
  * Example:
  *  [34, 78]
  */
+
 export const useGridTemplateColumns = () => {
   const { columnWidths, selectWidth, menuWidth } = useContext(TableContext)
 
@@ -274,6 +274,8 @@ export interface TableProps extends Omit<BaseProps, 'onSelect'> {
    * Control if columns should be resizeable or not. If true, resize
    * handles will be available to change column width.
    *
+   * For doubleclick functionality to work properly, when you have multiple elements in one cell, wrap them inside a <div>.
+   *
    * @default false
    */
   readonly resizableColumns?: boolean
@@ -409,6 +411,7 @@ export const Table: React.FunctionComponent<TableProps> = React.memo(
             onSelect,
             hasMenu,
             onWidthsChange,
+            tableRef,
           }}
         >
           <TableHeaderContainer>{header}</TableHeaderContainer>

packages/core/src/Table/TableHeader.tsx

@@ -95,7 +95,11 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
         <OverlayContainer>{overlay}</OverlayContainer>
       ) : (
         React.Children.map(children, (cell, i) => {
-          return <TableHeaderCellContent key={i}>{cell}</TableHeaderCellContent>
+          return (
+            <TableHeaderCellContent data-col={i} key={i}>
+              {cell}
+            </TableHeaderCellContent>
+          )
         })
       )}
       {overlay === undefined && hasMenu ? (

packages/core/src/Table/TableRow.tsx

@@ -162,7 +162,11 @@ export const TableRow: React.FC<TableRowProps> = React.memo(
 
     const tableCellContent = useMemo(() => {
       return React.Children.map(children, (cell, cellId) => {
-        return <TableCellContent key={cellId}>{cell}</TableCellContent>
+        return (
+          <TableCellContent data-col={cellId} key={cellId}>
+            {cell}
+          </TableCellContent>
+        )
       })
     }, [children])
 

packages/core/src/Table/__snapshots__/index.test.tsx.snap

@@ -453,6 +453,7 @@ exports[`Tables Table (minimal) 1`] = `
           >
             <div
               className="c5 c6 c7"
+              data-col={0}
             >
               <p
                 className="c8 c9"
@@ -462,6 +463,7 @@ exports[`Tables Table (minimal) 1`] = `
             </div>
             <div
               className="c5 c6 c7"
+              data-col={1}
             >
               <p
                 className="c8 c9"
@@ -471,6 +473,7 @@ exports[`Tables Table (minimal) 1`] = `
             </div>
             <div
               className="c5 c6 c7"
+              data-col={2}
             >
               <p
                 className="c8 c9"

packages/core/src/Table/context.ts

@@ -52,6 +52,7 @@ export const TableContext = createContext<{
   readonly onSelect?: (selected: boolean, id?: string) => void
   readonly hasMenu: boolean
   readonly onWidthsChange?: (widths: ReadonlyArray<number>) => void
+  readonly tableRef?: React.RefObject<HTMLDivElement>
 }>({
   minColumnWidth: 0,
   columnWidths: [],