diff --git a/.babelrc b/.babelrc index ab823f1..e60d303 100644 --- a/.babelrc +++ b/.babelrc @@ -1,18 +1,4 @@ { - "env": { - "development": { - "plugins": ["react-transform"], - "extra": { - "react-transform": { - "transforms": [{ - "imports": ["react"], - "locals": ["module"] - }, { - "transform": "react-transform-catch-errors", - "imports": ["react", "redbox-react"] - }] - } - } - } - } + "presets": ["@babel/preset-env", "@babel/preset-react"], + "plugins": ["@babel/plugin-proposal-class-properties"] } diff --git a/.npmignore b/.npmignore index 975cf4d..e3bb282 100644 --- a/.npmignore +++ b/.npmignore @@ -1 +1,3 @@ -*.jsx \ No newline at end of file +*.jsx +__tests__ +*.md diff --git a/.travis.yml b/.travis.yml index 75c3e02..9f590f6 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,7 +1,7 @@ language: node_js node_js: - - "4.1" + - "6.1" install: - npm install diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..c006b6c --- /dev/null +++ b/LICENSE @@ -0,0 +1,22 @@ + +MIT License + +Copyright (c) 2018 Cameron Nokes + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index f5040de..b075063 100644 --- a/README.md +++ b/README.md @@ -13,25 +13,40 @@ This allows you to DRY up statements like this: Example usage: ```javascript +import React, { Component } from 'react'; import ToggleDisplay from 'react-toggle-display'; -export default React.createClass({ - - getInitialState() { - return { - isAuthorized: false - }; - }, - - render() { - return ( - -

Secret stuff for authorized people only.

- - ); - } - -}); +class App extends Component { + constructor() { + super(); + this.state = { show: false }; + } + + handleClick() { + this.setState({ + show: !this.state.show + }); + } + + render() { + return ( +
+

+ +

+ + I am rendered in a span (by default) and hidden with display:none when show is false. + + + + I am rendered in a section and removed from the DOM when if is false. + +
+ ); + } +} + +export default App; ``` [View demo](https://jsfiddle.net/ccnokes/oqttsu83/) @@ -45,6 +60,8 @@ export default React.createClass({ `if` - boolean +`tag` - string. The tag name to use as the ToggleDisplay element. Defaults to span. + The two first props are simply the inverse of each other. Using both at the same time will result in canceling each other out. @@ -67,6 +84,9 @@ Big thanks to [willgm](https://github.com/willgm) for his contributions. ## Change Notes -Note that if you are using a version under 0.1.1, you will have to compile react-toggle-display's JSX yourself. I recommend just updating to 1.x so you don't have to wory about that. No breaking API changes in 1.x. +Note that if you are using a version under 0.1.1, you will have to compile react-toggle-display's JSX yourself. I recommend just updating to 1.x so you don't have to worry about that. No breaking API changes in 1.x. While v2 does not change anything functionally, it was refactored to be a ["stateless functional component"](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components), which won't work in React versions less than 0.14. + +v2.2 adds the `prop-types` package to get rid of some warnings when using React 15.5 + diff --git a/ToggleDisplay.jsx b/ToggleDisplay.jsx new file mode 100644 index 0000000..0754d81 --- /dev/null +++ b/ToggleDisplay.jsx @@ -0,0 +1,58 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +ToggleDisplay.propTypes = { + tag: PropTypes.string, + hide: PropTypes.bool, + show: PropTypes.bool, + if: PropTypes.bool +}; + +ToggleDisplay.defaultProps = { + tag: 'span' +}; + +const propsToRemove = Object.keys(ToggleDisplay.propTypes); + +function isDefined(val) { + return val != null; +} + +function shouldHide(props) { + if(isDefined(props.show)) { + return !props.show; + } + else if(isDefined(props.hide)) { + return props.hide; + } + return false; +} + +function pickProps(props) { + const newProps = Object.assign({}, props); + propsToRemove.forEach(prop => { + if(prop in newProps) { + delete newProps[prop]; + } + }); + return newProps; +} + +export default function ToggleDisplay(props) { + if(props.if === false) { + return null; + } + + let style = {}; + if(shouldHide(props)) { + style.display = 'none'; + } + + const Tag = props.tag; + // prevent our props from being leaked down onto the children + const newProps = pickProps(props); + + return ( + + ); +} diff --git a/__tests__/ToggleDisplay-test.js b/__tests__/ToggleDisplay-test.js index f2fa664..2c3578d 100644 --- a/__tests__/ToggleDisplay-test.js +++ b/__tests__/ToggleDisplay-test.js @@ -2,7 +2,7 @@ import React from 'react'; import reactDom from 'react-dom/server'; import test from 'tape'; import dom from 'cheerio'; -import ToggleDisplay from '../index.jsx'; +import ToggleDisplay from '../ToggleDisplay.jsx'; const render = reactDom.renderToStaticMarkup; @@ -50,9 +50,34 @@ test('ToggleDisplay should conditionally render it\'s children (false)', t => { ; let $ = dom.load(render(el)); - let hasNoScript = $('noscript').length > 0; let hasP = $('p').length > 0; - t.equal(true, hasNoScript, 'should be a