@carbon/ibm-products
Version:
Carbon for IBM Products
133 lines (131 loc) • 7.11 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.
*/
require("../../../_virtual/_rolldown/runtime.js");
const require_settings = require("../../../settings.js");
const require_deepCloneObject = require("../../../global/js/utils/deepCloneObject.js");
let react = require("react");
let _carbon_layout = require("@carbon/layout");
//#region src/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.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 useSpreadsheetMouseUp = ({ currentMatcher, setSelectionAreas, selectedHeaderReorderActive, setSelectedHeaderReorderActive, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, blockClass = `${require_settings.pkg.prefix}--data-spreadsheet`, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn, selectionAreas }) => {
(0, react.useEffect)(() => {
const handleMouseUp = (event) => {
if (!ref.current?.contains(event.target)) return;
let isHoldingColumn = false;
if (selectionAreas?.[0]?.header && selectionAreas[0].header.type === "column") isHoldingColumn = true;
if (!validStartingPoint && isHoldingColumn) {
setHeaderCellHoldActive(false);
const selectionAreaElement = ref.current.querySelector(`.${blockClass}__selection-area--element`);
const selectionAreaCloneElement = ref.current.querySelector(`.${blockClass}__selection-area--element-cloned`);
if (!selectionAreaCloneElement) return;
if (selectionAreaCloneElement) {
const closestCell = event.target.closest(`.${blockClass}--interactive-cell-element`);
const newColumnIndex = parseInt?.(closestCell?.getAttribute("data-column-index"));
const originalColumnIndex = parseInt?.(selectionAreaCloneElement?.getAttribute("data-column-index-original"));
const selectionAreaIndexArray = selectionAreas.filter((item) => item?.matcher === currentMatcher)[0].header.selectedIndexList;
if (!ref.current.querySelector(`[data-row-index="header"][data-column-index="${newColumnIndex}"]`)) return;
const selectionAreaToMove = ref.current.querySelector(`[data-matcher-id="${currentMatcher}"]`);
const spreadsheetPosition = ref.current.getBoundingClientRect();
const leftScrollAmount = ref.current.querySelector(`.${blockClass}__list--container`).scrollLeft;
const newIndexLessThanStarting = newColumnIndex < originalColumnIndex;
const newIndexGreater = newColumnIndex > originalColumnIndex;
const differenceBetweenOldNewIndex = newIndexGreater ? newColumnIndex - originalColumnIndex : originalColumnIndex - newColumnIndex;
setSelectionAreas((prev) => {
const selectionAreaClone = require_deepCloneObject.deepCloneObject(prev);
if (originalColumnIndex === newColumnIndex) return prev;
const indexOfItemToUpdate = selectionAreaClone.findIndex((item) => item.matcher === currentMatcher);
if (indexOfItemToUpdate === -1) return prev;
if (!selectionAreaIndexArray.includes(newColumnIndex)) {
const newIndexArray = newIndexGreater ? selectionAreaIndexArray.map((num) => num + differenceBetweenOldNewIndex) : selectionAreaIndexArray.map((num) => num - differenceBetweenOldNewIndex);
selectionAreaClone[indexOfItemToUpdate].header.selectedIndexList = newIndexArray;
selectionAreaClone[indexOfItemToUpdate].point1.column = Math.min(...newIndexArray);
selectionAreaClone[indexOfItemToUpdate].point2.column = Math.max(...newIndexArray);
}
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
return selectionAreaClone;
});
if (!selectionAreaIndexArray.includes(newColumnIndex)) {
const deleteCount = selectionAreaIndexArray.length;
const startIndex = Math.min(...selectionAreaIndexArray);
const columnIdArray = visibleColumns.map((column) => column.id);
const columnIdArrayClone = [...columnIdArray];
const getNewColumnOrder = () => {
const newColumnList = [];
selectionAreaIndexArray.map((index) => {
return newColumnList.push(columnIdArray[index]);
});
return newColumnList;
};
columnIdArrayClone.splice(startIndex, deleteCount);
const updatedNewIndexWithNewOrder = newColumnIndex - selectionAreaIndexArray.findIndex((item) => item === originalColumnIndex);
columnIdArrayClone.splice(updatedNewIndexWithNewOrder, 0, ...getNewColumnOrder());
setColumnOrder(columnIdArrayClone);
setActiveCellCoordinates({
...activeCellCoordinates,
column: newIndexGreater ? activeCellCoordinates.column + differenceBetweenOldNewIndex : activeCellCoordinates.column - differenceBetweenOldNewIndex
});
const newRelativePosition = Array.from(ref.current.querySelectorAll(`.${blockClass}__th--selected-header`))[0].getBoundingClientRect().left - spreadsheetPosition.left + leftScrollAmount;
const updatedSelectionAreaPlacement = newIndexLessThanStarting ? newRelativePosition : newColumnIndex === originalColumnIndex ? selectionAreaToMove.style.left : newRelativePosition;
selectionAreaToMove.style.left = (0, _carbon_layout.px)(updatedSelectionAreaPlacement);
}
ref.current.querySelector(`.${blockClass}__reorder-indicator-line`)?.remove();
selectionAreaCloneElement?.remove();
selectionAreaElement?.classList?.remove(`${blockClass}__selection-area--element`);
setSelectedHeaderReorderActive(false);
}
}
if (validStartingPoint || event.type === "mouseup") {
setClickAndHoldActive(false);
setValidStartingPoint(false);
const cellButton = event.target.closest(`.${blockClass}__body--td`);
if (cellButton) {
const endCellCoordinates = {
row: Number(cellButton.getAttribute("data-row-index")),
column: Number(cellButton.getAttribute("data-column-index"))
};
setSelectionAreas((prev) => {
const selectionAreaClone = require_deepCloneObject.deepCloneObject(prev);
const indexOfItemToUpdate = selectionAreaClone.findIndex((item) => item.matcher === currentMatcher);
if (indexOfItemToUpdate === -1) return prev;
selectionAreaClone[indexOfItemToUpdate].point2 = endCellCoordinates;
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
return selectionAreaClone;
});
}
}
};
document.addEventListener("mouseup", handleMouseUp);
return () => {
document.removeEventListener("mouseup", handleMouseUp);
};
}, [
blockClass,
currentMatcher,
setSelectionAreas,
setClickAndHoldActive,
setValidStartingPoint,
validStartingPoint,
selectedHeaderReorderActive,
setSelectedHeaderReorderActive,
ref,
setHeaderCellHoldActive,
setColumnOrder,
visibleColumns,
setActiveCellCoordinates,
activeCellCoordinates,
rows,
defaultColumn,
selectionAreas
]);
};
//#endregion
exports.useSpreadsheetMouseUp = useSpreadsheetMouseUp;