Skip to content

Commit 7fc4458

Browse files
nadbmnadbm
authored
Merge pull request #13 from weswigham/master
Add ability to have a context menu handler on the datasheet
2 parents 91a8cb2 + bdd1ba9 commit 7fc4458

File tree

7 files changed

+64
-11
lines changed

7 files changed

+64
-11
lines changed

‎lib/ComponentCell.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,8 @@ var ComponentCell = function (_PureComponent) {
6666
selected = _props.selected,
6767
_onMouseDown = _props.onMouseDown,
6868
_onMouseOver = _props.onMouseOver,
69-
_onDoubleClick = _props.onDoubleClick;
69+
_onDoubleClick = _props.onDoubleClick,
70+
_onContextMenu = _props.onContextMenu;
7071

7172

7273
return _react2.default.createElement(
@@ -86,6 +87,9 @@ var ComponentCell = function (_PureComponent) {
8687
onMouseOver: function onMouseOver() {
8788
return _onMouseOver(row, col);
8889
},
90+
onContextMenu: function onContextMenu(e) {
91+
return _onContextMenu(e, row, col);
92+
},
8993
colSpan: colSpan || 1,
9094
rowSpan: rowSpan || 1 },
9195
editing && !readOnly || forceComponent ? this.props.component : value
@@ -110,6 +114,7 @@ ComponentCell.propTypes = {
110114
onMouseDown: _react.PropTypes.func.isRequired,
111115
onDoubleClick: _react.PropTypes.func.isRequired,
112116
onMouseOver: _react.PropTypes.func.isRequired,
117+
onContextMenu: _react.PropTypes.func.isRequired,
113118
updated: _react.PropTypes.bool,
114119
forceComponent: _react.PropTypes.bool
115120
};

‎lib/DataCell.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,8 @@ var DataCell = function (_PureComponent) {
8686
selected = _props.selected,
8787
_onMouseDown = _props.onMouseDown,
8888
_onMouseOver = _props.onMouseOver,
89-
_onDoubleClick = _props.onDoubleClick;
89+
_onDoubleClick = _props.onDoubleClick,
90+
_onContextMenu = _props.onContextMenu;
9091

9192
return _react2.default.createElement(
9293
'td',
@@ -103,6 +104,9 @@ var DataCell = function (_PureComponent) {
103104
onMouseOver: function onMouseOver() {
104105
return _onMouseOver(row, col);
105106
},
107+
onContextMenu: function onContextMenu(e) {
108+
return _onContextMenu(e, row, col);
109+
},
106110
colSpan: colSpan || 1,
107111
rowSpan: rowSpan || 1
108112
},
@@ -134,5 +138,6 @@ DataCell.propTypes = {
134138
onMouseDown: _react.PropTypes.func.isRequired,
135139
onDoubleClick: _react.PropTypes.func.isRequired,
136140
onMouseOver: _react.PropTypes.func.isRequired,
141+
onContextMenu: _react.PropTypes.func.isRequired,
137142
updated: _react.PropTypes.bool
138143
};

‎lib/DataSheet.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ var DataSheet = function (_PureComponent) {
6464
_this.onMouseUp = _this.onMouseUp.bind(_this);
6565
_this.onMouseOver = _this.onMouseOver.bind(_this);
6666
_this.onDoubleClick = _this.onDoubleClick.bind(_this);
67+
_this.onContextMenu = _this.onContextMenu.bind(_this);
6768
_this.handleKey = _this.handleKey.bind(_this);
6869
_this.handleCopy = _this.handleCopy.bind(_this);
6970
_this.handlePaste = _this.handlePaste.bind(_this);
@@ -262,6 +263,14 @@ var DataSheet = function (_PureComponent) {
262263
}
263264
}
264265
}
266+
}, {
267+
key: 'onContextMenu',
268+
value: function onContextMenu(evt, i, j) {
269+
var cell = this.props.data[i][j];
270+
if (this.props.onContextMenu) {
271+
this.props.onContextMenu(evt, cell, i, j);
272+
}
273+
}
265274
}, {
266275
key: 'onDoubleClick',
267276
value: function onDoubleClick(i, j) {
@@ -363,6 +372,7 @@ var DataSheet = function (_PureComponent) {
363372
onMouseDown: cell.disableEvents ? nullFtn : _this4.onMouseDown,
364373
onDoubleClick: cell.disableEvents ? nullFtn : _this4.onDoubleClick,
365374
onMouseOver: cell.disableEvents ? nullFtn : _this4.onMouseOver,
375+
onContextMenu: cell.disableEvents ? nullFtn : _this4.onContextMenu,
366376
editing: isEditing(i, j),
367377
colSpan: cell.colSpan,
368378
value: valueRenderer(cell)
@@ -399,6 +409,7 @@ DataSheet.propTypes = {
399409
data: _react.PropTypes.array.isRequired,
400410
className: _react.PropTypes.string,
401411
onChange: _react.PropTypes.func,
412+
onContextMenu: _react.PropTypes.func,
402413
valueRenderer: _react.PropTypes.func.isRequired,
403414
dataRenderer: _react.PropTypes.func
404415
};

‎src/ComponentCell.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,8 @@ export default class ComponentCell extends PureComponent {
2121
}
2222

2323
render() {
24-
let {row, col, readOnly, forceComponent, rowSpan, colSpan, value, className, editing, selected, onMouseDown, onMouseOver, onDoubleClick} = this.props;
25-
26-
24+
let {row, col, readOnly, forceComponent, rowSpan, colSpan, value, className, editing, selected, onMouseDown, onMouseOver, onDoubleClick, onContextMenu} = this.props;
25+
2726
return (
2827
<td
2928
className={[
@@ -36,6 +35,7 @@ export default class ComponentCell extends PureComponent {
3635
onMouseDown={()=> onMouseDown(row,col)}
3736
onDoubleClick={()=> onDoubleClick(row,col)}
3837
onMouseOver={()=> onMouseOver(row,col)}
38+
onContextMenu={(e) => onContextMenu(e,row,col)}
3939
colSpan={colSpan || 1}
4040
rowSpan={rowSpan || 1}>
4141
{ ((editing && !readOnly) || forceComponent) ? this.props.component : value }
@@ -55,6 +55,7 @@ ComponentCell.propTypes = {
5555
onMouseDown: PropTypes.func.isRequired,
5656
onDoubleClick: PropTypes.func.isRequired,
5757
onMouseOver: PropTypes.func.isRequired,
58+
onContextMenu: PropTypes.func.isRequired,
5859
updated: PropTypes.bool,
5960
forceComponent: PropTypes.bool
6061
}

‎src/DataCell.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default class DataCell extends PureComponent {
3939
}
4040

4141
render() {
42-
const {row, col, rowSpan, readOnly, colSpan, value, className, editing, selected, onMouseDown, onMouseOver, onDoubleClick} = this.props;
42+
const {row, col, rowSpan, readOnly, colSpan, value, className, editing, selected, onMouseDown, onMouseOver, onDoubleClick, onContextMenu} = this.props;
4343
return (
4444
<td
4545
className={[
@@ -53,6 +53,7 @@ export default class DataCell extends PureComponent {
5353
onMouseDown={()=> onMouseDown(row,col)}
5454
onDoubleClick={()=> onDoubleClick(row,col)}
5555
onMouseOver={()=> onMouseOver(row,col)}
56+
onContextMenu={(e) => onContextMenu(e,row,col)}
5657
colSpan={colSpan || 1}
5758
rowSpan={rowSpan || 1}
5859
>
@@ -75,5 +76,6 @@ DataCell.propTypes = {
7576
onMouseDown: PropTypes.func.isRequired,
7677
onDoubleClick: PropTypes.func.isRequired,
7778
onMouseOver: PropTypes.func.isRequired,
79+
onContextMenu: PropTypes.func.isRequired,
7880
updated: PropTypes.bool
7981
}

‎src/DataSheet.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export default class DataSheet extends PureComponent {
3232
this.onMouseUp = this.onMouseUp.bind(this);
3333
this.onMouseOver = this.onMouseOver.bind(this);
3434
this.onDoubleClick = this.onDoubleClick.bind(this);
35+
this.onContextMenu = this.onContextMenu.bind(this);
3536
this.handleKey = this.handleKey.bind(this);
3637
this.handleCopy = this.handleCopy.bind(this);
3738
this.handlePaste = this.handlePaste.bind(this);
@@ -221,6 +222,13 @@ export default class DataSheet extends PureComponent {
221222
}
222223
}
223224

225+
onContextMenu(evt, i, j) {
226+
let cell = this.props.data[i][j];
227+
if (this.props.onContextMenu) {
228+
this.props.onContextMenu(evt, cell, i, j);
229+
}
230+
}
231+
224232
onDoubleClick(i, j) {
225233
let cell = this.props.data[i][j];
226234
(!cell.readOnly) ? this.setState({editing: {i:i, j:j}, forceEdit: true, clear: {}}) : null;
@@ -304,7 +312,8 @@ export default class DataSheet extends PureComponent {
304312
selected: isSelected(i, j),
305313
onMouseDown: cell.disableEvents ? nullFtn : this.onMouseDown,
306314
onDoubleClick: cell.disableEvents ? nullFtn : this.onDoubleClick,
307-
onMouseOver: cell.disableEvents ? nullFtn : this.onMouseOver,
315+
onMouseOver: cell.disableEvents ? nullFtn : this.onMouseOver,
316+
onContextMenu: cell.disableEvents ? nullFtn : this.onContextMenu,
308317
editing: isEditing(i, j),
309318
colSpan: cell.colSpan,
310319
value: valueRenderer(cell),
@@ -338,7 +347,8 @@ export default class DataSheet extends PureComponent {
338347
DataSheet.propTypes = {
339348
data: PropTypes.array.isRequired,
340349
className: PropTypes.string,
341-
onChange: PropTypes.func,
350+
onChange: PropTypes.func,
351+
onContextMenu: PropTypes.func,
342352
valueRenderer: PropTypes.func.isRequired,
343353
dataRenderer: PropTypes.func,
344354
}

‎test/Datasheet.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ describe('Component', () => {
4848
const onMouseDown = sinon.spy();
4949
const onMouseOver = sinon.spy();
5050
const onDoubleClick = sinon.spy();
51+
const onContextMenu = sinon.spy();
5152
const wrapper = shallow(
5253
<DataCell
5354
row={2}
@@ -61,6 +62,7 @@ describe('Component', () => {
6162
onMouseDown={onMouseDown}
6263
onDoubleClick={onDoubleClick}
6364
onMouseOver={onMouseOver}
65+
onContextMenu={onContextMenu}
6466
/>
6567
);
6668

@@ -73,10 +75,14 @@ describe('Component', () => {
7375
wrapper.simulate('mousedown');
7476
wrapper.simulate('doubleclick');
7577
wrapper.simulate('mouseover');
78+
wrapper.simulate('contextmenu');
7679

7780
expect(onDoubleClick.calledWith(2, 3)).toEqual(true);
7881
expect(onMouseDown.calledWith(2, 3)).toEqual(true);
7982
expect(onMouseOver.calledWith(2, 3)).toEqual(true);
83+
const args = onContextMenu.getCall(0).args;
84+
expect(args[1]).toEqual(2);
85+
expect(args[2]).toEqual(3);
8086
wrapper.unmount();
8187
})
8288

@@ -90,7 +96,9 @@ describe('Component', () => {
9096
col: 1,
9197
onMouseDown: () => {},
9298
onMouseOver: () => {},
93-
onDoubleClick: () => {}}
99+
onDoubleClick: () => {},
100+
onContextMenu: () => {},
101+
}
94102
const wrapper = shallow(
95103
<DataCell
96104
{...props}
@@ -121,7 +129,9 @@ describe('Component', () => {
121129
col: 1,
122130
onMouseDown: () => {},
123131
onMouseOver: () => {},
124-
onDoubleClick: () => {}}
132+
onDoubleClick: () => {},
133+
onContextMenu: () => {},
134+
}
125135
const wrapper = shallow(
126136
<DataCell
127137
{...props}
@@ -153,7 +163,9 @@ describe('Component', () => {
153163
onChange: sinon.spy(),
154164
onMouseDown: () => {},
155165
onDoubleClick: () => {},
156-
onMouseOver: () => {}}
166+
onMouseOver: () => {},
167+
onContextMenu: () => {},
168+
}
157169
document.body.innerHTML = '<table><tbody><tr id="root"></tr></tbody></table>'
158170
wrapper = mount(<DataCell {...props} />, {attachTo: document.getElementById('root')});
159171
});
@@ -201,6 +213,7 @@ describe('Component', () => {
201213
const onMouseDown = sinon.spy();
202214
const onMouseOver = sinon.spy();
203215
const onDoubleClick = sinon.spy();
216+
const onContextMenu = sinon.spy();
204217
const wrapper = shallow(
205218
<ComponentCell
206219
row={2}
@@ -217,6 +230,7 @@ describe('Component', () => {
217230
onMouseDown={onMouseDown}
218231
onDoubleClick={onDoubleClick}
219232
onMouseOver={onMouseOver}
233+
onContextMenu={onContextMenu}
220234
/>
221235
);
222236

@@ -237,10 +251,14 @@ describe('Component', () => {
237251
wrapper.simulate('mousedown');
238252
wrapper.simulate('doubleclick');
239253
wrapper.simulate('mouseover');
254+
wrapper.simulate('contextmenu');
240255

241256
expect(onDoubleClick.calledWith(2, 3)).toEqual(true);
242257
expect(onMouseDown.calledWith(2, 3)).toEqual(true);
243258
expect(onMouseOver.calledWith(2, 3)).toEqual(true);
259+
const args = onContextMenu.getCall(0).args;
260+
expect(args[1]).toEqual(2);
261+
expect(args[2]).toEqual(3);
244262
wrapper.unmount();
245263

246264
})
@@ -261,6 +279,7 @@ describe('Component', () => {
261279
onMouseDown={()=>{}}
262280
onDoubleClick={()=>{}}
263281
onMouseOver={()=>{}}
282+
onContextMenu={()=>{}}
264283
/>
265284
);
266285
wrapper.setProps({value: 7})

0 commit comments

Comments
 (0)