@cimpress/react-components - npm Package Compare versions

Comparing version 1.3.2 to 1.4.0

CHANGELOG.md

@@ -5,2 +5,10 @@ # MCP MEX React Components
 
+### 1.4.x
+###### 2017-12-05
+**Component enhancements**
+* [Header]
+  - Updated header component to collapse into a dropdown when there is not enough space for nav links and title
+  - The nav can be in 3 different states fully expanded, collapsed, or collapsed with a mobile style
+  - Responsive behavior is off by default and can be turned on via prop, `responsive` 
+  
 ### 1.3.x
@@ -7,0 +15,0 @@ ###### 2017-12-01

lib/Header.js

@@ -27,2 +27,6 @@ 'use strict';
 
+var _reactSmoothCollapse = require('react-smooth-collapse');
+
+var _reactSmoothCollapse2 = _interopRequireDefault(_reactSmoothCollapse);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,4 +51,6 @@
 
-    _this.state = { sideNavOpen: false };
+    _this.state = { sideNavOpen: false, requiredSpace: -1 };
     _this.toggleSideNav = _this.toggleSideNav.bind(_this);
+    _this.toggleMobileNav = _this.toggleMobileNav.bind(_this);
+    _this.calculateResponsive = _this.calculateResponsive.bind(_this);
     return _this;
@@ -59,4 +65,40 @@ }
   }, {
+    key: 'toggleMobileNav',
+    value: function toggleMobileNav() {
+      this.setState({ mobileNavOpen: !this.state.mobileNavOpen });
+    }
+  }, {
+    key: 'calculateResponsive',
+    value: function calculateResponsive() {
+      if (this.state.mobileNavOpen) this.setState({ mobileNavOpen: false });
+      var styles = window.getComputedStyle(this.fluidNav);
+      var padding = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
+      var forceMobile = this.fluidNav.clientWidth - padding <= this.state.requiredSpace;
+      if (this.state.forceMobile !== forceMobile) this.setState({ forceMobile: forceMobile });
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      if (this.props.responsive) {
+        var _refs = this.refs,
+            fluidNavTabs = _refs.fluidNavTabs,
+            fluidNavTitle = _refs.fluidNavTitle;
+
+        if (fluidNavTitle && fluidNavTitle.offsetWidth && fluidNavTabs && fluidNavTabs.offsetWidth) {
+          var requiredSpace = fluidNavTabs.offsetWidth + fluidNavTitle.offsetWidth + 10;
+          if (this.state.requiredSpace < requiredSpace) this.setState({ requiredSpace: requiredSpace }, this.calculateResponsive);
+        }
+        window.addEventListener('resize', this.calculateResponsive);
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.calculateResponsive);
+    }
+  }, {
     key: 'render',
     value: function render() {
+      var _this2 = this;
+
       var _props = this.props,
@@ -68,3 +110,2 @@ appTitle = _props.appTitle,
 
-
       var sideNav = _react2.default.createElement(
@@ -98,5 +139,67 @@ 'div',
       );
-
+      var mobileNavOpen = this.state.forceMobile && this.state.mobileNavOpen;
+      var navLinks = _react2.default.createElement(
+        'ul',
+        {
+          onMouseDown: function onMouseDown(e) {
+            return _this2.state.mobileNavOpen ? e.preventDefault() : undefined;
+          },
+          className: 'nav nav-tabs ' + (this.state.forceMobile ? 'nav-stacked' : ''),
+          style: this.state.forceMobile ? { paddingBottom: 10 } : {},
+          ref: 'fluidNavTabs' },
+        appLinks.map(function (link, i) {
+          return _react2.default.createElement(
+            'li',
+            { key: i },
+            link
+          );
+        })
+      );
       var showNav = this.props.showLeftNav;
-
+      var fluidNav = _react2.default.createElement(
+        'div',
+        { className: 'navbar-fluid ' + (this.state.requiredSpace || this.props.appLinks.length === 0 ? '' : 'sizer') },
+        _react2.default.createElement(
+          'nav',
+          { className: 'navbar navbar-block subtitle', ref: function ref(n) {
+              return _this2.fluidNav = n;
+            } },
+          _react2.default.createElement(
+            'div',
+            { className: 'navbar-header', ref: 'fluidNavTitle' },
+            _react2.default.createElement(
+              'span',
+              {
+                className: 'navbar-toggle clickable',
+                onClick: this.toggleMobileNav,
+                style: this.state.forceMobile ? { outline: 'none', paddingBottom: 10 } : {},
+                tabIndex: '2',
+                onBlur: function onBlur() {
+                  return _this2.setState({ mobileNavOpen: false });
+                } },
+              'Menu ',
+              _react2.default.createElement('span', { className: 'caret' })
+            ),
+            _react2.default.createElement(
+              'h2',
+              null,
+              appTitle
+            ),
+            _react2.default.createElement(
+              _reactSmoothCollapse2.default,
+              {
+                expanded: !!mobileNavOpen,
+                onChangeEnd: function onChangeEnd() {
+                  _this2.refs.fluidNavTabs.focus();
+                } },
+              navLinks
+            )
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'fluid-collapse navbar-fluid-collapse navbar-right' },
+            navLinks
+          )
+        )
+      );
       return _react2.default.createElement(
@@ -126,22 +229,3 @@ 'div',
         ),
-        _react2.default.createElement(
-          'div',
-          { className: 'navbar subtitle' },
-          _react2.default.createElement(
-            'h2',
-            null,
-            appTitle
-          ),
-          _react2.default.createElement(
-            'ul',
-            { className: 'nav nav-tabs' },
-            appLinks.map(function (link, i) {
-              return _react2.default.createElement(
-                'li',
-                { key: i },
-                link
-              );
-            })
-          )
-        )
+        this.state.forceMobile ? _react2.default.createElement('div', { className: 'forceMobile', children: fluidNav }) : fluidNav
       );
@@ -162,8 +246,8 @@ }
 
-    var _this2 = _possibleConstructorReturn(this, (StandardSideNavLinks.__proto__ || Object.getPrototypeOf(StandardSideNavLinks)).call(this, props));
+    var _this3 = _possibleConstructorReturn(this, (StandardSideNavLinks.__proto__ || Object.getPrototypeOf(StandardSideNavLinks)).call(this, props));
 
-    _this2.state = {
+    _this3.state = {
       itemList: null
     };
-    return _this2;
+    return _this3;
   }
@@ -174,3 +258,3 @@
     value: function componentWillMount() {
-      var _this3 = this;
+      var _this4 = this;
 
@@ -197,6 +281,6 @@ if (this.state.itemList) {
         }).then(function (responseObj) {
-          _this3.setState({ itemList: responseObj.items });
+          _this4.setState({ itemList: responseObj.items });
         }).catch(function (ex) {
           console.error('Error trying to read menu items from static site.', ex);
-          _this3.setState({ itemList: _headerFallbackNavLinks2.default });
+          _this4.setState({ itemList: _headerFallbackNavLinks2.default });
           throw ex;
@@ -213,3 +297,3 @@ });
     value: function render() {
-      var _this4 = this;
+      var _this5 = this;
 
@@ -229,3 +313,3 @@ var itemList = this.state.itemList;
 
-        var isActive = _this4.props.activeNavLinkId === item.id ? 'active' : '';
+        var isActive = _this5.props.activeNavLinkId === item.id ? 'active' : '';
 
@@ -284,3 +368,4 @@ return _react2.default.createElement(
   language: _propTypes2.default.string,
-  environment: _propTypes2.default.string
+  environment: _propTypes2.default.string,
+  responsive: _propTypes2.default.bool
 };
@@ -291,3 +376,4 @@
   fallbackNavLinks: _headerFallbackNavLinks2.default,
-  showLeftNav: true
+  showLeftNav: true,
+  responsive: false
 };

package.json

 {
   "name": "@cimpress/react-components",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "React components to support the MCP styleguide",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

333356

increased by1.26%

Lines of code

4696

increased by1.84%

No dependency changes