From b6ba5b86609b84928a1fc51f12e5b312b6c2c562 Mon Sep 17 00:00:00 2001 From: Damir Galeev Date: Wed, 2 Dec 2020 18:59:27 +0100 Subject: [PATCH 1/2] Make keyboard control optional --- lib/DataSheet.js | 109 +++++++++++++++++++------------------ src/DataSheet.js | 90 +++++++++++++++--------------- types/react-datasheet.d.ts | 2 + 3 files changed, 106 insertions(+), 95 deletions(-) diff --git a/lib/DataSheet.js b/lib/DataSheet.js index 89b88691..c6266e44 100644 --- a/lib/DataSheet.js +++ b/lib/DataSheet.js @@ -494,60 +494,63 @@ var DataSheet = (function (_PureComponent) { if (e.isPropagationStopped && e.isPropagationStopped()) { return; } - var keyCode = e.which || e.keyCode; - - var _getState5 = this.getState(), - start = _getState5.start, - end = _getState5.end, - editing = _getState5.editing; - - var isEditing = editing && !isEmpty(editing); - var noCellsSelected = !start || isEmpty(start); - var ctrlKeyPressed = e.ctrlKey || e.metaKey; - var deleteKeysPressed = - keyCode === _keys.DELETE_KEY || keyCode === _keys.BACKSPACE_KEY; - var enterKeyPressed = keyCode === _keys.ENTER_KEY; - var numbersPressed = keyCode >= 48 && keyCode <= 57; - var lettersPressed = keyCode >= 65 && keyCode <= 90; - var latin1Supplement = keyCode >= 160 && keyCode <= 255; - var numPadKeysPressed = keyCode >= 96 && keyCode <= 105; - var currentCell = !noCellsSelected && this.props.data[start.i][start.j]; - var equationKeysPressed = - [ - 187 /* equal */, - 189 /* substract */, - 190 /* period */, - 107 /* add */, - 109 /* decimal point */, - 110, - ].indexOf(keyCode) > -1; - - if (noCellsSelected || ctrlKeyPressed) { - return true; - } + if (this.props.keyboardEnabled) { + var keyCode = e.which || e.keyCode; + + var _getState5 = this.getState(), + start = _getState5.start, + end = _getState5.end, + editing = _getState5.editing; + + var isEditing = editing && !isEmpty(editing); + var noCellsSelected = !start || isEmpty(start); + var ctrlKeyPressed = e.ctrlKey || e.metaKey; + var deleteKeysPressed = + keyCode === _keys.DELETE_KEY || keyCode === _keys.BACKSPACE_KEY; + var enterKeyPressed = keyCode === _keys.ENTER_KEY; + var numbersPressed = keyCode >= 48 && keyCode <= 57; + var lettersPressed = keyCode >= 65 && keyCode <= 90; + var latin1Supplement = keyCode >= 160 && keyCode <= 255; + var numPadKeysPressed = keyCode >= 96 && keyCode <= 105; + var currentCell = + !noCellsSelected && this.props.data[start.i][start.j]; + var equationKeysPressed = + [ + 187 /* equal */, + 189 /* substract */, + 190 /* period */, + 107 /* add */, + 109 /* decimal point */, + 110, + ].indexOf(keyCode) > -1; + + if (noCellsSelected || ctrlKeyPressed) { + return true; + } - if (!isEditing) { - this.handleKeyboardCellMovement(e); - if (deleteKeysPressed) { - e.preventDefault(); - this.clearSelectedCells(start, end); - } else if (currentCell && !currentCell.readOnly) { - if (enterKeyPressed) { - this._setState({ editing: start, clear: {}, forceEdit: true }); + if (!isEditing) { + this.handleKeyboardCellMovement(e); + if (deleteKeysPressed) { e.preventDefault(); - } else if ( - numbersPressed || - numPadKeysPressed || - lettersPressed || - latin1Supplement || - equationKeysPressed - ) { - // empty out cell if user starts typing without pressing enter - this._setState({ - editing: start, - clear: start, - forceEdit: false, - }); + this.clearSelectedCells(start, end); + } else if (currentCell && !currentCell.readOnly) { + if (enterKeyPressed) { + this._setState({ editing: start, clear: {}, forceEdit: true }); + e.preventDefault(); + } else if ( + numbersPressed || + numPadKeysPressed || + lettersPressed || + latin1Supplement || + equationKeysPressed + ) { + // empty out cell if user starts typing without pressing enter + this._setState({ + editing: start, + clear: start, + forceEdit: false, + }); + } } } } @@ -1063,6 +1066,7 @@ DataSheet.propTypes = { attributesRenderer: _propTypes2.default.func, keyFn: _propTypes2.default.func, handleCopy: _propTypes2.default.func, + keyboardEnabled: _propTypes2.default.bool, }; DataSheet.defaultProps = { @@ -1071,4 +1075,5 @@ DataSheet.defaultProps = { cellRenderer: _Cell2.default, valueViewer: _ValueViewer2.default, dataEditor: _DataEditor2.default, + keyboardEnabled: true, }; diff --git a/src/DataSheet.js b/src/DataSheet.js index d58cb1d8..a2bfd842 100644 --- a/src/DataSheet.js +++ b/src/DataSheet.js @@ -304,51 +304,53 @@ export default class DataSheet extends PureComponent { if (e.isPropagationStopped && e.isPropagationStopped()) { return; } - const keyCode = e.which || e.keyCode; - const { start, end, editing } = this.getState(); - const isEditing = editing && !isEmpty(editing); - const noCellsSelected = !start || isEmpty(start); - const ctrlKeyPressed = e.ctrlKey || e.metaKey; - const deleteKeysPressed = - keyCode === DELETE_KEY || keyCode === BACKSPACE_KEY; - const enterKeyPressed = keyCode === ENTER_KEY; - const numbersPressed = keyCode >= 48 && keyCode <= 57; - const lettersPressed = keyCode >= 65 && keyCode <= 90; - const latin1Supplement = keyCode >= 160 && keyCode <= 255; - const numPadKeysPressed = keyCode >= 96 && keyCode <= 105; - const currentCell = !noCellsSelected && this.props.data[start.i][start.j]; - const equationKeysPressed = - [ - 187 /* equal */, - 189 /* substract */, - 190 /* period */, - 107 /* add */, - 109 /* decimal point */, - 110, - ].indexOf(keyCode) > -1; - - if (noCellsSelected || ctrlKeyPressed) { - return true; - } + if (this.props.keyboardEnabled) { + const keyCode = e.which || e.keyCode; + const { start, end, editing } = this.getState(); + const isEditing = editing && !isEmpty(editing); + const noCellsSelected = !start || isEmpty(start); + const ctrlKeyPressed = e.ctrlKey || e.metaKey; + const deleteKeysPressed = + keyCode === DELETE_KEY || keyCode === BACKSPACE_KEY; + const enterKeyPressed = keyCode === ENTER_KEY; + const numbersPressed = keyCode >= 48 && keyCode <= 57; + const lettersPressed = keyCode >= 65 && keyCode <= 90; + const latin1Supplement = keyCode >= 160 && keyCode <= 255; + const numPadKeysPressed = keyCode >= 96 && keyCode <= 105; + const currentCell = !noCellsSelected && this.props.data[start.i][start.j]; + const equationKeysPressed = + [ + 187 /* equal */, + 189 /* substract */, + 190 /* period */, + 107 /* add */, + 109 /* decimal point */, + 110, + ].indexOf(keyCode) > -1; + + if (noCellsSelected || ctrlKeyPressed) { + return true; + } - if (!isEditing) { - this.handleKeyboardCellMovement(e); - if (deleteKeysPressed) { - e.preventDefault(); - this.clearSelectedCells(start, end); - } else if (currentCell && !currentCell.readOnly) { - if (enterKeyPressed) { - this._setState({ editing: start, clear: {}, forceEdit: true }); + if (!isEditing) { + this.handleKeyboardCellMovement(e); + if (deleteKeysPressed) { e.preventDefault(); - } else if ( - numbersPressed || - numPadKeysPressed || - lettersPressed || - latin1Supplement || - equationKeysPressed - ) { - // empty out cell if user starts typing without pressing enter - this._setState({ editing: start, clear: start, forceEdit: false }); + this.clearSelectedCells(start, end); + } else if (currentCell && !currentCell.readOnly) { + if (enterKeyPressed) { + this._setState({ editing: start, clear: {}, forceEdit: true }); + e.preventDefault(); + } else if ( + numbersPressed || + numPadKeysPressed || + lettersPressed || + latin1Supplement || + equationKeysPressed + ) { + // empty out cell if user starts typing without pressing enter + this._setState({ editing: start, clear: start, forceEdit: false }); + } } } } @@ -739,6 +741,7 @@ DataSheet.propTypes = { attributesRenderer: PropTypes.func, keyFn: PropTypes.func, handleCopy: PropTypes.func, + keyboardEnabled: PropTypes.bool, }; DataSheet.defaultProps = { @@ -747,4 +750,5 @@ DataSheet.defaultProps = { cellRenderer: Cell, valueViewer: ValueViewer, dataEditor: DataEditor, + keyboardEnabled: true, }; diff --git a/types/react-datasheet.d.ts b/types/react-datasheet.d.ts index 0c126176..25313435 100644 --- a/types/react-datasheet.d.ts +++ b/types/react-datasheet.d.ts @@ -55,6 +55,8 @@ declare namespace ReactDataSheet { dataEditor?: DataEditor; /** Method to render the underlying value of the cell function(cell, i, j). This data is visible once in edit mode. */ dataRenderer?: DataRenderer; + /** If set to 'false', all key bindings are disabled. Defaults to 'true'. */ + keyboardEnabled?: boolean; /** onCellsChanged handler: function(arrayOfChanges[, arrayOfAdditions]) {}, where changes is an array of objects of the shape {cell, row, col, value}. */ onCellsChanged?: CellsChangedHandler; /** Context menu handler : function(event, cell, i, j). */ From ae7f4b9a7a9c6e332332485af6f7ef4dfe24b74a Mon Sep 17 00:00:00 2001 From: Damir Galeev Date: Wed, 2 Dec 2020 19:16:03 +0100 Subject: [PATCH 2/2] Fix DataSheet