From 09341fcd3008a24fc7710d7e719cdd460e0a5ce5 Mon Sep 17 00:00:00 2001 From: Carlos Paelinck Date: Fri, 27 Jan 2017 11:21:15 -0600 Subject: [PATCH] Add Table Header / Body. * Upgrade to React 15.4.2 * Add docs for new tags and example slide --- README.markdown | 32 +++-- example/src/index.js | 14 +- package.json | 6 +- .../__snapshots__/table-body.test.js.snap | 11 ++ .../__snapshots__/table-header.test.js.snap | 11 ++ .../__snapshots__/table.test.js.snap | 12 +- src/components/table-body.js | 14 ++ src/components/table-body.test.js | 15 +++ src/components/table-header.js | 14 ++ src/components/table-header.test.js | 15 +++ src/components/table.js | 4 +- src/index.js | 4 + yarn.lock | 121 ++++++++++++------ 13 files changed, 203 insertions(+), 70 deletions(-) create mode 100644 src/components/__snapshots__/table-body.test.js.snap create mode 100644 src/components/__snapshots__/table-header.test.js.snap create mode 100644 src/components/table-body.js create mode 100644 src/components/table-body.test.js create mode 100644 src/components/table-header.js create mode 100644 src/components/table-header.test.js diff --git a/README.markdown b/README.markdown index 1740d7533..ee3261e08 100644 --- a/README.markdown +++ b/README.markdown @@ -42,7 +42,7 @@ ReactJS based Presentation Library - [Link (Base)](#link-base) - [List & ListItem (Base)](#list--listitem-base) - [S (Base)](#s-base) - - [Table, TableRow, TableHeaderItem and TableItem (Base)](#table-tablerow-tableheaderitem-and-tableitem-base) + - [Table, TableRow, TableBody, TableHeader, TableHeaderItem and TableItem (Base)](#table-tablerow-tableheaderitem-and-tableitem-base) - [Text (Base)](#text-base) - [Typeface](#typeface) - [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 #### Table, TableRow, TableHeaderItem and TableItem (Base) -The `Table` tag is used to add table to your slide. It is used with `TableRow`, `TableHeaderItem` and `TableItem`. Use them as follows: +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: ```jsx - - - 2011 - - - None - 61.8% - - - jQuery - 28.3% - + + + + 2011 + + + + + None + 61.8% + + + jQuery + 28.3% + +
``` diff --git a/example/src/index.js b/example/src/index.js index b7688c788..7eac63f3c 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -1,9 +1,9 @@ import React from "react"; import { - Appear, BlockQuote, Cite, CodePane, Deck, Fill, - Heading, Image, Layout, Link, ListItem, List, Markdown, Quote, Slide, - TableHeaderItem, TableItem, TableRow, Table, Text, ComponentPlayground, MarkdownSlides + Appear, BlockQuote, Cite, CodePane, ComponentPlayground, Deck, Fill, + Heading, Image, Layout, Link, ListItem, List, Markdown, MarkdownSlides, Quote, Slide, + TableBody, TableHeader, TableHeaderItem, TableItem, TableRow, Table, Text } from "../../src"; import preloader from "../../src/utils/preloader"; @@ -159,15 +159,15 @@ Slides are separated with **three dashes** and can be used _anywhere_ in the dec - + 2011 2013 2015 - - + + None 61.8% @@ -192,7 +192,7 @@ Slides are separated with **three dashes** and can be used _anywhere_ in the dec 24.9% 55.9% - +
diff --git a/package.json b/package.json index f1335a4b9..368991cc9 100644 --- a/package.json +++ b/package.json @@ -69,9 +69,9 @@ "jest": "^17.0.2", "node-libs-browser": "^0.5.3", "raw-loader": "^0.5.1", - "react": "^15.4.0", + "react": "15.4.2", "react-addons-test-utils": "^15.4.0", - "react-dom": "^15.4.0", + "react-dom": "15.4.2", "react-transform-catch-errors": "^1.0.0", "react-transform-hmr": "^1.0.1", "redbox-react": "^1.2.0", @@ -83,7 +83,7 @@ "webpack-dev-middleware": "^1.8.4", "webpack-hot-middleware": "^2.13.0" }, - "jest" : { + "jest": { "moduleNameMapper": { "\\.(css)$": "/__mocks__/styleMock.js" } diff --git a/src/components/__snapshots__/table-body.test.js.snap b/src/components/__snapshots__/table-body.test.js.snap new file mode 100644 index 000000000..33120581f --- /dev/null +++ b/src/components/__snapshots__/table-body.test.js.snap @@ -0,0 +1,11 @@ +exports[` should render correctly 1`] = ` + + + + + Table Content + + + + +`; diff --git a/src/components/__snapshots__/table-header.test.js.snap b/src/components/__snapshots__/table-header.test.js.snap new file mode 100644 index 000000000..45c7f6869 --- /dev/null +++ b/src/components/__snapshots__/table-header.test.js.snap @@ -0,0 +1,11 @@ +exports[` should render correctly 1`] = ` + + + + + Table Content + + + + +`; diff --git a/src/components/__snapshots__/table.test.js.snap b/src/components/__snapshots__/table.test.js.snap index ecf89bca7..d9175a7c5 100644 --- a/src/components/__snapshots__/table.test.js.snap +++ b/src/components/__snapshots__/table.test.js.snap @@ -4,13 +4,11 @@ exports[` should render correctly 1`] = ` data-radium={true} style={Object {}}> - - - - - + + +
- Table Content -
+ Table Content +
diff --git a/src/components/table-body.js b/src/components/table-body.js new file mode 100644 index 000000000..a83653921 --- /dev/null +++ b/src/components/table-body.js @@ -0,0 +1,14 @@ +import React, { PropTypes } from "react"; + +export default function TableBody({ children }) { + return { children }; +} + +TableBody.propTypes = { + children: PropTypes.node +}; + +TableBody.contextTypes = { + styles: PropTypes.object, + store: PropTypes.object +}; diff --git a/src/components/table-body.test.js b/src/components/table-body.test.js new file mode 100644 index 000000000..3f0842812 --- /dev/null +++ b/src/components/table-body.test.js @@ -0,0 +1,15 @@ +import React from "react"; +import { mount } from "enzyme"; +import { mountToJson } from "enzyme-to-json"; +import TableBody from "./table-header"; + +describe("", () => { + test("should render correctly", () => { + const wrapper = mount( + + Table Content + + ); + expect(mountToJson(wrapper)).toMatchSnapshot(); + }); +}); diff --git a/src/components/table-header.js b/src/components/table-header.js new file mode 100644 index 000000000..35ddb70f0 --- /dev/null +++ b/src/components/table-header.js @@ -0,0 +1,14 @@ +import React, { PropTypes } from "react"; + +export default function TableHeader({ children }) { + return { children }; +} + +TableHeader.propTypes = { + children: PropTypes.node +}; + +TableHeader.contextTypes = { + styles: PropTypes.object, + store: PropTypes.object +}; diff --git a/src/components/table-header.test.js b/src/components/table-header.test.js new file mode 100644 index 000000000..e50ba9102 --- /dev/null +++ b/src/components/table-header.test.js @@ -0,0 +1,15 @@ +import React from "react"; +import { mount } from "enzyme"; +import { mountToJson } from "enzyme-to-json"; +import TableHeader from "./table-header"; + +describe("", () => { + test("should render correctly", () => { + const wrapper = mount( + + Table Content + + ); + expect(mountToJson(wrapper)).toMatchSnapshot(); + }); +}); diff --git a/src/components/table.js b/src/components/table.js index 586b1141f..018f496c0 100644 --- a/src/components/table.js +++ b/src/components/table.js @@ -7,9 +7,7 @@ export default class Table extends Component { render() { return ( - - {this.props.children} - + {this.props.children}
); } diff --git a/src/index.js b/src/index.js index dd7a1daf9..160bd2b79 100644 --- a/src/index.js +++ b/src/index.js @@ -18,6 +18,8 @@ import MarkdownSlides from "./components/markdown-slides"; import Quote from "./components/quote"; import S from "./components/s"; import Slide from "./components/slide"; +import TableBody from "./components/table-body"; +import TableHeader from "./components/table-header"; import TableHeaderItem from "./components/table-header-item"; import TableItem from "./components/table-item"; import TableRow from "./components/table-row"; @@ -46,6 +48,8 @@ export { Quote, S, Slide, + TableBody, + TableHeader, TableHeaderItem, TableItem, TableRow, diff --git a/yarn.lock b/yarn.lock index 69c5a190e..7329c030d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2482,18 +2482,7 @@ fb-watchman@^1.8.0, fb-watchman@^1.9.0: dependencies: bser "^1.0.2" -fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.5: - version "0.8.6" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.6.tgz#7eb67d6986b2d5007a9b6e92e0e7cb6f75cad290" - dependencies: - core-js "^1.0.0" - isomorphic-fetch "^2.1.1" - loose-envify "^1.0.0" - object-assign "^4.1.0" - promise "^7.1.1" - ua-parser-js "^0.7.9" - -fbjs@^0.8.7, fbjs@^0.8.8: +fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.7, fbjs@^0.8.8: version "0.8.8" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.8.tgz#02f1b6e0ea0d46c24e0b51a2d24df069563a5ad6" dependencies: @@ -4083,6 +4072,10 @@ media-typer@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" +memory-fs@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290" + memory-fs@^0.4.0, memory-fs@~0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" @@ -4302,6 +4295,34 @@ node-libs-browser@^0.5.3: util "~0.10.3" vm-browserify "0.0.4" +node-libs-browser@^0.7.0: + version "0.7.0" + resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b" + dependencies: + assert "^1.1.1" + browserify-zlib "^0.1.4" + buffer "^4.9.0" + console-browserify "^1.1.0" + constants-browserify "^1.0.0" + crypto-browserify "3.3.0" + domain-browser "^1.1.1" + events "^1.0.0" + https-browserify "0.0.1" + os-browserify "^0.2.0" + path-browserify "0.0.0" + process "^0.11.0" + punycode "^1.2.4" + querystring-es3 "^0.2.0" + readable-stream "^2.0.5" + stream-browserify "^2.0.1" + stream-http "^2.3.1" + string_decoder "^0.10.25" + timers-browserify "^2.0.2" + tty-browserify "0.0.0" + url "^0.11.0" + util "^0.10.3" + vm-browserify "0.0.4" + node-libs-browser@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.0.0.tgz#a3a59ec97024985b46e958379646f96c4b616646" @@ -5105,7 +5126,15 @@ react-deep-force-update@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7" -"react-dom@^15.0.1 || ^0.14.7", react-dom@^15.4.0: +react-dom@15.4.2: + version "15.4.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.2.tgz#015363f05b0a1fd52ae9efdd3a0060d90695208f" + dependencies: + fbjs "^0.8.1" + loose-envify "^1.1.0" + object-assign "^4.1.0" + +"react-dom@^15.0.1 || ^0.14.7": version "15.4.1" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.1.tgz#d54c913261aaedb17adc20410d029dcc18a1344a" dependencies: @@ -5156,7 +5185,15 @@ react-typography@^0.15.0: version "0.15.0" resolved "https://registry.yarnpkg.com/react-typography/-/react-typography-0.15.0.tgz#0c7680bcbb12a681950c2187df66c43aa4b02034" -react@^15.3.2, react@^15.4.0: +react@15.4.2, "react@^15.0.1 || ^0.14.7": + version "15.4.2" + resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef" + dependencies: + fbjs "^0.8.4" + loose-envify "^1.1.0" + object-assign "^4.1.0" + +react@^15.3.2: version "15.4.1" resolved "https://registry.yarnpkg.com/react/-/react-15.4.1.tgz#498e918602677a3983cd0fd206dfe700389a0dd6" dependencies: @@ -5576,7 +5613,7 @@ sort-keys@^1.0.0: dependencies: is-plain-obj "^1.0.0" -source-list-map@^0.1.4, source-list-map@~0.1.0, source-list-map@~0.1.7: +source-list-map@^0.1.4, source-list-map@~0.1.7: version "0.1.7" resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.7.tgz#d4b5ce2a46535c72c7e8527c71a77d250618172e" @@ -5828,6 +5865,10 @@ table@^3.7.8: slice-ansi "0.0.4" string-width "^2.0.0" +tapable@^0.1.8, tapable@~0.1.8: + version "0.1.10" + resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4" + tapable@^0.2.5, tapable@~0.2.5: version "0.2.6" resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.6.tgz#206be8e188860b514425375e6f1ae89bfb01fd8d" @@ -5988,7 +6029,7 @@ ua-parser-js@^0.7.9: version "0.7.12" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb" -uglify-js@^2.6, uglify-js@^2.7.5: +uglify-js@^2.6, uglify-js@^2.7.5, uglify-js@~2.7.3: version "2.7.5" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.5.tgz#4612c0c7baaee2ba7c487de4904ae122079f2ca8" dependencies: @@ -6221,6 +6262,14 @@ watch@~0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc" +watchpack@^0.2.1: + version "0.2.9" + resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b" + dependencies: + async "^0.9.0" + chokidar "^1.0.0" + graceful-fs "^4.1.2" + watchpack@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.2.0.tgz#15d4620f1e7471f13fcb551d5c030d2c3eb42dbb" @@ -6265,26 +6314,6 @@ webpack-sources@^0.1.4: source-list-map "~0.1.7" source-map "~0.5.3" -webpack@^1.10.0: - version "1.14.0" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.14.0.tgz#54f1ffb92051a328a5b2057d6ae33c289462c823" - dependencies: - acorn "^3.0.0" - async "^1.3.0" - clone "^1.0.2" - enhanced-resolve "~0.9.0" - interpret "^0.6.4" - loader-utils "^0.2.11" - memory-fs "~0.3.0" - mkdirp "~0.5.0" - node-libs-browser "^0.7.0" - optimist "~0.6.0" - supports-color "^3.1.0" - tapable "~0.1.8" - uglify-js "~2.7.3" - watchpack "^0.2.1" - webpack-core "~0.6.9" - webpack@2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.2.0.tgz#09246336b5581c9002353f75bcadb598a648f977" @@ -6310,6 +6339,26 @@ webpack@2.2.0: webpack-sources "^0.1.4" yargs "^6.0.0" +webpack@^1.10.0: + version "1.14.0" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.14.0.tgz#54f1ffb92051a328a5b2057d6ae33c289462c823" + dependencies: + acorn "^3.0.0" + async "^1.3.0" + clone "^1.0.2" + enhanced-resolve "~0.9.0" + interpret "^0.6.4" + loader-utils "^0.2.11" + memory-fs "~0.3.0" + mkdirp "~0.5.0" + node-libs-browser "^0.7.0" + optimist "~0.6.0" + supports-color "^3.1.0" + tapable "~0.1.8" + uglify-js "~2.7.3" + watchpack "^0.2.1" + webpack-core "~0.6.9" + whatwg-encoding@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.1.tgz#3c6c451a198ee7aec55b1ec61d0920c67801a5f4"