react-crouton - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

index.js

@@ -12,2 +12,3 @@ /**
   propTypes: {
+    id: React.PropTypes.number.isRequired,
     onDismiss: React.PropTypes.func,
@@ -17,3 +18,6 @@ hidden: React.PropTypes.bool,
     autoMiss: React.PropTypes.bool,
-    message: React.PropTypes.string.isRequired,
+    message: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.array
+      ]).isRequired,
     type: React.PropTypes.string.isRequired,
@@ -53,20 +57,8 @@ buttons: function(props, propName, componentName) {
 
-  componentWillMount: function() {
-    var self = this;
-    if(this.props.autoMiss){
-      var ttd = setTimeout(function() {
-        self.dismiss()
-      }, this.props.timeout);
-      self.setState({
-        ttd: ttd
-      });
-    }
-  },
-
   handleClick: function(event) {
     this.dismiss().clearTimeout();
     var item = this.state.buttons.filter(function(button){
-        return button.name === event.target.innerHTML
+        return button.name.toLowerCase() === event.target.id
       })[0];
-    if(item.listener){
+    if(item && item.listener){
       item.listener(event);
@@ -82,2 +74,3 @@ }
     var buttons = nextProps.buttons;
+    var self = this;
     if (typeof buttons === 'string')
@@ -95,11 +88,24 @@ buttons = [buttons];
 
+    var message = nextProps.message
+    if(typeof message === 'string')
+      message = [message];
+    var autoMiss = nextProps.autoMiss || (buttons ? false : true);
     this.setState({
       onDismiss: nextProps.onDismiss || this.state.onDismiss,
       hidden: nextProps.hidden,
-      buttons: buttons || this.state.buttons,
+      buttons: buttons,
       timeout: nextProps.timeout || this.state.timeout,
-      autoMiss: nextProps.autoMiss || (buttons ? this.state.autoMiss : true),
-      message: nextProps.message,
+      autoMiss: autoMiss,
+      message: message,
       type: nextProps.type
     });
+    if(autoMiss && !nextProps.hidden){
+      var ttd = setTimeout(function() {
+        self.dismiss()
+      }, this.state.timeout);
+
+      this.setState({
+        ttd: ttd
+      });
+    }
   },
@@ -111,2 +117,9 @@
 
+  shouldComponentUpdate: function(nextProps, nextState) {
+    if( nextProps.id === this.props.id ) {
+      return nextState.hidden;
+    }
+    return true
+  },
+
   render: function() {
@@ -117,8 +130,16 @@ var self = this;
         <div className={this.state.type}>
-          {this.state.message}
+          {this.state.message.map(function(msg, i){
+            return <span key={i}>{msg}</span>
+          })}
           {
             this.state.buttons ?
-            this.state.buttons.map(function(button){
-              return (<button key={button.name.toLowerCase()} className={button.name.toLowerCase()} onClick={self.handleClick} >{button.name}</button> )
-            }): null
+            <div className='buttons'>
+            {this.state.buttons.map(function(button){
+              return (<button
+                id={button.name.toLowerCase()}
+                key={button.name.toLowerCase()}
+                className={button.name.toLowerCase()}
+                onClick={self.handleClick}>{button.name}</button> )
+            })}</div>: null
+
           }
@@ -125,0 +146,0 @@ </div>

package.json

 {
   "name": "react-crouton",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A message component for reactjs.",
@@ -5,0 +5,0 @@ "main": "index.js",

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

Total package byte prevSize

4745

increased by13.49%

Lines of code

127

increased by17.59%

No dependency changes