react-crouton - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

__tests__/crouton-test.js

@@ -1,5 +0,1 @@
-/**
- * @jsx React.DOM
- */
-
 // __test__/crouton-test.js
@@ -10,74 +6,74 @@
 var React = require('react/addons')
-    , Crouton  = require('../index.js')
-    , TestUtils = React.addons.TestUtils
+var Crouton = require('../index.js')
+var TestUtils = React.addons.TestUtils
 
-describe('Crouton', function() {
+describe('Crouton', function () {
 
-    it('should render a simple crouton', function() {
+  it('should render a simple crouton', function () {
 
-        // Render a crouton with message and type
-        var data = {
-            id: 123213,
-            message: 'simple',
-            type: 'error',
-            hidden: false
-        }
-        var crouton = TestUtils.renderIntoDocument(
-            <Crouton
-            id={data.id}
-            message={data.message}
-            type={data.type}
-            hidden={data.hidden} />
-        )
-        // Verify crouton hidden false
-        var pdiv = TestUtils.findRenderedDOMComponentWithClass(crouton, 'crouton')
-        expect(pdiv.getDOMNode().hidden, false)
-        // Verify textContent
-        var cdiv = TestUtils.findRenderedDOMComponentWithClass(crouton, data.type)
-        expect(cdiv.getDOMNode().textContent, data.message)
-        // Verify has a child span
-        var spans = cdiv.getDOMNode().getElementsByTagName('span')
-        expect(spans.length, 1)
-        expect(spans[0], data.message)
-        // No buttons
-        expect(cdiv.getDOMNode().getElementsByTagName('button'), [])
-        // Crouton will hidden after 2000 ms default
-        runs(function(){
-            setTimeout(function() {
-                expect(pdiv.getDOMNode().hidden, true)
-            }, 2000)
-        })
+    // Render a crouton with message and type
+    var data = {
+      id: 123213,
+      message: 'simple',
+      type: 'error',
+      hidden: false
+    }
+    var crouton = TestUtils.renderIntoDocument(
+      Crouton({
+        id: data.id,
+        message: data.message,
+        type: data.type,
+        hidden: data.hidden
+      }))
+      // Verify crouton hidden false
+    var pdiv = TestUtils.findRenderedDOMComponentWithClass(crouton, 'crouton')
+    expect(pdiv.getDOMNode().hidden, false)
+      // Verify textContent
+    var cdiv = TestUtils.findRenderedDOMComponentWithClass(crouton, data.type)
+    expect(cdiv.getDOMNode().textContent, data.message)
+      // Verify has a child span
+    var spans = cdiv.getDOMNode().getElementsByTagName('span')
+    expect(spans.length, 1)
+    expect(spans[0], data.message)
+      // No buttons
+    expect(cdiv.getDOMNode().getElementsByTagName('button'), [])
+      // Crouton will hidden after 2000 ms default
+    runs(function () {
+      setTimeout(function () {
+        expect(pdiv.getDOMNode().hidden, true)
+      }, 2000)
     })
+  })
 
-    it('should render an message array', function() {
-         // Render a crouton with message and type
-        var data = {
-            id: 123213,
-            message: ['simple', 'message'],
-            type: 'error',
-            hidden: false
-        }
-        var crouton = TestUtils.renderIntoDocument(
-            <Crouton
-            id={data.id}
-            message={data.message}
-            type={data.type}
-            hidden={data.hidden} />
-        )
-        var pdiv = TestUtils.findRenderedDOMComponentWithClass(crouton, 'crouton')
-        var cdiv = TestUtils.findRenderedDOMComponentWithClass(crouton, data.type)
-        // Verify has a child span
-        var spans = cdiv.getDOMNode().getElementsByTagName('span')
-        expect(spans.length, 2)
-        data.message.forEach(function(msg, i){
-            expect(spans[i], data.message[i])
-        })
-        var done  = false
-        // Crouton will hidden after 2000 ms default
-        runs(function(){
-            setTimeout(function() {
-                expect(pdiv.getDOMNode().hidden, true)
-            }, 2000)
-        })
+  it('should render an message array', function () {
+    // Render a crouton with message and type
+    var data = {
+      id: 123213,
+      message: ['simple', 'message'],
+      type: 'error',
+      hidden: false
+    }
+    var crouton = TestUtils.renderIntoDocument(
+      Crouton({
+        id: data.id,
+        message: data.message,
+        type: data.type,
+        hidden: data.hidden
+      }))
+    var pdiv = TestUtils.findRenderedDOMComponentWithClass(crouton, 'crouton')
+    var cdiv = TestUtils.findRenderedDOMComponentWithClass(crouton, data.type)
+      // Verify has a child span
+    var spans = cdiv.getDOMNode().getElementsByTagName('span')
+    expect(spans.length, 2)
+    data.message.forEach(function (msg, i) {
+      expect(spans[i], data.message[i])
     })
+    var done = false
+      // Crouton will hidden after 2000 ms default
+    runs(function () {
+      setTimeout(function () {
+        expect(pdiv.getDOMNode().hidden, true)
+      }, 2000)
+    })
+  })
 })

example/app.js

@@ -6,2 +6,3 @@ /**
 var React = window.React = require('react')
+  , assign = require('react/lib/Object.assign')
   , Crouton = require('../')
@@ -35,3 +36,3 @@ , CodeMirror = require('codemirror')
   render: function() {
-    return this.transferPropsTo(<div />);
+    return React.createElement('div', assign({}, this.props))
   }
@@ -192,3 +193,3 @@ })
 
-React.renderComponent(<App />, document.getElementById('crouton-example'))
+React.render(<App />, document.getElementById('crouton-example'))
 

index.js

@@ -6,2 +6,3 @@ /**
 var React = require('react')
+var PropTypes = React.PropTypes
 
@@ -13,20 +14,20 @@ module.exports = React.createClass({
   propTypes: {
-    id: React.PropTypes.number.isRequired,
-    onDismiss: React.PropTypes.func,
-    hidden: React.PropTypes.bool,
-    timeout: React.PropTypes.number,
-    autoMiss: React.PropTypes.bool,
-    message: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.array
-      ]).isRequired,
-    type: React.PropTypes.string.isRequired,
-    buttons: function(props, propName, componentName) {
+    id: PropTypes.number.isRequired,
+    onDismiss: PropTypes.func,
+    hidden: PropTypes.bool,
+    timeout: PropTypes.number,
+    autoMiss: PropTypes.bool,
+    message: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.array
+    ]).isRequired,
+    type: PropTypes.string.isRequired,
+    buttons: function (props, propName, componentName) {
       var propValue = props[propName];
       if (propValue != null && typeof propValue !== 'string' && typeof propValue !== 'object' && !(typeof propValue === 'object' && propValue.name != null))
-        return new Error('Expected a string or an URI for ' + propName + ' in ' + componentName );
+        return new Error('Expected a string or an URI for ' + propName + ' in ' + componentName);
     }
   },
 
-  getInitialState: function() {
+  getInitialState: function () {
     return {
@@ -41,3 +42,3 @@ // 2000 ms
 
-  dismiss: function() {
+  dismiss: function () {
     this.setState({
@@ -53,3 +54,3 @@ hidden: true
 
-  clearTimeout: function() {
+  clearTimeout: function () {
     if (this.state.ttd) {
@@ -64,8 +65,8 @@ clearTimeout(this.state.ttd);
 
-  handleClick: function(event) {
+  handleClick: function (event) {
     this.dismiss();
-    var item = this.state.buttons.filter(function(button){
-        return button.name.toLowerCase() === event.target.id
-      })[0];
-    if(item && item.listener){
+    var item = this.state.buttons.filter(function (button) {
+      return button.name.toLowerCase() === event.target.id
+    })[0];
+    if (item && item.listener) {
       item.listener(event);
@@ -75,7 +76,11 @@ }
 
-  componentWillMount: function() {
+  componentWillMount: function () {
     this.changeState(this.props);
   },
 
-  changeState: function(nextProps) {
+  componentWillUnmount: function() {
+    this.clearTimeout();
+  },
+
+  changeState: function (nextProps) {
     var buttons = nextProps.buttons;
@@ -85,3 +90,3 @@ if (typeof buttons === 'string')
     if (buttons) {
-      buttons = buttons.map(function(button) {
+      buttons = buttons.map(function (button) {
         if (typeof button === 'string')
@@ -96,3 +101,3 @@ return {
     var message = nextProps.message
-    if(typeof message === 'string')
+    if (typeof message === 'string')
       message = [message];
@@ -109,3 +114,3 @@ var autoMiss = nextProps.autoMiss || (buttons ? false : true);
     });
-    if(autoMiss && !nextProps.hidden){
+    if (autoMiss && !nextProps.hidden) {
       var ttd = setTimeout(this.dismiss, this.state.timeout);
@@ -118,8 +123,8 @@ this.setState({
 
-  componentWillReceiveProps: function(nextProps) {
+  componentWillReceiveProps: function (nextProps) {
     this.changeState(nextProps);
   },
 
-  shouldComponentUpdate: function(nextProps, nextState) {
-    if( nextProps.id === this.props.id ) {
+  shouldComponentUpdate: function (nextProps, nextState) {
+    if (nextProps.id === this.props.id) {
       return nextState.hidden;
@@ -130,25 +135,30 @@ }
 
-  render: function() {
-    return (
-      <div className='crouton' hidden={this.state.hidden}>
-        <div className={this.state.type}>
-          {this.state.message.map(function(msg, i){
-            return <span key={i}>{msg}</span>
-          })}
-          {
-            this.state.buttons ?
-            <div className='buttons'>
-            {this.state.buttons.map(function(button){
-              return (<button
-                id={button.name.toLowerCase()}
-                key={button.name.toLowerCase()}
-                className={button.name.toLowerCase()}
-                onClick={this.handleClick}>{button.name}</button> )
-            }, this)}</div>: null
-
-          }
-        </div>
-      </div>
+  render: function () {
+    return React.createElement('div', {
+        className: 'crouton',
+        hidden: this.state.hidden
+      },
+      React.createElement('div', {
+          className: this.state.type
+        },
+        this.state.message.map(function (msg, i) {
+          return React.createElement('span', {
+            key: i
+          }, msg);
+        }),
+        this.state.buttons ? React.createElement('div', {
+            className: 'buttons'
+          },
+          this.state.buttons.map(function (button, i) {
+            return React.createElement('button', {
+              id: button.name.toLowerCase(),
+              key: i,
+              className: button.name.toLowerCase(),
+              onClick: this.handleClick
+            }, button.name)
+          }, this)
+        ) : null
+      )
     )
   }
 })

package.json

 {
   "name": "react-crouton",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A message component for reactjs.",
@@ -16,9 +16,2 @@ "main": "index.js",
   },
-  "browserify": {
-    "transform": [
-      [
-        "reactify"
-      ]
-    ]
-  },
   "scripts": {
@@ -28,5 +21,9 @@ "test": "jest"
   "jest": {
-    "scriptPreprocessor": "<rootDir>/preprocessor.js",
-    "unmockedModulePathPatterns": ["<rootDir>/node_modules/react"]
+    "unmockedModulePathPatterns": [
+      "<rootDir>/node_modules/react"
+    ]
   },
+  "peerDependencies": {
+    "react": "0.12.x"
+  },
   "author": "[e-mail]",
@@ -45,6 +42,5 @@ "license": "MIT",
     "jest-cli": "^0.1.18",
-    "react": "^0.11.2",
-    "react-tools": "^0.11.2",
-    "reactify": "^0.14.0"
+    "react": "^0.12.1",
+    "reactify": "^0.17.1"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

12

decreased by-7.69%

Lines of code

438

increased by0.23%

Worsened metrics

Total package byte prevSize

18283

decreased by-1.85%

Dependency count

1

increased byInfinity%

Number of package files

9

decreased by-10%

No dependency changes