@itwin/itwinui-react 3.0.0-dev.4 → 3.0.0-dev.5

package/esm/core/Table/hooks/useResizeColumns.js

@@ -1,332 +1,398 @@
 import { actions, makePropGetter, useGetLatest } from 'react-table';
 export const useResizeColumns = (ownerDocument) => (hooks) => {
-    hooks.getResizerProps = [defaultGetResizerProps(ownerDocument)];
-    hooks.stateReducers.push(reducer);
-    hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
+  hooks.getResizerProps = [defaultGetResizerProps(ownerDocument)];
+  hooks.stateReducers.push(reducer);
+  hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
 };
 const isTouchEvent = (event) => {
-    return event.type === 'touchstart';
+  return event.type === 'touchstart';
 };
-const defaultGetResizerProps = (ownerDocument) => (props, { instance, header, nextHeader, }) => {
+const defaultGetResizerProps =
+  (ownerDocument) =>
+  (props, { instance, header, nextHeader }) => {
     const { dispatch } = instance;
     const onResizeStart = (e, header) => {
-        // lets not respond to multiple touches (e.g. 2 or 3 fingers)
-        if (isTouchEvent(e) && e.touches && e.touches.length > 1) {
-            return;
-        }
-        const headerIdWidths = getLeafHeaders(header).map((d) => [
-            d.id,
-            getHeaderWidth(d),
-        ]);
-        const nextHeaderIdWidths = nextHeader
-            ? getLeafHeaders(nextHeader).map((d) => [d.id, getHeaderWidth(d)])
-            : [];
-        const clientX = isTouchEvent(e)
-            ? Math.round(e.touches[0].clientX)
-            : e.clientX;
-        const dispatchMove = (clientXPos) => dispatch({ type: actions.columnResizing, clientX: clientXPos });
-        const dispatchEnd = () => dispatch({
-            type: actions.columnDoneResizing,
-        });
-        const handlersAndEvents = {
-            mouse: {
-                moveEvent: 'mousemove',
-                moveHandler: (e) => dispatchMove(e.clientX),
-                upEvent: 'mouseup',
-                upHandler: () => {
-                    ownerDocument.current?.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
-                    ownerDocument.current?.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
-                    ownerDocument.current?.removeEventListener('mouseleave', handlersAndEvents.mouse.upHandler);
-                    dispatchEnd();
-                },
-            },
-            touch: {
-                moveEvent: 'touchmove',
-                moveHandler: (e) => {
-                    if (e.cancelable) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                    }
-                    dispatchMove(e.touches[0].clientX);
-                },
-                upEvent: 'touchend',
-                upHandler: () => {
-                    ownerDocument.current?.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
-                    ownerDocument.current?.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
-                    dispatchEnd();
-                },
-            },
-        };
-        const events = isTouchEvent(e)
-            ? handlersAndEvents.touch
-            : handlersAndEvents.mouse;
-        const passiveIfSupported = passiveEventSupported()
-            ? { passive: false }
-            : false;
-        ownerDocument.current?.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
-        ownerDocument.current?.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
-        if (!isTouchEvent(e)) {
-            ownerDocument.current?.addEventListener('mouseleave', handlersAndEvents.mouse.upHandler, passiveIfSupported);
-        }
+      // lets not respond to multiple touches (e.g. 2 or 3 fingers)
+      if (isTouchEvent(e) && e.touches && e.touches.length > 1) {
+        return;
+      }
+      const headerIdWidths = getLeafHeaders(header).map((d) => [
+        d.id,
+        getHeaderWidth(d),
+      ]);
+      const nextHeaderIdWidths = nextHeader
+        ? getLeafHeaders(nextHeader).map((d) => [d.id, getHeaderWidth(d)])
+        : [];
+      const clientX = isTouchEvent(e)
+        ? Math.round(e.touches[0].clientX)
+        : e.clientX;
+      const dispatchMove = (clientXPos) =>
+        dispatch({ type: actions.columnResizing, clientX: clientXPos });
+      const dispatchEnd = () =>
         dispatch({
-            type: actions.columnStartResizing,
-            columnId: header.id,
-            columnWidth: getHeaderWidth(header),
-            nextColumnWidth: getHeaderWidth(nextHeader),
-            headerIdWidths,
-            nextHeaderIdWidths,
-            clientX,
+          type: actions.columnDoneResizing,
         });
+      const handlersAndEvents = {
+        mouse: {
+          moveEvent: 'mousemove',
+          moveHandler: (e) => dispatchMove(e.clientX),
+          upEvent: 'mouseup',
+          upHandler: () => {
+            ownerDocument.current?.removeEventListener(
+              'mousemove',
+              handlersAndEvents.mouse.moveHandler,
+            );
+            ownerDocument.current?.removeEventListener(
+              'mouseup',
+              handlersAndEvents.mouse.upHandler,
+            );
+            ownerDocument.current?.removeEventListener(
+              'mouseleave',
+              handlersAndEvents.mouse.upHandler,
+            );
+            dispatchEnd();
+          },
+        },
+        touch: {
+          moveEvent: 'touchmove',
+          moveHandler: (e) => {
+            if (e.cancelable) {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+            dispatchMove(e.touches[0].clientX);
+          },
+          upEvent: 'touchend',
+          upHandler: () => {
+            ownerDocument.current?.removeEventListener(
+              handlersAndEvents.touch.moveEvent,
+              handlersAndEvents.touch.moveHandler,
+            );
+            ownerDocument.current?.removeEventListener(
+              handlersAndEvents.touch.upEvent,
+              handlersAndEvents.touch.moveHandler,
+            );
+            dispatchEnd();
+          },
+        },
+      };
+      const events = isTouchEvent(e)
+        ? handlersAndEvents.touch
+        : handlersAndEvents.mouse;
+      const passiveIfSupported = passiveEventSupported()
+        ? { passive: false }
+        : false;
+      ownerDocument.current?.addEventListener(
+        events.moveEvent,
+        events.moveHandler,
+        passiveIfSupported,
+      );
+      ownerDocument.current?.addEventListener(
+        events.upEvent,
+        events.upHandler,
+        passiveIfSupported,
+      );
+      if (!isTouchEvent(e)) {
+        ownerDocument.current?.addEventListener(
+          'mouseleave',
+          handlersAndEvents.mouse.upHandler,
+          passiveIfSupported,
+        );
+      }
+      dispatch({
+        type: actions.columnStartResizing,
+        columnId: header.id,
+        columnWidth: getHeaderWidth(header),
+        nextColumnWidth: getHeaderWidth(nextHeader),
+        headerIdWidths,
+        nextHeaderIdWidths,
+        clientX,
+      });
     };
     return [
-        props,
-        {
-            onClick: (e) => {
-                // Prevents from triggering sort
-                e.stopPropagation();
-            },
-            onMouseDown: (e) => {
-                e.persist();
-                // Prevents from triggering drag'n'drop
-                e.preventDefault();
-                // Prevents from triggering sort
-                e.stopPropagation();
-                onResizeStart(e, header);
-            },
-            onTouchStart: (e) => {
-                e.persist();
-                // Prevents from triggering drag'n'drop
-                e.preventDefault();
-                onResizeStart(e, header);
-            },
-            style: {
-                cursor: 'col-resize',
-            },
-            draggable: false,
-            role: 'separator',
+      props,
+      {
+        onClick: (e) => {
+          // Prevents from triggering sort
+          e.stopPropagation();
+        },
+        onMouseDown: (e) => {
+          e.persist();
+          // Prevents from triggering drag'n'drop
+          e.preventDefault();
+          // Prevents from triggering sort
+          e.stopPropagation();
+          onResizeStart(e, header);
         },
+        onTouchStart: (e) => {
+          e.persist();
+          // Prevents from triggering drag'n'drop
+          e.preventDefault();
+          onResizeStart(e, header);
+        },
+        style: {
+          cursor: 'col-resize',
+        },
+        draggable: false,
+        role: 'separator',
+      },
     ];
-};
+  };
 useResizeColumns.pluginName = 'useResizeColumns';
 const reducer = (newState, action, previousState, instance) => {
-    if (action.type === actions.init) {
-        return {
-            ...newState,
-            columnResizing: {
-                columnWidths: {},
-            },
-        };
-    }
-    if (action.type === actions.resetResize) {
-        return {
-            ...newState,
-            columnResizing: {
-                columnWidths: {},
-            },
-        };
-    }
-    if (action.type === actions.columnStartResizing) {
-        const { clientX, columnId, columnWidth, nextColumnWidth, headerIdWidths, nextHeaderIdWidths, } = action;
-        return {
-            ...newState,
-            columnResizing: {
-                ...newState.columnResizing,
-                startX: clientX,
-                columnWidth,
-                nextColumnWidth,
-                headerIdWidths,
-                nextHeaderIdWidths,
-                isResizingColumn: columnId,
-            },
-        };
-    }
-    if (action.type === actions.columnResizing) {
-        const { clientX } = action;
-        const { startX = 0, columnWidth = 1, nextColumnWidth = 1, headerIdWidths = [], nextHeaderIdWidths = [], } = newState.columnResizing;
-        if (!instance) {
-            return newState;
-        }
-        const deltaX = clientX - startX;
-        const newColumnWidths = getColumnWidths(headerIdWidths, deltaX / columnWidth);
-        const isTableWidthDecreasing = calculateTableWidth(newColumnWidths, instance.flatHeaders) <
-            instance.tableWidth;
-        const newNextColumnWidths = instance?.columnResizeMode === 'fit' ||
-            (instance?.columnResizeMode === 'expand' && isTableWidthDecreasing)
-            ? getColumnWidths(nextHeaderIdWidths, -deltaX / nextColumnWidth)
-            : {};
-        if (!isNewColumnWidthsValid(newColumnWidths, instance.flatHeaders) ||
-            !isNewColumnWidthsValid(newNextColumnWidths, instance.flatHeaders) ||
-            !isNewTableWidthValid({ ...newColumnWidths, ...newNextColumnWidths }, instance)) {
-            return newState;
-        }
-        // Setting `width` here because it might take several rerenders until actual column width is set.
-        // Also setting after the actual resize happened.
-        instance?.flatHeaders.forEach((h) => {
-            if (!h.width) {
-                h.width = h.resizeWidth;
-            }
-        });
-        return {
-            ...newState,
-            columnResizing: {
-                ...newState.columnResizing,
-                columnWidths: {
-                    ...newState.columnResizing.columnWidths,
-                    ...newColumnWidths,
-                    ...newNextColumnWidths,
-                },
-            },
-        };
+  if (action.type === actions.init) {
+    return {
+      ...newState,
+      columnResizing: {
+        columnWidths: {},
+      },
+    };
+  }
+  if (action.type === actions.resetResize) {
+    return {
+      ...newState,
+      columnResizing: {
+        columnWidths: {},
+      },
+    };
+  }
+  if (action.type === actions.columnStartResizing) {
+    const {
+      clientX,
+      columnId,
+      columnWidth,
+      nextColumnWidth,
+      headerIdWidths,
+      nextHeaderIdWidths,
+    } = action;
+    return {
+      ...newState,
+      columnResizing: {
+        ...newState.columnResizing,
+        startX: clientX,
+        columnWidth,
+        nextColumnWidth,
+        headerIdWidths,
+        nextHeaderIdWidths,
+        isResizingColumn: columnId,
+      },
+    };
+  }
+  if (action.type === actions.columnResizing) {
+    const { clientX } = action;
+    const {
+      startX = 0,
+      columnWidth = 1,
+      nextColumnWidth = 1,
+      headerIdWidths = [],
+      nextHeaderIdWidths = [],
+    } = newState.columnResizing;
+    if (!instance) {
+      return newState;
     }
-    if (action.type === actions.columnDoneResizing) {
-        return {
-            ...newState,
-            columnResizing: {
-                ...newState.columnResizing,
-                startX: undefined,
-                isResizingColumn: undefined,
-            },
-        };
+    const deltaX = clientX - startX;
+    const newColumnWidths = getColumnWidths(
+      headerIdWidths,
+      deltaX / columnWidth,
+    );
+    const isTableWidthDecreasing =
+      calculateTableWidth(newColumnWidths, instance.flatHeaders) <
+      instance.tableWidth;
+    const newNextColumnWidths =
+      instance?.columnResizeMode === 'fit' ||
+      (instance?.columnResizeMode === 'expand' && isTableWidthDecreasing)
+        ? getColumnWidths(nextHeaderIdWidths, -deltaX / nextColumnWidth)
+        : {};
+    if (
+      !isNewColumnWidthsValid(newColumnWidths, instance.flatHeaders) ||
+      !isNewColumnWidthsValid(newNextColumnWidths, instance.flatHeaders) ||
+      !isNewTableWidthValid(
+        { ...newColumnWidths, ...newNextColumnWidths },
+        instance,
+      )
+    ) {
+      return newState;
     }
-    return newState;
+    // Setting `width` here because it might take several rerenders until actual column width is set.
+    // Also setting after the actual resize happened.
+    instance?.flatHeaders.forEach((h) => {
+      if (!h.width) {
+        h.width = h.resizeWidth;
+      }
+    });
+    return {
+      ...newState,
+      columnResizing: {
+        ...newState.columnResizing,
+        columnWidths: {
+          ...newState.columnResizing.columnWidths,
+          ...newColumnWidths,
+          ...newNextColumnWidths,
+        },
+      },
+    };
+  }
+  if (action.type === actions.columnDoneResizing) {
+    return {
+      ...newState,
+      columnResizing: {
+        ...newState.columnResizing,
+        startX: undefined,
+        isResizingColumn: undefined,
+      },
+    };
+  }
+  return newState;
 };
 const getColumnWidths = (headerIdWidths, deltaPercentage) => {
-    const columnWidths = {};
-    headerIdWidths.forEach(([headerId, headerWidth]) => {
-        columnWidths[headerId] = Math.max(headerWidth + headerWidth * deltaPercentage, 0);
-    });
-    return columnWidths;
+  const columnWidths = {};
+  headerIdWidths.forEach(([headerId, headerWidth]) => {
+    columnWidths[headerId] = Math.max(
+      headerWidth + headerWidth * deltaPercentage,
+      0,
+    );
+  });
+  return columnWidths;
 };
 const isNewColumnWidthsValid = (columnWidths, headers) => {
-    // Prevents from going outside the column bounds
-    if (Object.values(columnWidths).some((width) => width <= 1)) {
-        return false;
+  // Prevents from going outside the column bounds
+  if (Object.values(columnWidths).some((width) => width <= 1)) {
+    return false;
+  }
+  for (const [headerId, width] of Object.entries(columnWidths)) {
+    const header = headers?.find((h) => h.id === headerId);
+    if (!header) {
+      continue;
     }
-    for (const [headerId, width] of Object.entries(columnWidths)) {
-        const header = headers?.find((h) => h.id === headerId);
-        if (!header) {
-            continue;
-        }
-        const minWidth = header.minWidth || 0;
-        const maxWidth = header.maxWidth || Infinity;
-        if (width < minWidth || width > maxWidth) {
-            return false;
-        }
+    const minWidth = header.minWidth || 0;
+    const maxWidth = header.maxWidth || Infinity;
+    if (width < minWidth || width > maxWidth) {
+      return false;
     }
-    return true;
+  }
+  return true;
 };
 const isNewTableWidthValid = (columnWidths, instance) => {
-    if (instance.columnResizeMode === 'fit') {
-        return true;
-    }
-    let newTableWidth = 0;
-    for (const header of instance.flatHeaders) {
-        newTableWidth += columnWidths[header.id]
-            ? columnWidths[header.id]
-            : getHeaderWidth(header);
-    }
-    // `tableWidth` is whole number therefore we need to round the `newTableWidth`
-    if (Math.round(newTableWidth) < instance.tableWidth) {
-        return false;
-    }
+  if (instance.columnResizeMode === 'fit') {
     return true;
+  }
+  let newTableWidth = 0;
+  for (const header of instance.flatHeaders) {
+    newTableWidth += columnWidths[header.id]
+      ? columnWidths[header.id]
+      : getHeaderWidth(header);
+  }
+  // `tableWidth` is whole number therefore we need to round the `newTableWidth`
+  if (Math.round(newTableWidth) < instance.tableWidth) {
+    return false;
+  }
+  return true;
 };
 const useInstanceBeforeDimensions = (instance) => {
-    const { flatHeaders, getHooks, state: { columnResizing }, columnResizeMode, } = instance;
-    const getInstance = useGetLatest(instance);
-    flatHeaders.forEach((header, index) => {
-        const resizeWidth = columnResizing.columnWidths[header.id];
-        header.width = resizeWidth || header.width || header.originalWidth;
-        header.isResizing = columnResizing.isResizingColumn === header.id;
-        const headerToResize = header.disableResizing && columnResizeMode === 'fit'
-            ? getPreviousResizableHeader(header, instance)
-            : header;
-        // When `columnResizeMode` is `expand` and it is a last column,
-        // then try to find some column on the left side to resize
-        // when table width is decreasing.
-        const nextResizableHeader = columnResizeMode === 'expand' && index === flatHeaders.length - 1
-            ? getPreviousResizableHeader(header, instance)
-            : getNextResizableHeader(header, instance);
-        header.canResize =
-            header.disableResizing != null ? !header.disableResizing : true;
-        // Show resizer when header is resizable or when next header is resizable
-        // and there is resizable columns on the left side of the resizer.
-        if (columnResizeMode === 'fit') {
-            header.isResizerVisible =
-                (header.canResize && !!nextResizableHeader) ||
-                    (headerToResize && !!instance.flatHeaders[index + 1]?.canResize);
-            // When resize mode is `expand` show resizer on the current resizable column.
-        }
-        else {
-            header.isResizerVisible = header.canResize && !!headerToResize;
-        }
-        header.getResizerProps = makePropGetter(getHooks().getResizerProps, {
-            instance: getInstance(),
-            header: headerToResize,
-            nextHeader: nextResizableHeader,
-        });
+  const {
+    flatHeaders,
+    getHooks,
+    state: { columnResizing },
+    columnResizeMode,
+  } = instance;
+  const getInstance = useGetLatest(instance);
+  flatHeaders.forEach((header, index) => {
+    const resizeWidth = columnResizing.columnWidths[header.id];
+    header.width = resizeWidth || header.width || header.originalWidth;
+    header.isResizing = columnResizing.isResizingColumn === header.id;
+    const headerToResize =
+      header.disableResizing && columnResizeMode === 'fit'
+        ? getPreviousResizableHeader(header, instance)
+        : header;
+    // When `columnResizeMode` is `expand` and it is a last column,
+    // then try to find some column on the left side to resize
+    // when table width is decreasing.
+    const nextResizableHeader =
+      columnResizeMode === 'expand' && index === flatHeaders.length - 1
+        ? getPreviousResizableHeader(header, instance)
+        : getNextResizableHeader(header, instance);
+    header.canResize =
+      header.disableResizing != null ? !header.disableResizing : true;
+    // Show resizer when header is resizable or when next header is resizable
+    // and there is resizable columns on the left side of the resizer.
+    if (columnResizeMode === 'fit') {
+      header.isResizerVisible =
+        (header.canResize && !!nextResizableHeader) ||
+        (headerToResize && !!instance.flatHeaders[index + 1]?.canResize);
+      // When resize mode is `expand` show resizer on the current resizable column.
+    } else {
+      header.isResizerVisible = header.canResize && !!headerToResize;
+    }
+    header.getResizerProps = makePropGetter(getHooks().getResizerProps, {
+      instance: getInstance(),
+      header: headerToResize,
+      nextHeader: nextResizableHeader,
     });
+  });
 };
 const getPreviousResizableHeader = (headerColumn, instance) => {
-    const headersList = (headerColumn.parent?.columns || instance.flatHeaders).filter(({ isVisible }) => isVisible);
-    const headerIndex = headersList.findIndex((h) => h.id === headerColumn.id);
-    return [...headersList]
-        .slice(0, headerIndex)
-        .reverse()
-        .find((h) => !h.disableResizing);
+  const headersList = (
+    headerColumn.parent?.columns || instance.flatHeaders
+  ).filter(({ isVisible }) => isVisible);
+  const headerIndex = headersList.findIndex((h) => h.id === headerColumn.id);
+  return [...headersList]
+    .slice(0, headerIndex)
+    .reverse()
+    .find((h) => !h.disableResizing);
 };
 const getNextResizableHeader = (headerColumn, instance) => {
-    const headersList = (headerColumn.parent?.columns || instance.flatHeaders).filter(({ isVisible }) => isVisible);
-    const headerIndex = headersList.findIndex((h) => h.id === headerColumn.id);
-    return [...headersList]
-        .slice(headerIndex + 1)
-        .find((h) => !h.disableResizing);
+  const headersList = (
+    headerColumn.parent?.columns || instance.flatHeaders
+  ).filter(({ isVisible }) => isVisible);
+  const headerIndex = headersList.findIndex((h) => h.id === headerColumn.id);
+  return [...headersList]
+    .slice(headerIndex + 1)
+    .find((h) => !h.disableResizing);
 };
 function getLeafHeaders(header) {
-    const leafHeaders = [];
-    const recurseHeader = (header) => {
-        if (header.columns && header.columns.length) {
-            header.columns.map(recurseHeader);
-        }
-        leafHeaders.push(header);
-    };
-    recurseHeader(header);
-    return leafHeaders;
+  const leafHeaders = [];
+  const recurseHeader = (header) => {
+    if (header.columns && header.columns.length) {
+      header.columns.map(recurseHeader);
+    }
+    leafHeaders.push(header);
+  };
+  recurseHeader(header);
+  return leafHeaders;
 }
 const getHeaderWidth = (header) => {
-    if (!header) {
-        return 0;
-    }
-    return Number(header.width || header.resizeWidth || 0);
+  if (!header) {
+    return 0;
+  }
+  return Number(header.width || header.resizeWidth || 0);
 };
 const calculateTableWidth = (columnWidths, headers) => {
-    let newTableWidth = 0;
-    for (const header of headers) {
-        newTableWidth += columnWidths[header.id]
-            ? columnWidths[header.id]
-            : getHeaderWidth(header);
-    }
-    return newTableWidth;
+  let newTableWidth = 0;
+  for (const header of headers) {
+    newTableWidth += columnWidths[header.id]
+      ? columnWidths[header.id]
+      : getHeaderWidth(header);
+  }
+  return newTableWidth;
 };
 // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#safely_detecting_option_support
 let passiveSupported = null;
 const passiveEventSupported = () => {
-    // memoize support to avoid adding multiple test events
-    if (passiveSupported != null) {
-        return passiveSupported;
-    }
-    try {
-        const options = {
-            once: true,
-            get passive() {
-                passiveSupported = true;
-                return false;
-            },
-        };
-        window.addEventListener('test', () => { }, options);
-    }
-    catch {
-        passiveSupported = false;
-    }
+  // memoize support to avoid adding multiple test events
+  if (passiveSupported != null) {
     return passiveSupported;
+  }
+  try {
+    const options = {
+      once: true,
+      get passive() {
+        passiveSupported = true;
+        return false;
+      },
+    };
+    window.addEventListener('test', () => {}, options);
+  } catch {
+    passiveSupported = false;
+  }
+  return passiveSupported;
 };