@agilemotion/oui-react-js 1.6.4 → 1.6.6

package/dist/components/navbars/HomeNavbar.js

@@ -1,320 +1,243 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _reactstrap = require("reactstrap");
-
 var _WithRouter = _interopRequireDefault(require("../../WithRouter"));
-
 var _reactRedux = require("react-redux");
-
 var _redux = require("redux");
-
 var _DashboardStore = require("../../redux/store/DashboardStore");
-
 var _Utils = _interopRequireDefault(require("../../Utils"));
-
 var _ActionHandlers = _interopRequireDefault(require("../../event/ActionHandlers"));
-
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-
 var _colors = require("material-ui/styles/colors");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var propHandler = function propHandler(state) {
-  var activeRouteMenu = state.dashboard.activeRouteMenu;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const propHandler = state => {
+  let activeRouteMenu = state.dashboard.activeRouteMenu;
   return {
     activeRouteMenu: activeRouteMenu
   };
 };
-
-var HomeNavbar = /*#__PURE__*/function (_React$Component) {
-  _inherits(HomeNavbar, _React$Component);
-
-  var _super = _createSuper(HomeNavbar);
-
-  function HomeNavbar(props) {
-    var _this;
-
-    _classCallCheck(this, HomeNavbar);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "styles", {
-      header: {
-        backgroundColor: _this.props.color
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "updateColor", function () {
-      if (window.innerWidth < 993 && _this.state.collapseOpen) {
-        _this.setState({
-          color: "bg-white"
-        });
-      } else {
-        _this.setState({
-          color: "navbar-transparent"
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "toggleCollapse", function () {
-      if (_this.state.collapseOpen) {
-        _this.setState({
-          color: "navbar-transparent"
-        });
-      } else {
-        _this.setState({
-          color: "bg-white"
-        });
-      }
-
-      _this.setState({
-        collapseOpen: !_this.state.collapseOpen
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "toggleModalSearch", function () {
-      _this.setState({
-        modalSearch: !_this.state.modalSearch
-      });
-    });
-
-    _this.state = {
+class HomeNavbar extends _react.default.Component {
+  styles = {
+    header: {
+      backgroundColor: this.props.color
+    }
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
       collapseOpen: false,
       color: "navbar-transparent",
       modalSearch: false,
-      avatar: _Utils.default.isNull(_this.props.avatar) ? require("./default-avatar.png") : _this.props.avatar
+      avatar: _Utils.default.isNull(this.props.avatar) ? require("./default-avatar.png") : this.props.avatar
     };
-    return _this;
   }
-
-  _createClass(HomeNavbar, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.addEventListener("resize", this.updateColor);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener("resize", this.updateColor);
+  componentDidMount() {
+    window.addEventListener("resize", this.updateColor);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.updateColor);
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.avatar !== this.props.avatar) {
+      this.setState({
+        avatar: this.props.avatar
+      });
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.avatar !== this.props.avatar) {
-        this.setState({
-          avatar: this.props.avatar
-        });
-      }
-    } // function that adds color white/transparent to the navbar on resize (this is for the collapse)
-
-  }, {
-    key: "launchView",
-    value: function launchView(path) {
-      var actionConfig = {};
-      actionConfig.actionType = 'route';
-      actionConfig.path = path;
-      actionConfig.parent = true;
+  }
 
-      _ActionHandlers.default.invokeHandler(actionConfig);
+  // function that adds color white/transparent to the navbar on resize (this is for the collapse)
+  updateColor = () => {
+    if (window.innerWidth < 993 && this.state.collapseOpen) {
+      this.setState({
+        color: "bg-white"
+      });
+    } else {
+      this.setState({
+        color: "navbar-transparent"
+      });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Navbar, {
-        style: this.styles.header,
-        className: (0, _classnames.default)("navbar-absolute"),
-        expand: "lg"
-      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Container, {
-        fluid: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "navbar-wrapper"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)("navbar-toggle d-inline", {
-          toggled: this.props.sidebarOpened
-        })
-      }, /*#__PURE__*/_react.default.createElement("button", {
-        className: "navbar-toggler",
-        type: "button",
-        onClick: this.props.toggleSidebar
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "navbar-toggler-bar bar1",
-        style: {
-          background: this.props.themeTextColor
-        }
-      }), /*#__PURE__*/_react.default.createElement("span", {
-        className: "navbar-toggler-bar bar2",
-        style: {
-          background: this.props.themeTextColor
-        }
-      }), /*#__PURE__*/_react.default.createElement("span", {
-        className: "navbar-toggler-bar bar3",
-        style: {
-          background: this.props.themeTextColor
-        }
-      })), " "), " ", /*#__PURE__*/_react.default.createElement(_reactstrap.NavbarBrand, {
-        style: {
-          paddingLeft: 8,
-          color: this.props.themeTextColor
-        },
-        href: "#pablo",
-        onClick: function onClick(e) {
-          return e.preventDefault();
-        }
-      }, " ", this.props.activeRouteMenu ? this.props.activeRouteMenu.name : "Dashboard" // this.props.activeRouteMenu
-      , " "), " "), " ", /*#__PURE__*/_react.default.createElement("button", {
-        className: "navbar-toggler",
-        type: "button",
-        "data-toggle": "collapse",
-        "data-target": "#navigation",
-        "aria-expanded": "false",
-        "aria-label": "Toggle navigation",
-        onClick: this.toggleCollapse
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "navbar-toggler-bar navbar-kebab",
-        style: {
-          background: this.props.themeTextColor
-        }
-      }), /*#__PURE__*/_react.default.createElement("span", {
-        className: "navbar-toggler-bar navbar-kebab",
-        style: {
-          background: this.props.themeTextColor
-        }
-      }), /*#__PURE__*/_react.default.createElement("span", {
-        className: "navbar-toggler-bar navbar-kebab",
-        style: {
-          background: this.props.themeTextColor
-        }
-      })), " ", /*#__PURE__*/_react.default.createElement("div", {
-        className: "col-*-*",
-        style: {
-          height: '48px'
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          width: '80px'
-        }
-      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
-        navbar: true,
-        isOpen: this.state.collapseOpen
-      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Nav, {
-        className: "ml-auto",
-        navbar: true
-      }, /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledDropdown, {
-        nav: true
-      }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
-        style: {
-          color: this.props.themeTextColor
-        },
-        caret: true,
-        color: "default",
-        "data-toggle": "dropdown",
-        nav: true,
-        onClick: function onClick(e) {
-          return e.preventDefault();
-        }
-      }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-        "aria-controls": "menu-list-grow",
-        style: {
-          borderColor: _colors.grey800,
-          width: '40px',
-          height: '40px',
-          padding: '0'
-        },
-        "aria-haspopup": "true"
-      }, /*#__PURE__*/_react.default.createElement("img", {
-        alt: "...",
-        src: this.state.avatar,
-        width: '36px',
-        height: '36px',
-        style: {
-          borderRadius: '50%'
-        }
-      })), " ", /*#__PURE__*/_react.default.createElement("b", {
-        className: "caret d-none d-lg-block d-xl-block"
-      })), " ", /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
-        className: "dropdown-navbar",
-        right: true,
-        tag: "ul"
-      }, /*#__PURE__*/_react.default.createElement(_reactstrap.NavLink, {
-        tag: "li"
-      }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
-        className: "nav-item",
-        onClick: function onClick() {
-          return _this2.launchView('/system/views/user-profile.json');
-        }
-      }, " ", "Profile", " "), " "), " ", /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
-        divider: true,
-        tag: "li"
-      }), /*#__PURE__*/_react.default.createElement(_reactstrap.NavLink, {
-        tag: "li"
-      }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
-        className: "nav-item",
-        onClick: this.props.logoutCallBack
-      }, " ", "Log out", " "), " "), " "), " "), " ", /*#__PURE__*/_react.default.createElement("li", {
-        className: "separator d-lg-none"
-      })), " "), " "))), " "), " ", /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
-        modalClassName: "modal-search",
-        isOpen: this.state.modalSearch,
-        toggle: this.toggleModalSearch
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "modal-header"
-      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
-        id: "inlineFormInputGroup",
-        placeholder: "SEARCH",
-        type: "text"
-      }), /*#__PURE__*/_react.default.createElement("button", {
-        "aria-label": "Close",
-        className: "close",
-        "data-dismiss": "modal",
-        type: "button",
-        onClick: this.toggleModalSearch
-      }, /*#__PURE__*/_react.default.createElement("i", {
-        className: "tim-icons icon-simple-remove"
-      })), " "), " "), " ");
+  };
+  // this function opens and closes the collapse on small devices
+  toggleCollapse = () => {
+    if (this.state.collapseOpen) {
+      this.setState({
+        color: "navbar-transparent"
+      });
+    } else {
+      this.setState({
+        color: "bg-white"
+      });
     }
-  }]);
-
-  return HomeNavbar;
-}(_react.default.Component);
-
-var _default = (0, _WithRouter.default)((0, _reactRedux.connect)(propHandler, function (dispatch) {
-  return (0, _redux.bindActionCreators)(_DashboardStore.actionCreators, dispatch);
-})(HomeNavbar));
-
-exports.default = _default;
+    this.setState({
+      collapseOpen: !this.state.collapseOpen
+    });
+  };
+  // this function is to open the Search modal
+  toggleModalSearch = () => {
+    this.setState({
+      modalSearch: !this.state.modalSearch
+    });
+  };
+  launchView(path) {
+    let actionConfig = {};
+    actionConfig.actionType = 'route';
+    actionConfig.path = path;
+    actionConfig.parent = true;
+    _ActionHandlers.default.invokeHandler(actionConfig);
+  }
+  render() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Navbar, {
+      style: this.styles.header,
+      className: (0, _classnames.default)("navbar-absolute"),
+      expand: "lg"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Container, {
+      fluid: true
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "navbar-wrapper"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("navbar-toggle d-inline", {
+        toggled: this.props.sidebarOpened
+      })
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      className: "navbar-toggler",
+      type: "button",
+      onClick: this.props.toggleSidebar
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "navbar-toggler-bar bar1",
+      style: {
+        background: this.props.themeTextColor
+      }
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "navbar-toggler-bar bar2",
+      style: {
+        background: this.props.themeTextColor
+      }
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "navbar-toggler-bar bar3",
+      style: {
+        background: this.props.themeTextColor
+      }
+    })), " "), " ", /*#__PURE__*/_react.default.createElement(_reactstrap.NavbarBrand, {
+      style: {
+        paddingLeft: 8,
+        color: this.props.themeTextColor
+      },
+      href: "#pablo",
+      onClick: e => e.preventDefault()
+    }, " ", this.props.activeRouteMenu ? this.props.activeRouteMenu.name : "Dashboard"
+    // this.props.activeRouteMenu
+    , " "), " "), " ", /*#__PURE__*/_react.default.createElement("button", {
+      className: "navbar-toggler",
+      type: "button",
+      "data-toggle": "collapse",
+      "data-target": "#navigation",
+      "aria-expanded": "false",
+      "aria-label": "Toggle navigation",
+      onClick: this.toggleCollapse
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "navbar-toggler-bar navbar-kebab",
+      style: {
+        background: this.props.themeTextColor
+      }
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "navbar-toggler-bar navbar-kebab",
+      style: {
+        background: this.props.themeTextColor
+      }
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "navbar-toggler-bar navbar-kebab",
+      style: {
+        background: this.props.themeTextColor
+      }
+    })), " ", /*#__PURE__*/_react.default.createElement("div", {
+      className: "col-*-*",
+      style: {
+        height: '48px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: '80px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
+      navbar: true,
+      isOpen: this.state.collapseOpen
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Nav, {
+      className: "ml-auto",
+      navbar: true
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledDropdown, {
+      nav: true
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
+      style: {
+        color: this.props.themeTextColor
+      },
+      caret: true,
+      color: "default",
+      "data-toggle": "dropdown",
+      nav: true,
+      onClick: e => e.preventDefault()
+    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      "aria-controls": "menu-list-grow",
+      style: {
+        borderColor: _colors.grey800,
+        width: '40px',
+        height: '40px',
+        padding: '0'
+      },
+      "aria-haspopup": "true"
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      alt: "...",
+      src: this.state.avatar,
+      width: '36px',
+      height: '36px',
+      style: {
+        borderRadius: '50%'
+      }
+    })), " ", /*#__PURE__*/_react.default.createElement("b", {
+      className: "caret d-none d-lg-block d-xl-block"
+    })), " ", /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
+      className: "dropdown-navbar",
+      right: true,
+      tag: "ul"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.NavLink, {
+      tag: "li"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+      className: "nav-item",
+      onClick: () => this.launchView('/system/views/user-profile.json')
+    }, " ", "Profile", " "), " "), " ", /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+      divider: true,
+      tag: "li"
+    }), /*#__PURE__*/_react.default.createElement(_reactstrap.NavLink, {
+      tag: "li"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+      className: "nav-item",
+      onClick: this.props.logoutCallBack
+    }, " ", "Log out", " "), " "), " "), " "), " ", /*#__PURE__*/_react.default.createElement("li", {
+      className: "separator d-lg-none"
+    })), " "), " "))), " "), " ", /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+      modalClassName: "modal-search",
+      isOpen: this.state.modalSearch,
+      toggle: this.toggleModalSearch
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "modal-header"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      id: "inlineFormInputGroup",
+      placeholder: "SEARCH",
+      type: "text"
+    }), /*#__PURE__*/_react.default.createElement("button", {
+      "aria-label": "Close",
+      className: "close",
+      "data-dismiss": "modal",
+      type: "button",
+      onClick: this.toggleModalSearch
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "tim-icons icon-simple-remove"
+    })), " "), " "), " ");
+  }
+}
+var _default = exports.default = (0, _WithRouter.default)((0, _reactRedux.connect)(propHandler, dispatch => (0, _redux.bindActionCreators)(_DashboardStore.actionCreators, dispatch))(HomeNavbar));