1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.Header = undefined;
|
7 |
|
8 | var _extends2 = require('babel-runtime/helpers/extends');
|
9 |
|
10 | var _extends3 = _interopRequireDefault(_extends2);
|
11 |
|
12 | var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
|
13 |
|
14 | var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
|
15 |
|
16 | 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']),
|
17 | _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']),
|
18 | _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']),
|
19 | _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']),
|
20 | _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']),
|
21 | _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']),
|
22 | _templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n display: flex;\n align-items: center;\n'], ['\n display: flex;\n align-items: center;\n']),
|
23 | _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']),
|
24 | _templateObject9 = (0, _taggedTemplateLiteral3.default)([''], ['']),
|
25 | _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']),
|
26 | _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']),
|
27 | _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']),
|
28 | _templateObject13 = (0, _taggedTemplateLiteral3.default)(['\n margin-right: 3rem;\n'], ['\n margin-right: 3rem;\n']);
|
29 |
|
30 | var _react = require('react');
|
31 |
|
32 | var _react2 = _interopRequireDefault(_react);
|
33 |
|
34 | var _Button = require('./Button');
|
35 |
|
36 | var _Button2 = _interopRequireDefault(_Button);
|
37 |
|
38 | var _FlexibleMenu = require('./FlexibleMenu');
|
39 |
|
40 | var _FlexibleMenu2 = _interopRequireDefault(_FlexibleMenu);
|
41 |
|
42 | var _SVGMenu = require('./svg/SVGMenu');
|
43 |
|
44 | var _SVGMenu2 = _interopRequireDefault(_SVGMenu);
|
45 |
|
46 | var _styledComponents = require('styled-components');
|
47 |
|
48 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
49 |
|
50 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
51 |
|
52 | var DROPDOWN = _styledComponents2.default.div(_templateObject);
|
53 | var Horizontal = _styledComponents2.default.div(_templateObject2);
|
54 |
|
55 | var LOGO = (0, _styledComponents2.default)('img')(_templateObject3);
|
56 | var CONTAINER = (0, _styledComponents2.default)('div')(_templateObject4);
|
57 | var TOP = (0, _styledComponents2.default)('div')(_templateObject5);
|
58 | var BOTTOM = (0, _styledComponents2.default)('div')(_templateObject6);
|
59 | var TOP_RIGHT = (0, _styledComponents2.default)('div')(_templateObject7);
|
60 | var TOP_LEFT = (0, _styledComponents2.default)('div')(_templateObject8);
|
61 | var TOP_CENTER = (0, _styledComponents2.default)('div')(_templateObject9);
|
62 |
|
63 | var BOTTOM_LEFT = (0, _styledComponents2.default)('div')(_templateObject10);
|
64 | var BOTTOM_CENTER = (0, _styledComponents2.default)('div')(_templateObject11);
|
65 |
|
66 | var BOTTOM_RIGHT = _styledComponents2.default.div(_templateObject12);
|
67 |
|
68 | var FM_TRIGGER = (0, _styledComponents2.default)(_Button2.default)(_templateObject13);
|
69 |
|
70 | var Header = exports.Header = function Header(_ref) {
|
71 | var renderFlexibleHorizontal = _ref.renderFlexibleHorizontal,
|
72 | renderFlexibleVertical = _ref.renderFlexibleVertical,
|
73 | renderRight = _ref.renderRight,
|
74 | renderLeft = _ref.renderLeft;
|
75 |
|
76 | var renderFlexibleMenu = function renderFlexibleMenu() {
|
77 | return _react2.default.createElement(
|
78 | _FlexibleMenu2.default,
|
79 | {
|
80 | renderTrigger: function renderTrigger(_ref2) {
|
81 | var getTriggerProps = _ref2.getTriggerProps,
|
82 | isOn = _ref2.isOn;
|
83 | return _react2.default.createElement(
|
84 | FM_TRIGGER,
|
85 | (0, _extends3.default)({ isOn: isOn }, getTriggerProps()),
|
86 | _react2.default.createElement(_SVGMenu2.default, null)
|
87 | );
|
88 | },
|
89 | renderHorizontal: function renderHorizontal() {
|
90 | return _react2.default.createElement(
|
91 | _react.Fragment,
|
92 | null,
|
93 | renderFlexibleHorizontal()
|
94 | );
|
95 | },
|
96 | debugMode: {
|
97 | alwaysOn: false
|
98 | },
|
99 | threshold: 600,
|
100 | pivotFrom: 'LEFTDOWN'
|
101 | },
|
102 | function (_ref3) {
|
103 | var getChildrenProps = _ref3.getChildrenProps;
|
104 | return _react2.default.createElement(
|
105 | _react.Fragment,
|
106 | null,
|
107 | _react2.default.createElement(
|
108 | DROPDOWN,
|
109 | (0, _extends3.default)({}, getChildrenProps()),
|
110 | renderFlexibleVertical()
|
111 | )
|
112 | );
|
113 | }
|
114 | );
|
115 | };
|
116 | return _react2.default.createElement(
|
117 | CONTAINER,
|
118 | null,
|
119 | _react2.default.createElement(
|
120 | TOP,
|
121 | null,
|
122 | _react2.default.createElement(
|
123 | TOP_LEFT,
|
124 | null,
|
125 | renderLeft()
|
126 | ),
|
127 | _react2.default.createElement(
|
128 | TOP_RIGHT,
|
129 | null,
|
130 | renderRight()
|
131 | )
|
132 | )
|
133 | );
|
134 | };
|
135 |
|
136 | Header.defaultProps = {
|
137 | renderFlexibleHorizontal: function renderFlexibleHorizontal() {
|
138 | return _react2.default.createElement(
|
139 | _react.Fragment,
|
140 | null,
|
141 | 'rFH'
|
142 | );
|
143 | },
|
144 | renderFlexibleVertical: function renderFlexibleVertical() {
|
145 | return _react2.default.createElement(
|
146 | _react.Fragment,
|
147 | null,
|
148 | 'rFV'
|
149 | );
|
150 | },
|
151 | renderRight: function renderRight() {
|
152 | return _react2.default.createElement(
|
153 | _react.Fragment,
|
154 | null,
|
155 | 'rR'
|
156 | );
|
157 | },
|
158 | renderLeft: function renderLeft() {
|
159 | return _react2.default.createElement(
|
160 | _react.Fragment,
|
161 | null,
|
162 | 'RL'
|
163 | );
|
164 | }
|
165 | };
|
166 |
|
167 | exports.default = Header; |
\ | No newline at end of file |