@carbon/ibm-products
Version:
Carbon for IBM Products
52 lines (50 loc) • 3.46 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 { deepCloneObject } from "../../../global/js/utils/deepCloneObject.js";
import { getSelectionAreaPoints } from "./getSelectionAreaPoints.js";
import { px } from "@carbon/layout";
//#region src/components/DataSpreadsheet/utils/createCellSelectionArea.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 createCellSelectionArea = ({ ref, area, blockClass, defaultColumn, selectionAreas, setSelectionAreas, setActiveCellInsideSelectionArea, visibleColumns }) => {
const { lowestColumnIndex, lowestRowIndex, greatestColumnIndex, greatestRowIndex } = getSelectionAreaPoints(area);
if (greatestRowIndex - lowestRowIndex > 0 || greatestColumnIndex - lowestColumnIndex > 0) {
setActiveCellInsideSelectionArea(true);
ref.current.querySelector(`.${blockClass}__active-cell--highlight`).setAttribute("data-selection-id", area.matcher);
}
let selectionAreaVariableWidth = 0;
visibleColumns.forEach((item, index) => {
if (index >= lowestColumnIndex && index <= greatestColumnIndex) selectionAreaVariableWidth += item?.width || defaultColumn?.width;
});
const spreadsheetSelector = ref.current ?? document;
const selectionAreaCellHeight = (spreadsheetSelector.querySelector(`[data-row-index="${area.point1.row}"][data-column-index="${area.point1.column}"]`) || spreadsheetSelector.querySelector(`.${blockClass}__body--td`)).offsetHeight;
const selectionAreaTotalHeight = selectionAreaCellHeight * (greatestRowIndex - lowestRowIndex + 1);
const bodyContainer = spreadsheetSelector.querySelector(`.${blockClass}__list--container`).firstElementChild;
const placementElement = bodyContainer.querySelector(`[data-row-index="${lowestRowIndex}"][data-column-index="${lowestColumnIndex}"]`);
const relativePosition = {
top: placementElement ? placementElement.getBoundingClientRect().top - bodyContainer.getBoundingClientRect().top : lowestRowIndex === 0 ? 0 : selectionAreaCellHeight * lowestRowIndex,
left: placementElement ? placementElement.getBoundingClientRect().left - bodyContainer.getBoundingClientRect().left : lowestColumnIndex === 0 ? 0 + (defaultColumn.rowHeaderWidth - 4) : defaultColumn.width * lowestColumnIndex + (defaultColumn.rowHeaderWidth - 4)
};
const selectionAreaElement = (ref ? ref.current.querySelector(`[data-matcher-id="${area.matcher}"]`) : document.querySelector(`[data-matcher-id="${area.matcher}"]`)) || document.createElement("div");
selectionAreaElement.classList.add(`${blockClass}__selection-area--element`);
selectionAreaElement.setAttribute("data-matcher-id", area.matcher);
selectionAreaElement.style.width = px(selectionAreaVariableWidth);
selectionAreaElement.style.height = px(selectionAreaTotalHeight);
selectionAreaElement.style.left = px(relativePosition.left);
selectionAreaElement.style.top = px(relativePosition.top);
bodyContainer.appendChild(selectionAreaElement);
const selectionAreasClone = deepCloneObject(selectionAreas);
const indexOfCurrentArea = selectionAreasClone.findIndex((item) => item.matcher === area.matcher);
selectionAreasClone[indexOfCurrentArea].areaCreated = true;
setSelectionAreas(selectionAreasClone);
};
//#endregion
export { createCellSelectionArea };