vcc-ui/lib/components/nav/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Nav = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactFela = require("react-fela");

var _block = require("../block");

var _getThemeStyle = require("../../get-theme-style");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var hideOnScrollOffsetTop = 80;

var navStyle = function navStyle(_ref) {
  var theme = _ref.theme,
      sticky = _ref.sticky,
      hideOnScroll = _ref.hideOnScroll,
      isVisible = _ref.isVisible;
  return {
    position: 'relative',
    zIndex: 10,
    width: '100%',
    background: theme.color.background.primary,
    boxSizing: 'border-box',
    ':before': {
      content: "''",
      display: 'block',
      background: theme.color.ornament.divider,
      height: 1,
      outline: 'none',
      position: 'absolute',
      left: 0,
      right: 0,
      zIndex: -1,
      bottom: 0
    },
    extend: [{
      condition: sticky,
      style: {
        position: 'fixed',
        top: 0,
        left: 0
      }
    }, {
      condition: hideOnScroll,
      style: {
        transition: 'transform 200ms ease-out'
      }
    }, {
      condition: !isVisible,
      style: {
        transform: 'translateY(-100%)'
      }
    }]
  };
}; // using an external variable for performance reasons


var previousScrollY = 0;

var Nav = _react.default.forwardRef(function (_ref2, ref) {
  var hideOnScroll = _ref2.hideOnScroll,
      sticky = _ref2.sticky,
      children = _ref2.children;

  var _useState = (0, _react.useState)(true),
      _useState2 = _slicedToArray(_useState, 2),
      isVisible = _useState2[0],
      setVisible = _useState2[1];

  var _useFela = (0, _reactFela.useFela)(),
      theme = _useFela.theme;

  (0, _react.useEffect)(function () {
    var toggleVisibility = function toggleVisibility() {
      if (window.scrollY > previousScrollY) {
        if (isVisible && window.scrollY > hideOnScrollOffsetTop) {
          setVisible(false);
        }
      } else {
        if (!isVisible) {
          setVisible(true);
        }
      }

      previousScrollY = window.scrollY;
    };

    if (hideOnScroll) {
      window.addEventListener('scroll', toggleVisibility);
    }

    return function () {
      window.removeEventListener('scroll', toggleVisibility);
    };
  }, [hideOnScroll, isVisible]);
  var styleProps = {
    sticky: sticky,
    hideOnScroll: hideOnScroll,
    isVisible: isVisible,
    theme: theme
  };
  return _react.default.createElement(_block.Block, {
    as: "nav",
    ref: ref,
    extend: [navStyle(styleProps), (0, _getThemeStyle.getThemeStyle)('nav', theme, styleProps)]
  }, children);
});

exports.Nav = Nav;
Nav.displayName = 'Nav';
Nav.propTypes = {
  /** Automatically hide the sticky navigation if the user starts scrolling */
  hideOnScroll: _propTypes.default.bool,

  /** Make the navigation stick to the top of the viewport */
  sticky: _propTypes.default.bool,

  /** A JSX node */
  children: _propTypes.default.node
};
Nav.defaultProps = {
  hideOnScroll: false,
  sticky: false
};