@lote-design-system/marketing-blocks/main/components/marketing/navbars/NavBar3.js

marketing blocks

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

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

var _reactTransitionGroup = require("react-transition-group");

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _lodash = require("lodash");

var _polished = require("polished");

var _icons = require("@lote-design-system/icons");

var _core = require("@lote-design-system/core");

var _svg = require("../svg");

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

// => Dependent styled-components
// Our main component depends upon the following styled-components
var NavBar = _styledComponents["default"].nav.withConfig({
  displayName: "NavBar3__NavBar",
  componentId: "sc-1jxtonv-0"
})(["padding:", " 0;", ";", ";", ";"], (0, _polished.rem)(16), function (_ref) {
  var fixed = _ref.fixed;

  if (fixed === 'top') {
    return (0, _styledComponents.css)(["position:fixed;top:0;right:0;left:0;z-index:1030;"]);
  } else if (fixed === 'bottom') {
    return (0, _styledComponents.css)(["position:fixed;right:0;bottom:0;left:0;z-index:1030;"]);
  } else {
    return (0, _styledComponents.css)([""]);
  }
}, function (_ref2) {
  var sticky = _ref2.sticky;

  if (sticky) {
    return (0, _styledComponents.css)(["@supports ((position:-webkit-sticky) or (position:sticky)){position:sticky;top:0;z-index:1020;}"]);
  } else {
    return (0, _styledComponents.css)([""]);
  }
}, function (_ref3) {
  var styled = _ref3.styled;

  if (styled) {
    return (0, _styledComponents.css)(["&{", ";}"], styled);
  }
});

var NavBarContainer = (0, _styledComponents["default"])(_core.Container).withConfig({
  displayName: "NavBar3__NavBarContainer",
  componentId: "sc-1jxtonv-1"
})(["max-width:", ";position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.maxContainerWidth;
});

var NavBarBrand = _styledComponents["default"].a.withConfig({
  displayName: "NavBar3__NavBarBrand",
  componentId: "sc-1jxtonv-2"
})(["display:inline-flex;align-items:center;padding:", " 0;white-space:nowrap;margin-right:", ";> svg,> img{width:56px;height:56px;}", "{display:none;}"], (0, _polished.rem)(4), (0, _polished.rem)(64), function (_ref5) {
  var theme = _ref5.theme;
  return theme.mediaQueries.lg;
});

var NavBarButtonToggler = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "NavBar3__NavBarButtonToggler",
  componentId: "sc-1jxtonv-3"
})(["width:48px;height:48px;padding:", " ", ";display:inline-flex;justify-content:center;align-items:center;", "{display:none;}"], (0, _polished.rem)(4), (0, _polished.rem)(12), function (_ref6) {
  var theme = _ref6.theme;
  return theme.mediaQueries.lg;
});
/**
 * Returns the styles for the container collapsing.
 * @param timeout {number} - The duration of the transition, in milliseconds.
 * @return {string[]} - These styles will only apply when the container is collapsing.
 */

var collapsingStyles = function collapsingStyles(timeout) {
  return (0, _styledComponents.css)(["&{position:relative;height:0;overflow:hidden;transition:height ", "s ease;}"], timeout / 1000);
};

var NavBarMenu = _styledComponents["default"].div.withConfig({
  displayName: "NavBar3__NavBarMenu",
  componentId: "sc-1jxtonv-4"
})(["flex-basis:100%;", " flex-grow:1;align-items:center;justify-content:space-between;", "{display:flex;flex-basis:auto;}", ""], ''
/* Breaks the justify-content: space-between property. */
, function (_ref7) {
  var theme = _ref7.theme;
  return theme.mediaQueries.lg;
}, function (_ref8) {
  var status = _ref8.status,
      timeout = _ref8.timeout;

  if (status === 'entering') {
    return (0, _styledComponents.css)(["", ""], collapsingStyles(timeout));
  } else if (status === 'exiting') {
    return (0, _styledComponents.css)(["", ""], collapsingStyles(timeout));
  } else if (status === 'exited') {
    return (0, _styledComponents.css)(["display:none;"]);
  }
}); // NavBarList Section i.e. unordered list display on the left side
// =================================================================
// Unordered List


var NavBarList = _styledComponents["default"].ul.withConfig({
  displayName: "NavBar3__NavBarList",
  componentId: "sc-1jxtonv-5"
})(["", " display:flex;", " flex-direction:column;margin-bottom:0;padding-left:0;list-style:none;", "{flex-direction:row;}"], ''
/* Main properties */
, ''
/* Default it will always vertical */
, function (_ref9) {
  var theme = _ref9.theme;
  return theme.mediaQueries.lg;
}); // Anchor


var NavBarListLink = _styledComponents["default"].a.withConfig({
  displayName: "NavBar3__NavBarListLink",
  componentId: "sc-1jxtonv-6"
})(["font-size:14px;color:", ";display:block;font-weight:500;padding:8px 16px;transition:color 0.4s linear;:hover{color:", ";}@media (max-width:991px){padding:12px 16px;}"], function (_ref10) {
  var colors = _ref10.theme.colors;
  return colors.text.primary;
}, function (_ref11) {
  var colors = _ref11.theme.colors;
  return colors.primary;
}); // ListItem


var NavBarListItem = _styledComponents["default"].li.withConfig({
  displayName: "NavBar3__NavBarListItem",
  componentId: "sc-1jxtonv-7"
})(["", ";"], function (props) {
  return props.active ? (0, _styledComponents.css)(["> ", "{color:", ";}"], NavBarListLink, function (_ref12) {
    var colors = _ref12.theme.colors;
    return colors.primary;
  }) : (0, _styledComponents.css)([""]);
}); // End =================================
// NavBarCenterBrand


var NavBarCenterBrand = _styledComponents["default"].a.withConfig({
  displayName: "NavBar3__NavBarCenterBrand",
  componentId: "sc-1jxtonv-8"
})(["color:", ";display:none;align-items:center;padding:", " 0;white-space:nowrap;margin-right:", ";> svg,> img{width:56px;height:56px;}", "{display:inline-flex;}"], function (_ref13) {
  var colors = _ref13.theme.colors;
  return colors.primary;
}, (0, _polished.rem)(4), (0, _polished.rem)(64), function (_ref14) {
  var theme = _ref14.theme;
  return theme.mediaQueries.lg;
}); // <= End Dependent styled-components


var linkShape = {
  id: _propTypes["default"].number.isRequired,
  href: _propTypes["default"].string.isRequired,
  text: _propTypes["default"].string.isRequired,
  active: _propTypes["default"].bool
};
var leftLinkSchema = [{
  id: 1,
  href: '/',
  text: 'Home',
  active: true
}, {
  id: 2,
  href: '/',
  text: 'Features'
}, {
  id: 3,
  href: '/',
  text: 'Pricing'
}, {
  id: 4,
  href: '/',
  text: 'Services'
}];
var rightLinkSchema = [{
  id: 1,
  href: '/',
  text: 'Sign in'
}, {
  id: 2,
  href: '/',
  text: 'Sign up'
}, {
  id: 3,
  href: '/',
  text: 'Free Trail'
}];
var TransitionPropTypeKeys = ['in', 'mountOnEnter', 'unmountOnExit', 'appear', 'enter', 'exit', 'timeout', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'];
var propTypes = {
  /** Render new styles on the NavBar Container. */
  styledCSS: _propTypes["default"].string,

  /** Position an element at the top/bottom of the viewport, from edge to edge. Fixed NavBars use
   position: fixed, meaning they’re pulled from the normal flow of the DOM and may require
   custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements. */
  fixed: _propTypes["default"].oneOf(['top', 'bottom']),

  /** Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. */
  sticky: _propTypes["default"].bool,

  /** The logo appear on the NavBar, default it will be ui-kit logo. */
  logo: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),

  /** Links appear on the left side of the NavBar, same links also render on the Drawer. */
  leftLinks: _propTypes["default"].arrayOf(_propTypes["default"].shape(linkShape)).isRequired,

  /** Links appear on the right side of the NavBar, same links also render on the Drawer. */
  rightLinks: _propTypes["default"].arrayOf(_propTypes["default"].shape(linkShape)).isRequired
};

var defaultProps = _objectSpread(_objectSpread({}, _reactTransitionGroup.Transition.defaultProps), {}, {
  logo: /*#__PURE__*/_react["default"].createElement(_svg.LogoDefault, {
    fill: "#01a1ff"
  }),
  leftLinks: leftLinkSchema,
  rightLinks: rightLinkSchema,

  /* Transition on the first mount set appear to false. */
  appear: false,

  /* Enable enter transitions. */
  enter: true,

  /* Enable exit transitions. */
  exit: true,

  /* The duration of the transition, in milliseconds. */
  timeout: 350
});
/**
 * Returns the height of the node.
 * @param node {*} - The height of the node you want to get
 * @return {number} - Returns height of the node
 */


var getHeight = function getHeight(node) {
  return node.scrollHeight;
};
/**
 * Returns the JSX or null for the logo.
 * @param logo {*} - The logo will React.element or a path
 * @return {null|*} - Returns the JSX or null
 */


var renderLogo = function renderLogo(logo) {
  if (_react["default"].isValidElement(logo)) {
    return logo;
  } else if (typeof logo === 'string' && logo.length > 0) {
    return /*#__PURE__*/_react["default"].createElement("img", {
      src: logo,
      alt: "Brand Logo"
    });
  } else {
    return null;
  }
};
/**
 * Render schema for the NavBar
 * @param leftData {Array} - Left side schema for the NavBar
 * @param logo {*} - The logo will React.element or a path
 * @param rightData {Array} - Right side schema for the NavBar
 * @return {null|*}
 */


var renderBody = function renderBody(leftData, logo, rightData) {
  if (Array.isArray(leftData) && leftData.length > 0 && Array.isArray(rightData) && rightData.length > 0) {
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(NavBarList, null, leftData.map(function (_ref15) {
      var id = _ref15.id,
          href = _ref15.href,
          text = _ref15.text,
          active = _ref15.active;
      return /*#__PURE__*/_react["default"].createElement(NavBarListItem, {
        key: id,
        active: active
      }, /*#__PURE__*/_react["default"].createElement(NavBarListLink, {
        href: href
      }, text));
    })), /*#__PURE__*/_react["default"].createElement(NavBarCenterBrand, {
      href: "/"
    }, renderLogo(logo)), /*#__PURE__*/_react["default"].createElement(NavBarList, null, rightData.map(function (_ref16) {
      var id = _ref16.id,
          href = _ref16.href,
          text = _ref16.text,
          active = _ref16.active;
      return /*#__PURE__*/_react["default"].createElement(NavBarListItem, {
        key: id,
        active: active
      }, /*#__PURE__*/_react["default"].createElement(NavBarListLink, {
        href: href
      }, text));
    })));
  } else {
    return null;
  }
};

var NavBar3 = function NavBar3(props) {
  var _useState = (0, _react.useState)(null),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      height = _useState2[0],
      setHeight = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
      isOpen = _useState4[0],
      setIsOpen = _useState4[1];

  var toggle = function toggle() {
    return setIsOpen(!isOpen);
  };

  var styledCSS = props.styledCSS,
      fixed = props.fixed,
      sticky = props.sticky,
      Logo = props.logo,
      leftLinks = props.leftLinks,
      rightLinks = props.rightLinks,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["styledCSS", "fixed", "sticky", "logo", "leftLinks", "rightLinks"]);

  var onEntering = function onEntering(node, isAppearing) {
    setHeight(getHeight(node));
    props.onEntering(node, isAppearing);
  };

  var onEntered = function onEntered(node, isAppearing) {
    setHeight(null);
    props.onEntered(node, isAppearing);
  };

  var onExit = function onExit(node) {
    setHeight(getHeight(node));
    props.onExit(node);
  };

  var onExiting = function onExiting(node) {
    // getting this variable triggers a reflow
    var _unused = node.offsetHeight; // eslint-disable-line no-unused-vars

    setHeight(0);
    props.onExiting(node);
  };

  var onExited = function onExited(node) {
    setHeight(null);
    props.onExited(node);
  }; // Get the timeout value


  var timeout = attributes.timeout; // pick Transition props

  var transitionProps = (0, _lodash.pick)(attributes, TransitionPropTypeKeys); // remove Transition props

  var attr = (0, _lodash.omit)(attributes, TransitionPropTypeKeys);
  var heightVal = height === null ? null : height;
  return /*#__PURE__*/_react["default"].createElement(NavBar, (0, _extends2["default"])({
    styled: styledCSS,
    fixed: fixed,
    sticky: sticky
  }, attr), /*#__PURE__*/_react["default"].createElement(NavBarContainer, {
    fluid: true
  }, /*#__PURE__*/_react["default"].createElement(NavBarBrand, {
    href: "/"
  }, renderLogo(Logo)), /*#__PURE__*/_react["default"].createElement(NavBarButtonToggler, {
    basic: true,
    variation: "primarySubtle",
    active: isOpen,
    onClick: toggle
  }, isOpen ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
    name: "x"
  }) : /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
    name: "menu"
  })), /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.Transition, (0, _extends2["default"])({}, transitionProps, {
    "in": isOpen,
    onEntering: onEntering,
    onEntered: onEntered,
    onExit: onExit,
    onExiting: onExiting,
    onExited: onExited
  }), function (status) {
    return /*#__PURE__*/_react["default"].createElement(NavBarMenu, {
      status: status,
      timeout: timeout,
      style: {
        height: heightVal
      }
    }, renderBody(leftLinks, Logo, rightLinks));
  })));
};

exports.NavBar3 = NavBar3;
NavBar3.propTypes = propTypes;
NavBar3.defaultProps = defaultProps;