Fixed #175

primefaces · Nov 6, 2017 · dddf26c · dddf26c
1 parent 78a3dd3
commit dddf26c
Showing 1 changed file with 44 additions and 20 deletions.
diff --git a/src/components/panel/Panel.js b/src/components/panel/Panel.js
@@ -36,9 +36,14 @@ export class Panel extends Component {
     }
 
     componentDidUpdate() {
-        setTimeout(() => {
-            DomHandler.removeClass(this.contentWrapper, 'ui-panel-content-wrapper-expanding');
-        }, 500);
+        if(this.props.toggleable && !this.state.collapsed && this.expanding) {
+            DomHandler.addClass(this.contentWrapper, 'ui-panel-content-wrapper-expanding');
+
+            setTimeout(() => {
+                DomHandler.removeClass(this.contentWrapper, 'ui-panel-content-wrapper-expanding');
+                this.expanding = false;
+            }, 500);
+        }
     }
 
     componentWillReceiveProps(nextProps) {
@@ -51,19 +56,30 @@ export class Panel extends Component {
 
     toggle(e) {
         if(this.props.toggleable) {
-            let collapsed = this.state.collapsed;
-
-            if(collapsed && this.onExpand)
-                this.onExpand(e);
-            else if(!collapsed && this.onCollapse)
-                this.onCollapse(e);
-
-            this.setState({collapsed: !collapsed});
+            if(this.state.collapsed)
+                this.expand(e);
+            else
+                this.collapse(e);
         }
 
         e.preventDefault();
     }
 
+    expand(event) {
+        this.setState({collapsed: false});
+        this.expanding = true;
+        if(this.props.onCollapse) {
+            this.props.onCollapse(event);
+        }
+    }
+
+    collapse(event) {
+        this.setState({collapsed: true});
+        if(this.props.onCollapse) {
+            this.props.onCollapse(event);
+        }
+    }
+
     renderToggleIcon() {
         if(this.props.toggleable) {
             return (
@@ -78,18 +94,26 @@ export class Panel extends Component {
     }
 
     renderHeader() {
-        let toggleIcon = this.renderToggleIcon();
-
-        return (
-            <div className="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
-                <span className="ui-panel-title">{this.props.header}</span>
-                {toggleIcon}
-            </div>
-        );
+        if(this.props.header || this.props.toggleable) {
+            let toggleIcon = this.renderToggleIcon();
+
+            return (
+                <div className="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
+                    <span className="ui-panel-title">{this.props.header}</span>
+                    {toggleIcon}
+                </div>
+            );
+        }
+        else {
+            return null;
+        }
     }
 
     renderContent() {
-        let className = classNames('ui-panel-content-wrapper', {'ui-panel-content-wrapper-collapsed': this.state.collapsed, 'ui-panel-content-wrapper-expanded ui-panel-content-wrapper-expanding': !this.state.collapsed});
+        let className = classNames('ui-panel-content-wrapper', {
+                                    'ui-panel-content-wrapper-collapsed': (this.state.collapsed && this.props.toggleable), 
+                                    'ui-panel-content-wrapper-expanded': (!this.state.collapsed && this.props.toggleable)
+                                });
 
         return (
             <div ref={(el) => this.contentWrapper = el} className={className}>