Skip to content

Commit 0a02e39

Browse files
dmistomindmistomin
committed
update Td component to handle arbitrary props, remove hardcoded props
1 parent 6da0471 commit 0a02e39

File tree

4 files changed

+102
-92
lines changed

4 files changed

+102
-92
lines changed

‎build/reactable.js‎

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -394,19 +394,21 @@ window.ReactDOM["default"] = window.ReactDOM;
394394

395395
(function (global, factory) {
396396
if (typeof define === 'function' && define.amd) {
397-
define(['exports', 'react', './lib/is_react_component', './lib/stringable', './unsafe'], factory);
397+
define(['exports', 'react', './lib/is_react_component', './lib/stringable', './unsafe', './lib/filter_props_from'], factory);
398398
} else if (typeof exports !== 'undefined') {
399-
factory(exports, require('react'), require('./lib/is_react_component'), require('./lib/stringable'), require('./unsafe'));
399+
factory(exports, require('react'), require('./lib/is_react_component'), require('./lib/stringable'), require('./unsafe'), require('./lib/filter_props_from'));
400400
} else {
401401
var mod = {
402402
exports: {}
403403
};
404-
factory(mod.exports, global.React, global.is_react_component, global.stringable, global.unsafe);
404+
factory(mod.exports, global.React, global.is_react_component, global.stringable, global.unsafe, global.filter_props_from);
405405
global.td = mod.exports;
406406
}
407-
})(this, function (exports, _react, _libIs_react_component, _libStringable, _unsafe) {
407+
})(this, function (exports, _react, _libIs_react_component, _libStringable, _unsafe, _libFilter_props_from) {
408408
'use strict';
409409

410+
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
411+
410412
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
411413

412414
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
@@ -425,50 +427,44 @@ window.ReactDOM["default"] = window.ReactDOM;
425427
}
426428

427429
_createClass(Td, [{
428-
key: 'handleClick',
429-
value: function handleClick(e) {
430-
if (typeof this.props.handleClick === 'function') {
431-
return this.props.handleClick(e, this);
430+
key: 'stringifyIfNotReactComponent',
431+
value: function stringifyIfNotReactComponent(object) {
432+
if (!(0, _libIs_react_component.isReactComponent)(object) && (0, _libStringable.stringable)(object) && typeof object !== 'undefined') {
433+
return object.toString();
432434
}
435+
return null;
433436
}
434437
}, {
435438
key: 'render',
436439
value: function render() {
437-
var tdProps = {
438-
className: this.props.className,
439-
onClick: this.handleClick.bind(this)
440-
};
441-
442-
if (typeof this.props.style !== 'undefined') {
443-
tdProps.style = this.props.style;
444-
}
445-
446440
// Attach any properties on the column to this Td object to allow things like custom event handlers
441+
var mergedProps = (0, _libFilter_props_from.filterPropsFrom)(this.props);
447442
if (typeof this.props.column === 'object') {
448443
for (var key in this.props.column) {
449444
if (key !== 'key' && key !== 'name') {
450-
tdProps[key] = this.props.column[key];
445+
mergedProps[key] = this.props.column[key];
451446
}
452447
}
453448
}
449+
// handleClick aliases onClick event
450+
mergedProps.onClick = this.props.handleClick;
454451

455-
var data = this.props.data;
456-
457-
if (typeof this.props.children !== 'undefined') {
458-
if ((0, _libIs_react_component.isReactComponent)(this.props.children)) {
459-
data = this.props.children;
460-
} else if (typeof this.props.data === 'undefined' && (0, _libStringable.stringable)(this.props.children)) {
461-
data = this.props.children.toString();
462-
}
452+
var stringifiedChildProps;
463453

464-
if ((0, _unsafe.isUnsafe)(this.props.children)) {
465-
tdProps.dangerouslySetInnerHTML = { __html: this.props.children.toString() };
466-
} else {
467-
tdProps.children = data;
468-
}
454+
if (typeof this.props.data === 'undefined') {
455+
stringifiedChildProps = this.stringifyIfNotReactComponent(this.props.children);
469456
}
470457

471-
return _react['default'].createElement('td', tdProps);
458+
if ((0, _unsafe.isUnsafe)(this.props.children)) {
459+
return _react['default'].createElement('td', _extends({}, mergedProps, {
460+
dangerouslySetInnerHTML: { __html: this.props.children.toString() } }));
461+
} else {
462+
return _react['default'].createElement(
463+
'td',
464+
mergedProps,
465+
stringifiedChildProps || this.props.children
466+
);
467+
}
472468
}
473469
}]);
474470

‎lib/reactable/td.js‎

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', {
44
value: true
55
});
66

7+
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
8+
79
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
810

911
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
@@ -24,6 +26,8 @@ var _libStringable = require('./lib/stringable');
2426

2527
var _unsafe = require('./unsafe');
2628

29+
var _libFilter_props_from = require('./lib/filter_props_from');
30+
2731
var Td = (function (_React$Component) {
2832
_inherits(Td, _React$Component);
2933

@@ -34,50 +38,44 @@ var Td = (function (_React$Component) {
3438
}
3539

3640
_createClass(Td, [{
37-
key: 'handleClick',
38-
value: function handleClick(e) {
39-
if (typeof this.props.handleClick === 'function') {
40-
return this.props.handleClick(e, this);
41+
key: 'stringifyIfNotReactComponent',
42+
value: function stringifyIfNotReactComponent(object) {
43+
if (!(0, _libIs_react_component.isReactComponent)(object) && (0, _libStringable.stringable)(object) && typeof object !== 'undefined') {
44+
return object.toString();
4145
}
46+
return null;
4247
}
4348
}, {
4449
key: 'render',
4550
value: function render() {
46-
var tdProps = {
47-
className: this.props.className,
48-
onClick: this.handleClick.bind(this)
49-
};
50-
51-
if (typeof this.props.style !== 'undefined') {
52-
tdProps.style = this.props.style;
53-
}
54-
5551
// Attach any properties on the column to this Td object to allow things like custom event handlers
52+
var mergedProps = (0, _libFilter_props_from.filterPropsFrom)(this.props);
5653
if (typeof this.props.column === 'object') {
5754
for (var key in this.props.column) {
5855
if (key !== 'key' && key !== 'name') {
59-
tdProps[key] = this.props.column[key];
56+
mergedProps[key] = this.props.column[key];
6057
}
6158
}
6259
}
60+
// handleClick aliases onClick event
61+
mergedProps.onClick = this.props.handleClick;
6362

64-
var data = this.props.data;
63+
var stringifiedChildProps;
6564

66-
if (typeof this.props.children !== 'undefined') {
67-
if ((0, _libIs_react_component.isReactComponent)(this.props.children)) {
68-
data = this.props.children;
69-
} else if (typeof this.props.data === 'undefined' && (0, _libStringable.stringable)(this.props.children)) {
70-
data = this.props.children.toString();
71-
}
72-
73-
if ((0, _unsafe.isUnsafe)(this.props.children)) {
74-
tdProps.dangerouslySetInnerHTML = { __html: this.props.children.toString() };
75-
} else {
76-
tdProps.children = data;
77-
}
65+
if (typeof this.props.data === 'undefined') {
66+
stringifiedChildProps = this.stringifyIfNotReactComponent(this.props.children);
7867
}
7968

80-
return _react2['default'].createElement('td', tdProps);
69+
if ((0, _unsafe.isUnsafe)(this.props.children)) {
70+
return _react2['default'].createElement('td', _extends({}, mergedProps, {
71+
dangerouslySetInnerHTML: { __html: this.props.children.toString() } }));
72+
} else {
73+
return _react2['default'].createElement(
74+
'td',
75+
mergedProps,
76+
stringifiedChildProps || this.props.children
77+
);
78+
}
8179
}
8280
}]);
8381

‎src/reactable/td.jsx‎

Lines changed: 21 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,52 +2,42 @@ import React from 'react';
22
import { isReactComponent } from './lib/is_react_component';
33
import { stringable } from './lib/stringable';
44
import { isUnsafe } from './unsafe';
5+
import { filterPropsFrom } from './lib/filter_props_from';
56

67
export class Td extends React.Component {
7-
handleClick(e){
8-
if (typeof this.props.handleClick === 'function') {
9-
return this.props.handleClick(e, this);
10-
}
8+
stringifyIfNotReactComponent(object) {
9+
if(!isReactComponent(object) && stringable(object) && typeof(object) !== 'undefined') {
10+
return object.toString()
11+
}
12+
return null;
1113
}
1214

1315
render() {
14-
var tdProps = {
15-
className: this.props.className,
16-
onClick: this.handleClick.bind(this)
17-
};
18-
19-
if(typeof(this.props.style) !== 'undefined'){
20-
tdProps.style = this.props.style;
21-
}
22-
2316
// Attach any properties on the column to this Td object to allow things like custom event handlers
17+
var mergedProps = filterPropsFrom(this.props);
2418
if (typeof(this.props.column) === 'object') {
2519
for (var key in this.props.column) {
2620
if (key !== 'key' && key !== 'name') {
27-
tdProps[key] = this.props.column[key];
21+
mergedProps[key] = this.props.column[key];
2822
}
2923
}
3024
}
25+
// handleClick aliases onClick event
26+
mergedProps.onClick = this.props.handleClick;
3127

32-
var data = this.props.data;
28+
var stringifiedChildProps;
3329

34-
if (typeof(this.props.children) !== 'undefined') {
35-
if (isReactComponent(this.props.children)) {
36-
data = this.props.children;
37-
} else if (
38-
typeof(this.props.data) === 'undefined' &&
39-
stringable(this.props.children)
40-
) {
41-
data = this.props.children.toString();
42-
}
43-
44-
if (isUnsafe(this.props.children)) {
45-
tdProps.dangerouslySetInnerHTML = { __html: this.props.children.toString() };
46-
} else {
47-
tdProps.children = data;
48-
}
30+
if (typeof(this.props.data) === 'undefined') {
31+
stringifiedChildProps = this.stringifyIfNotReactComponent(this.props.children)
4932
}
5033

51-
return <td {...tdProps} />;
34+
if (isUnsafe(this.props.children)) {
35+
return <td {...mergedProps}
36+
dangerouslySetInnerHTML={{__html: this.props.children.toString()}}/>
37+
} else {
38+
return <td {...mergedProps}>
39+
{stringifiedChildProps || this.props.children}
40+
</td>;
41+
}
5242
}
5343
};

‎tests/reactable_test.jsx‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2451,7 +2451,6 @@ describe('Reactable', function() {
24512451
</Reactable.Table>,
24522452
ReactableTestUtils.testNode()
24532453
);
2454-
24552454
ReactTestUtils.Simulate.click($('td')[0])
24562455
});
24572456

@@ -2462,6 +2461,33 @@ describe('Reactable', function() {
24622461
});
24632462
});
24642463

2464+
describe('onContextMenu callbacks on <Td> elements', function(){
2465+
before(function() {
2466+
this.rightClicked = false
2467+
2468+
ReactDOM.render(
2469+
<Reactable.Table className="table" id="table">
2470+
<Reactable.Tr>
2471+
<Reactable.Td column="Name" onContextMenu={function() {
2472+
this.rightClicked = true;
2473+
}.bind(this)}>
2474+
<b>Griffin Smith</b>
2475+
</Reactable.Td>
2476+
</Reactable.Tr>
2477+
</Reactable.Table>,
2478+
ReactableTestUtils.testNode()
2479+
);
2480+
ReactTestUtils.Simulate.contextMenu($('td')[0])
2481+
});
2482+
2483+
after(ReactableTestUtils.resetTestEnvironment);
2484+
2485+
it('calls the callbacks on right click', function() {
2486+
expect(this.rightClicked).to.eq(true);
2487+
});
2488+
2489+
});
2490+
24652491
describe('table with no data', () => {
24662492
context('when noDataText prop is null', () => {
24672493
before(function() {

0 commit comments

Comments
 (0)