Skip to content

Commit e3f8f13

Browse files
kenwheelerkenwheeler
authored
Merge pull request #278 from FormidableLabs/task-addTableHeaderBody
Add Table Header / Body.
2 parents 2f8c340 + 09341fc commit e3f8f13

File tree

13 files changed

+203
-70
lines changed

13 files changed

+203
-70
lines changed

‎README.markdown‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ ReactJS based Presentation Library
4242
- [Link (Base)](#link-base)
4343
- [List & ListItem (Base)](#list--listitem-base)
4444
- [S (Base)](#s-base)
45-
- [Table, TableRow, TableHeaderItem and TableItem (Base)](#table-tablerow-tableheaderitem-and-tableitem-base)
45+
- [Table, TableRow, TableBody, TableHeader, TableHeaderItem and TableItem (Base)](#table-tablerow-tableheaderitem-and-tableitem-base)
4646
- [Text (Base)](#text-base)
4747
- [Typeface](#typeface)
4848
- [Base Props](#base-props)
@@ -454,22 +454,26 @@ The `S` tag is used to add inline styling to a piece of text, such as underline
454454
<a name="table-tablerow-tableheaderitem-and-tableitem-base"></a>
455455
#### Table, TableRow, TableHeaderItem and TableItem (Base)
456456

457-
The `Table` tag is used to add table to your slide. It is used with `TableRow`, `TableHeaderItem` and `TableItem`. Use them as follows:
457+
The `Table` tag is used to add table to your slide. It is used with `TableHeader`, `TableBody`, `TableRow`, `TableHeaderItem` and `TableItem`. Use them as follows:
458458

459459
```jsx
460460
<Table>
461-
<TableRow>
462-
<TableHeaderItem></TableHeaderItem>
463-
<TableHeaderItem>2011</TableHeaderItem>
464-
</TableRow>
465-
<TableRow>
466-
<TableItem>None</TableItem>
467-
<TableItem>61.8%</TableItem>
468-
</TableRow>
469-
<TableRow>
470-
<TableItem>jQuery</TableItem>
471-
<TableItem>28.3%</TableItem>
472-
</TableRow>
461+
<TableHeader>
462+
<TableRow>
463+
<TableHeaderItem></TableHeaderItem>
464+
<TableHeaderItem>2011</TableHeaderItem>
465+
</TableRow>
466+
</TableHeader>
467+
<TableBody>
468+
<TableRow>
469+
<TableItem>None</TableItem>
470+
<TableItem>61.8%</TableItem>
471+
</TableRow>
472+
<TableRow>
473+
<TableItem>jQuery</TableItem>
474+
<TableItem>28.3%</TableItem>
475+
</TableRow>
476+
</TableBody>
473477
</Table>
474478
```
475479

‎example/src/index.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from "react";
22

33
import {
4-
Appear, BlockQuote, Cite, CodePane, Deck, Fill,
5-
Heading, Image, Layout, Link, ListItem, List, Markdown, Quote, Slide,
6-
TableHeaderItem, TableItem, TableRow, Table, Text, ComponentPlayground, MarkdownSlides
4+
Appear, BlockQuote, Cite, CodePane, ComponentPlayground, Deck, Fill,
5+
Heading, Image, Layout, Link, ListItem, List, Markdown, MarkdownSlides, Quote, Slide,
6+
TableBody, TableHeader, TableHeaderItem, TableItem, TableRow, Table, Text
77
} from "../../src";
88

99
import preloader from "../../src/utils/preloader";
@@ -159,15 +159,15 @@ Slides are separated with **three dashes** and can be used _anywhere_ in the dec
159159
</Heading>
160160
<Layout>
161161
<Table>
162-
<thead>
162+
<TableHeader>
163163
<TableRow>
164164
<TableHeaderItem/>
165165
<TableHeaderItem>2011</TableHeaderItem>
166166
<TableHeaderItem>2013</TableHeaderItem>
167167
<TableHeaderItem>2015</TableHeaderItem>
168168
</TableRow>
169-
</thead>
170-
<tbody>
169+
</TableHeader>
170+
<TableBody>
171171
<TableRow>
172172
<TableItem>None</TableItem>
173173
<TableItem>61.8%</TableItem>
@@ -192,7 +192,7 @@ Slides are separated with **three dashes** and can be used _anywhere_ in the dec
192192
<TableItem>24.9%</TableItem>
193193
<TableItem>55.9%</TableItem>
194194
</TableRow>
195-
</tbody>
195+
</TableBody>
196196
</Table>
197197
</Layout>
198198
</Slide>

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,9 @@
6969
"jest": "^17.0.2",
7070
"node-libs-browser": "^0.5.3",
7171
"raw-loader": "^0.5.1",
72-
"react": "^15.4.0",
72+
"react": "15.4.2",
7373
"react-addons-test-utils": "^15.4.0",
74-
"react-dom": "^15.4.0",
74+
"react-dom": "15.4.2",
7575
"react-transform-catch-errors": "^1.0.0",
7676
"react-transform-hmr": "^1.0.1",
7777
"redbox-react": "^1.2.0",
@@ -83,7 +83,7 @@
8383
"webpack-dev-middleware": "^1.8.4",
8484
"webpack-hot-middleware": "^2.13.0"
8585
},
86-
"jest" : {
86+
"jest": {
8787
"moduleNameMapper": {
8888
"\\.(css)$": "<rootDir>/__mocks__/styleMock.js"
8989
}

‎src/components/__snapshots__/table-body.test.js.snap‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
exports[`<TableBody /> should render correctly 1`] = `
2+
<TableHeader>
3+
<thead>
4+
<tr>
5+
<td>
6+
Table Content
7+
</td>
8+
</tr>
9+
</thead>
10+
</TableHeader>
11+
`;

‎src/components/__snapshots__/table-header.test.js.snap‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
exports[`<TableHeader /> should render correctly 1`] = `
2+
<TableHeader>
3+
<thead>
4+
<tr>
5+
<th>
6+
Table Content
7+
</th>
8+
</tr>
9+
</thead>
10+
</TableHeader>
11+
`;

‎src/components/__snapshots__/table.test.js.snap‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,11 @@ exports[`<Table /> should render correctly 1`] = `
44
data-radium={true}
55
style={Object {}}>
66
<tbody>
7-
<tbody>
8-
<tr>
9-
<td>
10-
Table Content
11-
</td>
12-
</tr>
13-
</tbody>
7+
<tr>
8+
<td>
9+
Table Content
10+
</td>
11+
</tr>
1412
</tbody>
1513
</table>
1614
</Table>

‎src/components/table-body.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, { PropTypes } from "react";
2+
3+
export default function TableBody({ children }) {
4+
return <tbody>{ children }</tbody>;
5+
}
6+
7+
TableBody.propTypes = {
8+
children: PropTypes.node
9+
};
10+
11+
TableBody.contextTypes = {
12+
styles: PropTypes.object,
13+
store: PropTypes.object
14+
};

‎src/components/table-body.test.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from "react";
2+
import { mount } from "enzyme";
3+
import { mountToJson } from "enzyme-to-json";
4+
import TableBody from "./table-header";
5+
6+
describe("<TableBody />", () => {
7+
test("should render correctly", () => {
8+
const wrapper = mount(
9+
<TableBody>
10+
<tr><td>Table Content</td></tr>
11+
</TableBody>
12+
);
13+
expect(mountToJson(wrapper)).toMatchSnapshot();
14+
});
15+
});

‎src/components/table-header.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, { PropTypes } from "react";
2+
3+
export default function TableHeader({ children }) {
4+
return <thead>{ children }</thead>;
5+
}
6+
7+
TableHeader.propTypes = {
8+
children: PropTypes.node
9+
};
10+
11+
TableHeader.contextTypes = {
12+
styles: PropTypes.object,
13+
store: PropTypes.object
14+
};

‎src/components/table-header.test.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from "react";
2+
import { mount } from "enzyme";
3+
import { mountToJson } from "enzyme-to-json";
4+
import TableHeader from "./table-header";
5+
6+
describe("<TableHeader />", () => {
7+
test("should render correctly", () => {
8+
const wrapper = mount(
9+
<TableHeader>
10+
<tr><th>Table Content</th></tr>
11+
</TableHeader>
12+
);
13+
expect(mountToJson(wrapper)).toMatchSnapshot();
14+
});
15+
});

0 commit comments

Comments
 (0)