@plusscommunities/pluss-core-web 1.2.13-beta.0 → 1.2.14-beta.0

package/dist/index.cjs.js

@@ -5971,18 +5971,31 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
 
   var _super = _createSuper$n(HubSidebar);
 
-  function HubSidebar() {
+  function HubSidebar(props) {
+    var _this;
+
     _classCallCheck__default['default'](this, HubSidebar);
 
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.state = {
+      showSidebar: false
+    };
+    return _this;
   }
 
   _createClass__default['default'](HubSidebar, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this2 = this;
+
       this.props.setNavData({
         condensedSidebar: true
       });
+      setTimeout(function () {
+        _this2.setState({
+          showSidebar: true
+        });
+      }, 50);
     }
   }, {
     key: "componentWillUnmount",
@@ -5990,6 +6003,9 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
       this.props.setNavData({
         condensedSidebar: false
       });
+      this.setState({
+        showSidebar: false
+      });
     }
   }, {
     key: "renderNewButton",
@@ -6022,7 +6038,7 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderSection",
     value: function renderSection(section, index) {
-      var _this = this;
+      var _this3 = this;
 
       return /*#__PURE__*/React__default['default'].createElement("div", {
         className: "hubSidebar_section",
@@ -6033,10 +6049,10 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
       }, section.title), section.items.map(function (item, itemIndex) {
         switch (item.type) {
           case 'newButton':
-            return _this.renderNewButton(item, itemIndex);
+            return _this3.renderNewButton(item, itemIndex);
 
           case 'navItem':
-            return _this.renderNavItem(item, itemIndex);
+            return _this3.renderNavItem(item, itemIndex);
 
           default:
             return null;
@@ -6046,15 +6062,15 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this4 = this;
 
       return /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "hubSidebar ".concat(this.props.className ? this.props.className : ''),
+        className: "hubSidebar".concat(this.state.showSidebar ? ' hubSidebar-show' : '', " ").concat(this.props.className ? this.props.className : ''),
         style: this.props.style
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "hubSidebar_content"
       }, this.props.sections.map(function (section, i) {
-        return _this2.renderSection(section, i);
+        return _this4.renderSection(section, i);
       })));
     }
   }]);

package/dist/index.esm.js

@@ -5944,18 +5944,31 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
 
   var _super = _createSuper$n(HubSidebar);
 
-  function HubSidebar() {
+  function HubSidebar(props) {
+    var _this;
+
     _classCallCheck(this, HubSidebar);
 
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.state = {
+      showSidebar: false
+    };
+    return _this;
   }
 
   _createClass(HubSidebar, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this2 = this;
+
       this.props.setNavData({
         condensedSidebar: true
       });
+      setTimeout(function () {
+        _this2.setState({
+          showSidebar: true
+        });
+      }, 50);
     }
   }, {
     key: "componentWillUnmount",
@@ -5963,6 +5976,9 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
       this.props.setNavData({
         condensedSidebar: false
       });
+      this.setState({
+        showSidebar: false
+      });
     }
   }, {
     key: "renderNewButton",
@@ -5995,7 +6011,7 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderSection",
     value: function renderSection(section, index) {
-      var _this = this;
+      var _this3 = this;
 
       return /*#__PURE__*/React.createElement("div", {
         className: "hubSidebar_section",
@@ -6006,10 +6022,10 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
       }, section.title), section.items.map(function (item, itemIndex) {
         switch (item.type) {
           case 'newButton':
-            return _this.renderNewButton(item, itemIndex);
+            return _this3.renderNewButton(item, itemIndex);
 
           case 'navItem':
-            return _this.renderNavItem(item, itemIndex);
+            return _this3.renderNavItem(item, itemIndex);
 
           default:
             return null;
@@ -6019,15 +6035,15 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this4 = this;
 
       return /*#__PURE__*/React.createElement("div", {
-        className: "hubSidebar ".concat(this.props.className ? this.props.className : ''),
+        className: "hubSidebar".concat(this.state.showSidebar ? ' hubSidebar-show' : '', " ").concat(this.props.className ? this.props.className : ''),
         style: this.props.style
       }, /*#__PURE__*/React.createElement("div", {
         className: "hubSidebar_content"
       }, this.props.sections.map(function (section, i) {
-        return _this2.renderSection(section, i);
+        return _this4.renderSection(section, i);
       })));
     }
   }]);

package/dist/index.umd.js

@@ -5946,18 +5946,31 @@
 
     var _super = _createSuper$n(HubSidebar);
 
-    function HubSidebar() {
+    function HubSidebar(props) {
+      var _this;
+
       _classCallCheck__default['default'](this, HubSidebar);
 
-      return _super.apply(this, arguments);
+      _this = _super.call(this, props);
+      _this.state = {
+        showSidebar: false
+      };
+      return _this;
     }
 
     _createClass__default['default'](HubSidebar, [{
       key: "componentDidMount",
       value: function componentDidMount() {
+        var _this2 = this;
+
         this.props.setNavData({
           condensedSidebar: true
         });
+        setTimeout(function () {
+          _this2.setState({
+            showSidebar: true
+          });
+        }, 50);
       }
     }, {
       key: "componentWillUnmount",
@@ -5965,6 +5978,9 @@
         this.props.setNavData({
           condensedSidebar: false
         });
+        this.setState({
+          showSidebar: false
+        });
       }
     }, {
       key: "renderNewButton",
@@ -5997,7 +6013,7 @@
     }, {
       key: "renderSection",
       value: function renderSection(section, index) {
-        var _this = this;
+        var _this3 = this;
 
         return /*#__PURE__*/React__default['default'].createElement("div", {
           className: "hubSidebar_section",
@@ -6008,10 +6024,10 @@
         }, section.title), section.items.map(function (item, itemIndex) {
           switch (item.type) {
             case 'newButton':
-              return _this.renderNewButton(item, itemIndex);
+              return _this3.renderNewButton(item, itemIndex);
 
             case 'navItem':
-              return _this.renderNavItem(item, itemIndex);
+              return _this3.renderNavItem(item, itemIndex);
 
             default:
               return null;
@@ -6021,15 +6037,15 @@
     }, {
       key: "render",
       value: function render() {
-        var _this2 = this;
+        var _this4 = this;
 
         return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "hubSidebar ".concat(this.props.className ? this.props.className : ''),
+          className: "hubSidebar".concat(this.state.showSidebar ? ' hubSidebar-show' : '', " ").concat(this.props.className ? this.props.className : ''),
           style: this.props.style
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "hubSidebar_content"
         }, this.props.sections.map(function (section, i) {
-          return _this2.renderSection(section, i);
+          return _this4.renderSection(section, i);
         })));
       }
     }]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-web",
-  "version": "1.2.13-beta.0",
+  "version": "1.2.14-beta.0",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/index.cjs.js",
   "scripts": {

package/src/components/HubSidebar.js

@@ -7,16 +7,32 @@ import { Button } from './Button';
 import { Text } from './Text';
 
 class HubSidebar extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showSidebar: false,
+    };
+  }
+
   componentDidMount() {
     this.props.setNavData({
       condensedSidebar: true,
     });
+    setTimeout(() => {
+      this.setState({
+        showSidebar: true,
+      });
+    }, 50);
   }
 
   componentWillUnmount() {
     this.props.setNavData({
       condensedSidebar: false,
     });
+    this.setState({
+      showSidebar: false,
+    });
   }
 
   renderNewButton(item, index) {
@@ -66,7 +82,10 @@ class HubSidebar extends PureComponent {
 
   render() {
     return (
-      <div className={`hubSidebar ${this.props.className ? this.props.className : ''}`} style={this.props.style}>
+      <div
+        className={`hubSidebar${this.state.showSidebar ? ' hubSidebar-show' : ''} ${this.props.className ? this.props.className : ''}`}
+        style={this.props.style}
+      >
         {/* Top Add Button */}
         <div className="hubSidebar_content">
           {/* Title */}