react-toaster - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

demo/demo.js

@@ -16,3 +16,3 @@ /**
     onShow: function(){
-        this.refs.toast.show('Hei, hei');
+        this.refs.toast.show('<span>Hei, hei</span>');
     },
@@ -25,3 +25,3 @@ onHide: function(){
             <div className="demo">
-                <ReactToaster ref="toast" />
+                <ReactToaster ref="toast" modal={true} css={{background: 'red'}} />
                 <input type="button" value="Show" onClick={this.onShow}/>
@@ -28,0 +28,0 @@ <input type="button" value="Hide" onClick={this.onHide}/>

dist/toast.js

@@ -72,3 +72,3 @@ /******/ (function(modules) { // webpackBootstrap
 	    onShow: function onShow() {
-	        this.refs.toast.show('Hei, hei');
+	        this.refs.toast.show('<span>Hei, hei</span>');
 	    },
@@ -82,3 +82,3 @@ onHide: function onHide() {
 	            { className: 'demo' },
-	            React.createElement(ReactToaster, { ref: 'toast' }),
+	            React.createElement(ReactToaster, { ref: 'toast', modal: true, css: { background: 'red' } }),
 	            React.createElement('input', { type: 'button', value: 'Show', onClick: this.onShow }),
@@ -112,3 +112,4 @@ React.createElement('input', { type: 'button', value: 'Hide', onClick: this.onHide })
 
-	module.exports = React.createClass({
+	var ReactToaster = React.createClass({
+	    displayName: 'ReactToaster',
 	    styles: {
@@ -118,36 +119,31 @@ position: 'absolute',
 	        padding: '10px',
-	        margin: '0 auto'
+	        margin: '0 auto',
+	        width: '55%',
+	        left: '20%',
+	        top: '40%',
+	        color: '#fff',
+	        background: 'rgba(0, 0, 0, 0.5)',
+	        opacity: .8,
+	        zIndex: 9999,
+	        fontSize: '20px'
 	    },
-	    displayName: 'ReactToaster',
 	    getInitialState: function getInitialState() {
+	        // init custom style
+	        var css = this.props.css;
+	        if (css) {
+	            for (var p in css) {
+	                this.styles[p] = css[p];
+	            }
+	        }
 	        return {
 	            display: 'none',
 	            content: '',
-	            idModal: false
-	        };
-	    },
-	    getDefaultProps: function getDefaultProps() {
-	        return {
 	            auto: true,
-	            duration: 2000,
-	            width: '55%',
-	            left: '20%',
-	            top: '40%',
-	            color: '#fff',
-	            background: 'rgba(0, 0, 0, 0.5)',
-	            opacity: .8,
-	            zIndex: 9999,
-	            fontSize: '20px'
+	            duration: 2000
 	        };
 	    },
-	    componentDidMount: function componentDidMount() {
-	        // custom styles
-	        for (var p in this.props) {
-	            this.styles[p] = this.props[p];
-	        }
-	    },
 	    componentDidUpdate: function componentDidUpdate() {
-	        if (this.state.display === '' && this.props.auto) {
+	        if (this.state.display === '' && this.state.auto) {
 	            // auto hide
-	            setTimeout(this.hide, this.props.duration);
+	            setTimeout(this.hide, this.state.duration);
 	        }
@@ -159,2 +155,3 @@ },
 	            this.setState({ display: '', content: content });
+	            this.refs.cover.show();
 	        }
@@ -165,2 +162,3 @@ },
 	            this.setState({ display: 'none' });
+	            this.refs.cover.hide();
 	        }
@@ -171,14 +169,48 @@ },
 	        style.display = this.state.display;
-	        return React.createElement(
-	            'div',
-	            { style: style },
-	            React.createElement(
-	                'span',
+	        if (this.props.modal) {
+	            return React.createElement(
+	                'div',
 	                null,
-	                this.state.content
-	            )
-	        );
+	                React.createElement(ReactToasterCover, { ref: 'cover', zIndex: style.zIndex - 1 }),
+	                React.createElement('div', { style: style, dangerouslySetInnerHTML: { __html: this.state.content } })
+	            );
+	        } else {
+	            return React.createElement('div', { style: style, dangerouslySetInnerHTML: { __html: this.state.content } });
+	        }
 	    }
 	});
 
+	var ReactToasterCover = React.createClass({
+	    displayName: 'ReactToasterCover',
+
+	    getInitialState: function getInitialState() {
+	        return {
+	            scrolling: 'no',
+	            position: 'fixed',
+	            top: '0px',
+	            left: '0px',
+	            width: '100%',
+	            height: '100%',
+	            zIndex: this.props.zIndex !== undefined ? this.props.zIndex : 9998,
+	            backgroundColor: 'transparent',
+	            display: 'none'
+	        };
+	    },
+	    show: function show(content) {
+	        if (this.state.display === 'none') {
+	            this.setState({ display: '' });
+	        }
+	    },
+	    hide: function hide() {
+	        if (this.state.display === '') {
+	            this.setState({ display: 'none' });
+	        }
+	    },
+	    render: function render() {
+	        return React.createElement('div', { style: this.state });
+	    }
+	});
+
+	module.exports = ReactToaster;
+
 /***/ },
@@ -185,0 +217,0 @@ /* 4 */

package.json

 {
   "name": "react-toaster",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A toast of React",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -1,2 +0,2 @@
-React-toast
+React-toaster
 =========
@@ -18,3 +18,3 @@
     onShow: function(){
-        this.refs.toast.show('Hei, hei');
+        this.refs.toast.show('<span>Hei, hei</span>');
     },
@@ -35,8 +35,7 @@ onHide: function(){
 ```
-* Properties:
+* Configuration:
 
 ```javascript
+// css
 {
-    auto: true, 			// auto hide or not
-    duration: 2000,	
     width: '55%',	
@@ -52,5 +51,20 @@ left: '20%',
 
+// props
+{
+	auto: true,		// auto hide or not,
+	duration: 2000, 	// hide timeout
+	modal: false,		// modal or not
+}
+
 // usage
-<ReactToaster ref="toast" duration="1000" background="yellow" .../>
+<ReactToaster ref="toast" duration="1000" modal={false} auto={true} css={{background: 'red'}} />
 ```
+* Methods
+	
+```javascript
+show: 
+	Show the toast with content;
+hide: 
+	Hide the toast manually.
+```
 * Maybe it's more suitable for **Mobile Web App**.
@@ -64,1 +78,4 @@
    * add **fontSize** property and update doc.  
+* 0.0.3
+	* support **modal**;
+	* extract style custom with **css** props.

src/main.js

@@ -9,3 +9,4 @@ /**
 
-module.exports = React.createClass({
+var ReactToaster = React.createClass({
+    displayName: 'ReactToaster',
     styles:{
@@ -15,36 +16,31 @@ position: 'absolute',
         padding: '10px',
-        margin: '0 auto'
+        margin: '0 auto',
+        width: '55%',
+        left: '20%',
+        top: '40%',
+        color: '#fff',
+        background: 'rgba(0, 0, 0, 0.5)',
+        opacity: .8,
+        zIndex: 9999,
+        fontSize: '20px'
     },
-    displayName: 'ReactToaster',
     getInitialState: function(){
+        // init custom style
+        var css = this.props.css;
+        if (css){
+            for (var p in css){
+                this.styles[p] = css[p]; 
+            }
+        }
         return {
             display: 'none',
             content: '',
-            idModal: false,
-        };
-    },
-    getDefaultProps: function(){
-        return {
             auto: true,
-            duration: 2000,
-            width: '55%',
-            left: '20%',
-            top: '40%',
-            color: '#fff',
-            background: 'rgba(0, 0, 0, 0.5)',
-            opacity: .8,
-            zIndex: 9999,
-            fontSize: '20px'
+            duration: 2000
         };
     },
-    componentDidMount: function(){
-        // custom styles
-        for (var p in this.props){
-            this.styles[p] = this.props[p];
-        }
-    },
     componentDidUpdate: function(){
-        if(this.state.display === '' && this.props.auto){
+        if(this.state.display === '' && this.state.auto){
             // auto hide
-            setTimeout(this.hide, this.props.duration);
+            setTimeout(this.hide, this.state.duration);
         }
@@ -56,8 +52,10 @@ },
             this.setState({display: '', content: content});
+            this.refs.cover.show();
         }
-    },
+    }, 
     hide: function(){
         if(this.state.display === ''){
             this.setState({display: 'none'});
-        }
+            this.refs.cover.hide();
+        } 
     },
@@ -67,8 +65,48 @@ render: function(){
         style.display = this.state.display;
+        if (this.props.modal){
+            return (
+                <div>
+                    <ReactToasterCover ref="cover" zIndex={style.zIndex - 1} />
+                    <div style={style} dangerouslySetInnerHTML={{__html: this.state.content}}></div>
+                </div>
+            );
+        } else {
+            return (
+                <div style={style} dangerouslySetInnerHTML={{__html: this.state.content}}></div>
+            );
+        }
+    }
+});
+
+var ReactToasterCover = React.createClass({
+    getInitialState: function(){
+        return {
+            scrolling: 'no',
+            position: 'fixed',
+            top: '0px',
+            left: '0px',
+            width: '100%',
+            height: '100%',
+            zIndex: this.props.zIndex !== undefined ? this.props.zIndex : 9998,
+            backgroundColor: 'transparent',
+            display: 'none'
+        };
+    },
+    show: function(content){
+        if (this.state.display === 'none') {
+            this.setState({display: ''});
+        }
+    }, 
+    hide: function(){
+        if(this.state.display === ''){
+            this.setState({display: 'none'});
+        } 
+    },
+    render: function(){
         return (
-            <div style={style}>
-                <span>{this.state.content}</span>
-            </div>
+            <div style={this.state}></div>
         );
     }
-});
+});
+
+module.exports = ReactToaster;

No alert changes

Improved metrics

Total package byte prevSize

23483

12.7%

Lines of code

620

11.71%

Number of lines in readme file

78

27.87%

No dependency changes