Fixed #139

primefaces · Oct 16, 2017 · 285f4b3 · 285f4b3
1 parent e8eb771
commit 285f4b3
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 8 deletions.
diff --git a/src/components/growl/Growl.js b/src/components/growl/Growl.js
@@ -11,6 +11,8 @@ export class Growl extends Component {
         className: null,
         style: null,
         baseZIndex: 0,
+        sticky: false,
+        life: 3000,
         onClick: null,
         onClose: null
     }
@@ -21,6 +23,8 @@ export class Growl extends Component {
         className: PropTypes.string,
         style: PropTypes.object,
         baseZIndex: PropTypes.number,
+        sticky: PropTypes.bool,
+        life: PropTypes.number,
         onClick: PropTypes.func,
         onClose: PropTypes.func
     };
@@ -31,10 +35,10 @@ export class Growl extends Component {
             messages: this.props.value
         };
     }
-
+    
     componentWillReceiveProps(nextProps) {
         this.setState({
-            messages:nextProps.value
+            messages: nextProps.value
         });
     }
 
@@ -56,6 +60,31 @@ export class Growl extends Component {
         }, 250);
     }
 
+    removeAll() {
+        if(this.state.messages && this.state.messages.length) {
+            DomHandler.fadeOut(this.container, 250);
+
+            setTimeout(() => {                
+                this.value.forEach((msg,index) => {
+                    this.invokeOnClose(null, msg);
+                });
+
+                this.setState({
+                    messages: null
+                });
+            }, 250);
+        }
+    }
+
+    invokeOnClose(event, msg) {
+        if(this.props.onClose) {
+            this.props.onClose({
+                originalEvent: null,
+                message: msg
+            });
+        }
+    }
+
     onMessageClick(event, msg) {
         if(this.props.onClick) {
             this.props.onClick({
@@ -64,21 +93,43 @@ export class Growl extends Component {
             })
         }
     }
+
+    initTimeout() {
+        if(this.timeout) {
+            clearTimeout(this.timeout);
+        }
+
+        this.timeout = setTimeout(() => {
+            this.removeAll();
+        }, this.props.life);
+    }
 
     componentDidMount() {
-        this.container.style.zIndex = String(this.props.baseZIndex + DomHandler.getZindex() + 1);
-        if(this.props.messages) {
-            DomHandler.fadeIn(this.container, 250);
+        this.show();
+
+        if(!this.props.sticky) {
+            this.initTimeout();
         }
     }
 
     componentDidUpdate() {
         if(!this.removed) {
             DomHandler.fadeIn(this.container, 250);
+
+            if(!this.props.sticky) {
+                this.initTimeout();
+            }
         }
         this.removed = false;
     }
-
+
+    show() {
+        this.container.style.zIndex = String(this.props.baseZIndex + DomHandler.getZindex() + 1);
+        if(this.state.messages) {
+            DomHandler.fadeIn(this.container, 250);
+        }
+    }
+
     render() {
         var className = classNames('ui-growl ui-widget', this.props.className);
 

diff --git a/src/showcase/growl/GrowlDemo.js b/src/showcase/growl/GrowlDemo.js
@@ -169,6 +169,17 @@ showMultiple() {
 {`
 <Growl value={this.state.messages} closable={false}></Growl>
 
+`}
+</CodeHighlight>
+
+            <h3>Sticky</h3>
+            <p>Messages are cleared automatically after the timeout defined by life property. Use sticky mode to make them stay until
+            they are manually removed.</p>
+
+<CodeHighlight className="html">
+{`
+<Growl value={this.state.messages} sticky={true}></Growl>
+
 `}
 </CodeHighlight>
 
@@ -214,6 +225,18 @@ showMultiple() {
                             <td>0</td>
                             <td>Base zIndex value to use in layering.</td>
                         </tr>
+                        <tr>
+                            <td>sticky</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>When enabled, makes growl messages until they are manually removed.</td>
+                        </tr>
+                        <tr>
+                            <td>life</td>
+                            <td>number</td>
+                            <td>3000</td>
+                            <td>Time to display a message in milliseconds before removing a non-sticky message.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -231,13 +254,13 @@ showMultiple() {
                     <tbody>
                         <tr>
                             <td>onClick</td>
-                            td>event.originalEvent: Original event <br />
+                            <td>event.originalEvent: Original event <br />
                                event.messages: Clicked message instance </td>
                             <td>Callback to invoke when a message is clicked.</td>
                         </tr>
                         <tr>
                             <td>onRemove</td>
-                            td>event.originalEvent: Original event <br />
+                            <td>event.originalEvent: Original event <br />
                                event.messages: Closed message instance </td>
                             <td>Callback to invoke when a message is removed with remove icon.</td>
                         </tr>