@carbon/ibm-products
Version:
Carbon for IBM Products
88 lines (86 loc) • 3.85 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 { usePreviousValue } from "../../../global/js/hooks/usePreviousValue.js";
import { useEffect, useState } from "react";
import { px } from "@carbon/layout";
//#region src/components/DataSpreadsheet/hooks/useSpreadsheetEdit.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 useSpreadsheetEdit = ({ isEditing, rows, activeCellCoordinates, activeCellRef, cellEditorRef, cellEditorRulerRef, visibleColumns, defaultColumn, cellEditorValue, blockClass = `${pkg.prefix}--data-spreadsheet` }) => {
const [nextIndex, setNextIndex] = useState(null);
const previousState = usePreviousValue({ nextIndex });
useEffect(() => {
if (!previousState?.nextIndex) setNextIndex(activeCellCoordinates?.column);
}, [previousState?.nextIndex, activeCellCoordinates]);
useEffect(() => {
const rulerWidth = cellEditorRulerRef.current.offsetWidth;
const cellEditorCurrentWidth = parseInt(cellEditorRef.current.style.width);
if (isEditing) {
const cellProps = rows[activeCellCoordinates?.row]?.cells[activeCellCoordinates?.column];
const activeCellLeftPosition = activeCellRef?.current.style.left;
const activeCellTopPosition = activeCellRef?.current.style.top;
cellEditorRef.current.style.left = activeCellLeftPosition;
cellEditorRef.current.style.top = activeCellTopPosition;
cellEditorRef.current.style.display = "block";
cellEditorRef.current.style.height = activeCellRef?.current.style.height;
cellEditorRef.current.style.paddingTop = `${(parseInt(activeCellRef?.current.style.height) - 16) / 2 - 1}px`;
cellEditorRef.current.style.textAlign = cellProps?.column?.placement === "right" ? "right" : "left";
cellEditorRef.current?.focus();
if (rulerWidth < cellEditorCurrentWidth) {
const currentColumnWidth = visibleColumns[nextIndex]?.width || defaultColumn?.width;
if (rulerWidth < cellEditorCurrentWidth - currentColumnWidth) {
cellEditorRef.current.style.width = px(parseInt(cellEditorRef.current.style.width) - currentColumnWidth);
setNextIndex((prev) => {
if (prev === 0) return prev;
return prev - 1;
});
}
}
if (rulerWidth >= cellEditorCurrentWidth) {
setNextIndex((prev) => {
if (prev === visibleColumns.length - 1) return prev;
return prev + 1;
});
const nextColumnWidth = nextIndex + 1 === visibleColumns.length ? 0 : visibleColumns[nextIndex + 1]?.width || defaultColumn?.width;
const startingRowPosition = activeCellCoordinates?.row;
const totalCellEditorMaxHeight = (rows.length - startingRowPosition) * defaultColumn.rowHeight;
cellEditorRef.current.style.maxHeight = px(totalCellEditorMaxHeight);
cellEditorRef.current.style.width = px(nextColumnWidth + cellEditorCurrentWidth);
cellEditorRef.current.style.height = px(cellEditorRef.current.scrollHeight);
if (cellEditorRef.current.clientHeight === totalCellEditorMaxHeight - 1) cellEditorRef.current.style.overflow = "auto";
else cellEditorRef.current.style.overflow = "hidden";
}
}
if (!isEditing) {
cellEditorRef.current.style.overflow = "hidden";
cellEditorRef.current.style.display = "none";
cellEditorRef.current.blur();
activeCellRef.current.focus();
setNextIndex(activeCellCoordinates?.column);
}
}, [
isEditing,
activeCellCoordinates,
rows,
cellEditorValue,
defaultColumn,
activeCellRef,
cellEditorRef,
cellEditorRulerRef,
visibleColumns,
blockClass,
previousState?.cellEditorValue,
nextIndex
]);
};
//#endregion
export { useSpreadsheetEdit };