@carbon/ibm-products
Version:
Carbon for IBM Products
52 lines (50 loc) • 2.47 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { pkg } from "../../../settings.js";
import { moveColumnIndicatorLine } from "../utils/moveColumnIndicatorLine.js";
import { useEffect } from "react";
import { px } from "@carbon/layout";
//#region src/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js
/**
* Copyright IBM Corp. 2022, 2022
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const useSpreadsheetMouseMove = ({ ref, blockClass = `${pkg.prefix}--data-spreadsheet`, headerCellHoldActive, defaultColumn }) => {
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({
clonedSelectionElement,
ref,
spreadsheetCoords,
leftScrollAmount: scrollAmount
});
ref.current.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;
if (leftPosition < spreadsheetCoords.right - 40) clonedSelectionElement.style.left = px(leftPosition);
};
if (headerCellHoldActive) ref.current.addEventListener("mousemove", handleMouseMove);
const spreadsheetRef = ref.current;
if (!headerCellHoldActive) spreadsheetRef?.removeEventListener("mousemove", handleMouseMove);
return () => {
spreadsheetRef?.removeEventListener("mousemove", handleMouseMove);
};
});
};
//#endregion
export { useSpreadsheetMouseMove };