@itwin/itwinui-react 3.0.4 → 3.0.5

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

@@ -1,398 +1,332 @@
 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 = () =>
+        // 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);
+        }
         dispatch({
-          type: actions.columnDoneResizing,
+            type: actions.columnStartResizing,
+            columnId: header.id,
+            columnWidth: getHeaderWidth(header),
+            nextColumnWidth: getHeaderWidth(nextHeader),
+            headerIdWidths,
+            nextHeaderIdWidths,
+            clientX,
         });
-      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);
+        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',
         },
-        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;
+    if (action.type === actions.init) {
+        return {
+            ...newState,
+            columnResizing: {
+                columnWidths: {},
+            },
+        };
     }
-    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;
+    if (action.type === actions.resetResize) {
+        return {
+            ...newState,
+            columnResizing: {
+                columnWidths: {},
+            },
+        };
     }
-    // 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;
+    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.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;
-  }
-  for (const [headerId, width] of Object.entries(columnWidths)) {
-    const header = headers?.find((h) => h.id === headerId);
-    if (!header) {
-      continue;
+    // Prevents from going outside the column bounds
+    if (Object.values(columnWidths).some((width) => width <= 1)) {
+        return false;
     }
-    const minWidth = header.minWidth || 0;
-    const maxWidth = header.maxWidth || Infinity;
-    if (width < minWidth || width > maxWidth) {
-      return false;
+    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;
+        }
     }
-  }
-  return true;
+    return true;
 };
 const isNewTableWidthValid = (columnWidths, instance) => {
-  if (instance.columnResizeMode === 'fit') {
+    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;
-  }
-  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) {
+    // 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;
-  }
-  try {
-    const options = {
-      once: true,
-      get passive() {
-        passiveSupported = true;
-        return false;
-      },
-    };
-    window.addEventListener('test', () => {}, options);
-  } catch {
-    passiveSupported = false;
-  }
-  return passiveSupported;
 };