1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
8 |
|
9 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
10 |
|
11 | var _extends2 = require('babel-runtime/helpers/extends');
|
12 |
|
13 | var _extends3 = _interopRequireDefault(_extends2);
|
14 |
|
15 | var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
|
16 |
|
17 | var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
|
18 |
|
19 | var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n background: #ddf;\n display: flex;\n @media (', '-width: ', 'px) {\n display: none;\n }\n'], ['\n background: #ddf;\n display: flex;\n @media (', '-width: ', 'px) {\n display: none;\n }\n']),
|
20 | _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n position: relative;\n background: #fdd;\n @media (', '-width: ', 'px) {\n display: none;\n }\n'], ['\n position: relative;\n background: #fdd;\n @media (', '-width: ', 'px) {\n display: none;\n }\n']);
|
21 |
|
22 | var _react = require('react');
|
23 |
|
24 | var _react2 = _interopRequireDefault(_react);
|
25 |
|
26 | var _SVGMenu = require('./svg/SVGMenu');
|
27 |
|
28 | var _SVGMenu2 = _interopRequireDefault(_SVGMenu);
|
29 |
|
30 | var _CTCPopover = require('./CTCPopover');
|
31 |
|
32 | var _CTCPopover2 = _interopRequireDefault(_CTCPopover);
|
33 |
|
34 | var _Button = require('./Button');
|
35 |
|
36 | var _Button2 = _interopRequireDefault(_Button);
|
37 |
|
38 | var _styledComponents = require('styled-components');
|
39 |
|
40 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
41 |
|
42 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
43 |
|
44 | var ABOVE_THRESHOLD = (0, _styledComponents2.default)('div')(_templateObject, function (_ref) {
|
45 | var isInverted = _ref.isInverted;
|
46 | return !isInverted ? 'max' : 'min';
|
47 | }, function (_ref2) {
|
48 | var threshold = _ref2.threshold;
|
49 | return threshold;
|
50 | });
|
51 | var BELOW_THRESHOLD = (0, _styledComponents2.default)('div')(_templateObject2, function (_ref3) {
|
52 | var isInverted = _ref3.isInverted;
|
53 | return !isInverted ? 'min' : 'max';
|
54 | }, function (_ref4) {
|
55 | var threshold = _ref4.threshold;
|
56 | return threshold;
|
57 | });
|
58 |
|
59 | var FlexibleMenu = function FlexibleMenu(_ref5) {
|
60 | var _ref5$threshold = _ref5.threshold,
|
61 | threshold = _ref5$threshold === undefined ? 600 : _ref5$threshold,
|
62 | _ref5$isInverted = _ref5.isInverted,
|
63 | isInverted = _ref5$isInverted === undefined ? false : _ref5$isInverted,
|
64 | children = _ref5.children,
|
65 | renderHorizontal = _ref5.renderHorizontal,
|
66 | pivotFrom = _ref5.pivotFrom,
|
67 | renderTrigger = _ref5.renderTrigger,
|
68 | debugMode = _ref5.debugMode;
|
69 |
|
70 | return _react2.default.createElement(
|
71 | _react.Fragment,
|
72 | null,
|
73 | _react2.default.createElement(HorizontalMenu, { children: children, renderHorizontal: renderHorizontal, threshold: threshold, isInverted: isInverted }),
|
74 | _react2.default.createElement(DropdownMenu, {
|
75 | threshold: threshold,
|
76 | isInverted: isInverted,
|
77 | children: children,
|
78 | pivotFrom: pivotFrom,
|
79 | renderTrigger: renderTrigger,
|
80 | debugMode: debugMode
|
81 | })
|
82 | );
|
83 | };
|
84 |
|
85 | var HorizontalMenu = function HorizontalMenu(_ref6) {
|
86 | var threshold = _ref6.threshold,
|
87 | children = _ref6.children,
|
88 | renderHorizontal = _ref6.renderHorizontal,
|
89 | isInverted = _ref6.isInverted;
|
90 | return _react2.default.createElement(
|
91 | ABOVE_THRESHOLD,
|
92 | {
|
93 | threshold: threshold,
|
94 | isInverted: isInverted,
|
95 | className: 'flexiblemenu__horizontal'
|
96 | },
|
97 | renderHorizontal ? renderHorizontal() : children
|
98 | );
|
99 | };
|
100 |
|
101 | var triggerBaseClassName = 'flexiblemenu__trigger';
|
102 | var defaultRenderTrigger = function defaultRenderTrigger(_ref7) {
|
103 | var getTriggerProps = _ref7.getTriggerProps,
|
104 | isOn = _ref7.isOn;
|
105 | return _react2.default.createElement(
|
106 | _Button2.default,
|
107 | (0, _extends3.default)({}, getTriggerProps({
|
108 | className: triggerBaseClassName,
|
109 | isOn: isOn
|
110 | })),
|
111 | _react2.default.createElement(_SVGMenu2.default, null)
|
112 | );
|
113 | };
|
114 |
|
115 | var DropdownMenu = function DropdownMenu(_ref8) {
|
116 | var threshold = _ref8.threshold,
|
117 | children = _ref8.children,
|
118 | pivotFrom = _ref8.pivotFrom,
|
119 | _renderTrigger = _ref8.renderTrigger,
|
120 | debugMode = _ref8.debugMode,
|
121 | isInverted = _ref8.isInverted;
|
122 |
|
123 | return _react2.default.createElement(
|
124 | BELOW_THRESHOLD,
|
125 | {
|
126 | className: 'flexiblemenu__dropdown',
|
127 | threshold: threshold,
|
128 | isInverted: isInverted
|
129 | },
|
130 | _react2.default.createElement(
|
131 | _CTCPopover2.default,
|
132 | {
|
133 | debugMode: debugMode,
|
134 | pivotFrom: pivotFrom,
|
135 | renderTrigger: function renderTrigger(_ref9) {
|
136 | var _getTriggerProps = _ref9.getTriggerProps,
|
137 | isOn = _ref9.isOn;
|
138 | return _renderTrigger ? _renderTrigger({
|
139 | getTriggerProps: function getTriggerProps() {
|
140 | var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
141 |
|
142 | var className = _ref10.className,
|
143 | props = (0, _objectWithoutProperties3.default)(_ref10, ['className']);
|
144 | return _getTriggerProps((0, _extends3.default)({
|
145 | className: !className ? triggerBaseClassName : [triggerBaseClassName, className]
|
146 | }, props));
|
147 | },
|
148 | isOn: isOn
|
149 | }) : defaultRenderTrigger({ getTriggerProps: _getTriggerProps, isOn: isOn });
|
150 | }
|
151 | },
|
152 | children
|
153 | )
|
154 | );
|
155 | };
|
156 |
|
157 | exports.default = _react2.default.memo(FlexibleMenu); |
\ | No newline at end of file |