Skip to content

Commit

Permalink
Merge pull request #22 from patrick-jones/escape
Browse files Browse the repository at this point in the history 
Adds the ability to revert an edit by hitting the escape key.
  • Loading branch information
@nadbm
nadbm authored Jun 1, 2017
2 parents 95ebb2c + 56ffb3d commit a3f0a04
Show file tree
Hide file tree
Showing 6 changed files with 141 additions and 131 deletions.
2 changes: 1 addition & 1 deletion lib/DataCell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ var DataCell = function (_PureComponent) {
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps) {
if (prevProps.editing === true && this.props.editing === false) {
if (prevProps.editing === true && this.props.editing === false && this.props.reverting === false) {
this.onChange(this._input.value);
}
if (prevProps.editing === false && this.props.editing === true) {
Expand Down
17 changes: 14 additions & 3 deletions lib/DataSheet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"

var TAB_KEY = 9;
var ENTER_KEY = 13;
var ESCAPE_KEY = 27;
var LEFT_KEY = 37;
var UP_KEY = 38;
var RIGHT_KEY = 39;
Expand Down Expand Up @@ -81,6 +82,7 @@ var DataSheet = function (_PureComponent) {
selecting: false,
forceEdit: false,
editing: {},
reverting: {},
clear: {}
};
_this.state = _this.defaultState;
Expand Down Expand Up @@ -231,6 +233,7 @@ var DataSheet = function (_PureComponent) {
var ctrlKeyPressed = e.ctrlKey || e.metaKey;
var deleteKeysPressed = e.keyCode === DELETE_KEY || e.keyCode === BACKSPACE_KEY;
var enterKeyPressed = e.keyCode === ENTER_KEY;
var escapeKeyPressed = e.keyCode === ESCAPE_KEY;
var numbersPressed = e.keyCode >= 48 && e.keyCode <= 57;
var lettersPressed = e.keyCode >= 65 && e.keyCode <= 90;
var numPadKeysPressed = e.keyCode >= 96 && e.keyCode <= 105;
Expand All @@ -255,15 +258,18 @@ var DataSheet = function (_PureComponent) {
});
e.preventDefault();
} else if (enterKeyPressed && isEditing) {
this.setState({ editing: {} });
this.setState({ editing: {}, reverting: {} });
} else if (escapeKeyPressed && isEditing) {
this.setState({ editing: {}, reverting: editing });
} else if (enterKeyPressed && !isEditing && !cell.readOnly) {
this.setState({ editing: start, clear: {}, forceEdit: true });
this.setState({ editing: start, clear: {}, reverting: {}, forceEdit: true });
} else if (numbersPressed || numPadKeysPressed || lettersPressed || equationKeysPressed || enterKeyPressed) {
//empty out cell if user starts typing without pressing enter
if (!isEditing && !cell.readOnly) {
this.setState({
editing: start,
clear: start,
reverting: {},
forceEdit: false
});
}
Expand Down Expand Up @@ -350,6 +356,9 @@ var DataSheet = function (_PureComponent) {
var isEditing = function isEditing(i, j) {
return _this4.state.editing.i === i && _this4.state.editing.j === j;
};
var isReverting = function isReverting(i, j) {
return _this4.state.reverting.i === i && _this4.state.reverting.j === j;
};
var shouldClear = function shouldClear(i, j) {
return _this4.state.clear.i === i && _this4.state.clear.j === j;
};
Expand All @@ -376,7 +385,9 @@ var DataSheet = function (_PureComponent) {
onMouseDown: cell.disableEvents ? nullFtn : _this4.onMouseDown,
onDoubleClick: cell.disableEvents ? nullFtn : _this4.onDoubleClick,
onMouseOver: cell.disableEvents ? nullFtn : _this4.onMouseOver,
onContextMenu: cell.disableEvents ? nullFtn : _this4.onContextMenu, editing: isEditing(i, j),
onContextMenu: cell.disableEvents ? nullFtn : _this4.onContextMenu,
editing: isEditing(i, j),
reverting: isReverting(i, j),
colSpan: cell.colSpan,
value: valueRenderer(cell)
};
Expand Down
2 changes: 1 addition & 1 deletion src/DataCell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default class DataCell extends PureComponent {
}

componentDidUpdate(prevProps) {
if (prevProps.editing === true && this.props.editing === false) {
if (prevProps.editing === true && this.props.editing === false && this.props.reverting === false) {
this.onChange(this._input.value);
}
if (prevProps.editing === false && this.props.editing === true) {
Expand Down
19 changes: 14 additions & 5 deletions src/DataSheet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import ComponentCell from './ComponentCell';

const TAB_KEY = 9;
const ENTER_KEY = 13;
const ESCAPE_KEY = 27;
const LEFT_KEY = 37;
const UP_KEY = 38;
const RIGHT_KEY = 39;
Expand Down Expand Up @@ -46,6 +47,7 @@ export default class DataSheet extends PureComponent {
selecting: false,
forceEdit: false,
editing: {},
reverting: {},
clear: {}
};
this.state = this.defaultState;
Expand Down Expand Up @@ -96,7 +98,7 @@ export default class DataSheet extends PureComponent {
handlePaste(e) {
if(isEmpty(this.state.editing)) {
const start = this.state.start;

const pastedMap = [];
const pasteData = e.clipboardData
.getData('text/plain')
Expand All @@ -113,7 +115,7 @@ export default class DataSheet extends PureComponent {
this.onChange(start.i + i, start.j + j, pastedData);
end = {i: start.i + i, j: start.j + j};
}

});
pastedMap.push(rowData);
});
Expand Down Expand Up @@ -176,6 +178,7 @@ export default class DataSheet extends PureComponent {
const ctrlKeyPressed = e.ctrlKey || e.metaKey;
const deleteKeysPressed = (e.keyCode === DELETE_KEY || e.keyCode === BACKSPACE_KEY);
const enterKeyPressed = e.keyCode === ENTER_KEY;
const escapeKeyPressed = e.keyCode === ESCAPE_KEY;
const numbersPressed = (e.keyCode >= 48 && e.keyCode <= 57);
const lettersPressed = (e.keyCode >= 65 && e.keyCode <= 90);
const numPadKeysPressed = (e.keyCode >= 96 && e.keyCode <= 105);
Expand All @@ -200,9 +203,11 @@ export default class DataSheet extends PureComponent {
);
e.preventDefault();
} else if (enterKeyPressed && isEditing) {
this.setState({editing: {}});
this.setState({editing: {}, reverting: {}});
} else if (escapeKeyPressed && isEditing) {
this.setState({editing: {}, reverting: editing});
} else if (enterKeyPressed && !isEditing && !cell.readOnly) {
this.setState({editing: start, clear: {}, forceEdit: true});
this.setState({editing: start, clear: {}, reverting: {}, forceEdit: true});
} else if (numbersPressed
|| numPadKeysPressed
|| lettersPressed
Expand All @@ -214,6 +219,7 @@ export default class DataSheet extends PureComponent {
this.setState({
editing: start,
clear: start,
reverting: {},
forceEdit: false
});
}
Expand Down Expand Up @@ -288,6 +294,7 @@ export default class DataSheet extends PureComponent {
};

const isEditing = (i, j) => this.state.editing.i === i && this.state.editing.j === j;
const isReverting = (i, j) => this.state.reverting.i === i && this.state.reverting.j === j;
const shouldClear = (i, j) => this.state.clear.i === i && this.state.clear.j === j;

return <table ref={(r) => this.dgDom = r} className={'data-grid ' + (className ? className : '')}>
Expand All @@ -305,7 +312,9 @@ export default class DataSheet extends PureComponent {
onMouseDown: cell.disableEvents ? nullFtn : this.onMouseDown,
onDoubleClick: cell.disableEvents ? nullFtn : this.onDoubleClick,
onMouseOver: cell.disableEvents ? nullFtn : this.onMouseOver,
onContextMenu: cell.disableEvents ? nullFtn : this.onContextMenu,editing: isEditing(i, j),
onContextMenu: cell.disableEvents ? nullFtn : this.onContextMenu,
editing: isEditing(i, j),
reverting: isReverting(i, j),
colSpan: cell.colSpan,
value: valueRenderer(cell),
};
Expand Down
Loading

0 comments on commit a3f0a04

Please sign in to comment.