@brightleaf/elements/lib/navbar/navbar.js

React UI elements styled with Bulma CSS

"use strict";

function _typeof(obj) { 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.NavBar = exports.NavBarMenu = exports.NavBarEnd = exports.NavBarStart = exports.NavBarDropDown = exports.NavBarDivider = exports.NavBarBrand = exports.NavBarBurger = exports.NavBarItem = void 0;

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

var _classnames = _interopRequireDefault(require("classnames"));

var _modifiers = require("../modifiers");

var _base = require("../base");

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

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) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } 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; }

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) { _defineProperty(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; }

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; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var NavBarItem = function NavBarItem(_ref) {
  var children = _ref.children,
      className = _ref.className,
      isActive = _ref.isActive,
      props = _objectWithoutProperties(_ref, ["children", "className", "isActive"]);

  var kid = _react.default.cloneElement(children, _objectSpread({
    // eslint-disable-next-line sonarjs/no-duplicate-string
    className: (0, _classnames.default)('navbar-item', className, {
      'is-active': isActive
    })
  }, props));

  return _react.default.createElement(_react.default.Fragment, null, kid);
};

exports.NavBarItem = NavBarItem;

var noop = function noop() {};

var NavBarBurger = function NavBarBurger(_ref2) {
  var onClick = _ref2.onClick;
  return _react.default.createElement("div", {
    className: "navbar-burger burger",
    "data-target": "navMenu",
    onClick: onClick
  }, _react.default.createElement("span", null), _react.default.createElement("span", null), _react.default.createElement("span", null));
};

exports.NavBarBurger = NavBarBurger;
NavBarBurger.defaultProps = {
  onClick: noop
};

var NavBarBrand = function NavBarBrand(_ref3) {
  var href = _ref3.href,
      src = _ref3.src,
      className = _ref3.className,
      target = _ref3.target,
      onClick = _ref3.onClick,
      _ref3$width = _ref3.width,
      width = _ref3$width === void 0 ? 112 : _ref3$width,
      _ref3$height = _ref3.height,
      height = _ref3$height === void 0 ? 28 : _ref3$height,
      title = _ref3.title;
  return _react.default.createElement("div", {
    className: "navbar-brand"
  }, _react.default.createElement("a", {
    className: (0, _classnames.default)('navbar-item', className),
    href: href
  }, src && _react.default.createElement("img", {
    src: src,
    width: width,
    height: height,
    alt: title
  }), title), _react.default.createElement("a", {
    role: "button",
    className: "navbar-burger burger",
    "aria-label": "menu",
    "aria-expanded": "false",
    "data-target": target,
    onClick: onClick
  }, _react.default.createElement("span", {
    "aria-hidden": "true"
  }), _react.default.createElement("span", {
    "aria-hidden": "true"
  }), _react.default.createElement("span", {
    "aria-hidden": "true"
  })));
};

exports.NavBarBrand = NavBarBrand;

var NavBarDivider = function NavBarDivider(_ref4) {
  var className = _ref4.className;
  return _react.default.createElement("hr", {
    className: (0, _classnames.default)('navbar-divider', className)
  });
};

exports.NavBarDivider = NavBarDivider;

var NavBarDropDown = function NavBarDropDown(_ref5) {
  var title = _ref5.title,
      isRight = _ref5.isRight,
      children = _ref5.children,
      isBoxed = _ref5.isBoxed,
      className = _ref5.className;
  var classes = (0, _classnames.default)('navbar-item', 'has-dropdown', 'is-hoverable', className, {
    'is-right': isRight,
    'is-boxed': isBoxed
  });
  var ddClasses = (0, _classnames.default)('navbar-dropdown', {
    'is-boxed': isBoxed
  });
  return _react.default.createElement("div", {
    className: classes
  }, _react.default.createElement("a", {
    className: "navbar-link"
  }, title), _react.default.createElement("div", {
    className: ddClasses
  }, children));
};

exports.NavBarDropDown = NavBarDropDown;

var NavBarStart = function NavBarStart(_ref6) {
  var children = _ref6.children,
      className = _ref6.className;
  return _react.default.createElement("div", {
    className: (0, _classnames.default)('navbar-start', className)
  }, children);
};

exports.NavBarStart = NavBarStart;

var NavBarEnd = function NavBarEnd(_ref7) {
  var children = _ref7.children,
      className = _ref7.className;
  return _react.default.createElement("div", {
    className: (0, _classnames.default)('navbar-end', className)
  }, children);
};

exports.NavBarEnd = NavBarEnd;

var NavBarMenu = function NavBarMenu(_ref8) {
  var children = _ref8.children,
      id = _ref8.id,
      isActive = _ref8.isActive,
      className = _ref8.className;
  return _react.default.createElement("div", {
    id: id,
    className: (0, _classnames.default)('navbar-menu', className, {
      'is-active': isActive
    })
  }, children);
};

exports.NavBarMenu = NavBarMenu;

var NavBar = function NavBar(_ref9) {
  var children = _ref9.children,
      isFixedTop = _ref9.isFixedTop,
      isFixedBottom = _ref9.isFixedBottom,
      className = _ref9.className,
      props = _objectWithoutProperties(_ref9, ["children", "isFixedTop", "isFixedBottom", "className"]);

  // is-transparent is-fixed-top  is-fixed-bottom
  var _useState = (0, _react.useState)(false),
      _useState2 = _slicedToArray(_useState, 2),
      isActive = _useState2[0],
      setActive = _useState2[1];

  (0, _react.useEffect)(function () {
    if (isFixedTop) {
      var body = document.body;

      if (!body) {
        return;
      }

      body.classList.add('has-navbar-fixed-top');
      return function () {
        body.classList.remove('has-navbar-fixed-top');
      };
    }

    if (isFixedBottom) {
      var _body = document.body;

      if (!_body) {
        return;
      }

      _body.classList.add('has-navbar-fixed-bottom');

      return function () {
        _body.classList.remove('has-navbar-fixed-bottom');
      };
    }
  }, [isFixedTop, isFixedBottom]);
  var classes = (0, _classnames.default)('navbar', className, {
    'is-fixed-top': isFixedTop,
    'is-fixed-bottom': isFixedBottom
  });

  var kids = _react.default.Children.map(children, function (child, i) {
    if (child.type === NavBarBrand) {
      return _react.default.cloneElement(child, {
        onClick: function onClick(e) {
          e.preventDefault();
          setActive(!isActive);
        }
      });
    }

    if (child.type === NavBarMenu) {
      return _react.default.cloneElement(child, {
        isActive: isActive
      });
    }

    return child;
  });

  var propsToPass = {
    isActive: isActive,
    isFixedBottom: isFixedBottom,
    isFixedTop: isFixedTop
  };
  return _react.default.createElement(_base.Base, _extends({
    as: "nav",
    className: classes,
    role: "navigation",
    "aria-label": "main navigation"
  }, props, propsToPass), kids);
};

exports.NavBar = NavBar;