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

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

"use strict";

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

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

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

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

var _findByType = _interopRequireDefault(require("../../utils/findByType"));

var _Item = _interopRequireDefault(require("./Item"));

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

const scrollableHorizontal = (isScrollable, isHorizontal) => {
  if (isScrollable && isHorizontal) {
    return `
      white-space: nowrap;
      overflow-y: hidden;
      overflow-x: auto;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      /* a little extra padding for this style to allow for scrollbars */
      padding: .5em 0;

      ::-webkit-scrollbar {
        display: none;
      }
      & .list {
        display: inline-block;
      }
    `;
  }

  return ``;
};

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

  return ``;
};

const selectedMenu = isSelected => {
  if (isSelected) {
    return `
      & > .link {
        color: #000;
      }
    `;
  }

  return ``;
};

const Heading = _styledComponents.default.span`
  display: block;
  text-decoration: none;
  white-space: nowrap;

  text-transform: uppercase;
  color: #565d64;
  padding: 0.5em 1em;
`;
const List = _styledComponents.default.ul`
  list-style: none;
  margin: 0;
  padding: 0;
`;

class BaseMenu extends _react.PureComponent {
  renderMenu() {
    const {
      children
    } = this.props;
    const listType = [List.displayName] || [List.name];
    const headingType = [Heading.displayName] || [Heading.name];

    const items = _react.default.Children.map(children, child => {
      const childType = child && child.type && (child.type.displayName || child.type.name);

      if (childType.includes(listType)) {
        return child.props.children.map(item => _react.default.createElement(_Item.default, {
          className: "item",
          key: item.props.children
        }, item.props.children));
      }

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

    if (!items) {
      return null;
    }

    return _react.default.createElement(List, {
      className: "list"
    }, items);
  }

  render() {
    const {
      className
    } = this.props;
    return _react.default.createElement("nav", _extends({
      className: className
    }, this.props), this.renderMenu());
  }

}

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

const Menu = (0, _styledComponents.default)(BaseMenu)`
  box-sizing: border-box;
  position: relative;

  &.separator {
    background-color: #ccc;
    height: 1px;
    margin: 0.3em 0;
  }

  ${props => horizontalMenu(props.horizontal)};
  ${props => selectedMenu(props.selected)};
  ${props => scrollableHorizontal(props.selected, props.horizontal)};
`;
Menu.propTypes = {
  /**
   * Makes menu items display horizontal (inline)
   */
  horizontal: _propTypes.default.bool,

  /**
   * Makes menu items appear selected
   */
  selected: _propTypes.default.bool,

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

var _default = Menu;
exports.default = _default;
//# sourceMappingURL=Menu.js.map