1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
12 |
|
13 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
14 |
|
15 | var _propTypes = require('prop-types');
|
16 |
|
17 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
18 |
|
19 | var _react = require('react');
|
20 |
|
21 | var _react2 = _interopRequireDefault(_react);
|
22 |
|
23 | var _recompose = require('recompose');
|
24 |
|
25 | var _withPopover = require('./withPopover');
|
26 |
|
27 | var _withPopover2 = _interopRequireDefault(_withPopover);
|
28 |
|
29 | var _OutsideClickListener = require('./OutsideClickListener');
|
30 |
|
31 | var _OutsideClickListener2 = _interopRequireDefault(_OutsideClickListener);
|
32 |
|
33 | var _RTGDropdown = require('./RTGDropdown');
|
34 |
|
35 | var _RTGDropdown2 = _interopRequireDefault(_RTGDropdown);
|
36 |
|
37 | var _helperFunctions = require('./helperFunctions');
|
38 |
|
39 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
40 |
|
41 | var DropdownPopover = function DropdownPopover(_ref) {
|
42 | var children = _ref.children,
|
43 | style = _ref.style,
|
44 | pivotFrom = _ref.pivotFrom,
|
45 | transitionOptions = _ref.transitionOptions,
|
46 | toggle = _ref.toggle,
|
47 | switchOn = _ref.switchOn,
|
48 | basewidth = _ref.basewidth,
|
49 | triggerX = _ref.triggerX,
|
50 | _ref$paddingX = _ref.paddingX,
|
51 | paddingX = _ref$paddingX === undefined ? 0 : _ref$paddingX,
|
52 | switchOff = _ref.switchOff,
|
53 | isOn = _ref.isOn,
|
54 | debugMode = _ref.debugMode,
|
55 | renderTrigger = _ref.renderTrigger,
|
56 | _ref$parentName = _ref.parentName,
|
57 | parentName = _ref$parentName === undefined ? 'default' : _ref$parentName,
|
58 | shouldToggleOnHover = _ref.shouldToggleOnHover;
|
59 |
|
60 | var containerRef = _react2.default.createRef();
|
61 | var inputType = 'mouse';
|
62 |
|
63 | typeof window !== 'undefined' && (0, _helperFunctions.onUserInputChange)(function (type) {
|
64 | inputType = type;
|
65 | });
|
66 |
|
67 | var getChildrenProps = function getChildrenProps() {
|
68 | var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
69 |
|
70 | var _onClick = _ref2.onClick,
|
71 | className = _ref2.className,
|
72 | style = _ref2.style,
|
73 | props = (0, _objectWithoutProperties3.default)(_ref2, ['onClick', 'className', 'style']);
|
74 | return (0, _extends3.default)({
|
75 |
|
76 | onClick: function onClick(e) {
|
77 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
78 | args[_key - 1] = arguments[_key];
|
79 | }
|
80 |
|
81 | e.stopPropagation();
|
82 | toggle();
|
83 | _onClick && _onClick.apply(undefined, [e].concat(args));
|
84 | },
|
85 | style: style,
|
86 | className: className ? 'dropdownpopover__children ' + className : 'dropdownpopover__children'
|
87 | }, props);
|
88 | };
|
89 | var padding_x = paddingX;
|
90 | var trigger_x = triggerX;
|
91 |
|
92 | return _react2.default.createElement(
|
93 | _OutsideClickListener2.default,
|
94 | { containerRef: containerRef, shouldCallHandler: isOn, handler: toggle },
|
95 | function (_ref3) {
|
96 | var containerEl = _ref3.ref.current;
|
97 |
|
98 | var triggerWidth = containerEl && containerEl.firstElementChild.getBoundingClientRect().width;
|
99 | var optionWidth = containerEl && containerEl.lastElementChild.getBoundingClientRect().width;
|
100 | var defaultTriggerStyle = {
|
101 | cursor: 'pointer',
|
102 | width: (triggerX ? triggerX : triggerWidth) + 'rem'
|
103 | };
|
104 |
|
105 | var getTriggerProps = function getTriggerProps() {
|
106 | var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
107 |
|
108 | var _onClick2 = _ref4.onClick,
|
109 | className = _ref4.className,
|
110 | style = _ref4.style,
|
111 | props = (0, _objectWithoutProperties3.default)(_ref4, ['onClick', 'className', 'style']);
|
112 | return (0, _extends3.default)({
|
113 | onClick: function onClick(e) {
|
114 | for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
115 | args[_key2 - 1] = arguments[_key2];
|
116 | }
|
117 |
|
118 | e.stopPropagation();
|
119 | toggle();
|
120 | _onClick2 && _onClick2.apply(undefined, [e].concat(args));
|
121 | },
|
122 | style: (0, _extends3.default)({}, defaultTriggerStyle, style),
|
123 | className: className ? 'dropdownpopover__trigger ' + parentName + '__dropdownpopover__trigger ' + className : 'dropdownpopover__trigger ' + parentName + '__dropdownpopover__trigger'
|
124 | }, props);
|
125 | };
|
126 | var getStyle = function getStyle() {
|
127 | var shared = {
|
128 | position: 'absolute',
|
129 | background: 'rgb(226, 226, 226)',
|
130 | zIndex: 3,
|
131 | width: (basewidth ? basewidth : optionWidth) + 'rem'
|
132 | };
|
133 |
|
134 | if (pivotFrom === 'DOWNRIGHT' || !pivotFrom) {
|
135 | return (0, _extends3.default)({}, shared, { left: 0 });
|
136 | }
|
137 | if (pivotFrom === 'DOWNLEFT') {
|
138 | return (0, _extends3.default)({}, shared, { right: 0 });
|
139 | }
|
140 | if (pivotFrom === 'RIGHTDOWN') {
|
141 | return (0, _extends3.default)({}, shared, { left: trigger_x + 'rem', top: 0 });
|
142 | }
|
143 | if (pivotFrom === 'LEFTDOWN') {
|
144 | return (0, _extends3.default)({}, shared, { left: -basewidth + 'rem', top: 0 });
|
145 | }
|
146 |
|
147 |
|
148 |
|
149 |
|
150 |
|
151 |
|
152 | };
|
153 | return _react2.default.createElement(
|
154 | 'div',
|
155 | {
|
156 | ref: containerRef,
|
157 | style: (0, _extends3.default)({ position: 'relative', zIndex: isOn ? 2 : 1 }, style),
|
158 | className: 'dropdownpopover__container ' + parentName + '__dropdownpopover__container',
|
159 | onMouseEnter: function onMouseEnter() {
|
160 | return inputType === 'mouse' && shouldToggleOnHover && switchOn();
|
161 | },
|
162 | onMouseLeave: function onMouseLeave() {
|
163 | return inputType === 'mouse' && shouldToggleOnHover && switchOff();
|
164 | }
|
165 | },
|
166 | renderTrigger({ isOn: isOn, toggle: toggle, getTriggerProps: getTriggerProps }),
|
167 | _react2.default.createElement(
|
168 | _RTGDropdown2.default,
|
169 | {
|
170 | style: getStyle(),
|
171 | 'in': debugMode && debugMode.alwaysOn ? true : isOn,
|
172 | transitionOptions: transitionOptions
|
173 | },
|
174 | function (_ref5) {
|
175 | var rtgStyle = _ref5.style;
|
176 | return typeof children === 'function' ? children({
|
177 | getChildrenProps: getChildrenProps,
|
178 | isOn: isOn,
|
179 | toggle: toggle,
|
180 | rtgStyle: rtgStyle,
|
181 | className: 'dropdownpopover__children ' + parentName + '__dropdownpopover__children'
|
182 | }) : _react2.default.createElement(
|
183 | 'div',
|
184 | {
|
185 | style: rtgStyle,
|
186 | className: 'dropdownpopover__children ' + parentName + '__dropdownpopover__children'
|
187 | },
|
188 | children
|
189 | );
|
190 | }
|
191 | )
|
192 | );
|
193 | }
|
194 | );
|
195 | };
|
196 |
|
197 | DropdownPopover.propTypes = {
|
198 | children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func]).isRequired,
|
199 | parentName: _propTypes2.default.string.isRequired,
|
200 | renderTrigger: _propTypes2.default.func.isRequired,
|
201 |
|
202 | toggle: _propTypes2.default.func.isRequired,
|
203 | switchOn: _propTypes2.default.func.isRequired,
|
204 | switchOff: _propTypes2.default.func.isRequired,
|
205 | isOn: _propTypes2.default.bool.isRequired
|
206 | };
|
207 |
|
208 | DropdownPopover.defaultProps = {
|
209 | isOn: false
|
210 | };
|
211 |
|
212 | var enhance = (0, _recompose.compose)(_withPopover2.default);
|
213 |
|
214 | exports.default = enhance(DropdownPopover); |
\ | No newline at end of file |