@carbon/ibm-products
Version:
Carbon for IBM Products
89 lines (87 loc) • 4.09 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_usePreviousValue = require("../../../global/js/hooks/usePreviousValue.js");
let react = require("react");
let _carbon_layout = require("@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 = `${require_settings.pkg.prefix}--data-spreadsheet` }) => {
const [nextIndex, setNextIndex] = (0, react.useState)(null);
const previousState = require_usePreviousValue.usePreviousValue({ nextIndex });
(0, react.useEffect)(() => {
if (!previousState?.nextIndex) setNextIndex(activeCellCoordinates?.column);
}, [previousState?.nextIndex, activeCellCoordinates]);
(0, react.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 = (0, _carbon_layout.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 = (0, _carbon_layout.px)(totalCellEditorMaxHeight);
cellEditorRef.current.style.width = (0, _carbon_layout.px)(nextColumnWidth + cellEditorCurrentWidth);
cellEditorRef.current.style.height = (0, _carbon_layout.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
exports.useSpreadsheetEdit = useSpreadsheetEdit;