fixed-react-data-grid-custom
Version:
Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like
547 lines • 28.7 kB
JavaScript
import { __assign, __extends, __rest } from "tslib";
import React, { cloneElement } from 'react';
import { isElement } from 'react-is';
// Components
import SelectionMask from './SelectionMask';
import SelectionRangeMask from './SelectionRangeMask';
import CopyMask from './CopyMask';
import DragMask from './DragMask';
import DragHandle from './DragHandle';
import EditorContainer from '../common/editors/EditorContainer';
import EditorPortal from '../common/editors/EditorPortal';
// Utils
import { isKeyPrintable, isCtrlKeyHeldDown } from '../common/utils/keyboardUtils';
import { getSelectedDimensions, getSelectedCellValue, getSelectedRangeDimensions, getNextSelectedCellPosition, canExitGrid, isSelectedCellEditable, selectedRangeIsSingleCell } from '../utils/SelectedCellUtils';
import { isFrozen } from '../ColumnUtils';
import keyCodes from '../KeyCodes';
// Types
import { UpdateActions, CellNavigationMode, EventTypes } from '../common/enums';
var SCROLL_CELL_BUFFER = 2;
var InteractionMasks = /** @class */ (function (_super) {
__extends(InteractionMasks, _super);
function InteractionMasks() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
selectedPosition: {
idx: -1,
rowIdx: -1
},
selectedRange: {
topLeft: {
idx: -1, rowIdx: -1
},
bottomRight: {
idx: -1, rowIdx: -1
},
startCell: null,
cursorCell: null,
isDragging: false
},
copiedPosition: null,
draggedPosition: null,
editorPosition: null,
isEditorEnabled: false,
firstEditorKeyPress: null
};
_this.selectionMask = React.createRef();
_this.copyMask = React.createRef();
_this.unsubscribeEventHandlers = [];
_this.onKeyDown = function (e) {
if (isCtrlKeyHeldDown(e)) {
_this.onPressKeyWithCtrl(e);
}
else if (e.keyCode === keyCodes.Escape) {
_this.onPressEscape();
}
else if (e.keyCode === keyCodes.Tab) {
_this.onPressTab(e);
}
else if (_this.isKeyboardNavigationEvent(e)) {
_this.changeCellFromEvent(e);
}
else if (isKeyPrintable(e.keyCode) || [keyCodes.Backspace, keyCodes.Delete, keyCodes.Enter].includes(e.keyCode)) {
_this.openEditor(e);
}
};
_this.openEditor = function (event) {
if (_this.isSelectedCellEditable() && !_this.state.isEditorEnabled) {
_this.setState({
isEditorEnabled: true,
firstEditorKeyPress: event ? event.key : null,
editorPosition: _this.getEditorPosition()
});
}
};
_this.onFocus = function () {
var _a = _this.state.selectedPosition, idx = _a.idx, rowIdx = _a.rowIdx;
if (idx === -1 && rowIdx === -1) {
_this.selectFirstCell();
}
};
_this.selectCell = function (cell, openEditor) {
var callback = openEditor ? _this.openEditor : undefined;
// Close the editor to commit any pending changes
if (_this.state.isEditorEnabled) {
_this.closeEditor();
}
_this.setState(function () {
if (!_this.isCellWithinBounds(cell))
return null;
return {
selectedPosition: cell,
selectedRange: {
topLeft: cell,
bottomRight: cell,
startCell: cell,
cursorCell: cell,
isDragging: false
}
};
}, callback);
};
_this.onSelectCellRangeStarted = function (selectedPosition) {
_this.setState({
selectedRange: _this.createSingleCellSelectedRange(selectedPosition, true),
selectedPosition: selectedPosition
}, function () {
if (_this.props.onCellRangeSelectionStarted) {
_this.props.onCellRangeSelectionStarted(_this.state.selectedRange);
}
});
};
_this.onSelectCellRangeUpdated = function (cellPosition, isFromKeyboard, callback) {
if (!_this.state.selectedRange.isDragging && !isFromKeyboard || !_this.isCellWithinBounds(cellPosition)) {
return;
}
var startCell = _this.state.selectedRange.startCell || _this.state.selectedPosition;
var colIdxs = [startCell.idx, cellPosition.idx].sort(function (a, b) { return a - b; });
var rowIdxs = [startCell.rowIdx, cellPosition.rowIdx].sort(function (a, b) { return a - b; });
var topLeft = { idx: colIdxs[0], rowIdx: rowIdxs[0] };
var bottomRight = { idx: colIdxs[1], rowIdx: rowIdxs[1] };
var selectedRange = __assign(__assign({}, _this.state.selectedRange), {
// default the startCell to the selected cell, in case we've just started via keyboard
startCell: _this.state.selectedRange.startCell || _this.state.selectedPosition,
// assign the new state - the bounds of the range, and the new cursor cell
topLeft: topLeft,
bottomRight: bottomRight, cursorCell: cellPosition });
_this.setState({
selectedRange: selectedRange
}, function () {
if (_this.props.onCellRangeSelectionUpdated) {
_this.props.onCellRangeSelectionUpdated(_this.state.selectedRange);
}
if (callback) {
callback();
}
});
};
_this.onSelectCellRangeEnded = function () {
var selectedRange = __assign(__assign({}, _this.state.selectedRange), { isDragging: false });
_this.setState({ selectedRange: selectedRange }, function () {
if (_this.props.onCellRangeSelectionCompleted) {
_this.props.onCellRangeSelectionCompleted(_this.state.selectedRange);
}
// Focus the InteractionMasks, so it can receive keyboard events
_this.focus();
});
};
_this.handleDragStart = function (e) {
var selectedPosition = _this.state.selectedPosition;
// To prevent dragging down/up when reordering rows. (TODO: is this required)
if (selectedPosition.idx > -1) {
e.dataTransfer.effectAllowed = 'copy';
// Setting data is required to make an element draggable in FF
var transferData = JSON.stringify(selectedPosition);
try {
e.dataTransfer.setData('text/plain', transferData);
}
catch (ex) {
// IE only supports 'text' and 'URL' for the 'type' argument
e.dataTransfer.setData('text', transferData);
}
_this.setState({
draggedPosition: __assign(__assign({}, selectedPosition), { overRowIdx: selectedPosition.rowIdx })
});
}
};
_this.handleDragEnter = function (overRowIdx) {
_this.setState(function (_a) {
var draggedPosition = _a.draggedPosition;
if (draggedPosition) {
return { draggedPosition: __assign(__assign({}, draggedPosition), { overRowIdx: overRowIdx }) };
}
return null;
});
};
_this.handleDragEnd = function () {
var _a;
var draggedPosition = _this.state.draggedPosition;
if (draggedPosition === null)
return;
var rowIdx = draggedPosition.rowIdx, overRowIdx = draggedPosition.overRowIdx;
var _b = _this.props, columns = _b.columns, onGridRowsUpdated = _b.onGridRowsUpdated, rowGetter = _b.rowGetter;
var column = columns[draggedPosition.idx];
var value = getSelectedCellValue({ selectedPosition: draggedPosition, columns: columns, rowGetter: rowGetter });
var cellKey = column.key;
onGridRowsUpdated(cellKey, rowIdx, overRowIdx, (_a = {}, _a[cellKey] = value, _a), UpdateActions.CELL_DRAG);
_this.setState({
draggedPosition: null
});
};
_this.onDragHandleDoubleClick = function () {
var _a = _this.props, onDragHandleDoubleClick = _a.onDragHandleDoubleClick, rowGetter = _a.rowGetter;
var selectedPosition = _this.state.selectedPosition;
var idx = selectedPosition.idx, rowIdx = selectedPosition.rowIdx;
var rowData = rowGetter(selectedPosition.rowIdx);
onDragHandleDoubleClick({ idx: idx, rowIdx: rowIdx, rowData: rowData });
};
_this.onCommit = function (args) {
_this.props.onCommit(args);
_this.closeEditor();
};
_this.onCommitCancel = function () {
_this.closeEditor();
};
_this.getSelectedDimensions = function (selectedPosition, useGridColumns) {
var _a = _this.props, scrollLeft = _a.scrollLeft, getRowHeight = _a.getRowHeight, getRowTop = _a.getRowTop, getRowColumns = _a.getRowColumns, gridColumns = _a.columns;
var columns = useGridColumns ? gridColumns : getRowColumns(selectedPosition.rowIdx);
var top = getRowTop(selectedPosition.rowIdx);
var rowHeight = getRowHeight(selectedPosition.rowIdx);
var dimension = getSelectedDimensions({ selectedPosition: selectedPosition, columns: columns, scrollLeft: scrollLeft, rowHeight: rowHeight });
dimension.top = top;
return dimension;
};
return _this;
}
InteractionMasks.prototype.componentDidUpdate = function (prevProps, prevState) {
var _a = this.state, selectedPosition = _a.selectedPosition, isEditorEnabled = _a.isEditorEnabled;
var prevSelectedPosition = prevState.selectedPosition, prevIsEditorEnabled = prevState.isEditorEnabled;
var isSelectedPositionChanged = selectedPosition !== prevSelectedPosition && (selectedPosition.rowIdx !== prevSelectedPosition.rowIdx || selectedPosition.idx !== prevSelectedPosition.idx);
var isEditorClosed = isEditorEnabled !== prevIsEditorEnabled && !isEditorEnabled;
if (isSelectedPositionChanged) {
// Call event handlers if selected cell has changed
var _b = this.props, onCellSelected = _b.onCellSelected, onCellDeSelected = _b.onCellDeSelected;
if (onCellDeSelected && this.isCellWithinBounds(prevSelectedPosition)) {
onCellDeSelected(__assign({}, prevSelectedPosition));
}
if (onCellSelected && this.isCellWithinBounds(selectedPosition)) {
onCellSelected(__assign({}, selectedPosition));
}
}
if ((isSelectedPositionChanged && this.isCellWithinBounds(selectedPosition)) || isEditorClosed) {
this.focus();
}
};
InteractionMasks.prototype.componentDidMount = function () {
var _a = this.props, eventBus = _a.eventBus, enableCellAutoFocus = _a.enableCellAutoFocus;
this.unsubscribeEventHandlers = [
eventBus.subscribe(EventTypes.SELECT_CELL, this.selectCell),
eventBus.subscribe(EventTypes.SELECT_START, this.onSelectCellRangeStarted),
eventBus.subscribe(EventTypes.SELECT_UPDATE, this.onSelectCellRangeUpdated),
eventBus.subscribe(EventTypes.SELECT_END, this.onSelectCellRangeEnded),
eventBus.subscribe(EventTypes.DRAG_ENTER, this.handleDragEnter)
];
if (enableCellAutoFocus && this.isFocusedOnBody()) {
this.selectFirstCell();
}
};
InteractionMasks.prototype.componentWillUnmount = function () {
this.unsubscribeEventHandlers.forEach(function (h) { return h(); });
};
InteractionMasks.prototype.getEditorPosition = function () {
if (!this.selectionMask.current)
return null;
var editorPortalTarget = this.props.editorPortalTarget;
var _a = this.selectionMask.current.getBoundingClientRect(), selectionMaskLeft = _a.left, selectionMaskTop = _a.top;
if (editorPortalTarget === document.body) {
var _b = document.scrollingElement || document.documentElement, scrollLeft_1 = _b.scrollLeft, scrollTop_1 = _b.scrollTop;
return {
left: selectionMaskLeft + scrollLeft_1,
top: selectionMaskTop + scrollTop_1
};
}
var _c = editorPortalTarget.getBoundingClientRect(), portalTargetLeft = _c.left, portalTargetTop = _c.top;
var scrollLeft = editorPortalTarget.scrollLeft, scrollTop = editorPortalTarget.scrollTop;
return {
left: selectionMaskLeft - portalTargetLeft + scrollLeft,
top: selectionMaskTop - portalTargetTop + scrollTop
};
};
InteractionMasks.prototype.setMaskScollLeft = function (mask, position, scrollLeft) {
if (!mask || !position)
return;
var idx = position.idx, rowIdx = position.rowIdx;
if (!(idx >= 0 && rowIdx >= 0))
return;
var column = this.props.columns[idx];
if (!isFrozen(column))
return;
var top = this.props.getRowTop(rowIdx);
var left = scrollLeft + column.left;
var transform = "translate(" + left + "px, " + top + "px)";
if (mask.style.transform !== transform) {
mask.style.transform = transform;
}
};
/**
* Sets the position of SelectionMask and CopyMask components when the canvas is scrolled
* This is only required on the frozen columns
*/
InteractionMasks.prototype.setScrollLeft = function (scrollLeft) {
this.setMaskScollLeft(this.selectionMask.current, this.state.selectedPosition, scrollLeft);
this.setMaskScollLeft(this.copyMask.current, this.state.copiedPosition, scrollLeft);
};
InteractionMasks.prototype.isSelectedCellEditable = function () {
var _a = this.props, enableCellSelect = _a.enableCellSelect, columns = _a.columns, rowGetter = _a.rowGetter, onCheckCellIsEditable = _a.onCheckCellIsEditable;
var selectedPosition = this.state.selectedPosition;
return isSelectedCellEditable({ enableCellSelect: enableCellSelect, columns: columns, rowGetter: rowGetter, selectedPosition: selectedPosition, onCheckCellIsEditable: onCheckCellIsEditable });
};
InteractionMasks.prototype.closeEditor = function () {
this.setState({
isEditorEnabled: false,
firstEditorKeyPress: null,
editorPosition: null
});
};
InteractionMasks.prototype.onPressKeyWithCtrl = function (_a) {
var keyCode = _a.keyCode;
if (this.copyPasteEnabled()) {
if (keyCode === keyCodes.c) {
var _b = this.props, columns = _b.columns, rowGetter = _b.rowGetter;
var selectedPosition = this.state.selectedPosition;
var value = getSelectedCellValue({ selectedPosition: selectedPosition, columns: columns, rowGetter: rowGetter });
this.handleCopy(value);
}
else if (keyCode === keyCodes.v) {
this.handlePaste();
}
}
};
InteractionMasks.prototype.onPressTab = function (e) {
var _a = this.props, cellNavigationMode = _a.cellNavigationMode, columns = _a.columns, rowsCount = _a.rowsCount;
var _b = this.state, selectedPosition = _b.selectedPosition, isEditorEnabled = _b.isEditorEnabled;
// When there are no rows in the grid, we need to allow the browser to handle tab presses
if (rowsCount === 0) {
return;
}
// If we are in a position to leave the grid, stop editing but stay in that cell
if (canExitGrid(e, { cellNavigationMode: cellNavigationMode, columns: columns, rowsCount: rowsCount, selectedPosition: selectedPosition })) {
if (isEditorEnabled) {
this.closeEditor();
return;
}
// Reset the selected position before exiting
this.setState({ selectedPosition: { idx: -1, rowIdx: -1 } });
return;
}
this.changeCellFromEvent(e);
};
InteractionMasks.prototype.onPressEscape = function () {
if (this.copyPasteEnabled()) {
this.handleCancelCopy();
this.closeEditor();
}
};
InteractionMasks.prototype.copyPasteEnabled = function () {
return this.props.onCellCopyPaste !== null && this.isSelectedCellEditable();
};
InteractionMasks.prototype.handleCopy = function (value) {
var _a = this.state.selectedPosition, rowIdx = _a.rowIdx, idx = _a.idx;
this.setState({
copiedPosition: { rowIdx: rowIdx, idx: idx, value: value }
});
};
InteractionMasks.prototype.handleCancelCopy = function () {
this.setState({ copiedPosition: null });
};
InteractionMasks.prototype.handlePaste = function () {
var _a;
var _b = this.props, columns = _b.columns, onCellCopyPaste = _b.onCellCopyPaste, onGridRowsUpdated = _b.onGridRowsUpdated;
var _c = this.state, selectedPosition = _c.selectedPosition, copiedPosition = _c.copiedPosition;
var toRow = selectedPosition.rowIdx;
if (copiedPosition === null) {
return;
}
var cellKey = columns[selectedPosition.idx].key;
var fromRow = copiedPosition.rowIdx, value = copiedPosition.value;
if (onCellCopyPaste) {
onCellCopyPaste({
cellKey: cellKey,
rowIdx: toRow,
fromRow: fromRow,
toRow: toRow,
value: value
});
}
onGridRowsUpdated(cellKey, toRow, toRow, (_a = {}, _a[cellKey] = value, _a), UpdateActions.COPY_PASTE, fromRow);
};
InteractionMasks.prototype.isKeyboardNavigationEvent = function (e) {
return this.getKeyNavActionFromEvent(e) !== null;
};
InteractionMasks.prototype.getKeyNavActionFromEvent = function (e) {
var _a = this.props, rowVisibleEndIdx = _a.rowVisibleEndIdx, rowVisibleStartIdx = _a.rowVisibleStartIdx, colVisibleEndIdx = _a.colVisibleEndIdx, colVisibleStartIdx = _a.colVisibleStartIdx, onHitBottomBoundary = _a.onHitBottomBoundary, onHitRightBoundary = _a.onHitRightBoundary, onHitLeftBoundary = _a.onHitLeftBoundary, onHitTopBoundary = _a.onHitTopBoundary;
var isCellAtBottomBoundary = function (cell) { return cell.rowIdx >= rowVisibleEndIdx - SCROLL_CELL_BUFFER; };
var isCellAtTopBoundary = function (cell) { return cell.rowIdx !== 0 && cell.rowIdx <= rowVisibleStartIdx - 1; };
var isCellAtRightBoundary = function (cell) { return cell.idx !== 0 && cell.idx >= colVisibleEndIdx - 1; };
var isCellAtLeftBoundary = function (cell) { return cell.idx !== 0 && cell.idx <= colVisibleStartIdx + 1; };
var ArrowDown = {
getNext: function (current) { return (__assign(__assign({}, current), { rowIdx: current.rowIdx + 1 })); },
isCellAtBoundary: isCellAtBottomBoundary,
onHitBoundary: onHitBottomBoundary
};
var ArrowUp = {
getNext: function (current) { return (__assign(__assign({}, current), { rowIdx: current.rowIdx - 1 })); },
isCellAtBoundary: isCellAtTopBoundary,
onHitBoundary: onHitTopBoundary
};
var ArrowRight = {
getNext: function (current) { return (__assign(__assign({}, current), { idx: current.idx + 1 })); },
isCellAtBoundary: isCellAtRightBoundary,
onHitBoundary: function (next) {
onHitRightBoundary(next);
// Selected cell can hit the bottom boundary when the cellNavigationMode is 'changeRow'
if (isCellAtBottomBoundary(next)) {
onHitBottomBoundary();
}
}
};
var ArrowLeft = {
getNext: function (current) { return (__assign(__assign({}, current), { idx: current.idx - 1 })); },
isCellAtBoundary: isCellAtLeftBoundary,
onHitBoundary: function (next) {
onHitLeftBoundary(next);
// Selected cell can hit the top boundary when the cellNavigationMode is 'changeRow'
if (isCellAtTopBoundary(next)) {
onHitTopBoundary();
}
}
};
if (e.keyCode === keyCodes.Tab) {
return e.shiftKey === true ? ArrowLeft : ArrowRight;
}
switch (e.key) {
case 'ArrowDown': return ArrowDown;
case 'ArrowUp': return ArrowUp;
case 'ArrowRight': return ArrowRight;
case 'ArrowLeft': return ArrowLeft;
default: return null;
}
};
InteractionMasks.prototype.changeCellFromEvent = function (e) {
e.preventDefault();
var isTab = e.keyCode === keyCodes.Tab;
var isShift = e.shiftKey;
if (isTab) {
var cellNavigationMode = this.props.cellNavigationMode === CellNavigationMode.NONE
? CellNavigationMode.CHANGE_ROW
: this.props.cellNavigationMode;
this.changeCellFromKeyAction(e, cellNavigationMode);
}
else if (isShift) {
this.changeSelectedRangeFromArrowKeyAction(e);
}
else {
this.changeCellFromKeyAction(e, this.props.cellNavigationMode);
}
};
InteractionMasks.prototype.changeCellFromKeyAction = function (e, cellNavigationMode) {
var keyNavAction = this.getKeyNavActionFromEvent(e);
if (keyNavAction) {
var currentPosition = this.state.selectedPosition;
var next = this.getNextSelectedCellPositionForKeyNavAction(keyNavAction, currentPosition, cellNavigationMode);
this.checkIsAtGridBoundary(keyNavAction, next);
this.selectCell(next);
}
};
InteractionMasks.prototype.changeSelectedRangeFromArrowKeyAction = function (e) {
var _this = this;
var keyNavAction = this.getKeyNavActionFromEvent(e);
if (keyNavAction) {
var cellNavigationMode = this.props.cellNavigationMode;
var currentPosition = this.state.selectedRange.cursorCell || this.state.selectedPosition;
var next = this.getNextSelectedCellPositionForKeyNavAction(keyNavAction, currentPosition, cellNavigationMode);
this.checkIsAtGridBoundary(keyNavAction, next);
this.onSelectCellRangeUpdated(__assign({}, next), true, function () { _this.onSelectCellRangeEnded(); });
}
};
InteractionMasks.prototype.getNextSelectedCellPositionForKeyNavAction = function (keyNavAction, currentPosition, cellNavigationMode) {
var getNext = keyNavAction.getNext;
var nextPosition = getNext(currentPosition);
var _a = this.props, columns = _a.columns, rowsCount = _a.rowsCount;
return getNextSelectedCellPosition({
columns: columns,
rowsCount: rowsCount,
cellNavigationMode: cellNavigationMode,
nextPosition: nextPosition
});
};
InteractionMasks.prototype.checkIsAtGridBoundary = function (keyNavAction, next) {
var isCellAtBoundary = keyNavAction.isCellAtBoundary, onHitBoundary = keyNavAction.onHitBoundary;
var changeRowOrColumn = next.changeRowOrColumn, nextPos = __rest(next, ["changeRowOrColumn"]);
if (isCellAtBoundary(nextPos) || changeRowOrColumn) {
onHitBoundary(nextPos);
}
};
InteractionMasks.prototype.isCellWithinBounds = function (_a) {
var idx = _a.idx, rowIdx = _a.rowIdx;
var _b = this.props, columns = _b.columns, rowsCount = _b.rowsCount;
return rowIdx >= 0 && rowIdx < rowsCount && idx >= 0 && idx < columns.length;
};
InteractionMasks.prototype.isGridSelected = function () {
return this.isCellWithinBounds(this.state.selectedPosition);
};
InteractionMasks.prototype.isFocused = function () {
return document.activeElement === this.selectionMask.current;
};
InteractionMasks.prototype.isFocusedOnBody = function () {
return document.activeElement === document.body;
};
InteractionMasks.prototype.focus = function () {
if (this.selectionMask.current && !this.isFocused()) {
this.selectionMask.current.focus();
}
};
InteractionMasks.prototype.selectFirstCell = function () {
this.selectCell({ rowIdx: 0, idx: 0 });
};
InteractionMasks.prototype.createSingleCellSelectedRange = function (cellPosition, isDragging) {
return {
topLeft: cellPosition,
bottomRight: cellPosition,
startCell: cellPosition,
cursorCell: cellPosition,
isDragging: isDragging
};
};
InteractionMasks.prototype.isDragEnabled = function () {
return this.isSelectedCellEditable();
};
InteractionMasks.prototype.renderSingleCellSelectView = function () {
return (!this.state.isEditorEnabled && this.isGridSelected() && (React.createElement(SelectionMask, __assign({}, this.getSelectedDimensions(this.state.selectedPosition, true), { ref: this.selectionMask }), this.isDragEnabled() && (React.createElement(DragHandle, { onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd, onDoubleClick: this.onDragHandleDoubleClick })))));
};
InteractionMasks.prototype.renderCellRangeSelectView = function () {
var _a = this.props, columns = _a.columns, rowHeight = _a.rowHeight;
return (React.createElement(React.Fragment, null,
React.createElement(SelectionRangeMask, __assign({}, getSelectedRangeDimensions({ selectedRange: this.state.selectedRange, columns: columns, rowHeight: rowHeight }))),
React.createElement(SelectionMask, __assign({}, this.getSelectedDimensions(this.state.selectedPosition, true), { ref: this.selectionMask }))));
};
InteractionMasks.prototype.render = function () {
var _a = this.props, rowGetter = _a.rowGetter, contextMenu = _a.contextMenu, getRowColumns = _a.getRowColumns, scrollLeft = _a.scrollLeft, scrollTop = _a.scrollTop;
var _b = this.state, isEditorEnabled = _b.isEditorEnabled, firstEditorKeyPress = _b.firstEditorKeyPress, selectedPosition = _b.selectedPosition, draggedPosition = _b.draggedPosition, copiedPosition = _b.copiedPosition;
var rowData = rowGetter(selectedPosition.rowIdx);
var columns = getRowColumns(selectedPosition.rowIdx);
return (React.createElement("div", { onKeyDown: this.onKeyDown, onFocus: this.onFocus },
copiedPosition && (React.createElement(CopyMask, __assign({}, this.getSelectedDimensions(copiedPosition), { ref: this.copyMask }))),
draggedPosition && (React.createElement(DragMask, { draggedPosition: draggedPosition, getSelectedDimensions: this.getSelectedDimensions })),
selectedRangeIsSingleCell(this.state.selectedRange)
? this.renderSingleCellSelectView()
: this.renderCellRangeSelectView(),
isEditorEnabled && (React.createElement(EditorPortal, { target: this.props.editorPortalTarget },
React.createElement(EditorContainer, __assign({ firstEditorKeyPress: firstEditorKeyPress, onCommit: this.onCommit, onCommitCancel: this.onCommitCancel, rowIdx: selectedPosition.rowIdx, value: getSelectedCellValue({ selectedPosition: selectedPosition, columns: columns, rowGetter: rowGetter }), rowData: rowData, column: columns[selectedPosition.idx], scrollLeft: scrollLeft, scrollTop: scrollTop }, this.getSelectedDimensions(selectedPosition), this.state.editorPosition)))),
isElement(contextMenu) && cloneElement(contextMenu, __assign({}, selectedPosition))));
};
InteractionMasks.displayName = 'InteractionMasks';
return InteractionMasks;
}(React.Component));
export default InteractionMasks;
//# sourceMappingURL=InteractionMasks.js.map