Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-data-grid-temp

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-data-grid-temp - npm Package Compare versions

Comparing version 7.0.0-canary.17.1 to 7.0.0-canary.18

39

lib/Cell.js

@@ -0,11 +1,34 @@

var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { forwardRef, memo } from 'react';
import clsx from 'clsx';
import { preventDefault, wrapEvent } from './utils';
function Cell({ className, column, isRowSelected, lastFrozenColumnIndex, row, rowIdx, eventBus, onRowClick, onClick, onDoubleClick, onContextMenu, onDragOver, style, ...props }, ref) {
function Cell(_a, ref) {
var className = _a.className, column = _a.column, isRowSelected = _a.isRowSelected, lastFrozenColumnIndex = _a.lastFrozenColumnIndex, row = _a.row, rowIdx = _a.rowIdx, eventBus = _a.eventBus, onRowClick = _a.onRowClick, onClick = _a.onClick, onDoubleClick = _a.onDoubleClick, onContextMenu = _a.onContextMenu, onDragOver = _a.onDragOver, style = _a.style, props = __rest(_a, ["className", "column", "isRowSelected", "lastFrozenColumnIndex", "row", "rowIdx", "eventBus", "onRowClick", "onClick", "onDoubleClick", "onContextMenu", "onDragOver", "style"]);
function selectCell(openEditor) {
eventBus.dispatch('SELECT_CELL', { idx: column.idx, rowIdx }, openEditor);
eventBus.dispatch('SELECT_CELL', { idx: column.idx, rowIdx: rowIdx }, openEditor);
}
function handleCellClick() {
selectCell();
onRowClick?.(rowIdx, row, column);
onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(rowIdx, row, column);
}

@@ -19,5 +42,5 @@ function handleCellContextMenu() {

function onRowSelectionChange(checked, isShiftClick) {
eventBus.dispatch('SELECT_ROW', { rowIdx, checked, isShiftClick });
eventBus.dispatch('SELECT_ROW', { rowIdx: rowIdx, checked: checked, isShiftClick: isShiftClick });
}
const { cellClass } = column;
var cellClass = column.cellClass;
className = clsx('rdg-cell', {

@@ -27,7 +50,3 @@ 'rdg-cell-frozen': column.frozen,

}, typeof cellClass === 'function' ? cellClass(row) : cellClass, className);
return (React.createElement("div", Object.assign({ ref: ref, className: className, style: {
...style,
width: column.width,
left: column.left
}, onClick: wrapEvent(handleCellClick, onClick), onDoubleClick: wrapEvent(handleCellDoubleClick, onDoubleClick), onContextMenu: wrapEvent(handleCellContextMenu, onContextMenu), onDragOver: wrapEvent(preventDefault, onDragOver) }, props),
return (React.createElement("div", __assign({ ref: ref, className: className, style: __assign(__assign({}, style), { width: column.width, left: column.left }), onClick: wrapEvent(handleCellClick, onClick), onDoubleClick: wrapEvent(handleCellDoubleClick, onDoubleClick), onContextMenu: wrapEvent(handleCellContextMenu, onContextMenu), onDragOver: wrapEvent(preventDefault, onDragOver) }, props),
React.createElement(column.formatter, { column: column, rowIdx: rowIdx, row: row, isRowSelected: isRowSelected, onRowSelectionChange: onRowSelectionChange })));

@@ -34,0 +53,0 @@ }

6

lib/Columns.js

@@ -5,3 +5,3 @@ import React from 'react';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const SelectColumn = {
export var SelectColumn = {
key: 'select-row',

@@ -12,6 +12,6 @@ name: '',

frozen: true,
headerRenderer(props) {
headerRenderer: function (props) {
return (React.createElement(SelectCellFormatter, { value: props.allRowsSelected, onChange: props.onAllRowsSelectionChange }));
},
formatter(props) {
formatter: function (props) {
return (React.createElement(SelectCellFormatter, { value: props.isRowSelected, onChange: props.onRowSelectionChange }));

@@ -18,0 +18,0 @@ }

191

lib/DataGrid.js

@@ -0,1 +1,17 @@

var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import React, { forwardRef, useState, useRef, useMemo, useLayoutEffect, useEffect, useImperativeHandle, useCallback, createElement } from 'react';

@@ -18,60 +34,68 @@ import EventBus from './EventBus';

*/
function DataGrid({
// Grid and data Props
columns: rawColumns, rows, summaryRows, rowKey, onRowsUpdate,
// Dimensions props
width, height = 350, minColumnWidth = 80, rowHeight = 35, headerRowHeight = rowHeight, headerFiltersHeight = 45,
// Feature props
selectedRows, onSelectedRowsChange, sortColumn, sortDirection, onSort, filters, onFiltersChange,
// Custom renderers
defaultFormatter = ValueFormatter, rowRenderer: RowRenderer = Row, emptyRowsRenderer,
// Event props
onRowClick, onScroll, onColumnResize, onSelectedCellChange, onCheckCellIsEditable, onKeyboard,
// Toggles and modes
enableFilters = false, enableCellAutoFocus = true, enableCellCopyPaste = false, enableCellDragAndDrop = false, cellNavigationMode = CellNavigationMode.NONE,
// Miscellaneous
editorPortalTarget = document.body, rowClass }, ref) {
function DataGrid(_a, ref) {
var _b;
var
// Grid and data Props
rawColumns = _a.columns, rows = _a.rows, summaryRows = _a.summaryRows, rowKey = _a.rowKey, onRowsUpdate = _a.onRowsUpdate,
// Dimensions props
width = _a.width, _c = _a.height, height = _c === void 0 ? 350 : _c, _d = _a.minColumnWidth, minColumnWidth = _d === void 0 ? 80 : _d, _e = _a.rowHeight, rowHeight = _e === void 0 ? 35 : _e, _f = _a.headerRowHeight, headerRowHeight = _f === void 0 ? rowHeight : _f, _g = _a.headerFiltersHeight, headerFiltersHeight = _g === void 0 ? 45 : _g,
// Feature props
selectedRows = _a.selectedRows, onSelectedRowsChange = _a.onSelectedRowsChange, sortColumn = _a.sortColumn, sortDirection = _a.sortDirection, onSort = _a.onSort, filters = _a.filters, onFiltersChange = _a.onFiltersChange,
// Custom renderers
_h = _a.defaultFormatter,
// Custom renderers
defaultFormatter = _h === void 0 ? ValueFormatter : _h, _j = _a.rowRenderer, RowRenderer = _j === void 0 ? Row : _j, emptyRowsRenderer = _a.emptyRowsRenderer,
// Event props
onRowClick = _a.onRowClick, onScroll = _a.onScroll, onColumnResize = _a.onColumnResize, onSelectedCellChange = _a.onSelectedCellChange, onCheckCellIsEditable = _a.onCheckCellIsEditable, onKeyboard = _a.onKeyboard,
// Toggles and modes
_k = _a.enableFilters,
// Toggles and modes
enableFilters = _k === void 0 ? false : _k, _l = _a.enableCellAutoFocus, enableCellAutoFocus = _l === void 0 ? true : _l, _m = _a.enableCellCopyPaste, enableCellCopyPaste = _m === void 0 ? false : _m, _o = _a.enableCellDragAndDrop, enableCellDragAndDrop = _o === void 0 ? false : _o, _p = _a.cellNavigationMode, cellNavigationMode = _p === void 0 ? CellNavigationMode.NONE : _p,
// Miscellaneous
_q = _a.editorPortalTarget,
// Miscellaneous
editorPortalTarget = _q === void 0 ? document.body : _q, rowClass = _a.rowClass;
/**
* refs
* */
const gridRef = useRef(null);
const lastSelectedRowIdx = useRef(-1);
var gridRef = useRef(null);
var lastSelectedRowIdx = useRef(-1);
/**
* states
*/
const [eventBus] = useState(() => new EventBus());
const [gridWidth, setGridWidth] = useState(0);
const [scrollTop, setScrollTop] = useState(0);
const [scrollLeft, setScrollLeft] = useState(0);
const [columnWidths, setColumnWidths] = useState(() => new Map());
var _r = __read(useState(function () { return new EventBus(); }), 1), eventBus = _r[0];
var _s = __read(useState(0), 2), gridWidth = _s[0], setGridWidth = _s[1];
var _t = __read(useState(0), 2), scrollTop = _t[0], setScrollTop = _t[1];
var _u = __read(useState(0), 2), scrollLeft = _u[0], setScrollLeft = _u[1];
var _v = __read(useState(function () { return new Map(); }), 2), columnWidths = _v[0], setColumnWidths = _v[1];
/**
* computed values
*/
const viewportWidth = (width || gridWidth) - 2; // 2 for border width;
const { columns, lastFrozenColumnIndex, totalColumnWidth } = useMemo(() => {
var viewportWidth = (width || gridWidth) - 2; // 2 for border width;
var _w = useMemo(function () {
return getColumnMetrics({
columns: rawColumns,
minColumnWidth,
viewportWidth,
columnWidths,
defaultFormatter
minColumnWidth: minColumnWidth,
viewportWidth: viewportWidth,
columnWidths: columnWidths,
defaultFormatter: defaultFormatter
});
}, [columnWidths, rawColumns, defaultFormatter, minColumnWidth, viewportWidth]);
const [colOverscanStartIdx, colOverscanEndIdx] = useMemo(() => {
}, [columnWidths, rawColumns, defaultFormatter, minColumnWidth, viewportWidth]), columns = _w.columns, lastFrozenColumnIndex = _w.lastFrozenColumnIndex, totalColumnWidth = _w.totalColumnWidth;
var _x = __read(useMemo(function () {
return getHorizontalRangeToRender(columns, lastFrozenColumnIndex, viewportWidth, scrollLeft);
}, [scrollLeft, columns, lastFrozenColumnIndex, viewportWidth]);
const viewportColumns = useMemo(() => {
}, [scrollLeft, columns, lastFrozenColumnIndex, viewportWidth]), 2), colOverscanStartIdx = _x[0], colOverscanEndIdx = _x[1];
var viewportColumns = useMemo(function () {
return getViewportColumns(columns, colOverscanStartIdx, colOverscanEndIdx);
}, [colOverscanEndIdx, colOverscanStartIdx, columns]);
const totalHeaderHeight = headerRowHeight + (enableFilters ? headerFiltersHeight : 0);
const clientHeight = height
var totalHeaderHeight = headerRowHeight + (enableFilters ? headerFiltersHeight : 0);
var clientHeight = height
- 2 // border width
- totalHeaderHeight
- (summaryRows?.length ?? 0) * rowHeight
- ((_b = summaryRows === null || summaryRows === void 0 ? void 0 : summaryRows.length) !== null && _b !== void 0 ? _b : 0) * rowHeight
- (totalColumnWidth > viewportWidth ? getScrollbarSize() : 0);
const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(clientHeight, rowHeight, scrollTop, rows.length);
var _y = __read(getVerticalRangeToRender(clientHeight, rowHeight, scrollTop, rows.length), 2), rowOverscanStartIdx = _y[0], rowOverscanEndIdx = _y[1];
/**
* effects
*/
useLayoutEffect(() => {
useLayoutEffect(function () {
// Do not calculate the width if width is provided

@@ -86,20 +110,21 @@ if (typeof width === 'number')

window.addEventListener('resize', onResize);
return () => {
return function () {
window.removeEventListener('resize', onResize);
};
}, [width]);
useEffect(() => {
useEffect(function () {
if (!onSelectedRowsChange)
return;
const handleRowSelectionChange = ({ rowIdx, checked, isShiftClick }) => {
var handleRowSelectionChange = function (_a) {
var rowIdx = _a.rowIdx, checked = _a.checked, isShiftClick = _a.isShiftClick;
assertIsValidKey(rowKey);
const newSelectedRows = new Set(selectedRows);
const rowId = rows[rowIdx][rowKey];
var newSelectedRows = new Set(selectedRows);
var rowId = rows[rowIdx][rowKey];
if (checked) {
newSelectedRows.add(rowId);
const previousRowIdx = lastSelectedRowIdx.current;
var previousRowIdx = lastSelectedRowIdx.current;
lastSelectedRowIdx.current = rowIdx;
if (isShiftClick && previousRowIdx !== -1 && previousRowIdx !== rowIdx) {
const step = Math.sign(rowIdx - previousRowIdx);
for (let i = previousRowIdx + step; i !== rowIdx; i += step) {
var step = Math.sign(rowIdx - previousRowIdx);
for (var i = previousRowIdx + step; i !== rowIdx; i += step) {
newSelectedRows.add(rows[i][rowKey]);

@@ -117,8 +142,8 @@ }

}, [eventBus, onSelectedRowsChange, rows, rowKey, selectedRows]);
useImperativeHandle(ref, () => ({
scrollToColumn(idx) {
scrollToCell({ idx });
useImperativeHandle(ref, function () { return ({
scrollToColumn: function (idx) {
scrollToCell({ idx: idx });
},
scrollToRow(rowIdx) {
const { current } = gridRef;
scrollToRow: function (rowIdx) {
var current = gridRef.current;
if (!current)

@@ -128,6 +153,6 @@ return;

},
selectCell(position, openEditor) {
selectCell: function (position, openEditor) {
eventBus.dispatch('SELECT_CELL', position, openEditor);
}
}));
}); });
/**

@@ -137,15 +162,15 @@ * event handlers

function onGridScroll(event) {
const { scrollTop, scrollLeft } = event.currentTarget;
var _a = event.currentTarget, scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
setScrollTop(scrollTop);
setScrollLeft(scrollLeft);
onScroll?.(event);
onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
}
const handleColumnResize = useCallback((column, width) => {
const newColumnWidths = new Map(columnWidths);
var handleColumnResize = useCallback(function (column, width) {
var newColumnWidths = new Map(columnWidths);
newColumnWidths.set(column.key, width);
setColumnWidths(newColumnWidths);
onColumnResize?.(column.idx, width);
onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize(column.idx, width);
}, [columnWidths, onColumnResize]);
function handleRowsUpdate(event) {
onRowsUpdate?.(event);
onRowsUpdate === null || onRowsUpdate === void 0 ? void 0 : onRowsUpdate(event);
}

@@ -158,16 +183,17 @@ /**

return 0;
const lastFrozenCol = columns[lastFrozenColumnIndex];
var lastFrozenCol = columns[lastFrozenColumnIndex];
return lastFrozenCol.left + lastFrozenCol.width;
}
function scrollToCell({ idx, rowIdx }) {
const { current } = gridRef;
function scrollToCell(_a) {
var idx = _a.idx, rowIdx = _a.rowIdx;
var current = gridRef.current;
if (!current)
return;
if (typeof idx === 'number' && idx > lastFrozenColumnIndex) {
const { clientWidth } = current;
const { left, width } = columns[idx];
const isCellAtLeftBoundary = left < scrollLeft + width + getFrozenColumnsWidth();
const isCellAtRightBoundary = left + width > clientWidth + scrollLeft;
var clientWidth = current.clientWidth;
var _b = columns[idx], left = _b.left, width_1 = _b.width;
var isCellAtLeftBoundary = left < scrollLeft + width_1 + getFrozenColumnsWidth();
var isCellAtRightBoundary = left + width_1 > clientWidth + scrollLeft;
if (isCellAtLeftBoundary || isCellAtRightBoundary) {
const newScrollLeft = getColumnScrollPosition(columns, idx, scrollLeft, clientWidth);
var newScrollLeft = getColumnScrollPosition(columns, idx, scrollLeft, clientWidth);
current.scrollLeft = scrollLeft + newScrollLeft;

@@ -188,10 +214,11 @@ }

function getViewportRows() {
const rowElements = [];
for (let rowIdx = rowOverscanStartIdx; rowIdx <= rowOverscanEndIdx; rowIdx++) {
const row = rows[rowIdx];
let key = rowIdx;
let isRowSelected = false;
var _a;
var rowElements = [];
for (var rowIdx = rowOverscanStartIdx; rowIdx <= rowOverscanEndIdx; rowIdx++) {
var row = rows[rowIdx];
var key = rowIdx;
var isRowSelected = false;
if (rowKey !== undefined) {
const rowId = row[rowKey];
isRowSelected = selectedRows?.has(rowId) ?? false;
var rowId = row[rowKey];
isRowSelected = (_a = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(rowId)) !== null && _a !== void 0 ? _a : false;
if (typeof rowId === 'string' || typeof rowId === 'number') {

@@ -206,10 +233,10 @@ key = rowId;

return (React.createElement("div", { className: "rdg", style: {
width,
height,
'--header-row-height': `${headerRowHeight}px`,
'--filter-row-height': `${headerFiltersHeight}px`,
'--row-width': `${totalColumnWidth}px`,
'--row-height': `${rowHeight}px`
width: width,
height: height,
'--header-row-height': headerRowHeight + "px",
'--filter-row-height': headerFiltersHeight + "px",
'--row-width': totalColumnWidth + "px",
'--row-height': rowHeight + "px"
}, ref: gridRef, onScroll: onGridScroll },
React.createElement(HeaderRow, { rowKey: rowKey, rows: rows, columns: viewportColumns, onColumnResize: handleColumnResize, lastFrozenColumnIndex: lastFrozenColumnIndex, allRowsSelected: selectedRows?.size === rows.length, onSelectedRowsChange: onSelectedRowsChange, sortColumn: sortColumn, sortDirection: sortDirection, onSort: onSort }),
React.createElement(HeaderRow, { rowKey: rowKey, rows: rows, columns: viewportColumns, onColumnResize: handleColumnResize, lastFrozenColumnIndex: lastFrozenColumnIndex, allRowsSelected: (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.size) === rows.length, onSelectedRowsChange: onSelectedRowsChange, sortColumn: sortColumn, sortDirection: sortDirection, onSort: onSort }),
enableFilters && (React.createElement(FilterRow, { lastFrozenColumnIndex: lastFrozenColumnIndex, columns: viewportColumns, filters: filters, onFiltersChange: onFiltersChange })),

@@ -219,6 +246,6 @@ rows.length === 0 && emptyRowsRenderer ? createElement(emptyRowsRenderer) : (React.createElement(React.Fragment, null,

React.createElement("div", { style: { height: Math.max(rows.length * rowHeight, clientHeight) } }),
getViewportRows(),
summaryRows?.map((row, rowIdx) => (React.createElement(SummaryRow, { key: rowIdx, rowIdx: rowIdx, row: row, bottom: rowHeight * (summaryRows.length - 1 - rowIdx), viewportColumns: viewportColumns, lastFrozenColumnIndex: lastFrozenColumnIndex })))))));
getViewportRows(), summaryRows === null || summaryRows === void 0 ? void 0 :
summaryRows.map(function (row, rowIdx) { return (React.createElement(SummaryRow, { key: rowIdx, rowIdx: rowIdx, row: row, bottom: rowHeight * (summaryRows.length - 1 - rowIdx), viewportColumns: viewportColumns, lastFrozenColumnIndex: lastFrozenColumnIndex })); })))));
}
export default forwardRef(DataGrid);
//# sourceMappingURL=DataGrid.js.map

11

lib/editors/ClickOutside.js
import React, { useRef, useEffect } from 'react';
export default function ClickOutside({ onClickOutside, children }) {
const isClickedInside = useRef(false);
useEffect(() => {
export default function ClickOutside(_a) {
var onClickOutside = _a.onClickOutside, children = _a.children;
var isClickedInside = useRef(false);
useEffect(function () {
function handleDocumentClick() {

@@ -14,3 +15,3 @@ if (isClickedInside.current) {

document.addEventListener('click', handleDocumentClick);
return () => {
return function () {
document.removeEventListener('click', handleDocumentClick);

@@ -20,3 +21,3 @@ };

return React.cloneElement(React.Children.only(children), {
onClickCapture() {
onClickCapture: function () {
isClickedInside.current = true;

@@ -23,0 +24,0 @@ }

76

lib/editors/EditorContainer.js

@@ -0,1 +1,17 @@

var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import React, { useRef, useState, useLayoutEffect, useCallback, useEffect } from 'react';

@@ -6,17 +22,18 @@ import clsx from 'clsx';

import { preventDefault } from '../utils';
export default function EditorContainer({ rowIdx, column, row, rowHeight, left, top, onCommit, onCommitCancel, scrollLeft, scrollTop, firstEditorKeyPress: key }) {
const editorRef = useRef(null);
const changeCommitted = useRef(false);
const changeCanceled = useRef(false);
const [isValid, setValid] = useState(true);
const prevScrollLeft = useRef(scrollLeft);
const prevScrollTop = useRef(scrollTop);
const isUnmounting = useRef(false);
const getInputNode = useCallback(() => editorRef.current?.getInputNode(), []);
const commitCancel = useCallback(() => {
export default function EditorContainer(_a) {
var rowIdx = _a.rowIdx, column = _a.column, row = _a.row, rowHeight = _a.rowHeight, left = _a.left, top = _a.top, onCommit = _a.onCommit, onCommitCancel = _a.onCommitCancel, scrollLeft = _a.scrollLeft, scrollTop = _a.scrollTop, key = _a.firstEditorKeyPress;
var editorRef = useRef(null);
var changeCommitted = useRef(false);
var changeCanceled = useRef(false);
var _b = __read(useState(true), 2), isValid = _b[0], setValid = _b[1];
var prevScrollLeft = useRef(scrollLeft);
var prevScrollTop = useRef(scrollTop);
var isUnmounting = useRef(false);
var getInputNode = useCallback(function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getInputNode(); }, []);
var commitCancel = useCallback(function () {
changeCanceled.current = true;
onCommitCancel();
}, [onCommitCancel]);
useLayoutEffect(() => {
const inputNode = getInputNode();
useLayoutEffect(function () {
var inputNode = getInputNode();
if (inputNode instanceof HTMLElement) {

@@ -30,3 +47,3 @@ inputNode.focus();

// close editor when scrolling
useEffect(() => {
useEffect(function () {
if (scrollLeft !== prevScrollLeft.current || scrollTop !== prevScrollTop.current) {

@@ -36,13 +53,13 @@ commitCancel();

}, [commitCancel, scrollLeft, scrollTop]);
useEffect(() => () => {
useEffect(function () { return function () {
isUnmounting.current = true;
}, []);
}; }, []);
// commit changes when editor is closed
useEffect(() => () => {
useEffect(function () { return function () {
if (isUnmounting.current && !changeCommitted.current && !changeCanceled.current) {
commit();
}
});
}; });
function getInitialValue() {
const value = row[column.key];
var value = row[column.key];
if (key === 'Delete' || key === 'Backspace') {

@@ -57,3 +74,3 @@ return '';

function isCaretAtBeginningOfInput() {
const inputNode = getInputNode();
var inputNode = getInputNode();
return inputNode instanceof HTMLInputElement

@@ -63,3 +80,3 @@ && inputNode.selectionEnd === 0;

function isCaretAtEndOfInput() {
const inputNode = getInputNode();
var inputNode = getInputNode();
return inputNode instanceof HTMLInputElement

@@ -69,9 +86,12 @@ && inputNode.selectionStart === inputNode.value.length;

function editorHasResults() {
return editorRef.current?.hasResults?.() ?? false;
var _a, _b, _c;
return (_c = (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.hasResults) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : false;
}
function editorIsSelectOpen() {
return editorRef.current?.isSelectOpen?.() ?? false;
var _a, _b, _c;
return (_c = (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.isSelectOpen) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : false;
}
function isNewValueValid(value) {
const isValid = editorRef.current?.validate?.(value);
var _a, _b;
var isValid = (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.validate) === null || _b === void 0 ? void 0 : _b.call(_a, value);
if (typeof isValid === 'boolean') {

@@ -92,7 +112,7 @@ setValid(isValid);

return;
const updated = editorRef.current.getValue();
var updated = editorRef.current.getValue();
if (isNewValueValid(updated)) {
changeCommitted.current = true;
const cellKey = column.key;
onCommit({ cellKey, rowIdx, updated });
var cellKey = column.key;
onCommit({ cellKey: cellKey, rowIdx: rowIdx, updated: updated });
}

@@ -118,8 +138,8 @@ }

}
const className = clsx('rdg-editor-container', {
var className = clsx('rdg-editor-container', {
'rdg-editor-invalid': !isValid
});
return (React.createElement(ClickOutside, { onClickOutside: commit },
React.createElement("div", { className: className, style: { height: rowHeight, width: column.width, left, top }, onKeyDown: onKeyDown, onContextMenu: preventDefault }, createEditor())));
React.createElement("div", { className: className, style: { height: rowHeight, width: column.width, left: left, top: top }, onKeyDown: onKeyDown, onContextMenu: preventDefault }, createEditor())));
}
//# sourceMappingURL=EditorContainer.js.map

23

lib/editors/EditorPortal.js

@@ -0,7 +1,24 @@

var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import { useState, useLayoutEffect } from 'react';
import ReactDOM from 'react-dom';
export default function EditorPortal({ target, children }) {
export default function EditorPortal(_a) {
var target = _a.target, children = _a.children;
// Keep track of when the modal element is added to the DOM
const [isMounted, setIsMounted] = useState(false);
useLayoutEffect(() => {
var _b = __read(useState(false), 2), isMounted = _b[0], setIsMounted = _b[1];
useLayoutEffect(function () {
setIsMounted(true);

@@ -8,0 +25,0 @@ }, []);

46

lib/editors/SimpleTextEditor.js

@@ -0,19 +1,37 @@

var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import React from 'react';
export default class SimpleTextEditor extends React.Component {
constructor() {
super(...arguments);
this.input = React.createRef();
var SimpleTextEditor = /** @class */ (function (_super) {
__extends(SimpleTextEditor, _super);
function SimpleTextEditor() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.input = React.createRef();
return _this;
}
getInputNode() {
SimpleTextEditor.prototype.getInputNode = function () {
return this.input.current;
}
getValue() {
return {
[this.props.column.key]: this.input.current.value
};
}
render() {
};
SimpleTextEditor.prototype.getValue = function () {
var _a;
return _a = {},
_a[this.props.column.key] = this.input.current.value,
_a;
};
SimpleTextEditor.prototype.render = function () {
return (React.createElement("input", { className: "rdg-text-editor", ref: this.input, defaultValue: this.props.value, onBlur: this.props.onCommit }));
}
}
};
return SimpleTextEditor;
}(React.Component));
export default SimpleTextEditor;
//# sourceMappingURL=SimpleTextEditor.js.map

50

lib/EventBus.js

@@ -1,25 +0,51 @@

export default class EventBus {
constructor() {
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spread = (this && this.__spread) || function () {
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
return ar;
};
var EventBus = /** @class */ (function () {
function EventBus() {
this.subscribers = new Map();
}
subscribe(type, handler) {
EventBus.prototype.subscribe = function (type, handler) {
if (!this.subscribers.has(type)) {
this.subscribers.set(type, new Set());
}
const handlers = this.subscribers.get(type);
var handlers = this.subscribers.get(type);
handlers.add(handler);
return () => {
return function () {
handlers.delete(handler);
};
}
dispatch(type, ...args) {
const handlers = this.subscribers.get(type);
};
EventBus.prototype.dispatch = function (type) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
var handlers = this.subscribers.get(type);
if (handlers) {
// handler needed a type assertion to fix type bug
handlers.forEach(handler => {
handler(...args);
handlers.forEach(function (handler) {
handler.apply(void 0, __spread(args));
});
}
}
}
};
return EventBus;
}());
export default EventBus;
//# sourceMappingURL=EventBus.js.map

32

lib/FilterRow.js

@@ -0,16 +1,28 @@

var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React, { createElement, memo } from 'react';
import clsx from 'clsx';
function FilterRow({ columns, lastFrozenColumnIndex, filters, onFiltersChange }) {
function FilterRow(_a) {
var columns = _a.columns, lastFrozenColumnIndex = _a.lastFrozenColumnIndex, filters = _a.filters, onFiltersChange = _a.onFiltersChange;
function onChange(key, value) {
const newFilters = { ...filters };
var newFilters = __assign({}, filters);
newFilters[key] = value;
onFiltersChange?.(newFilters);
onFiltersChange === null || onFiltersChange === void 0 ? void 0 : onFiltersChange(newFilters);
}
return (React.createElement("div", { className: "rdg-filter-row" }, columns.map(column => {
const { key } = column;
const className = clsx('rdg-cell', {
return (React.createElement("div", { className: "rdg-filter-row" }, columns.map(function (column) {
var key = column.key;
var className = clsx('rdg-cell', {
'rdg-cell-frozen': column.frozen,
'rdg-cell-frozen-last': column.idx === lastFrozenColumnIndex
});
const style = {
var style = {
width: column.width,

@@ -20,5 +32,5 @@ left: column.left

return (React.createElement("div", { key: key, style: style, className: className }, column.filterRenderer && createElement(column.filterRenderer, {
column,
value: filters?.[column.key],
onChange: value => onChange(key, value)
column: column,
value: filters === null || filters === void 0 ? void 0 : filters[column.key],
onChange: function (value) { return onChange(key, value); }
})));

@@ -25,0 +37,0 @@ })));

3

lib/formatters/SelectCellFormatter.js
import React from 'react';
import clsx from 'clsx';
export function SelectCellFormatter({ value, disabled = false, onChange }) {
export function SelectCellFormatter(_a) {
var value = _a.value, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onChange = _a.onChange;
function handleChange(e) {

@@ -5,0 +6,0 @@ onChange(e.target.checked, e.nativeEvent.shiftKey);

5

lib/formatters/SimpleCellFormatter.js
import React from 'react';
export function SimpleCellFormatter({ row, column }) {
const value = row[column.key];
export function SimpleCellFormatter(_a) {
var row = _a.row, column = _a.column;
var value = row[column.key];
return React.createElement("span", { title: String(value) }, value);
}
//# sourceMappingURL=SimpleCellFormatter.js.map

11

lib/HeaderCell.js

@@ -5,17 +5,18 @@ import React, { createElement } from 'react';

import ResizableHeaderCell from './headerCells/ResizableHeaderCell';
export default function HeaderCell({ column, lastFrozenColumnIndex, onResize, allRowsSelected, onAllRowsSelectionChange, sortColumn, sortDirection, onSort }) {
export default function HeaderCell(_a) {
var column = _a.column, lastFrozenColumnIndex = _a.lastFrozenColumnIndex, onResize = _a.onResize, allRowsSelected = _a.allRowsSelected, onAllRowsSelectionChange = _a.onAllRowsSelectionChange, sortColumn = _a.sortColumn, sortDirection = _a.sortDirection, onSort = _a.onSort;
function getCell() {
if (!column.headerRenderer)
return column.name;
return createElement(column.headerRenderer, { column, allRowsSelected, onAllRowsSelectionChange });
return createElement(column.headerRenderer, { column: column, allRowsSelected: allRowsSelected, onAllRowsSelectionChange: onAllRowsSelectionChange });
}
let cell = getCell();
var cell = getCell();
if (column.sortable) {
cell = (React.createElement(SortableHeaderCell, { column: column, onSort: onSort, sortColumn: sortColumn, sortDirection: sortDirection }, cell));
}
const className = clsx('rdg-cell', column.headerCellClass, {
var className = clsx('rdg-cell', column.headerCellClass, {
'rdg-cell-frozen': column.frozen,
'rdg-cell-frozen-last': column.idx === lastFrozenColumnIndex
});
const style = {
var style = {
width: column.width,

@@ -22,0 +23,0 @@ left: column.left

65

lib/headerCells/ResizableHeaderCell.js

@@ -0,3 +1,15 @@

var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
import React, { cloneElement } from 'react';
export default function ResizableHeaderCell({ children, column, onResize }) {
export default function ResizableHeaderCell(_a) {
var children = _a.children, column = _a.column, onResize = _a.onResize;
function onMouseDown(event) {

@@ -7,12 +19,12 @@ if (event.button !== 0) {

}
const { currentTarget } = event;
const { right } = currentTarget.getBoundingClientRect();
const offset = right - event.clientX;
var currentTarget = event.currentTarget;
var right = currentTarget.getBoundingClientRect().right;
var offset = right - event.clientX;
if (offset > 11) { // +1px to account for the border size
return;
}
const onMouseMove = (event) => {
var onMouseMove = function (event) {
handleResize(event.clientX + offset, currentTarget);
};
const onMouseUp = () => {
var onMouseUp = function () {
window.removeEventListener('mousemove', onMouseMove);

@@ -26,7 +38,7 @@ window.removeEventListener('mouseup', onMouseUp);

function onTouchStart(event) {
const touch = event.changedTouches[0];
const { identifier } = touch;
const { currentTarget } = event;
const { right } = currentTarget.getBoundingClientRect();
const offset = right - touch.clientX;
var touch = event.changedTouches[0];
var identifier = touch.identifier;
var currentTarget = event.currentTarget;
var right = currentTarget.getBoundingClientRect().right;
var offset = right - touch.clientX;
if (offset > 11) { // +1px to account for the border size

@@ -36,10 +48,21 @@ return;

function getTouch(event) {
for (const touch of event.changedTouches) {
if (touch.identifier === identifier)
return touch;
var e_1, _a;
try {
for (var _b = __values(event.changedTouches), _c = _b.next(); !_c.done; _c = _b.next()) {
var touch_1 = _c.value;
if (touch_1.identifier === identifier)
return touch_1;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
return null;
}
const onTouchMove = (event) => {
const touch = getTouch(event);
var onTouchMove = function (event) {
var touch = getTouch(event);
if (touch) {

@@ -49,4 +72,4 @@ handleResize(touch.clientX + offset, currentTarget);

};
const onTouchEnd = (event) => {
const touch = getTouch(event);
var onTouchEnd = function (event) {
var touch = getTouch(event);
if (!touch)

@@ -61,3 +84,3 @@ return;

function handleResize(x, target) {
const width = x - target.getBoundingClientRect().left;
var width = x - target.getBoundingClientRect().left;
if (width > 0) {

@@ -68,4 +91,4 @@ onResize(column, width);

return cloneElement(children, {
onMouseDown,
onTouchStart,
onMouseDown: onMouseDown,
onTouchStart: onTouchStart,
children: (React.createElement(React.Fragment, null,

@@ -72,0 +95,0 @@ children.props.children,

13

lib/headerCells/SortableHeaderCell.js
import React from 'react';
const SORT_TEXT = {
var SORT_TEXT = {
ASC: '\u25B2',

@@ -7,4 +7,5 @@ DESC: '\u25BC',

};
export default function SortableHeaderCell({ column, onSort, sortColumn, sortDirection, children }) {
let tempSortDirection = 'NONE';
export default function SortableHeaderCell(_a) {
var column = _a.column, onSort = _a.onSort, sortColumn = _a.sortColumn, sortDirection = _a.sortDirection, children = _a.children;
var tempSortDirection = 'NONE';
if (typeof sortColumn === 'string' && !(sortDirection instanceof Array)) {

@@ -14,3 +15,3 @@ tempSortDirection = sortColumn === column.key && sortDirection || 'NONE';

if (sortDirection instanceof Array) {
sortDirection.some(ele => {
sortDirection.some(function (ele) {
if (ele.columnKey === column.key) {

@@ -26,4 +27,4 @@ tempSortDirection = ele.sortDirection;

return;
const sortDescendingFirst = column.sortDescendingFirst || false;
let direction;
var sortDescendingFirst = column.sortDescendingFirst || false;
var direction;
switch (tempSortDirection) {

@@ -30,0 +31,0 @@ case 'ASC':

35

lib/HeaderRow.js

@@ -0,18 +1,41 @@

var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
import React, { useCallback, memo } from 'react';
import HeaderCell from './HeaderCell';
import { assertIsValidKey } from './utils';
function HeaderRow({ columns, lastFrozenColumnIndex, rows, rowKey, onSelectedRowsChange, allRowsSelected, onColumnResize, sortColumn, sortDirection, onSort }) {
const handleAllRowsSelectionChange = useCallback((checked) => {
function HeaderRow(_a) {
var columns = _a.columns, lastFrozenColumnIndex = _a.lastFrozenColumnIndex, rows = _a.rows, rowKey = _a.rowKey, onSelectedRowsChange = _a.onSelectedRowsChange, allRowsSelected = _a.allRowsSelected, onColumnResize = _a.onColumnResize, sortColumn = _a.sortColumn, sortDirection = _a.sortDirection, onSort = _a.onSort;
var handleAllRowsSelectionChange = useCallback(function (checked) {
var e_1, _a;
if (!onSelectedRowsChange)
return;
assertIsValidKey(rowKey);
const newSelectedRows = new Set();
var newSelectedRows = new Set();
if (checked) {
for (const row of rows) {
newSelectedRows.add(row[rowKey]);
try {
for (var rows_1 = __values(rows), rows_1_1 = rows_1.next(); !rows_1_1.done; rows_1_1 = rows_1.next()) {
var row = rows_1_1.value;
newSelectedRows.add(row[rowKey]);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (rows_1_1 && !rows_1_1.done && (_a = rows_1.return)) _a.call(rows_1);
}
finally { if (e_1) throw e_1.error; }
}
}
onSelectedRowsChange(newSelectedRows);
}, [onSelectedRowsChange, rows, rowKey]);
return (React.createElement("div", { className: "rdg-header-row" }, columns.map(column => {
return (React.createElement("div", { className: "rdg-header-row" }, columns.map(function (column) {
return (React.createElement(HeaderCell, { key: column.key, column: column, lastFrozenColumnIndex: lastFrozenColumnIndex, onResize: onColumnResize, allRowsSelected: allRowsSelected, onAllRowsSelectionChange: handleAllRowsSelectionChange, onSort: onSort, sortColumn: sortColumn, sortDirection: sortDirection }));

@@ -19,0 +42,0 @@ })));

35

lib/masks/CellMask.js

@@ -0,11 +1,34 @@

var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { forwardRef } from 'react';
import clsx from 'clsx';
export default forwardRef(function CellMask({ width, height, top, left, zIndex, className, ...props }, ref) {
return (React.createElement("div", Object.assign({ className: clsx('rdg-cell-mask', className), style: {
height,
width,
zIndex,
transform: `translate(${left}px, ${top}px)`
export default forwardRef(function CellMask(_a, ref) {
var width = _a.width, height = _a.height, top = _a.top, left = _a.left, zIndex = _a.zIndex, className = _a.className, props = __rest(_a, ["width", "height", "top", "left", "zIndex", "className"]);
return (React.createElement("div", __assign({ className: clsx('rdg-cell-mask', className), style: {
height: height,
width: width,
zIndex: zIndex,
transform: "translate(" + left + "px, " + top + "px)"
}, "data-test": "cell-mask", ref: ref }, props)));
});
//# sourceMappingURL=CellMask.js.map

32

lib/masks/DragMask.js

@@ -0,18 +1,30 @@

var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React from 'react';
import CellMask from './CellMask';
export default function DragMask({ draggedPosition, getSelectedDimensions }) {
const { overRowIdx, idx, rowIdx } = draggedPosition;
export default function DragMask(_a) {
var draggedPosition = _a.draggedPosition, getSelectedDimensions = _a.getSelectedDimensions;
var overRowIdx = draggedPosition.overRowIdx, idx = draggedPosition.idx, rowIdx = draggedPosition.rowIdx;
if (rowIdx === overRowIdx)
return null;
const isDraggedOverDown = rowIdx < overRowIdx;
const startRowIdx = isDraggedOverDown ? rowIdx + 1 : overRowIdx;
const endRowIdx = isDraggedOverDown ? overRowIdx : rowIdx - 1;
const className = isDraggedOverDown ? 'react-grid-cell-dragged-over-down' : 'react-grid-cell-dragged-over-up';
const dimensions = getSelectedDimensions({ idx, rowIdx: startRowIdx });
for (let currentRowIdx = startRowIdx + 1; currentRowIdx <= endRowIdx; currentRowIdx++) {
const { height } = getSelectedDimensions({ idx, rowIdx: currentRowIdx });
var isDraggedOverDown = rowIdx < overRowIdx;
var startRowIdx = isDraggedOverDown ? rowIdx + 1 : overRowIdx;
var endRowIdx = isDraggedOverDown ? overRowIdx : rowIdx - 1;
var className = isDraggedOverDown ? 'react-grid-cell-dragged-over-down' : 'react-grid-cell-dragged-over-up';
var dimensions = getSelectedDimensions({ idx: idx, rowIdx: startRowIdx });
for (var currentRowIdx = startRowIdx + 1; currentRowIdx <= endRowIdx; currentRowIdx++) {
var height = getSelectedDimensions({ idx: idx, rowIdx: currentRowIdx }).height;
dimensions.height += height;
}
return (React.createElement(CellMask, Object.assign({}, dimensions, { className: className })));
return (React.createElement(CellMask, __assign({}, dimensions, { className: className })));
}
//# sourceMappingURL=DragMask.js.map

214

lib/masks/InteractionMasks.js

@@ -0,1 +1,28 @@

var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import React, { useState, useRef, useEffect, useCallback } from 'react';

@@ -11,4 +38,5 @@ // Components

import { UpdateActions, CellNavigationMode } from '../common/enums';
export default function InteractionMasks({ columns, rows, rowHeight, eventBus, enableCellAutoFocus, enableCellCopyPaste, enableCellDragAndDrop, editorPortalTarget, cellNavigationMode, gridRef, totalHeaderHeight, scrollLeft, scrollTop, onSelectedCellChange, onCheckCellIsEditable, onRowsUpdate, onKeyboard, scrollToCell }) {
const [selectedPosition, setSelectedPosition] = useState(() => {
export default function InteractionMasks(_a) {
var columns = _a.columns, rows = _a.rows, rowHeight = _a.rowHeight, eventBus = _a.eventBus, enableCellAutoFocus = _a.enableCellAutoFocus, enableCellCopyPaste = _a.enableCellCopyPaste, enableCellDragAndDrop = _a.enableCellDragAndDrop, editorPortalTarget = _a.editorPortalTarget, cellNavigationMode = _a.cellNavigationMode, gridRef = _a.gridRef, totalHeaderHeight = _a.totalHeaderHeight, scrollLeft = _a.scrollLeft, scrollTop = _a.scrollTop, onSelectedCellChange = _a.onSelectedCellChange, onCheckCellIsEditable = _a.onCheckCellIsEditable, onRowsUpdate = _a.onRowsUpdate, onKeyboard = _a.onKeyboard, scrollToCell = _a.scrollToCell;
var _b = __read(useState(function () {
if (enableCellAutoFocus && document.activeElement === document.body && columns.length > 0 && rows.length > 0) {

@@ -18,25 +46,29 @@ return { idx: 0, rowIdx: 0, status: 'SELECT' };

return { idx: -1, rowIdx: -1, status: 'SELECT' };
});
const [copiedPosition, setCopiedPosition] = useState(null);
const [draggedPosition, setDraggedPosition] = useState(null);
const selectionMaskRef = useRef(null);
}), 2), selectedPosition = _b[0], setSelectedPosition = _b[1];
var _c = __read(useState(null), 2), copiedPosition = _c[0], setCopiedPosition = _c[1];
var _d = __read(useState(null), 2), draggedPosition = _d[0], setDraggedPosition = _d[1];
var selectionMaskRef = useRef(null);
// Focus on the selection mask when the selected position is changed or the editor is closed
useEffect(() => {
useEffect(function () {
var _a;
if (selectedPosition.rowIdx === -1 || selectedPosition.idx === -1 || selectedPosition.status === 'EDIT')
return;
selectionMaskRef.current?.focus();
(_a = selectionMaskRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, [selectedPosition]);
useEffect(() => {
useEffect(function () {
return eventBus.subscribe('SELECT_CELL', selectCell);
});
useEffect(() => {
useEffect(function () {
if (draggedPosition === null)
return;
const handleDragEnter = (overRowIdx) => {
setDraggedPosition({ ...draggedPosition, overRowIdx });
var handleDragEnter = function (overRowIdx) {
setDraggedPosition(__assign(__assign({}, draggedPosition), { overRowIdx: overRowIdx }));
};
return eventBus.subscribe('DRAG_ENTER', handleDragEnter);
}, [draggedPosition, eventBus]);
const closeEditor = useCallback(() => {
setSelectedPosition(({ idx, rowIdx }) => ({ idx, rowIdx, status: 'SELECT' }));
var closeEditor = useCallback(function () {
setSelectedPosition(function (_a) {
var idx = _a.idx, rowIdx = _a.rowIdx;
return ({ idx: idx, rowIdx: rowIdx, status: 'SELECT' });
});
}, []);

@@ -52,7 +84,7 @@ // Reset the positions if the current values are no longer valid. This can happen if a column or row is removed

return { left: 0, top: 0 };
const { left, top } = gridRef.current.getBoundingClientRect();
const { scrollTop: docTop, scrollLeft: docLeft } = document.scrollingElement || document.documentElement;
const gridLeft = left + docLeft;
const gridTop = top + docTop;
const column = columns[selectedPosition.idx];
var _a = gridRef.current.getBoundingClientRect(), left = _a.left, top = _a.top;
var _b = document.scrollingElement || document.documentElement, docTop = _b.scrollTop, docLeft = _b.scrollLeft;
var gridLeft = left + docLeft;
var gridTop = top + docTop;
var column = columns[selectedPosition.idx];
return {

@@ -63,46 +95,49 @@ left: gridLeft + column.left - (column.frozen ? 0 : scrollLeft),

}
function getNextPosition(key, mode = cellNavigationMode, shiftKey = false) {
const { idx, rowIdx } = selectedPosition;
let nextPosition;
function getNextPosition(key, mode, shiftKey) {
if (mode === void 0) { mode = cellNavigationMode; }
if (shiftKey === void 0) { shiftKey = false; }
var idx = selectedPosition.idx, rowIdx = selectedPosition.rowIdx;
var nextPosition;
switch (key) {
case 'ArrowUp':
nextPosition = { idx, rowIdx: rowIdx - 1 };
nextPosition = { idx: idx, rowIdx: rowIdx - 1 };
break;
case 'ArrowDown':
nextPosition = { idx, rowIdx: rowIdx + 1 };
nextPosition = { idx: idx, rowIdx: rowIdx + 1 };
break;
case 'ArrowLeft':
nextPosition = { idx: idx - 1, rowIdx };
nextPosition = { idx: idx - 1, rowIdx: rowIdx };
break;
case 'ArrowRight':
nextPosition = { idx: idx + 1, rowIdx };
nextPosition = { idx: idx + 1, rowIdx: rowIdx };
break;
case 'Tab':
nextPosition = { idx: idx + (shiftKey ? -1 : 1), rowIdx };
nextPosition = { idx: idx + (shiftKey ? -1 : 1), rowIdx: rowIdx };
break;
default:
nextPosition = { idx, rowIdx };
nextPosition = { idx: idx, rowIdx: rowIdx };
break;
}
return getNextSelectedCellPosition({
columns,
columns: columns,
rowsCount: rows.length,
cellNavigationMode: mode,
nextPosition
nextPosition: nextPosition
});
}
function onKeyDown(event) {
let preventDefault = false;
var _a;
var preventDefault = false;
// use DataGridHandle.selectCell get current cell.
if (onKeyboard)
onKeyboard({ selectedPosition, event: { ...event, preventDefault: () => preventDefault = true } });
onKeyboard({ selectedPosition: selectedPosition, event: __assign(__assign({}, event), { preventDefault: function () { return preventDefault = true; } }) });
if (preventDefault)
return;
const column = columns[selectedPosition.idx];
const row = rows[selectedPosition.rowIdx];
const isActivatedByUser = (column.unsafe_onCellInput ?? legacyCellInput)(event, row) === true;
const { key } = event;
var column = columns[selectedPosition.idx];
var row = rows[selectedPosition.rowIdx];
var isActivatedByUser = ((_a = column.unsafe_onCellInput) !== null && _a !== void 0 ? _a : legacyCellInput)(event, row) === true;
var key = event.key;
if (enableCellCopyPaste && isCtrlKeyHeldDown(event)) {
// event.key may be uppercase `C` or `V`
const lowerCaseKey = event.key.toLowerCase();
var lowerCaseKey = event.key.toLowerCase();
if (lowerCaseKey === 'c')

@@ -113,10 +148,16 @@ return handleCopy();

}
const canOpenEditor = selectedPosition.status === 'SELECT' && isCellEditable(selectedPosition);
var canOpenEditor = selectedPosition.status === 'SELECT' && isCellEditable(selectedPosition);
switch (key) {
case 'Enter':
if (canOpenEditor) {
setSelectedPosition(({ idx, rowIdx }) => ({ idx, rowIdx, status: 'EDIT', key: 'Enter' }));
setSelectedPosition(function (_a) {
var idx = _a.idx, rowIdx = _a.rowIdx;
return ({ idx: idx, rowIdx: rowIdx, status: 'EDIT', key: 'Enter' });
});
}
else if (selectedPosition.status === 'EDIT') {
setSelectedPosition(({ idx, rowIdx }) => ({ idx, rowIdx, status: 'SELECT' }));
setSelectedPosition(function (_a) {
var idx = _a.idx, rowIdx = _a.rowIdx;
return ({ idx: idx, rowIdx: rowIdx, status: 'SELECT' });
});
}

@@ -140,3 +181,6 @@ break;

if (canOpenEditor && isActivatedByUser) {
setSelectedPosition(({ idx, rowIdx }) => ({ idx, rowIdx, status: 'EDIT', key }));
setSelectedPosition(function (_a) {
var idx = _a.idx, rowIdx = _a.rowIdx;
return ({ idx: idx, rowIdx: rowIdx, status: 'EDIT', key: key });
});
}

@@ -148,3 +192,3 @@ break;

// If we are in a position to leave the grid, stop editing but stay in that cell
if (canExitGrid(e, { cellNavigationMode, columns, rowsCount: rows.length, selectedPosition })) {
if (canExitGrid(e, { cellNavigationMode: cellNavigationMode, columns: columns, rowsCount: rows.length, selectedPosition: selectedPosition })) {
if (selectedPosition.status === 'EDIT') {

@@ -159,31 +203,33 @@ closeEditor();

e.preventDefault();
const tabCellNavigationMode = cellNavigationMode === CellNavigationMode.NONE
var tabCellNavigationMode = cellNavigationMode === CellNavigationMode.NONE
? CellNavigationMode.CHANGE_ROW
: cellNavigationMode;
const nextPosition = getNextPosition('Tab', tabCellNavigationMode, e.shiftKey);
var nextPosition = getNextPosition('Tab', tabCellNavigationMode, e.shiftKey);
selectCell(nextPosition);
}
function handleCopy() {
const { idx, rowIdx } = selectedPosition;
const value = rows[rowIdx][columns[idx].key];
setCopiedPosition({ idx, rowIdx, value });
var idx = selectedPosition.idx, rowIdx = selectedPosition.rowIdx;
var value = rows[rowIdx][columns[idx].key];
setCopiedPosition({ idx: idx, rowIdx: rowIdx, value: value });
}
function handlePaste() {
var _a;
if (copiedPosition === null || !isCellEditable(selectedPosition)) {
return;
}
const { rowIdx: toRow } = selectedPosition;
const cellKey = columns[selectedPosition.idx].key;
const { rowIdx: fromRow, idx, value } = copiedPosition;
const fromCellKey = columns[idx].key;
var toRow = selectedPosition.rowIdx;
var cellKey = columns[selectedPosition.idx].key;
var fromRow = copiedPosition.rowIdx, idx = copiedPosition.idx, value = copiedPosition.value;
var fromCellKey = columns[idx].key;
onRowsUpdate({
cellKey,
fromRow,
toRow,
updated: { [cellKey]: value },
cellKey: cellKey,
fromRow: fromRow,
toRow: toRow,
updated: (_a = {}, _a[cellKey] = value, _a),
action: UpdateActions.COPY_PASTE,
fromCellKey
fromCellKey: fromCellKey
});
}
function isCellWithinBounds({ idx, rowIdx }) {
function isCellWithinBounds(_a) {
var idx = _a.idx, rowIdx = _a.rowIdx;
return rowIdx >= 0 && rowIdx < rows.length && idx >= 0 && idx < columns.length;

@@ -193,15 +239,16 @@ }

return isCellWithinBounds(position)
&& isSelectedCellEditable({ columns, rows, selectedPosition: position, onCheckCellIsEditable });
&& isSelectedCellEditable({ columns: columns, rows: rows, selectedPosition: position, onCheckCellIsEditable: onCheckCellIsEditable });
}
function selectCell(position, enableEditor = false) {
function selectCell(position, enableEditor) {
if (enableEditor === void 0) { enableEditor = false; }
if (!isCellWithinBounds(position))
return;
if (enableEditor && isCellEditable(position)) {
setSelectedPosition({ ...position, status: 'EDIT', key: null });
setSelectedPosition(__assign(__assign({}, position), { status: 'EDIT', key: null }));
}
else {
setSelectedPosition({ ...position, status: 'SELECT' });
setSelectedPosition(__assign(__assign({}, position), { status: 'SELECT' }));
}
scrollToCell(position);
onSelectedCellChange?.({ ...position });
onSelectedCellChange === null || onSelectedCellChange === void 0 ? void 0 : onSelectedCellChange(__assign({}, position));
}

@@ -214,3 +261,3 @@ function isDragEnabled() {

// Setting data is required to make an element draggable in FF
const transferData = JSON.stringify(selectedPosition);
var transferData = JSON.stringify(selectedPosition);
try {

@@ -223,16 +270,17 @@ e.dataTransfer.setData('text/plain', transferData);

}
setDraggedPosition({ ...selectedPosition, overRowIdx: selectedPosition.rowIdx });
setDraggedPosition(__assign(__assign({}, selectedPosition), { overRowIdx: selectedPosition.rowIdx }));
}
function handleDragEnd() {
var _a;
if (draggedPosition === null)
return;
const { rowIdx, overRowIdx } = draggedPosition;
const column = columns[draggedPosition.idx];
const cellKey = column.key;
const value = rows[rowIdx][cellKey];
var rowIdx = draggedPosition.rowIdx, overRowIdx = draggedPosition.overRowIdx;
var column = columns[draggedPosition.idx];
var cellKey = column.key;
var value = rows[rowIdx][cellKey];
onRowsUpdate({
cellKey,
cellKey: cellKey,
fromRow: rowIdx,
toRow: overRowIdx,
updated: { [cellKey]: value },
updated: (_a = {}, _a[cellKey] = value, _a),
action: UpdateActions.CELL_DRAG

@@ -243,19 +291,21 @@ });

function onDragHandleDoubleClick() {
const column = columns[selectedPosition.idx];
const cellKey = column.key;
const value = rows[selectedPosition.rowIdx][cellKey];
var _a;
var column = columns[selectedPosition.idx];
var cellKey = column.key;
var value = rows[selectedPosition.rowIdx][cellKey];
onRowsUpdate({
cellKey,
cellKey: cellKey,
fromRow: selectedPosition.rowIdx,
toRow: rows.length - 1,
updated: { [cellKey]: value },
updated: (_a = {}, _a[cellKey] = value, _a),
action: UpdateActions.COLUMN_FILL
});
}
function onCommit({ cellKey, rowIdx, updated }) {
function onCommit(_a) {
var cellKey = _a.cellKey, rowIdx = _a.rowIdx, updated = _a.updated;
onRowsUpdate({
cellKey,
cellKey: cellKey,
fromRow: rowIdx,
toRow: rowIdx,
updated,
updated: updated,
action: UpdateActions.CELL_UPDATE

@@ -266,11 +316,11 @@ });

function getSelectedDimensions(selectedPosition) {
return getDimensions({ selectedPosition, columns, scrollLeft, rowHeight });
return getDimensions({ selectedPosition: selectedPosition, columns: columns, scrollLeft: scrollLeft, rowHeight: rowHeight });
}
return (React.createElement("div", { onKeyDown: onKeyDown },
copiedPosition && isCellWithinBounds(copiedPosition) && (React.createElement(CellMask, Object.assign({ className: "rdg-cell-copied" }, getSelectedDimensions(copiedPosition)))),
copiedPosition && isCellWithinBounds(copiedPosition) && (React.createElement(CellMask, __assign({ className: "rdg-cell-copied" }, getSelectedDimensions(copiedPosition)))),
draggedPosition && isCellWithinBounds(draggedPosition) && (React.createElement(DragMask, { draggedPosition: draggedPosition, getSelectedDimensions: getSelectedDimensions })),
selectedPosition.status === 'SELECT' && isCellWithinBounds(selectedPosition) && (React.createElement(CellMask, Object.assign({ className: "rdg-selected", tabIndex: 0, ref: selectionMaskRef }, getSelectedDimensions(selectedPosition)), isDragEnabled() && (React.createElement("div", { className: "drag-handle", draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDoubleClick: onDragHandleDoubleClick })))),
selectedPosition.status === 'SELECT' && isCellWithinBounds(selectedPosition) && (React.createElement(CellMask, __assign({ className: "rdg-selected", tabIndex: 0, ref: selectionMaskRef }, getSelectedDimensions(selectedPosition)), isDragEnabled() && (React.createElement("div", { className: "drag-handle", draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDoubleClick: onDragHandleDoubleClick })))),
selectedPosition.status === 'EDIT' && isCellWithinBounds(selectedPosition) && (React.createElement(EditorPortal, { target: editorPortalTarget },
React.createElement(EditorContainer, Object.assign({ firstEditorKeyPress: selectedPosition.key, onCommit: onCommit, onCommitCancel: closeEditor, rowIdx: selectedPosition.rowIdx, row: rows[selectedPosition.rowIdx], rowHeight: rowHeight, column: columns[selectedPosition.idx], scrollLeft: scrollLeft, scrollTop: scrollTop }, getEditorPosition()))))));
React.createElement(EditorContainer, __assign({ firstEditorKeyPress: selectedPosition.key, onCommit: onCommit, onCommitCancel: closeEditor, rowIdx: selectedPosition.rowIdx, row: rows[selectedPosition.rowIdx], rowHeight: rowHeight, column: columns[selectedPosition.idx], scrollLeft: scrollLeft, scrollTop: scrollTop }, getEditorPosition()))))));
}
//# sourceMappingURL=InteractionMasks.js.map

29

lib/Row.js

@@ -0,1 +1,23 @@

var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { memo } from 'react';

@@ -5,3 +27,4 @@ import clsx from 'clsx';

import { preventDefault, wrapEvent } from './utils';
function Row({ cellRenderer: CellRenderer = Cell, className, eventBus, rowIdx, isRowSelected, lastFrozenColumnIndex, onRowClick, row, viewportColumns, onDragEnter, onDragOver, onDrop, rowClass, top, ...props }) {
function Row(_a) {
var _b = _a.cellRenderer, CellRenderer = _b === void 0 ? Cell : _b, className = _a.className, eventBus = _a.eventBus, rowIdx = _a.rowIdx, isRowSelected = _a.isRowSelected, lastFrozenColumnIndex = _a.lastFrozenColumnIndex, onRowClick = _a.onRowClick, row = _a.row, viewportColumns = _a.viewportColumns, onDragEnter = _a.onDragEnter, onDragOver = _a.onDragOver, onDrop = _a.onDrop, rowClass = _a.rowClass, top = _a.top, props = __rest(_a, ["cellRenderer", "className", "eventBus", "rowIdx", "isRowSelected", "lastFrozenColumnIndex", "onRowClick", "row", "viewportColumns", "onDragEnter", "onDragOver", "onDrop", "rowClass", "top"]);
function handleDragEnter(event) {

@@ -16,9 +39,9 @@ // Prevent default to allow drop

}
className = clsx('rdg-row', `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, { 'rdg-row-selected': isRowSelected }, rowClass?.(row), className);
className = clsx('rdg-row', "rdg-row-" + (rowIdx % 2 === 0 ? 'even' : 'odd'), { 'rdg-row-selected': isRowSelected }, rowClass === null || rowClass === void 0 ? void 0 : rowClass(row), className);
// Regarding onDrop: the default in Firefox is to treat data in dataTransfer as a URL,
// and perform navigation on it, even if the data type used is 'text'.
// To bypass this, we need to capture and prevent the drop event.
return (React.createElement("div", Object.assign({ className: className, onDragEnter: wrapEvent(handleDragEnter, onDragEnter), onDragOver: wrapEvent(handleDragOver, onDragOver), onDrop: wrapEvent(preventDefault, onDrop), style: { top } }, props), viewportColumns.map(column => (React.createElement(CellRenderer, { key: column.key, rowIdx: rowIdx, column: column, lastFrozenColumnIndex: lastFrozenColumnIndex, row: row, isRowSelected: isRowSelected, eventBus: eventBus, onRowClick: onRowClick })))));
return (React.createElement("div", __assign({ className: className, onDragEnter: wrapEvent(handleDragEnter, onDragEnter), onDragOver: wrapEvent(handleDragOver, onDragOver), onDrop: wrapEvent(preventDefault, onDrop), style: { top: top } }, props), viewportColumns.map(function (column) { return (React.createElement(CellRenderer, { key: column.key, rowIdx: rowIdx, column: column, lastFrozenColumnIndex: lastFrozenColumnIndex, row: row, isRowSelected: isRowSelected, eventBus: eventBus, onRowClick: onRowClick })); })));
}
export default memo(Row);
//# sourceMappingURL=Row.js.map

9

lib/SummaryCell.js
import React, { memo } from 'react';
import clsx from 'clsx';
function SummaryCell({ column, lastFrozenColumnIndex, row }) {
const { summaryFormatter: SummaryFormatter, width, left, summaryCellClass } = column;
const className = clsx('rdg-cell', {
function SummaryCell(_a) {
var column = _a.column, lastFrozenColumnIndex = _a.lastFrozenColumnIndex, row = _a.row;
var SummaryFormatter = column.summaryFormatter, width = column.width, left = column.left, summaryCellClass = column.summaryCellClass;
var className = clsx('rdg-cell', {
'rdg-cell-frozen': column.frozen,
'rdg-cell-frozen-last': column.idx === lastFrozenColumnIndex
}, typeof summaryCellClass === 'function' ? summaryCellClass(row) : summaryCellClass);
return (React.createElement("div", { className: className, style: { width, left } }, SummaryFormatter && React.createElement(SummaryFormatter, { column: column, row: row })));
return (React.createElement("div", { className: className, style: { width: width, left: left } }, SummaryFormatter && React.createElement(SummaryFormatter, { column: column, row: row })));
}
export default memo(SummaryCell);
//# sourceMappingURL=SummaryCell.js.map

5

lib/SummaryRow.js
import React, { memo } from 'react';
import SummaryCell from './SummaryCell';
function SummaryRow({ rowIdx, lastFrozenColumnIndex, row, viewportColumns, bottom }) {
return (React.createElement("div", { className: `rdg-row rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'} rdg-summary-row`, style: { bottom } }, viewportColumns.map(column => (React.createElement(SummaryCell, { key: column.key, column: column, lastFrozenColumnIndex: lastFrozenColumnIndex, row: row })))));
function SummaryRow(_a) {
var rowIdx = _a.rowIdx, lastFrozenColumnIndex = _a.lastFrozenColumnIndex, row = _a.row, viewportColumns = _a.viewportColumns, bottom = _a.bottom;
return (React.createElement("div", { className: "rdg-row rdg-row-" + (rowIdx % 2 === 0 ? 'even' : 'odd') + " rdg-summary-row", style: { bottom: bottom } }, viewportColumns.map(function (column) { return (React.createElement(SummaryCell, { key: column.key, column: column, lastFrozenColumnIndex: lastFrozenColumnIndex, row: row })); })));
}
export default memo(SummaryRow);
//# sourceMappingURL=SummaryRow.js.map

118

lib/utils/columnUtils.js

@@ -0,39 +1,69 @@

var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
import { getScrollbarSize } from './domUtils';
export function getColumnMetrics(metrics) {
let left = 0;
let totalWidth = 0;
let allocatedWidths = 0;
let unassignedColumnsCount = 0;
let lastFrozenColumnIndex = -1;
const columns = [];
for (const metricsColumn of metrics.columns) {
let width = getSpecifiedWidth(metricsColumn, metrics.columnWidths, metrics.viewportWidth);
if (width === undefined) {
unassignedColumnsCount++;
var e_1, _a;
var left = 0;
var totalWidth = 0;
var allocatedWidths = 0;
var unassignedColumnsCount = 0;
var lastFrozenColumnIndex = -1;
var columns = [];
try {
for (var _b = __values(metrics.columns), _c = _b.next(); !_c.done; _c = _b.next()) {
var metricsColumn = _c.value;
var width = getSpecifiedWidth(metricsColumn, metrics.columnWidths, metrics.viewportWidth);
if (width === undefined) {
unassignedColumnsCount++;
}
else {
width = clampColumnWidth(width, metricsColumn, metrics.minColumnWidth);
allocatedWidths += width;
}
var column = __assign(__assign({}, metricsColumn), { width: width });
if (column.frozen) {
lastFrozenColumnIndex++;
columns.splice(lastFrozenColumnIndex, 0, column);
}
else {
columns.push(column);
}
}
else {
width = clampColumnWidth(width, metricsColumn, metrics.minColumnWidth);
allocatedWidths += width;
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
const column = { ...metricsColumn, width };
if (column.frozen) {
lastFrozenColumnIndex++;
columns.splice(lastFrozenColumnIndex, 0, column);
}
else {
columns.push(column);
}
finally { if (e_1) throw e_1.error; }
}
const unallocatedWidth = metrics.viewportWidth - allocatedWidths - getScrollbarSize();
const unallocatedColumnWidth = Math.max(Math.floor(unallocatedWidth / unassignedColumnsCount), metrics.minColumnWidth);
const calculatedColumns = columns.map((column, idx) => {
var unallocatedWidth = metrics.viewportWidth - allocatedWidths - getScrollbarSize();
var unallocatedColumnWidth = Math.max(Math.floor(unallocatedWidth / unassignedColumnsCount), metrics.minColumnWidth);
var calculatedColumns = columns.map(function (column, idx) {
var _a, _b;
// Every column should have a valid width as this stage
const width = column.width ?? clampColumnWidth(unallocatedColumnWidth, column, metrics.minColumnWidth);
const newColumn = {
...column,
idx,
width,
left,
formatter: column.formatter ?? metrics.defaultFormatter
};
var width = (_a = column.width) !== null && _a !== void 0 ? _a : clampColumnWidth(unallocatedColumnWidth, column, metrics.minColumnWidth);
var newColumn = __assign(__assign({}, column), { idx: idx,
width: width,
left: left, formatter: (_b = column.formatter) !== null && _b !== void 0 ? _b : metrics.defaultFormatter });
totalWidth += width;

@@ -45,7 +75,8 @@ left += width;

columns: calculatedColumns,
lastFrozenColumnIndex,
lastFrozenColumnIndex: lastFrozenColumnIndex,
totalColumnWidth: totalWidth
};
}
function getSpecifiedWidth({ key, width }, columnWidths, viewportWidth) {
function getSpecifiedWidth(_a, columnWidths, viewportWidth) {
var key = _a.key, width = _a.width;
if (columnWidths.has(key)) {

@@ -63,4 +94,5 @@ // Use the resized width if available

}
function clampColumnWidth(width, { minWidth, maxWidth }, minColumnWidth) {
width = Math.max(width, minWidth ?? minColumnWidth);
function clampColumnWidth(width, _a, minColumnWidth) {
var minWidth = _a.minWidth, maxWidth = _a.maxWidth;
width = Math.max(width, minWidth !== null && minWidth !== void 0 ? minWidth : minColumnWidth);
if (typeof maxWidth === 'number') {

@@ -80,6 +112,6 @@ return Math.min(width, maxWidth);

export function getColumnScrollPosition(columns, idx, currentScrollLeft, currentClientWidth) {
let left = 0;
let frozen = 0;
for (let i = 0; i < idx; i++) {
const column = columns[i];
var left = 0;
var frozen = 0;
for (var i = 0; i < idx; i++) {
var column = columns[i];
if (column) {

@@ -94,6 +126,6 @@ if (column.width) {

}
const selectedColumn = columns[idx];
var selectedColumn = columns[idx];
if (selectedColumn) {
const scrollLeft = left - frozen - currentScrollLeft;
const scrollRight = left + selectedColumn.width - currentScrollLeft;
var scrollLeft = left - frozen - currentScrollLeft;
var scrollRight = left + selectedColumn.width - currentScrollLeft;
if (scrollLeft < 0) {

@@ -100,0 +132,0 @@ return scrollLeft;

4

lib/utils/domUtils.js

@@ -1,5 +0,5 @@

let size;
var size;
export function getScrollbarSize() {
if (size === undefined) {
const scrollDiv = document.createElement('div');
var scrollDiv = document.createElement('div');
scrollDiv.style.position = 'absolute';

@@ -6,0 +6,0 @@ scrollDiv.style.top = '-9999px';

71

lib/utils/selectedCellUtils.js

@@ -0,33 +1,47 @@

var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { CellNavigationMode } from '../common/enums';
import { canEdit } from './columnUtils';
// above unfrozen cells, below frozen cells
const zCellMask = 1;
var zCellMask = 1;
// above frozen cells, below header/filter/summary rows
const zFrozenCellMask = 2;
export function getSelectedDimensions({ selectedPosition: { idx, rowIdx }, columns, rowHeight, scrollLeft }) {
var zFrozenCellMask = 2;
export function getSelectedDimensions(_a) {
var _b = _a.selectedPosition, idx = _b.idx, rowIdx = _b.rowIdx, columns = _a.columns, rowHeight = _a.rowHeight, scrollLeft = _a.scrollLeft;
if (idx < 0) {
return { width: 0, left: 0, top: 0, height: rowHeight, zIndex: 1 };
}
const column = columns[idx];
const { width } = column;
const left = column.frozen ? column.left + scrollLeft : column.left;
const top = rowIdx * rowHeight;
const zIndex = column.frozen ? zFrozenCellMask : zCellMask;
return { width, left, top, height: rowHeight, zIndex };
var column = columns[idx];
var width = column.width;
var left = column.frozen ? column.left + scrollLeft : column.left;
var top = rowIdx * rowHeight;
var zIndex = column.frozen ? zFrozenCellMask : zCellMask;
return { width: width, left: left, top: top, height: rowHeight, zIndex: zIndex };
}
export function isSelectedCellEditable({ selectedPosition, columns, rows, onCheckCellIsEditable }) {
const column = columns[selectedPosition.idx];
const row = rows[selectedPosition.rowIdx];
const isCellEditable = onCheckCellIsEditable ? onCheckCellIsEditable({ row, column, ...selectedPosition }) : true;
export function isSelectedCellEditable(_a) {
var selectedPosition = _a.selectedPosition, columns = _a.columns, rows = _a.rows, onCheckCellIsEditable = _a.onCheckCellIsEditable;
var column = columns[selectedPosition.idx];
var row = rows[selectedPosition.rowIdx];
var isCellEditable = onCheckCellIsEditable ? onCheckCellIsEditable(__assign({ row: row, column: column }, selectedPosition)) : true;
return isCellEditable && canEdit(column, row);
}
export function getNextSelectedCellPosition({ cellNavigationMode, columns, rowsCount, nextPosition }) {
export function getNextSelectedCellPosition(_a) {
var cellNavigationMode = _a.cellNavigationMode, columns = _a.columns, rowsCount = _a.rowsCount, nextPosition = _a.nextPosition;
if (cellNavigationMode !== CellNavigationMode.NONE) {
const { idx, rowIdx } = nextPosition;
const columnsCount = columns.length;
const isAfterLastColumn = idx === columnsCount;
const isBeforeFirstColumn = idx === -1;
var idx = nextPosition.idx, rowIdx = nextPosition.rowIdx;
var columnsCount = columns.length;
var isAfterLastColumn = idx === columnsCount;
var isBeforeFirstColumn = idx === -1;
if (isAfterLastColumn) {
if (cellNavigationMode === CellNavigationMode.CHANGE_ROW) {
const isLastRow = rowIdx === rowsCount - 1;
var isLastRow = rowIdx === rowsCount - 1;
if (!isLastRow) {

@@ -42,3 +56,3 @@ return {

return {
rowIdx,
rowIdx: rowIdx,
idx: 0

@@ -50,3 +64,3 @@ };

if (cellNavigationMode === CellNavigationMode.CHANGE_ROW) {
const isFirstRow = rowIdx === 0;
var isFirstRow = rowIdx === 0;
if (!isFirstRow) {

@@ -61,3 +75,3 @@ return {

return {
rowIdx,
rowIdx: rowIdx,
idx: columnsCount - 1

@@ -70,11 +84,12 @@ };

}
export function canExitGrid(event, { cellNavigationMode, columns, rowsCount, selectedPosition: { rowIdx, idx } }) {
export function canExitGrid(event, _a) {
var cellNavigationMode = _a.cellNavigationMode, columns = _a.columns, rowsCount = _a.rowsCount, _b = _a.selectedPosition, rowIdx = _b.rowIdx, idx = _b.idx;
// When the cellNavigationMode is 'none' or 'changeRow', you can exit the grid if you're at the first or last cell of the grid
// When the cellNavigationMode is 'loopOverRow', there is no logical exit point so you can't exit the grid
if (cellNavigationMode === CellNavigationMode.NONE || cellNavigationMode === CellNavigationMode.CHANGE_ROW) {
const atLastCellInRow = idx === columns.length - 1;
const atFirstCellInRow = idx === 0;
const atLastRow = rowIdx === rowsCount - 1;
const atFirstRow = rowIdx === 0;
const shift = event.shiftKey === true;
var atLastCellInRow = idx === columns.length - 1;
var atFirstCellInRow = idx === 0;
var atLastRow = rowIdx === rowsCount - 1;
var atFirstRow = rowIdx === 0;
var shift = event.shiftKey === true;
return shift ? atFirstCellInRow && atFirstRow : atLastCellInRow && atLastRow;

@@ -81,0 +96,0 @@ }

42

lib/utils/viewportUtils.js

@@ -5,12 +5,12 @@ function getTotalFrozenColumnWidth(columns, lastFrozenColumnIndex) {

}
const lastFrozenColumn = columns[lastFrozenColumnIndex];
var lastFrozenColumn = columns[lastFrozenColumnIndex];
return lastFrozenColumn.left + lastFrozenColumn.width;
}
const RENDER_BACTCH_SIZE = 8;
var RENDER_BACTCH_SIZE = 8;
export function getVerticalRangeToRender(height, rowHeight, scrollTop, rowsCount) {
const overscanThreshold = 4;
const rowVisibleStartIdx = Math.floor(scrollTop / rowHeight);
const rowVisibleEndIdx = Math.min(rowsCount - 1, Math.floor((scrollTop + height) / rowHeight));
const rowOverscanStartIdx = Math.max(0, Math.floor((rowVisibleStartIdx - overscanThreshold) / RENDER_BACTCH_SIZE) * RENDER_BACTCH_SIZE);
const rowOverscanEndIdx = Math.min(rowsCount - 1, Math.ceil((rowVisibleEndIdx + overscanThreshold) / RENDER_BACTCH_SIZE) * RENDER_BACTCH_SIZE);
var overscanThreshold = 4;
var rowVisibleStartIdx = Math.floor(scrollTop / rowHeight);
var rowVisibleEndIdx = Math.min(rowsCount - 1, Math.floor((scrollTop + height) / rowHeight));
var rowOverscanStartIdx = Math.max(0, Math.floor((rowVisibleStartIdx - overscanThreshold) / RENDER_BACTCH_SIZE) * RENDER_BACTCH_SIZE);
var rowOverscanEndIdx = Math.min(rowsCount - 1, Math.ceil((rowVisibleEndIdx + overscanThreshold) / RENDER_BACTCH_SIZE) * RENDER_BACTCH_SIZE);
return [rowOverscanStartIdx, rowOverscanEndIdx];

@@ -20,8 +20,8 @@ }

// get the viewport's left side and right side positions for non-frozen columns
const totalFrozenColumnWidth = getTotalFrozenColumnWidth(columns, lastFrozenColumnIndex);
const viewportLeft = scrollLeft + totalFrozenColumnWidth;
const viewportRight = scrollLeft + viewportWidth;
var totalFrozenColumnWidth = getTotalFrozenColumnWidth(columns, lastFrozenColumnIndex);
var viewportLeft = scrollLeft + totalFrozenColumnWidth;
var viewportRight = scrollLeft + viewportWidth;
// get first and last non-frozen column indexes
const lastColIdx = columns.length - 1;
const firstUnfrozenColumnIdx = Math.min(lastFrozenColumnIndex + 1, lastColIdx);
var lastColIdx = columns.length - 1;
var firstUnfrozenColumnIdx = Math.min(lastFrozenColumnIndex + 1, lastColIdx);
// skip rendering non-frozen columns if the frozen columns cover the entire viewport

@@ -32,5 +32,5 @@ if (viewportLeft >= viewportRight) {

// get the first visible non-frozen column index
let colVisibleStartIdx = firstUnfrozenColumnIdx;
var colVisibleStartIdx = firstUnfrozenColumnIdx;
while (colVisibleStartIdx < lastColIdx) {
const { left, width } = columns[colVisibleStartIdx];
var _a = columns[colVisibleStartIdx], left = _a.left, width = _a.width;
// if the right side of the columnn is beyond the left side of the available viewport,

@@ -44,5 +44,5 @@ // then it is the first column that's at least partially visible

// get the last visible non-frozen column index
let colVisibleEndIdx = colVisibleStartIdx;
var colVisibleEndIdx = colVisibleStartIdx;
while (colVisibleEndIdx < lastColIdx) {
const { left, width } = columns[colVisibleEndIdx];
var _b = columns[colVisibleEndIdx], left = _b.left, width = _b.width;
// if the right side of the column is beyond or equal to the right side of the available viewport,

@@ -55,10 +55,10 @@ // then it the last column that's at least partially visible, as the previous column's right side is not beyond the viewport.

}
const colOverscanStartIdx = Math.max(firstUnfrozenColumnIdx, colVisibleStartIdx - 1);
const colOverscanEndIdx = Math.min(lastColIdx, colVisibleEndIdx + 1);
var colOverscanStartIdx = Math.max(firstUnfrozenColumnIdx, colVisibleStartIdx - 1);
var colOverscanEndIdx = Math.min(lastColIdx, colVisibleEndIdx + 1);
return [colOverscanStartIdx, colOverscanEndIdx];
}
export function getViewportColumns(columns, colOverscanStartIdx, colOverscanEndIdx) {
const viewportColumns = [];
for (let colIdx = 0; colIdx <= colOverscanEndIdx; colIdx++) {
const column = columns[colIdx];
var viewportColumns = [];
for (var colIdx = 0; colIdx <= colOverscanEndIdx; colIdx++) {
var column = columns[colIdx];
if (colIdx < colOverscanStartIdx && !column.frozen)

@@ -65,0 +65,0 @@ continue;

2

package.json
{
"name": "react-data-grid-temp",
"version": "7.0.0-canary.17.1",
"version": "7.0.0-canary.18",
"license": "MIT",

@@ -5,0 +5,0 @@ "description": "Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like",

lib/Cell.js.map

Sorry, the diff of this file is not supported yet

lib/Columns.js.map

Sorry, the diff of this file is not supported yet

lib/DataGrid.js.map

Sorry, the diff of this file is not supported yet

lib/editors/ClickOutside.js.map

Sorry, the diff of this file is not supported yet

lib/editors/EditorContainer.js.map

Sorry, the diff of this file is not supported yet

lib/editors/EditorPortal.js.map

Sorry, the diff of this file is not supported yet

lib/editors/SimpleTextEditor.js.map

Sorry, the diff of this file is not supported yet

lib/EventBus.js.map

Sorry, the diff of this file is not supported yet

lib/FilterRow.js.map

Sorry, the diff of this file is not supported yet

lib/formatters/SelectCellFormatter.js.map

Sorry, the diff of this file is not supported yet

lib/formatters/SimpleCellFormatter.js.map

Sorry, the diff of this file is not supported yet

lib/HeaderCell.js.map

Sorry, the diff of this file is not supported yet

lib/headerCells/ResizableHeaderCell.js.map

Sorry, the diff of this file is not supported yet

lib/headerCells/SortableHeaderCell.js.map

Sorry, the diff of this file is not supported yet

lib/HeaderRow.js.map

Sorry, the diff of this file is not supported yet

lib/masks/CellMask.js.map

Sorry, the diff of this file is not supported yet

lib/masks/DragMask.js.map

Sorry, the diff of this file is not supported yet

lib/masks/InteractionMasks.js.map

Sorry, the diff of this file is not supported yet

lib/Row.js.map

Sorry, the diff of this file is not supported yet

lib/SummaryCell.js.map

Sorry, the diff of this file is not supported yet

lib/SummaryRow.js.map

Sorry, the diff of this file is not supported yet

lib/utils/columnUtils.js.map

Sorry, the diff of this file is not supported yet

lib/utils/domUtils.js.map

Sorry, the diff of this file is not supported yet

lib/utils/selectedCellUtils.js.map

Sorry, the diff of this file is not supported yet

lib/utils/viewportUtils.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc