pure-styled-components/lib/components/Menu/Menu.js

Styled Component design system based on Pure CSS for React/Preact

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: relative;\n\n  &.separator {\n    background-color: #ccc;\n    height: 1px;\n    margin: 0.3em 0;\n  }\n\n  ", ";\n  ", ";\n  ", ";\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

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

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 _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 _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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

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 _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  display: block;\n  text-decoration: none;\n  white-space: nowrap;\n\n  text-transform: uppercase;\n  color: #565d64;\n  padding: 0.5em 1em;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import findByType from "../../utils/findByType";
import Item from "./Item";

var scrollableHorizontal = function scrollableHorizontal(isScrollable, isHorizontal) {
  if (isScrollable && isHorizontal) {
    return "\n      white-space: nowrap;\n      overflow-y: hidden;\n      overflow-x: auto;\n      -ms-overflow-style: none;\n      -webkit-overflow-scrolling: touch;\n      /* a little extra padding for this style to allow for scrollbars */\n      padding: .5em 0;\n\n      ::-webkit-scrollbar {\n        display: none;\n      }\n      & .list {\n        display: inline-block;\n      }\n    ";
  }

  return "";
};

var horizontalMenu = function horizontalMenu(isHorizontal) {
  if (isHorizontal) {
    return "\n      width: 100%;\n      white-space: nowrap;\n      & .list {\n        display: inline-block;\n      }\n      /* Initial menus should be inline-block so that they are horizontal */\n      & .item,\n      & .heading,\n      & .separator {\n        display: inline-block;\n        *display: inline;\n        zoom: 1;\n        vertical-align: middle;\n      }\n      & .separator {\n        width: 1px;\n        height: 1.3em;\n        margin: 0 .3em;\n      }\n      & .dropdown {\n        left: 0;\n        top: auto;\n        width: inherit;\n      }\n    ";
  }

  return "";
};

var selectedMenu = function selectedMenu(isSelected) {
  if (isSelected) {
    return "\n      & > .link {\n        color: #000;\n      }\n    ";
  }

  return "";
};

var Heading = styled.span(_templateObject());
var List = styled.ul(_templateObject2());

var BaseMenu =
/*#__PURE__*/
function (_PureComponent) {
  _inherits(BaseMenu, _PureComponent);

  function BaseMenu() {
    _classCallCheck(this, BaseMenu);

    return _possibleConstructorReturn(this, _getPrototypeOf(BaseMenu).apply(this, arguments));
  }

  _createClass(BaseMenu, [{
    key: "renderMenu",
    value: function renderMenu() {
      var children = this.props.children;
      var listType = [List.displayName] || [List.name];
      var headingType = [Heading.displayName] || [Heading.name];
      var items = React.Children.map(children, function (child) {
        var childType = child && child.type && (child.type.displayName || child.type.name);

        if (childType.includes(listType)) {
          return child.props.children.map(function (item) {
            return React.createElement(Item, {
              className: "item",
              key: item.props.children
            }, item.props.children);
          });
        }

        if (childType.includes(headingType)) {
          return React.createElement(Heading, {
            className: "heading"
          }, child.props.children);
        }
      });

      if (!items) {
        return null;
      }

      return React.createElement(List, {
        className: "list"
      }, items);
    }
  }, {
    key: "render",
    value: function render() {
      var className = this.props.className;
      return React.createElement("nav", _extends({
        className: className
      }, this.props), this.renderMenu());
    }
  }]);

  return BaseMenu;
}(PureComponent);

BaseMenu.Heading = Heading;
BaseMenu.List = List;
BaseMenu.Item = Item;
/**
 * Simple CSS and React for menus. See <List.Heading> and <List.Item>.
 *
 * @visibleName Menu
 */

var Menu = styled(BaseMenu)(_templateObject3(), function (props) {
  return horizontalMenu(props.horizontal);
}, function (props) {
  return selectedMenu(props.selected);
}, function (props) {
  return scrollableHorizontal(props.selected, props.horizontal);
});
Menu.propTypes = {
  /**
   * Makes menu items display horizontal (inline)
   */
  horizontal: PropTypes.bool,

  /**
   * Makes menu items appear selected
   */
  selected: PropTypes.bool,

  /**
   * Child components (array or single element)
   */
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};
/** @component */

export default Menu;
//# sourceMappingURL=Menu.js.map