@carbon/ibm-products/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

var React = require('react');
var layout = require('@carbon/layout');
var settings = require('../../../settings.js');
var moveColumnIndicatorLine = require('../utils/moveColumnIndicatorLine.js');

// Used specifically for reordering columns, will move the position of the
// cloned selection area to follow the position of the cursor
const useSpreadsheetMouseMove = _ref => {
  let {
    ref,
    blockClass = `${settings.pkg.prefix}--data-spreadsheet`,
    headerCellHoldActive,
    defaultColumn
  } = _ref;
  React.useEffect(() => {
    const handleMouseMove = event => {
      const clonedSelectionElement = ref.current.querySelector(`.${blockClass}__selection-area--element-cloned`);
      if (clonedSelectionElement) {
        ref.current.addEventListener('mousemove', handleMouseMove);
      }
      const spreadsheetCoords = ref.current.getBoundingClientRect();
      const listContainer = ref.current.querySelector(`.${blockClass}__list--container`);
      const scrollAmount = listContainer.scrollLeft;
      moveColumnIndicatorLine.moveColumnIndicatorLine({
        clonedSelectionElement,
        ref,
        spreadsheetCoords,
        leftScrollAmount: scrollAmount
      });
      const spreadsheetWrapperElement = ref.current;
      spreadsheetWrapperElement.getBoundingClientRect();
      const xPositionRelativeToSpreadsheet = event.clientX - spreadsheetCoords.left;
      const offsetXValue = clonedSelectionElement?.getAttribute('data-clone-offset-x');
      const totalSpreadsheetScrollingWidth = listContainer.scrollWidth;
      const clonedSelectionWidth = clonedSelectionElement.offsetWidth;
      const clonePlacement = Math.max(xPositionRelativeToSpreadsheet - offsetXValue, defaultColumn?.rowHeaderWidth);
      const leftPosition = totalSpreadsheetScrollingWidth - clonedSelectionWidth >= clonePlacement ? clonePlacement + scrollAmount : totalSpreadsheetScrollingWidth - clonedSelectionWidth;
      // Moves the position of the cloned selection area to follow mouse, and
      // add the amount horizontally scrolled
      if (leftPosition < spreadsheetCoords.right - 40) {
        clonedSelectionElement.style.left = layout.px(leftPosition);
      }
    };
    if (headerCellHoldActive) {
      ref.current.addEventListener('mousemove', handleMouseMove);
    }
    const spreadsheetRef = ref.current;
    if (!headerCellHoldActive) {
      spreadsheetRef?.removeEventListener('mousemove', handleMouseMove);
    }
    return () => {
      spreadsheetRef?.removeEventListener('mousemove', handleMouseMove);
    };
  });
};

exports.useSpreadsheetMouseMove = useSpreadsheetMouseMove;