From 290a510ebbfe7f27ccee37cb0c08457208a5591b Mon Sep 17 00:00:00 2001 From: Zach Silveira Date: Wed, 20 Sep 2017 12:40:59 -0400 Subject: [PATCH] Add toggle component --- .npmignore | 1 + README.md | 6 +- example/package-lock.json | 39 ++++- example/package.json | 4 +- example/src/App.js | 2 + example/src/example/toggle.js | 11 ++ example/src/flashbang/index.js | 1 + example/src/flashbang/toggle.js | 37 +++++ package-lock.json | 262 ++++++++++++++++++-------------- package.json | 20 +-- src/index.js | 1 + src/toggle.js | 37 +++++ test-setup.js | 9 ++ tests/query-state.js | 18 ++- tests/toggle.js | 42 +++++ 15 files changed, 351 insertions(+), 139 deletions(-) create mode 100644 example/src/example/toggle.js create mode 100644 example/src/flashbang/toggle.js create mode 100644 src/toggle.js create mode 100644 test-setup.js create mode 100644 tests/toggle.js diff --git a/.npmignore b/.npmignore index ecb1e5f..ce280c7 100644 --- a/.npmignore +++ b/.npmignore @@ -6,3 +6,4 @@ README.md circle.yml coverage tests +test-setup.js diff --git a/README.md b/README.md index f205afe..a55f32a 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,11 @@ export default QueryState(example); ## Toggle -**Coming Soon** +Toggle the display of data with three simple props! + +- [source](/src/toggle.js) +- [tests](/tests/toggle.js) +- [example](/example/src/example/toggle.js) ```js import { Toggle } from 'flashbang' diff --git a/example/package-lock.json b/example/package-lock.json index e39bfe8..06c5047 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -2149,6 +2149,7 @@ "version": "15.6.0", "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.0.tgz", "integrity": "sha1-q0SEl8JlZuHilBPogyB9V8/nvtQ=", + "dev": true, "requires": { "fbjs": "0.8.15", "loose-envify": "1.3.1", @@ -8748,11 +8749,10 @@ } }, "react": { - "version": "15.6.1", - "resolved": "https://registry.npmjs.org/react/-/react-15.6.1.tgz", - "integrity": "sha1-uqhDTsZ4C96ZfNw4C3nNM7ljk98=", + "version": "16.0.0-rc.2", + "resolved": "https://registry.npmjs.org/react/-/react-16.0.0-rc.2.tgz", + "integrity": "sha1-HlXMGP2cViYPHQzPnKym0xUtyDw=", "requires": { - "create-react-class": "15.6.0", "fbjs": "0.8.15", "loose-envify": "1.3.1", "object-assign": "4.1.1", @@ -8849,9 +8849,9 @@ } }, "react-dom": { - "version": "15.6.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.1.tgz", - "integrity": "sha1-LLDtQZEDjlPCCes6eaI+Kkz5lHA=", + "version": "16.0.0-rc.2", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.0.0-rc.2.tgz", + "integrity": "sha1-+U3Bw1Cs1nKEIzVYmWqCk9eqmcc=", "requires": { "fbjs": "0.8.15", "loose-envify": "1.3.1", @@ -8886,6 +8886,31 @@ "js-tokens": "3.0.2" } }, + "react": { + "version": "15.6.1", + "resolved": "https://registry.npmjs.org/react/-/react-15.6.1.tgz", + "integrity": "sha1-uqhDTsZ4C96ZfNw4C3nNM7ljk98=", + "dev": true, + "requires": { + "create-react-class": "15.6.0", + "fbjs": "0.8.15", + "loose-envify": "1.3.1", + "object-assign": "4.1.1", + "prop-types": "15.5.10" + } + }, + "react-dom": { + "version": "15.6.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.1.tgz", + "integrity": "sha1-LLDtQZEDjlPCCes6eaI+Kkz5lHA=", + "dev": true, + "requires": { + "fbjs": "0.8.15", + "loose-envify": "1.3.1", + "object-assign": "4.1.1", + "prop-types": "15.5.10" + } + }, "source-map": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", diff --git a/example/package.json b/example/package.json index 4967dcc..189dbb4 100644 --- a/example/package.json +++ b/example/package.json @@ -6,8 +6,8 @@ "react-scripts": "1.0.13" }, "dependencies": { - "react": "^15.6.1", - "react-dom": "^15.6.1", + "react": "^16.0.0-rc.2", + "react-dom": "^16.0.0-rc.2", "react-router-dom": "^4.2.2" }, "scripts": { diff --git a/example/src/App.js b/example/src/App.js index a9c295d..136e422 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import { BrowserRouter, Switch, Route } from 'react-router-dom'; +import Toggle from './example/toggle'; import QueryState from './example/query-state'; class App extends Component { @@ -8,6 +9,7 @@ class App extends Component { return ( + diff --git a/example/src/example/toggle.js b/example/src/example/toggle.js new file mode 100644 index 0000000..32ec829 --- /dev/null +++ b/example/src/example/toggle.js @@ -0,0 +1,11 @@ +import React from 'react'; +import { Toggle } from '../flashbang'; + +export default ({ state, setState }) => ( + +
Click this to swap the content
+ +
Toggle is now on!
+
Click the toggle above to turn it on!
+ +); diff --git a/example/src/flashbang/index.js b/example/src/flashbang/index.js index 836b7c2..ee8e88f 100644 --- a/example/src/flashbang/index.js +++ b/example/src/flashbang/index.js @@ -1 +1,2 @@ export { default as QueryState } from './query-state'; +export { default as Toggle } from './toggle'; diff --git a/example/src/flashbang/toggle.js b/example/src/flashbang/toggle.js new file mode 100644 index 0000000..74abb22 --- /dev/null +++ b/example/src/flashbang/toggle.js @@ -0,0 +1,37 @@ +import React from 'react'; + +export default class Toggle extends React.Component { + constructor() { + super(); + this.state = {}; + } + + children(children) { + let { toggled } = this.state; + + return React.Children.map(children, child => { + let { toggle, on, off, ...props } = child.props; + + if (toggle) + return React.createElement(child.type, { + ...props, + onClick: () => this.setState({ toggled: !toggled }), + }); + + if (on) { + if (!toggled) return null; + return React.createElement(child.type, props); + } + + if (off) { + if (toggled) return null; + return React.createElement(child.type, props); + } + + return child; + }); + } + render() { + return this.children(this.props.children); + } +} diff --git a/package-lock.json b/package-lock.json index eb4c38b..dc9252d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,9 +1,15 @@ { "name": "flashbang", - "version": "0.0.1", + "version": "0.0.3", "lockfileVersion": 1, "requires": true, "dependencies": { + "@types/node": { + "version": "6.0.88", + "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.88.tgz", + "integrity": "sha512-bYDPZTX0/s1aihdjLuAgogUAT5M+TpoWChEMea2p0yOcfn5bu3k6cJb9cp6nw268XeSNIGGr+4+/8V5K6BGzLQ==", + "dev": true + }, "abab": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.3.tgz", @@ -1051,27 +1057,28 @@ } }, "cheerio": { - "version": "0.22.0", - "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-0.22.0.tgz", - "integrity": "sha1-qbqoYKP5tZWmuBsahocxIe06Jp4=", + "version": "1.0.0-rc.2", + "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz", + "integrity": "sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=", "dev": true, "requires": { "css-select": "1.2.0", "dom-serializer": "0.1.0", "entities": "1.1.1", "htmlparser2": "3.9.2", - "lodash.assignin": "4.2.0", - "lodash.bind": "4.2.1", - "lodash.defaults": "4.2.0", - "lodash.filter": "4.6.0", - "lodash.flatten": "4.4.0", - "lodash.foreach": "4.5.0", - "lodash.map": "4.6.0", - "lodash.merge": "4.6.0", - "lodash.pick": "4.4.0", - "lodash.reduce": "4.6.0", - "lodash.reject": "4.6.0", - "lodash.some": "4.6.0" + "lodash": "4.17.4", + "parse5": "3.0.2" + }, + "dependencies": { + "parse5": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.2.tgz", + "integrity": "sha1-Be/1fw70V3+xRKefi5qWemzERRA=", + "dev": true, + "requires": { + "@types/node": "6.0.88" + } + } } }, "chokidar": { @@ -1140,6 +1147,12 @@ "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", "dev": true }, + "colors": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/colors/-/colors-0.5.1.tgz", + "integrity": "sha1-fQAj6usVTo7p/Oddy5I9DtFmd3Q=", + "dev": true + }, "combined-stream": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz", @@ -1206,17 +1219,6 @@ } } }, - "create-react-class": { - "version": "15.6.0", - "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.0.tgz", - "integrity": "sha1-q0SEl8JlZuHilBPogyB9V8/nvtQ=", - "dev": true, - "requires": { - "fbjs": "0.8.15", - "loose-envify": "1.3.1", - "object-assign": "4.1.1" - } - }, "cross-spawn": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", @@ -1348,6 +1350,12 @@ "integrity": "sha512-MKPHZDMB0o6yHyDryUOScqZibp914ksXwAMYMTHj6KO8UeKsRYNJD3oNCKjTqZon+V488P7N/HzXF8t7ZR95ww==", "dev": true }, + "discontinuous-range": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz", + "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=", + "dev": true + }, "dom-serializer": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz", @@ -1417,21 +1425,44 @@ "dev": true }, "enzyme": { - "version": "2.9.1", - "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-2.9.1.tgz", - "integrity": "sha1-B9XOaRJBJA+4F78sSxjW5TAkDfY=", + "version": "3.0.0-beta.6", + "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.0.0-beta.6.tgz", + "integrity": "sha1-b09g2OIQT8Zjf6Adm01un0LsqOE=", "dev": true, "requires": { - "cheerio": "0.22.0", + "cheerio": "1.0.0-rc.2", "function.prototype.name": "1.0.3", "is-subset": "0.1.1", "lodash": "4.17.4", "object-is": "1.0.1", "object.assign": "4.0.4", "object.entries": "1.0.4", + "raf": "3.3.2", + "rst-selector-parser": "2.2.1" + } + }, + "enzyme-adapter-react-16": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.0-beta.2.tgz", + "integrity": "sha1-MxV+WRXOQyhxUOnfC+oAzjYo+GI=", + "dev": true, + "requires": { + "enzyme-adapter-utils": "1.0.0-beta.2", + "lodash": "4.17.4", + "object.assign": "4.0.4", "object.values": "1.0.4", - "prop-types": "15.5.10", - "uuid": "3.1.0" + "prop-types": "15.5.10" + } + }, + "enzyme-adapter-utils": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.0.0-beta.2.tgz", + "integrity": "sha1-muXQd2HoSFX6+tHwmPD/nfO1TRk=", + "dev": true, + "requires": { + "lodash": "4.17.4", + "object.assign": "4.0.4", + "prop-types": "15.5.10" } }, "errno": { @@ -4151,76 +4182,10 @@ "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", "dev": true }, - "lodash.assignin": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/lodash.assignin/-/lodash.assignin-4.2.0.tgz", - "integrity": "sha1-uo31+4QesKPoBEIysOJjqNxqKKI=", - "dev": true - }, - "lodash.bind": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/lodash.bind/-/lodash.bind-4.2.1.tgz", - "integrity": "sha1-euMBfpOWIqwxt9fX3LGzTbFpDTU=", - "dev": true - }, - "lodash.defaults": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz", - "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=", - "dev": true - }, - "lodash.filter": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/lodash.filter/-/lodash.filter-4.6.0.tgz", - "integrity": "sha1-ZosdSYFgOuHMWm+nYBQ+SAtMSs4=", - "dev": true - }, - "lodash.flatten": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz", - "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=", - "dev": true - }, - "lodash.foreach": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz", - "integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM=", - "dev": true - }, - "lodash.map": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz", - "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=", - "dev": true - }, - "lodash.merge": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.0.tgz", - "integrity": "sha1-aYhLoUSsM/5plzemCG3v+t0PicU=", - "dev": true - }, - "lodash.pick": { + "lodash.flattendeep": { "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz", - "integrity": "sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=", - "dev": true - }, - "lodash.reduce": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz", - "integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs=", - "dev": true - }, - "lodash.reject": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/lodash.reject/-/lodash.reject-4.6.0.tgz", - "integrity": "sha1-gNZJLcFHCGS79YNTO2UfQqn1JBU=", - "dev": true - }, - "lodash.some": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/lodash.some/-/lodash.some-4.6.0.tgz", - "integrity": "sha1-G7nzFO9ri63tE7VJFpsqlF62jk0=", + "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz", + "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=", "dev": true }, "log-driver": { @@ -4363,6 +4328,17 @@ "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=", "dev": true }, + "nearley": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.11.0.tgz", + "integrity": "sha512-clqqhEuP0ZCJQ85Xv2I/4o2Gs/fvSR6fCg5ZHVE2c8evWyNk2G++ih4JOO3lMb/k/09x6ihQ2nzKUlB/APCWjg==", + "dev": true, + "requires": { + "nomnom": "1.6.2", + "railroad-diagrams": "1.0.0", + "randexp": "0.4.6" + } + }, "node-fetch": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", @@ -4391,6 +4367,16 @@ "which": "1.3.0" } }, + "nomnom": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.6.2.tgz", + "integrity": "sha1-hKZqJgF0QI/Ft3oY+IjszET7aXE=", + "dev": true, + "requires": { + "colors": "0.5.1", + "underscore": "1.4.4" + } + }, "normalize-package-data": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz", @@ -4692,6 +4678,12 @@ "pinkie-promise": "2.0.1" } }, + "performance-now": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", + "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=", + "dev": true + }, "pify": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", @@ -4807,6 +4799,31 @@ "integrity": "sha1-51vV9uJoEioqDgvaYwslUMFmUCw=", "dev": true }, + "raf": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/raf/-/raf-3.3.2.tgz", + "integrity": "sha1-DBO+C1tJtG921maSSNUnzysC/ic=", + "dev": true, + "requires": { + "performance-now": "2.1.0" + } + }, + "railroad-diagrams": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz", + "integrity": "sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=", + "dev": true + }, + "randexp": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz", + "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==", + "dev": true, + "requires": { + "discontinuous-range": "1.0.0", + "ret": "0.1.15" + } + }, "randomatic": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz", @@ -4849,12 +4866,11 @@ } }, "react": { - "version": "15.6.1", - "resolved": "https://registry.npmjs.org/react/-/react-15.6.1.tgz", - "integrity": "sha1-uqhDTsZ4C96ZfNw4C3nNM7ljk98=", + "version": "16.0.0-rc.2", + "resolved": "https://registry.npmjs.org/react/-/react-16.0.0-rc.2.tgz", + "integrity": "sha1-HlXMGP2cViYPHQzPnKym0xUtyDw=", "dev": true, "requires": { - "create-react-class": "15.6.0", "fbjs": "0.8.15", "loose-envify": "1.3.1", "object-assign": "4.1.1", @@ -4862,9 +4878,9 @@ } }, "react-dom": { - "version": "15.6.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.1.tgz", - "integrity": "sha1-LLDtQZEDjlPCCes6eaI+Kkz5lHA=", + "version": "16.0.0-rc.2", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.0.0-rc.2.tgz", + "integrity": "sha1-+U3Bw1Cs1nKEIzVYmWqCk9eqmcc=", "dev": true, "requires": { "fbjs": "0.8.15", @@ -4903,9 +4919,9 @@ } }, "react-test-renderer": { - "version": "15.6.1", - "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-15.6.1.tgz", - "integrity": "sha1-Am9KW7VVJmH9LMS7zQ1LyKNev34=", + "version": "16.0.0-rc.2", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.0.0-rc.2.tgz", + "integrity": "sha1-hDCiwKZVVcHT9i3xgjcvVqvHHsM=", "dev": true, "requires": { "fbjs": "0.8.15", @@ -5127,6 +5143,12 @@ "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==", "dev": true }, + "ret": { + "version": "0.1.15", + "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz", + "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==", + "dev": true + }, "right-align": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz", @@ -5146,6 +5168,16 @@ "glob": "7.1.2" } }, + "rst-selector-parser": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.1.tgz", + "integrity": "sha512-1xVsEpnaiNsz4zVJFTUyiOk4UG1UiLOGGaA75J/McWlpgRa+Ze5S2bnPQS0tcLbbo3vhFvIX5mpC0V1pBLzaoQ==", + "dev": true, + "requires": { + "lodash.flattendeep": "4.4.0", + "nearley": "2.11.0" + } + }, "safe-buffer": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", @@ -5540,6 +5572,12 @@ "dev": true, "optional": true }, + "underscore": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz", + "integrity": "sha1-YaajIBBiKvoHljvzJSA88SI51gQ=", + "dev": true + }, "user-home": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz", diff --git a/package.json b/package.json index 192b2cb..99b3f0e 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,14 @@ { "name": "flashbang", - "version": "0.0.2", + "version": "0.0.3", "description": "small set of awesome react utilities", "main": "dist/index.js", "scripts": { - "prepare": "rm -rf src && cp -r example/src/flashbang src", - "build": "npm run prepare && babel src --out-dir dist", - "test": "npm run prepare && jest", + "pre": "rm -rf src && cp -r example/src/flashbang src", + "build": "npm run pre && babel src --out-dir dist", + "test": "npm run pre && jest", "test-ci": - "npm run prepare && jest --coverage --no-cache && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js" + "npm run pre && jest --coverage --no-cache && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js" }, "jest": { "testMatch": ["/tests/**/*.js"], @@ -17,6 +17,7 @@ }, "moduleFileExtensions": ["js"], "collectCoverageFrom": ["src/**"], + "setupFiles": ["/test-setup.js"], "collectCoverage": false }, "repository": { @@ -37,11 +38,12 @@ "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "coveralls": "^2.13.1", - "enzyme": "^2.9.1", + "enzyme": "^3.0.0-beta.6", + "enzyme-adapter-react-16": "^1.0.0-beta.2", "jest": "^21.0.2", - "react": "^15.6.1", - "react-dom": "^15.6.1", + "react": "^16.0.0-rc.2", + "react-dom": "^16.0.0-rc.2", "react-router-dom": "^4.2.2", - "react-test-renderer": "^15.6.1" + "react-test-renderer": "^16.0.0-rc.2" } } diff --git a/src/index.js b/src/index.js index 836b7c2..ee8e88f 100644 --- a/src/index.js +++ b/src/index.js @@ -1 +1,2 @@ export { default as QueryState } from './query-state'; +export { default as Toggle } from './toggle'; diff --git a/src/toggle.js b/src/toggle.js new file mode 100644 index 0000000..74abb22 --- /dev/null +++ b/src/toggle.js @@ -0,0 +1,37 @@ +import React from 'react'; + +export default class Toggle extends React.Component { + constructor() { + super(); + this.state = {}; + } + + children(children) { + let { toggled } = this.state; + + return React.Children.map(children, child => { + let { toggle, on, off, ...props } = child.props; + + if (toggle) + return React.createElement(child.type, { + ...props, + onClick: () => this.setState({ toggled: !toggled }), + }); + + if (on) { + if (!toggled) return null; + return React.createElement(child.type, props); + } + + if (off) { + if (toggled) return null; + return React.createElement(child.type, props); + } + + return child; + }); + } + render() { + return this.children(this.props.children); + } +} diff --git a/test-setup.js b/test-setup.js new file mode 100644 index 0000000..d570bf8 --- /dev/null +++ b/test-setup.js @@ -0,0 +1,9 @@ +global.window = global; + +window.requestAnimationFrame = () => { + throw new Error('requestAnimationFrame is not supported in Node'); +}; + +const Enzyme = require('enzyme'); +const Adapter = require('enzyme-adapter-react-16'); +Enzyme.configure({ adapter: new Adapter() }); diff --git a/tests/query-state.js b/tests/query-state.js index ccef4cb..219fad7 100644 --- a/tests/query-state.js +++ b/tests/query-state.js @@ -53,12 +53,14 @@ test('should update url state', done => { .first() .simulate('change', { target: { value: 'testing & ampersand!' } }); - setTimeout(() => false, 400); - - expect( - wrapper - .find('input') - .first() - .props().value - ).toEqual('testing & ampersand!'); + setTimeout( + () => + expect( + wrapper + .find('input') + .first() + .props().value + ).toEqual('testing & ampersand!'), + 400 + ); }); diff --git a/tests/toggle.js b/tests/toggle.js new file mode 100644 index 0000000..fcceaf2 --- /dev/null +++ b/tests/toggle.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import { Toggle } from '../src'; + +const Example = () => ( + +
Click this to swap the content
+ +
Click the toggle above to turn it on!
+
Toggle is now on!
+

this is rendered too

+ +); + +test('should render with the off div', () => { + const wrapper = mount(); + + expect( + wrapper + .find('div') + .last() + .props().children + ).toEqual('Click the toggle above to turn it on!'); + + expect(wrapper.find('p').props().children).toEqual('this is rendered too'); +}); + +test('should render with the off div', () => { + const wrapper = mount(); + + wrapper + .find('div') + .first() + .simulate('click'); + + expect( + wrapper + .find('div') + .last() + .props().children + ).toEqual('Toggle is now on!'); +});