react-misc-toolbox/dist/Header.js

- [ ] diagramexample | optimize creating from blank slate

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Header = undefined;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  width: 16rem;\n  background-color: #ddd;\n  padding: 0rem 0 0.5rem 0rem;\n  @media (min-width: 600px) {\n    display: none;\n  }\n'], ['\n  width: 16rem;\n  background-color: #ddd;\n  padding: 0rem 0 0.5rem 0rem;\n  @media (min-width: 600px) {\n    display: none;\n  }\n']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  width: 16rem;\n  background-color: #ddd;\n  padding: 0rem 0 0.5rem 0rem;\n  @media (max-width: 600px) {\n    display: none;\n  }\n'], ['\n  width: 16rem;\n  background-color: #ddd;\n  padding: 0rem 0 0.5rem 0rem;\n  @media (max-width: 600px) {\n    display: none;\n  }\n']),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n  height: 2rem;\n  @media (min-width: 900px) {\n    height: 4rem;\n    margin-bottom: 2.5rem;\n  }\n'], ['\n  height: 2rem;\n  @media (min-width: 900px) {\n    height: 4rem;\n    margin-bottom: 2.5rem;\n  }\n']),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n  z-index: 4;\n  background: whitesmoke;\n  display: flex;\n  box-sizing: content-box;\n  flex-direction: column;\n  align-items: center;\n  padding: 0rem 1rem 0rem 1rem;\n'], ['\n  z-index: 4;\n  background: whitesmoke;\n  display: flex;\n  box-sizing: content-box;\n  flex-direction: column;\n  align-items: center;\n  padding: 0rem 1rem 0rem 1rem;\n']),
    _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n  background: rgb(235, 235, 235);\n\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n'], ['\n  background: rgb(235, 235, 235);\n\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n']),
    _templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n  height: 4rem;\n  width: 100%;\n  display: flex;\n  align-items: center;\n'], ['\n  height: 4rem;\n  width: 100%;\n  display: flex;\n  align-items: center;\n']),
    _templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  align-items: center;\n'], ['\n  display: flex;\n  align-items: center;\n']),
    _templateObject8 = (0, _taggedTemplateLiteral3.default)(['\n  justify-content: flex-start;\n  display: flex;\n  align-items: center;\n'], ['\n  justify-content: flex-start;\n  display: flex;\n  align-items: center;\n']),
    _templateObject9 = (0, _taggedTemplateLiteral3.default)([''], ['']),
    _templateObject10 = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 1;\n  flex-basis: 12rem;\n'], ['\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 1;\n  flex-basis: 12rem;\n']),
    _templateObject11 = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  justify-content: center;\n  flex-grow: 1.5;\n  flex-basis: 0;\n  @media (max-width: 500px) {\n    flex-grow: 1;\n  }\n'], ['\n  display: flex;\n  justify-content: center;\n  flex-grow: 1.5;\n  flex-basis: 0;\n  @media (max-width: 500px) {\n    flex-grow: 1;\n  }\n']),
    _templateObject12 = (0, _taggedTemplateLiteral3.default)(['\n  text-transform: uppercase;\n  display: flex;\n  flex-basis: 12rem;\n  flex-grow: 1;\n  @media (max-width: 600px) {\n    visibility: hidden;\n  }\n'], ['\n  text-transform: uppercase;\n  display: flex;\n  flex-basis: 12rem;\n  flex-grow: 1;\n  @media (max-width: 600px) {\n    visibility: hidden;\n  }\n']),
    _templateObject13 = (0, _taggedTemplateLiteral3.default)(['\n  margin-right: 3rem;\n'], ['\n  margin-right: 3rem;\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Button = require('./Button');

var _Button2 = _interopRequireDefault(_Button);

var _FlexibleMenu = require('./FlexibleMenu');

var _FlexibleMenu2 = _interopRequireDefault(_FlexibleMenu);

var _SVGMenu = require('./svg/SVGMenu');

var _SVGMenu2 = _interopRequireDefault(_SVGMenu);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var DROPDOWN = _styledComponents2.default.div(_templateObject);
var Horizontal = _styledComponents2.default.div(_templateObject2);

var LOGO = (0, _styledComponents2.default)('img')(_templateObject3);
var CONTAINER = (0, _styledComponents2.default)('div')(_templateObject4);
var TOP = (0, _styledComponents2.default)('div')(_templateObject5);
var BOTTOM = (0, _styledComponents2.default)('div')(_templateObject6);
var TOP_RIGHT = (0, _styledComponents2.default)('div')(_templateObject7);
var TOP_LEFT = (0, _styledComponents2.default)('div')(_templateObject8);
var TOP_CENTER = (0, _styledComponents2.default)('div')(_templateObject9);

var BOTTOM_LEFT = (0, _styledComponents2.default)('div')(_templateObject10);
var BOTTOM_CENTER = (0, _styledComponents2.default)('div')(_templateObject11);

var BOTTOM_RIGHT = _styledComponents2.default.div(_templateObject12);

var FM_TRIGGER = (0, _styledComponents2.default)(_Button2.default)(_templateObject13);

var Header = exports.Header = function Header(_ref) {
  var renderFlexibleHorizontal = _ref.renderFlexibleHorizontal,
      renderFlexibleVertical = _ref.renderFlexibleVertical,
      renderRight = _ref.renderRight,
      renderLeft = _ref.renderLeft;

  var renderFlexibleMenu = function renderFlexibleMenu() {
    return _react2.default.createElement(
      _FlexibleMenu2.default,
      {
        renderTrigger: function renderTrigger(_ref2) {
          var getTriggerProps = _ref2.getTriggerProps,
              isOn = _ref2.isOn;
          return _react2.default.createElement(
            FM_TRIGGER,
            (0, _extends3.default)({ isOn: isOn }, getTriggerProps()),
            _react2.default.createElement(_SVGMenu2.default, null)
          );
        },
        renderHorizontal: function renderHorizontal() {
          return _react2.default.createElement(
            _react.Fragment,
            null,
            renderFlexibleHorizontal()
          );
        },
        debugMode: {
          alwaysOn: false
        },
        threshold: 600,
        pivotFrom: 'LEFTDOWN'
      },
      function (_ref3) {
        var getChildrenProps = _ref3.getChildrenProps;
        return _react2.default.createElement(
          _react.Fragment,
          null,
          _react2.default.createElement(
            DROPDOWN,
            (0, _extends3.default)({}, getChildrenProps()),
            renderFlexibleVertical()
          )
        );
      }
    );
  };
  return _react2.default.createElement(
    CONTAINER,
    null,
    _react2.default.createElement(
      TOP,
      null,
      _react2.default.createElement(
        TOP_LEFT,
        null,
        renderLeft()
      ),
      _react2.default.createElement(
        TOP_RIGHT,
        null,
        renderRight()
      )
    )
  );
};

Header.defaultProps = {
  renderFlexibleHorizontal: function renderFlexibleHorizontal() {
    return _react2.default.createElement(
      _react.Fragment,
      null,
      'rFH'
    );
  },
  renderFlexibleVertical: function renderFlexibleVertical() {
    return _react2.default.createElement(
      _react.Fragment,
      null,
      'rFV'
    );
  },
  renderRight: function renderRight() {
    return _react2.default.createElement(
      _react.Fragment,
      null,
      'rR'
    );
  },
  renderLeft: function renderLeft() {
    return _react2.default.createElement(
      _react.Fragment,
      null,
      'RL'
    );
  }
};

exports.default = Header;