Skip to content

Commit b00e658

Browse files
carlosrochacarlosrocha
committed
upgrade dependencies
1 parent ee5e9ac commit b00e658

File tree

8 files changed

+1030
-505
lines changed

8 files changed

+1030
-505
lines changed

‎package.json

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
"url": "https://github.com/carlosrocha/react-data-components"
2323
},
2424
"dependencies": {
25-
"lodash": "^4.13.1"
25+
"lodash": "^4.13.1",
26+
"prop-types": "^15.5.10"
2627
},
2728
"peerDependencies": {
2829
"react": "^0.14.0 || ^15.0.0-0"
@@ -32,14 +33,14 @@
3233
"babel-core": "^6.10.4",
3334
"babel-eslint": "^7.0.0",
3435
"babel-jest": "^16.0.0",
35-
"babel-loader": "^6.2.4",
36+
"babel-loader": "^7.1.1",
3637
"babel-plugin-lodash": "^3.2.4",
3738
"babel-preset-es2015": "^6.9.0",
3839
"babel-preset-react": "^6.5.0",
3940
"babel-preset-stage-1": "^6.5.0",
40-
"eslint": "^3.8.1",
41-
"eslint-plugin-react": "^6.4.1",
42-
"flow-bin": "^0.33.0",
41+
"eslint": "^4.1.1",
42+
"eslint-plugin-react": "^7.1.0",
43+
"flow-bin": "^0.49.1",
4344
"husky": "^0.14.1",
4445
"jest": "^16.0.2",
4546
"lint-staged": "^4.0.0",
@@ -49,10 +50,11 @@
4950
"react-addons-test-utils": "^15.1.0",
5051
"react-dom": "^15.1.0",
5152
"react-redux": "^4.4.5",
53+
"react-test-renderer": "^15.6.1",
5254
"redux": "^3.5.2",
5355
"rimraf": "^2.4.3",
54-
"webpack": "^1.13.1",
55-
"webpack-dev-server": "^1.14.1"
56+
"webpack": "^3.1.0",
57+
"webpack-dev-server": "^2.5.0"
5658
},
5759
"scripts": {
5860
"build": "webpack && babel src -d lib",

‎src/Pagination.js

Lines changed: 40 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { PropTypes, Component } from 'react';
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
23

34
// Used to cancel events.
45
var preventDefault = e => e.preventDefault();
56

67
export default class Pagination extends Component {
7-
88
static defaultProps = {
99
showPages: 5,
1010
};
@@ -19,9 +19,11 @@ export default class Pagination extends Component {
1919
shouldComponentUpdate(nextProps) {
2020
var props = this.props;
2121

22-
return props.totalPages !== nextProps.totalPages ||
22+
return (
23+
props.totalPages !== nextProps.totalPages ||
2324
props.currentPage !== nextProps.currentPage ||
24-
props.showPages !== nextProps.showPages;
25+
props.showPages !== nextProps.showPages
26+
);
2527
}
2628

2729
onChangePage(pageNumber, event) {
@@ -37,14 +39,16 @@ export default class Pagination extends Component {
3739
}
3840

3941
var diff = Math.floor(showPages / 2),
40-
start = Math.max(currentPage - diff, 0),
41-
end = Math.min(start + showPages, totalPages);
42+
start = Math.max(currentPage - diff, 0),
43+
end = Math.min(start + showPages, totalPages);
4244

4345
if (totalPages >= showPages && end >= totalPages) {
4446
start = totalPages - showPages;
4547
}
4648

47-
var buttons = [], btnEvent, isCurrent;
49+
var buttons = [],
50+
btnEvent,
51+
isCurrent;
4852
for (var i = start; i < end; i++) {
4953
isCurrent = currentPage === i;
5054
// If the button is for the current page then disable the event.
@@ -56,11 +60,12 @@ export default class Pagination extends Component {
5660
buttons.push(
5761
<li key={i} className={isCurrent ? 'active' : null}>
5862
<a role="button" href="#" onClick={btnEvent} tabIndex="0">
59-
<span>{i + 1}</span>
60-
{isCurrent ?
61-
<span className="sr-only">(current)</span> : null}
63+
<span>
64+
{i + 1}
65+
</span>
66+
{isCurrent ? <span className="sr-only">(current)</span> : null}
6267
</a>
63-
</li>
68+
</li>,
6469
);
6570
}
6671

@@ -84,37 +89,53 @@ export default class Pagination extends Component {
8489

8590
buttons = [
8691
<li key="first" className={!isNotFirst ? 'disabled' : null}>
87-
<a role="button" href="#" tabIndex="0"
92+
<a
93+
role="button"
94+
href="#"
95+
tabIndex="0"
8896
onClick={firstHandler}
8997
aria-disabled={!isNotFirst}
90-
aria-label="First">
98+
aria-label="First"
99+
>
91100
<span className="fa fa-angle-double-left" aria-hidden="true" />
92101
</a>
93102
</li>,
94103
<li key="prev" className={!isNotFirst ? 'disabled' : null}>
95-
<a role="button" href="#" tabIndex="0"
104+
<a
105+
role="button"
106+
href="#"
107+
tabIndex="0"
96108
onClick={prevHandler}
97109
aria-disabled={!isNotFirst}
98-
aria-label="Previous">
110+
aria-label="Previous"
111+
>
99112
<span className="fa fa-angle-left" aria-hidden="true" />
100113
</a>
101114
</li>,
102115
].concat(buttons);
103116

104117
buttons = buttons.concat([
105118
<li key="next" className={!isNotLast ? 'disabled' : null}>
106-
<a role="button" href="#" tabIndex="0"
119+
<a
120+
role="button"
121+
href="#"
122+
tabIndex="0"
107123
onClick={nextHandler}
108124
aria-disabled={!isNotLast}
109-
aria-label="Next">
125+
aria-label="Next"
126+
>
110127
<span className="fa fa-angle-right" aria-hidden="true" />
111128
</a>
112129
</li>,
113130
<li key="last" className={!isNotLast ? 'disabled' : null}>
114-
<a role="button" href="#" tabIndex="0"
131+
<a
132+
role="button"
133+
href="#"
134+
tabIndex="0"
115135
onClick={lastHandler}
116136
aria-disabled={!isNotLast}
117-
aria-label="Last">
137+
aria-label="Last"
138+
>
118139
<span className="fa fa-angle-double-right" aria-hidden="true" />
119140
</a>
120141
</li>,

‎src/ReduxTable.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React, { Component, PropTypes } from 'react';
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
23
import { connect } from 'react-redux';
34
import PartialTable from './PartialTable';
45
import {

‎src/Table.js

Lines changed: 69 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,40 @@
1-
import React, {PropTypes, Component} from 'react';
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
23

34
const simpleGet = key => data => data[key];
45
const keyGetter = keys => data => keys.map(key => data[key]);
56

67
const isEmpty = value => value == null || value === '';
78

8-
const getCellValue =
9-
({prop, defaultContent, render}, row) =>
10-
// Return `defaultContent` if the value is empty.
11-
!isEmpty(prop) && isEmpty(row[prop]) ? defaultContent :
12-
// Use the render function for the value.
13-
render ? render(row[prop], row) :
14-
// Otherwise just return the value.
15-
row[prop];
16-
17-
const getCellClass =
18-
({prop, className}, row) =>
19-
!isEmpty(prop) && isEmpty(row[prop]) ? 'empty-cell' :
20-
typeof className == 'function' ? className(row[prop], row) :
21-
className;
9+
const getCellValue = ({ prop, defaultContent, render }, row) =>
10+
// Return `defaultContent` if the value is empty.
11+
!isEmpty(prop) && isEmpty(row[prop])
12+
? defaultContent
13+
: // Use the render function for the value.
14+
render
15+
? render(row[prop], row)
16+
: // Otherwise just return the value.
17+
row[prop];
18+
19+
const getCellClass = ({ prop, className }, row) =>
20+
!isEmpty(prop) && isEmpty(row[prop])
21+
? 'empty-cell'
22+
: typeof className == 'function' ? className(row[prop], row) : className;
2223

2324
function buildSortProps(col, sortBy, onSort) {
2425
const order = sortBy && sortBy.prop === col.prop ? sortBy.order : 'none';
2526
const nextOrder = order === 'ascending' ? 'descending' : 'ascending';
2627
const sortEvent = onSort.bind(null, { prop: col.prop, order: nextOrder });
2728

2829
return {
29-
'onClick': sortEvent,
30+
onClick: sortEvent,
3031
// Fire the sort event on enter.
31-
'onKeyDown': e => { if (e.keyCode === 13) sortEvent(); },
32+
onKeyDown: e => {
33+
if (e.keyCode === 13) sortEvent();
34+
},
3235
// Prevents selection with mouse.
33-
'onMouseDown': e => e.preventDefault(),
34-
'tabIndex': 0,
36+
onMouseDown: e => e.preventDefault(),
37+
tabIndex: 0,
3538
'aria-sort': order,
3639
'aria-label': `${col.title}: activate to sort column ${nextOrder}`,
3740
};
@@ -46,38 +49,27 @@ export default class Table extends Component {
4649
PropTypes.string,
4750
]).isRequired,
4851

49-
columns: PropTypes.arrayOf(PropTypes.shape({
50-
title: PropTypes.string.isRequired,
51-
prop: PropTypes.oneOfType([
52-
PropTypes.string,
53-
PropTypes.number,
54-
]),
55-
render: PropTypes.func,
56-
sortable: PropTypes.bool,
57-
defaultContent: PropTypes.string,
58-
width: PropTypes.oneOfType([
59-
PropTypes.string,
60-
PropTypes.number,
61-
]),
62-
className: PropTypes.oneOfType([
63-
PropTypes.string,
64-
PropTypes.func,
65-
]),
66-
})).isRequired,
67-
68-
dataArray: PropTypes.arrayOf(PropTypes.oneOfType([
69-
PropTypes.array,
70-
PropTypes.object,
71-
])).isRequired,
52+
columns: PropTypes.arrayOf(
53+
PropTypes.shape({
54+
title: PropTypes.string.isRequired,
55+
prop: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
56+
render: PropTypes.func,
57+
sortable: PropTypes.bool,
58+
defaultContent: PropTypes.string,
59+
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
60+
className: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
61+
}),
62+
).isRequired,
63+
64+
dataArray: PropTypes.arrayOf(
65+
PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
66+
).isRequired,
7267

7368
buildRowOptions: PropTypes.func,
7469

7570
sortBy: PropTypes.shape({
76-
prop: PropTypes.oneOfType([
77-
PropTypes.string,
78-
PropTypes.number,
79-
]),
80-
order: PropTypes.oneOf([ 'ascending', 'descending' ]),
71+
prop: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
72+
order: PropTypes.oneOf(['ascending', 'descending']),
8173
}),
8274

8375
onSort: PropTypes.func,
@@ -95,8 +87,13 @@ export default class Table extends Component {
9587

9688
render() {
9789
const {
98-
columns, keys, buildRowOptions, sortBy,
99-
onSort, dataArray, ...otherProps,
90+
columns,
91+
keys,
92+
buildRowOptions,
93+
sortBy,
94+
onSort,
95+
dataArray,
96+
...otherProps
10097
} = this.props;
10198

10299
const headers = columns.map((col, idx) => {
@@ -109,15 +106,19 @@ export default class Table extends Component {
109106

110107
return (
111108
<th
112-
ref={c => this._headers[idx] = c}
109+
ref={c => (this._headers[idx] = c)}
113110
key={idx}
114-
style={{width: col.width}}
111+
style={{ width: col.width }}
115112
role="columnheader"
116113
scope="col"
117-
{...sortProps}>
118-
<span>{col.title}</span>
119-
{!order ? null :
120-
<span className={`sort-icon sort-${order}`} aria-hidden="true" />}
114+
{...sortProps}
115+
>
116+
<span>
117+
{col.title}
118+
</span>
119+
{!order
120+
? null
121+
: <span className={`sort-icon sort-${order}`} aria-hidden="true" />}
121122
</th>
122123
);
123124
});
@@ -131,31 +132,34 @@ export default class Table extends Component {
131132
{columns.map((col, i) =>
132133
<td key={i} className={getCellClass(col, row)}>
133134
{getCellValue(col, row)}
134-
</td>
135+
</td>,
135136
)}
136137
</tr>
137138
);
138139
});
139140

140141
return (
141142
<table {...otherProps}>
142-
{!sortBy ? null :
143-
<caption className="sr-only" role="alert" aria-live="polite">
144-
{`Sorted by ${sortBy.prop}: ${sortBy.order} order`}
145-
</caption>}
143+
{!sortBy
144+
? null
145+
: <caption className="sr-only" role="alert" aria-live="polite">
146+
{`Sorted by ${sortBy.prop}: ${sortBy.order} order`}
147+
</caption>}
146148
<thead>
147149
<tr>
148150
{headers}
149151
</tr>
150152
</thead>
151153
<tbody>
152-
{rows.length ? rows :
153-
<tr>
154-
<td colSpan={columns.length} className="text-center">No data</td>
155-
</tr>}
154+
{rows.length
155+
? rows
156+
: <tr>
157+
<td colSpan={columns.length} className="text-center">
158+
No data
159+
</td>
160+
</tr>}
156161
</tbody>
157162
</table>
158163
);
159164
}
160-
161165
}

0 commit comments

Comments
 (0)