Skip to content

Commit a2a5e79

Browse files
authored
[Table] implementation (#2)
* [package.json] upgrade dependencies * [TextField.css] fix linter error * [Table] implementation * [Table] unit test * [Table] allow custom className, spread additional attributes
1 parent 3391355 commit a2a5e79

File tree

14 files changed

+338
-34
lines changed

14 files changed

+338
-34
lines changed

docs/components/Navigation/Shared.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@ const items = [
5353
label: 'Switch',
5454
url: makeURL('/Switch')
5555
},
56+
{
57+
label: 'Table',
58+
url: makeURL('/Table')
59+
},
5660
{
5761
label: 'Tabs',
5862
url: makeURL('/Tabs')

docs/components/PageWrapper/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,17 @@ import {makeURL} from '../../utils/globals';
1414
import Paper from '../../pages/Paper';
1515
import React from 'react';
1616
import {Route} from 'react-router-dom';
17-
import Scrollable from '../../../src/Scrollable';
1817
import SelectField from '../../pages/SelectField';
1918
import SnackBar from '../../pages/SnackBar';
2019
import Styles from './PageWrapper.css';
2120
import Switch from '../../pages/Switch';
2221
import SvgIcon from '../../../src/SvgIcon';
22+
import Table from '../../pages/Table';
2323
import Tabs from '../../pages/Tabs';
2424
import TextField from '../../pages/TextField';
2525
import TypographyDocs from '../../pages/Typography';
2626

2727
class PageWrapper extends React.Component {
28-
2928
constructor(props) {
3029
super(props);
3130
this.onClick = this.onClick.bind(this);
@@ -87,6 +86,7 @@ class PageWrapper extends React.Component {
8786
<Route path={makeURL('/SelectField')} component={SelectField} />
8887
<Route path={makeURL('/SnackBar')} component={SnackBar} />
8988
<Route path={makeURL('/Switch')} component={Switch} />
89+
<Route path={makeURL('/Table')} component={Table} />
9090
<Route path={makeURL('/Tabs')} component={Tabs} />
9191
<Route path={makeURL('/TextField')} component={TextField} />
9292
<Route path={makeURL('/Typography')} component={TypographyDocs} />

docs/pages/Table/index.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import Grid, {GridItem} from '../../../src/Grid';
2+
import Page from '../Page';
3+
import Paper from '../../../src/Paper';
4+
import React from 'react';
5+
import Table, {TableBody, TableCell, TableHead, TableRow} from '../../../src/Table';
6+
import Typography from '../../../src/Typography';
7+
8+
class TabsDocs extends React.Component {
9+
render() {
10+
return (
11+
<Page
12+
componentName="Table"
13+
examples={
14+
<Grid gutter={16}>
15+
<GridItem xs={12}>
16+
<Typography component="p">
17+
Simple table.
18+
</Typography>
19+
<Paper elevation={3}>
20+
<Table>
21+
<TableHead>
22+
<TableRow>
23+
<TableCell>Name</TableCell>
24+
<TableCell>Age</TableCell>
25+
<TableCell>Street Address</TableCell>
26+
<TableCell>ZIP Code</TableCell>
27+
<TableCell>State</TableCell>
28+
</TableRow>
29+
</TableHead>
30+
<TableBody>
31+
<TableRow>
32+
<TableCell>Johnathan Doe</TableCell>
33+
<TableCell>25</TableCell>
34+
<TableCell>700 1st Ave</TableCell>
35+
<TableCell>90210</TableCell>
36+
<TableCell>CA</TableCell>
37+
</TableRow>
38+
<TableRow>
39+
<TableCell>Jane Doe</TableCell>
40+
<TableCell>23</TableCell>
41+
<TableCell>15 Spruce St</TableCell>
42+
<TableCell>92101</TableCell>
43+
<TableCell>CA</TableCell>
44+
</TableRow>
45+
</TableBody>
46+
</Table>
47+
</Paper>
48+
</GridItem>
49+
</Grid>
50+
}
51+
/>
52+
);
53+
}
54+
}
55+
56+
export default TabsDocs;

package.json

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
},
3434
"dependencies": {
3535
"babel-cli": "6.26.0",
36-
"babel-eslint": "8.0.1",
36+
"babel-eslint": "8.2.1",
3737
"babel-plugin-transform-object-assign": "6.22.0",
3838
"babel-plugin-transform-object-rest-spread": "6.26.0",
3939
"babel-preset-env": "1.6.1",
@@ -50,29 +50,29 @@
5050
"uuid": "3.1.0"
5151
},
5252
"devDependencies": {
53-
"autoprefixer": "7.1.5",
53+
"autoprefixer": "7.2.4",
5454
"babel-core": "6.26.0",
5555
"babel-loader": "7.1.2",
5656
"babel-plugin-empower-assert": "1.3.0",
5757
"babel-plugin-espower": "2.3.2",
5858
"babel-plugin-istanbul": "4.1.5",
5959
"babel-plugin-transform-class-properties": "6.24.1",
60-
"babel-plugin-transform-react-remove-prop-types": "0.4.10",
60+
"babel-plugin-transform-react-remove-prop-types": "0.4.12",
6161
"babel-plugin-transform-runtime": "6.23.0",
6262
"babel-polyfill": "6.26.0",
6363
"case-sensitive-paths-webpack-plugin": "2.1.1",
64-
"core-js": "2.5.1",
65-
"css-loader": "0.28.7",
66-
"enzyme": "3.1.0",
67-
"enzyme-adapter-react-16": "1.0.2",
68-
"eslint": "4.9.0",
64+
"core-js": "2.5.3",
65+
"css-loader": "0.28.8",
66+
"enzyme": "3.3.0",
67+
"enzyme-adapter-react-16": "1.1.1",
68+
"eslint": "4.15.0",
6969
"eslint-config-airbnb": "16.1.0",
7070
"eslint-plugin-import": "2.8.0",
71-
"eslint-plugin-jsx-a11y": "6.0.2",
72-
"eslint-plugin-react": "7.4.0",
71+
"eslint-plugin-jsx-a11y": "6.0.3",
72+
"eslint-plugin-react": "7.5.1",
7373
"html-webpack-plugin": "2.30.1",
74-
"isomorphic-style-loader": "3.0.0",
75-
"karma": "1.7.1",
74+
"isomorphic-style-loader": "4.0.0",
75+
"karma": "2.0.0",
7676
"karma-browserstack-launcher": "1.3.0",
7777
"karma-chrome-launcher": "2.2.0",
7878
"karma-coverage": "1.1.1",
@@ -81,31 +81,31 @@
8181
"karma-mocha-reporter": "2.2.5",
8282
"karma-safari-launcher": "1.0.0",
8383
"karma-sourcemap-loader": "0.3.7",
84-
"karma-webpack": "2.0.5",
84+
"karma-webpack": "2.0.9",
8585
"lodash": "4.17.4",
86-
"mocha": "3.4.2",
87-
"npm-run-all": "4.1.1",
86+
"mocha": "4.1.0",
87+
"npm-run-all": "4.1.2",
8888
"phantomjs-polyfill-object-assign": "0.0.2",
8989
"postcss-cli": "4.1.1",
90-
"postcss-loader": "2.0.8",
90+
"postcss-loader": "2.0.10",
9191
"postcss-simple-vars": "4.1.0",
9292
"power-assert": "1.4.4",
93-
"prismjs": "1.8.3",
93+
"prismjs": "1.9.0",
9494
"prop-types": "15.6.0",
9595
"raw-loader": "0.5.1",
96-
"react": "16.0.0",
97-
"react-dom": "16.0.0",
98-
"react-hot-loader": "3.1.1",
96+
"react": "16.2.0",
97+
"react-dom": "16.2.0",
98+
"react-hot-loader": "3.1.3",
9999
"react-router-dom": "4.2.2",
100100
"react-svg-loader": "2.1.0",
101101
"react-tap-event-plugin": "3.0.2",
102-
"react-test-renderer": "16.0.0",
103-
"sinon": "2.3.8",
104-
"style-loader": "0.19.0",
105-
"stylelint": "8.2.0",
106-
"stylelint-config-standard": "17.0.0",
107-
"webpack": "3.8.1",
108-
"webpack-dev-server": "2.9.3",
102+
"react-test-renderer": "16.2.0",
103+
"sinon": "4.1.4",
104+
"style-loader": "0.19.1",
105+
"stylelint": "8.4.0",
106+
"stylelint-config-standard": "18.0.0",
107+
"webpack": "3.10.0",
108+
"webpack-dev-server": "2.10.1",
109109
"webpack-node-externals": "1.6.0"
110110
}
111111
}

src/Table/Table.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.container {
2+
overflow-x: auto;
3+
}
4+
5+
.table {
6+
border-spacing: 0;
7+
border-collapse: collapse;
8+
overflow: hidden;
9+
width: 100%;
10+
}

src/Table/Table.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import makeClass from 'classnames';
2+
import PropTypes from 'prop-types';
3+
import React from 'react';
4+
import Styles from './Table.css';
5+
6+
class Table extends React.Component {
7+
render() {
8+
const {children, className, ...other} = this.props;
9+
return (
10+
<div className={makeClass(Styles.container, className)}>
11+
<table className={Styles.table} {...other}>
12+
{children}
13+
</table>
14+
</div>
15+
);
16+
}
17+
}
18+
19+
Table.propTypes = {
20+
children: PropTypes.node,
21+
className: PropTypes.string
22+
};
23+
24+
Table.defaultProps = {
25+
children: null,
26+
className: ''
27+
};
28+
29+
export default Table;

src/Table/Table.spec.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/* eslint-env mocha */
2+
3+
import assert from 'assert';
4+
import {createMount} from '../../test/utils';
5+
import React from 'react';
6+
import Table, {TableBody, TableCell, TableHead, TableRow} from './index';
7+
8+
describe('Tabs', () => {
9+
let mount;
10+
11+
beforeEach(() => {
12+
mount = createMount();
13+
});
14+
15+
afterEach(() => {
16+
mount.cleanUp();
17+
});
18+
19+
it('should deep render', () => {
20+
const component = (
21+
<Table>
22+
<TableHead>
23+
<TableRow>
24+
<TableCell>Name</TableCell>
25+
<TableCell>Age</TableCell>
26+
<TableCell>Street Address</TableCell>
27+
<TableCell>ZIP Code</TableCell>
28+
<TableCell>State</TableCell>
29+
</TableRow>
30+
</TableHead>
31+
<TableBody>
32+
<TableRow>
33+
<TableCell>Johnathan Doe</TableCell>
34+
<TableCell>25</TableCell>
35+
<TableCell>700 1st Ave</TableCell>
36+
<TableCell>90210</TableCell>
37+
<TableCell>CA</TableCell>
38+
</TableRow>
39+
<TableRow>
40+
<TableCell>Jane Doe</TableCell>
41+
<TableCell>23</TableCell>
42+
<TableCell>15 Spruce St</TableCell>
43+
<TableCell>92101</TableCell>
44+
<TableCell>CA</TableCell>
45+
</TableRow>
46+
</TableBody>
47+
</Table>
48+
);
49+
const wrapper = mount(component);
50+
assert(wrapper);
51+
});
52+
});

src/Table/TableBody.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import PropTypes from 'prop-types';
2+
import React from 'react';
3+
4+
class TableBody extends React.Component {
5+
render() {
6+
const {children, ...other} = this.props;
7+
return (
8+
<tbody {...other}>
9+
{children}
10+
</tbody>
11+
);
12+
}
13+
}
14+
15+
TableBody.propTypes = {
16+
children: PropTypes.node
17+
};
18+
19+
TableBody.defaultProps = {
20+
children: null
21+
};
22+
23+
export default TableBody;

src/Table/TableCell.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.cell {
2+
border-bottom: 1px solid rgb(235, 235, 235);
3+
color: $black87;
4+
font-size: 13px;
5+
height: 48px;
6+
padding-left: 24px;
7+
padding-right: 56px;
8+
white-space: nowrap;
9+
}
10+
11+
.cell:first-child {
12+
text-align: left;
13+
}
14+
15+
.cell:not(:first-child) {
16+
text-align: right;
17+
}
18+
19+
.head {
20+
color: $black54;
21+
font-size: 12px;
22+
font-weight: 500;
23+
height: 56px;
24+
}

src/Table/TableCell.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import makeClass from 'classnames';
2+
import PropTypes from 'prop-types';
3+
import React from 'react';
4+
import Styles from './TableCell.css';
5+
6+
class TableCell extends React.Component {
7+
render() {
8+
const {
9+
children,
10+
className,
11+
head,
12+
...other
13+
} = this.props;
14+
const Component = head ? 'th' : 'td';
15+
const classnames = makeClass(Styles.cell, {
16+
[Styles.head]: head
17+
}, className);
18+
19+
return (
20+
<Component className={classnames} {...other}>
21+
{children}
22+
</Component>
23+
);
24+
}
25+
}
26+
27+
TableCell.propTypes = {
28+
children: PropTypes.node,
29+
className: PropTypes.string,
30+
head: PropTypes.bool
31+
};
32+
33+
TableCell.defaultProps = {
34+
children: null,
35+
className: '',
36+
head: false
37+
};
38+
39+
export default TableCell;

0 commit comments

Comments
 (0)