Skip to content

Commit 01b90c6

Browse files
nadbmnadbm
committed
package for publish
1 parent 497ba4e commit 01b90c6

File tree

2 files changed

+115
-104
lines changed

2 files changed

+115
-104
lines changed

‎lib/DataCell.js‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -124,34 +124,19 @@ var DataCell = function (_PureComponent) {
124124
}, {
125125
key: 'handleCommit',
126126
value: function handleCommit(value, e) {
127-
this.setState({ value: value });
128127
var _props = this.props,
129128
onChange = _props.onChange,
130129
onNavigate = _props.onNavigate;
131130

132131
if (value !== initialData(this.props)) {
132+
this.setState({ value: value });
133133
onChange(this.props.row, this.props.col, value);
134134
} else {
135135
this.handleRevert();
136136
}
137137
if (e) {
138-
var keyCode = e.which || e.keyCode;
139-
switch (keyCode) {
140-
case _keys.ENTER_KEY:
141-
return onNavigate({ i: e.shiftKey ? -1 : 1, j: 0 });
142-
case _keys.TAB_KEY:
143-
return onNavigate({ i: 0, j: e.shiftKey ? -1 : 1 });
144-
case _keys.LEFT_KEY:
145-
return onNavigate({ i: 0, j: -1 });
146-
case _keys.RIGHT_KEY:
147-
return onNavigate({ i: 0, j: 1 });
148-
case _keys.UP_KEY:
149-
return onNavigate({ i: -1, j: 0 });
150-
case _keys.DOWN_KEY:
151-
return onNavigate({ i: 1, j: 0 });
152-
default:
153-
break;
154-
}
138+
e.preventDefault();
139+
onNavigate(e, true);
155140
}
156141
}
157142
}, {

‎lib/DataSheet.js‎

Lines changed: 112 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@ var DataSheet = function (_PureComponent) {
8282
_this.onContextMenu = _this.onContextMenu.bind(_this);
8383
_this.handleNavigate = _this.handleNavigate.bind(_this);
8484
_this.handleKey = _this.handleKey.bind(_this).bind(_this);
85-
_this.handleComponentKey = _this.handleComponentKey.bind(_this);
8685
_this.handleCopy = _this.handleCopy.bind(_this);
8786
_this.handlePaste = _this.handlePaste.bind(_this);
8887
_this.pageClick = _this.pageClick.bind(_this);
@@ -91,6 +90,9 @@ var DataSheet = function (_PureComponent) {
9190
_this.isSelected = _this.isSelected.bind(_this);
9291
_this.isEditing = _this.isEditing.bind(_this);
9392
_this.isClearing = _this.isClearing.bind(_this);
93+
_this.handleComponentKey = _this.handleComponentKey.bind(_this);
94+
95+
_this.handleKeyboardCellMovement = _this.handleKeyboardCellMovement.bind(_this);
9496

9597
_this.defaultState = {
9698
start: {},
@@ -195,46 +197,51 @@ var DataSheet = function (_PureComponent) {
195197
}
196198
}, {
197199
key: 'handleKeyboardCellMovement',
198-
value: function handleKeyboardCellMovement(e, _ref) {
199-
var data = _ref.data,
200-
start = _ref.start,
201-
isEditing = _ref.isEditing,
202-
currentCell = _ref.currentCell;
200+
value: function handleKeyboardCellMovement(e) {
201+
var commit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
202+
var _state2 = this.state,
203+
start = _state2.start,
204+
editing = _state2.editing;
205+
var data = this.props.data;
203206

204-
if (isEditing) {
205-
return false;
206-
}
207-
var hasComponent = currentCell && currentCell.component;
208-
var forceComponent = currentCell && currentCell.forceComponent;
207+
var isEditing = editing && !isEmpty(editing);
208+
var currentCell = data[start.i] && data[start.i][start.j];
209209

210-
if (hasComponent && (isEditing || forceComponent)) {
210+
if (isEditing && !commit) {
211211
return false;
212212
}
213+
var hasComponent = currentCell && currentCell.component;
213214

214215
var keyCode = e.which || e.keyCode;
215-
var newLocation = null;
216216

217-
if (keyCode === _keys.TAB_KEY && !e.shiftKey) {
218-
newLocation = { i: start.i, j: start.j + 1 };
219-
newLocation = typeof data[newLocation.i][newLocation.j] !== 'undefined' ? newLocation : { i: start.i + 1, j: 0 };
217+
if (hasComponent && isEditing) {
218+
/*
219+
if (keyCode === ESCAPE_KEY) {
220+
e.preventDefault()
221+
this.onRevert()
222+
}
223+
if (keyCode === ENTER_KEY) {
224+
this.handleNavigate(e, {i: e.shiftKey ? -1 : 1, j: 0})
225+
} else if (keyCode === TAB_KEY) {
226+
this.handleNavigate(e, {i: 0, j: e.shiftKey ? -1 : 1}, true)
227+
} */
228+
e.preventDefault();
229+
return;
230+
}
231+
232+
if (keyCode === _keys.TAB_KEY) {
233+
this.handleNavigate(e, { i: 0, j: e.shiftKey ? -1 : 1 }, true);
220234
} else if (keyCode === _keys.RIGHT_KEY) {
221-
newLocation = { i: start.i, j: start.j + 1 };
222-
} else if (keyCode === _keys.LEFT_KEY || keyCode === _keys.TAB_KEY && e.shiftKey) {
223-
newLocation = { i: start.i, j: start.j - 1 };
235+
this.handleNavigate(e, { i: 0, j: 1 });
236+
} else if (keyCode === _keys.LEFT_KEY) {
237+
this.handleNavigate(e, { i: 0, j: -1 });
224238
} else if (keyCode === _keys.UP_KEY) {
225-
newLocation = { i: start.i - 1, j: start.j };
239+
this.handleNavigate(e, { i: -1, j: 0 });
226240
} else if (keyCode === _keys.DOWN_KEY) {
227-
newLocation = { i: start.i + 1, j: start.j };
228-
}
229-
230-
if (newLocation && data[newLocation.i] && typeof data[newLocation.i][newLocation.j] !== 'undefined') {
231-
this.setState({ start: newLocation, end: newLocation, editing: {} });
232-
}
233-
if (newLocation) {
234-
e.preventDefault();
235-
return true;
241+
this.handleNavigate(e, { i: 1, j: 0 });
242+
} else if (commit && keyCode === _keys.ENTER_KEY) {
243+
this.handleNavigate(e, { i: e.shiftKey ? -1 : 1, j: 0 });
236244
}
237-
return false;
238245
}
239246
}, {
240247
key: 'getSelectedCells',
@@ -256,10 +263,10 @@ var DataSheet = function (_PureComponent) {
256263
return;
257264
}
258265
var keyCode = e.which || e.keyCode;
259-
var _state2 = this.state,
260-
start = _state2.start,
261-
end = _state2.end,
262-
editing = _state2.editing;
266+
var _state3 = this.state,
267+
start = _state3.start,
268+
end = _state3.end,
269+
editing = _state3.editing;
263270

264271
var data = this.props.data;
265272
var isEditing = editing && !isEmpty(editing);
@@ -278,19 +285,20 @@ var DataSheet = function (_PureComponent) {
278285
109, /* decimal point */
279286
110].indexOf(keyCode) > -1;
280287

281-
if (noCellsSelected || ctrlKeyPressed || this.handleKeyboardCellMovement(e, { data: data, start: start, isEditing: isEditing, currentCell: currentCell })) {
288+
if (noCellsSelected || ctrlKeyPressed) {
282289
return true;
283290
}
284291

285292
if (!isEditing) {
293+
this.handleKeyboardCellMovement(e);
286294
if (deleteKeysPressed) {
287295
// ugly solution brought to you by https://reactjs.org/docs/react-component.html#setstate
288296
// setState in a loop is unreliable
289297
setTimeout(function () {
290-
_this3.getSelectedCells(data, start, end).map(function (_ref2) {
291-
var cell = _ref2.cell,
292-
i = _ref2.i,
293-
j = _ref2.j;
298+
_this3.getSelectedCells(data, start, end).map(function (_ref) {
299+
var cell = _ref.cell,
300+
i = _ref.i,
301+
j = _ref.j;
294302
return !cell.readOnly ? _this3.onChange(i, j, '') : null;
295303
});
296304
}, 0);
@@ -307,50 +315,68 @@ var DataSheet = function (_PureComponent) {
307315
}
308316
}
309317
}, {
310-
key: 'handleComponentKey',
311-
value: function handleComponentKey(e) {
318+
key: 'handleNavigate',
319+
value: function handleNavigate(e, offsets, jumpRow) {
312320
var _this4 = this;
313321

314-
// handles keyboard events when editing components
315-
var keyCode = e.which || e.keyCode;
316-
if ([_keys.ENTER_KEY, _keys.ESCAPE_KEY, _keys.TAB_KEY].includes(keyCode)) {
317-
var editing = this.state.editing;
318-
319-
if (!isEmpty(editing)) {
320-
var data = this.props.data;
321-
322-
var currentCell = data[editing.i][editing.j];
323-
var offset = e.shiftKey ? -1 : 1;
324-
if (currentCell && currentCell.component) {
325-
var func = this.onRevert; // ESCAPE_KEY
326-
if (keyCode === _keys.ENTER_KEY) {
327-
func = function func() {
328-
return _this4.handleNavigate({ i: offset, j: 0 });
329-
};
330-
} else if (keyCode === _keys.TAB_KEY) {
331-
func = function func() {
332-
return _this4.handleNavigate({ i: 0, j: offset });
333-
};
334-
}
335-
// setTimeout makes sure that component is done handling the event before we take over
336-
setTimeout(func, 1);
322+
if (offsets && (offsets.i || offsets.j)) {
323+
var start = this.state.start;
324+
var data = this.props.data;
325+
326+
var newLocation = { i: start.i + offsets.i, j: start.j + offsets.j };
327+
var updateLocation = function updateLocation() {
328+
if (data[newLocation.i] && typeof data[newLocation.i][newLocation.j] !== 'undefined') {
329+
_this4.setState({ start: newLocation, end: newLocation, editing: {} });
330+
e.preventDefault();
331+
return true;
337332
}
333+
return false;
334+
};
335+
if (!updateLocation() && jumpRow) {
336+
if (offsets.j < 0) {
337+
newLocation = { i: start.i - 1, j: data[0].length - 1 };
338+
} else {
339+
newLocation = { i: start.i + 1, j: 0 };
340+
}
341+
updateLocation();
338342
}
339343
}
340344
}
341345
}, {
342-
key: 'handleNavigate',
343-
value: function handleNavigate(offsets) {
344-
if (offsets && (offsets.i || offsets.j)) {
345-
var start = this.state.start;
346-
var data = this.props.data;
346+
key: 'handleComponentKey',
347+
value: function handleComponentKey(e) {
348+
var _this5 = this;
347349

348-
var newLocation = { i: start.i + offsets.i, j: start.j + offsets.j };
349-
if (data[newLocation.i] && typeof data[newLocation.i][newLocation.j] !== 'undefined') {
350-
this.setState({ start: newLocation, end: newLocation, editing: {} });
350+
// handles keyboard events when editing components
351+
var keyCode = e.which || e.keyCode;
352+
if (![_keys.ENTER_KEY, _keys.ESCAPE_KEY, _keys.TAB_KEY].includes(keyCode)) {
353+
return;
354+
}
355+
var editing = this.state.editing;
356+
var data = this.props.data;
357+
358+
var isEditing = !isEmpty(editing);
359+
if (isEditing) {
360+
var currentCell = data[editing.i][editing.j];
361+
var offset = e.shiftKey ? -1 : 1;
362+
if (currentCell && currentCell.component && !currentCell.forceComponent) {
363+
e.preventDefault();
364+
var func = this.onRevert; // ESCAPE_KEY
365+
if (keyCode === _keys.ENTER_KEY) {
366+
func = function func() {
367+
return _this5.handleNavigate(e, { i: offset, j: 0 });
368+
};
369+
} else if (keyCode === _keys.TAB_KEY) {
370+
func = function func() {
371+
return _this5.handleNavigate(e, { i: 0, j: offset }, true);
372+
};
373+
}
374+
// setTimeout makes sure that component is done handling the event before we take over
375+
setTimeout(function () {
376+
func();_this5.dgDom && _this5.dgDom.focus();
377+
}, 1);
351378
}
352379
}
353-
this.dgDom && this.dgDom.focus();
354380
}
355381
}, {
356382
key: 'onContextMenu',
@@ -441,7 +467,7 @@ var DataSheet = function (_PureComponent) {
441467
}, {
442468
key: 'render',
443469
value: function render() {
444-
var _this5 = this;
470+
var _this6 = this;
445471

446472
var _props2 = this.props,
447473
SheetRenderer = _props2.sheetRenderer,
@@ -462,7 +488,7 @@ var DataSheet = function (_PureComponent) {
462488
return _react2.default.createElement(
463489
'span',
464490
{ ref: function ref(r) {
465-
_this5.dgDom = r;
491+
_this6.dgDom = r;
466492
}, tabIndex: '0', className: 'data-grid-container', onKeyDown: this.handleKey },
467493
_react2.default.createElement(
468494
SheetRenderer,
@@ -480,17 +506,17 @@ var DataSheet = function (_PureComponent) {
480506
col: j,
481507
cell: cell,
482508
forceEdit: forceEdit,
483-
onMouseDown: _this5.onMouseDown,
484-
onMouseOver: _this5.onMouseOver,
485-
onDoubleClick: _this5.onDoubleClick,
486-
onContextMenu: _this5.onContextMenu,
487-
onChange: _this5.onChange,
488-
onRevert: _this5.onRevert,
489-
onNavigate: _this5.handleNavigate,
490-
onKey: _this5.handleKey,
491-
selected: _this5.isSelected(i, j),
492-
editing: _this5.isEditing(i, j),
493-
clearing: _this5.isClearing(i, j),
509+
onMouseDown: _this6.onMouseDown,
510+
onMouseOver: _this6.onMouseOver,
511+
onDoubleClick: _this6.onDoubleClick,
512+
onContextMenu: _this6.onContextMenu,
513+
onChange: _this6.onChange,
514+
onRevert: _this6.onRevert,
515+
onNavigate: _this6.handleKeyboardCellMovement,
516+
onKey: _this6.handleKey,
517+
selected: _this6.isSelected(i, j),
518+
editing: _this6.isEditing(i, j),
519+
clearing: _this6.isClearing(i, j),
494520
attributesRenderer: attributesRenderer,
495521
cellRenderer: cellRenderer,
496522
valueRenderer: valueRenderer,

0 commit comments

Comments
 (0)