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 _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
|
16 |
|
17 | var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
|
18 |
|
19 | var _react = require('react');
|
20 |
|
21 | var _react2 = _interopRequireDefault(_react);
|
22 |
|
23 | var _helperFunctions = require('./helperFunctions');
|
24 |
|
25 | var _OutsideClickListener = require('./OutsideClickListener');
|
26 |
|
27 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
28 |
|
29 | var CTCGeneric = function CTCGeneric(_ref) {
|
30 | var _ref$onShow = _ref.onShow,
|
31 | onShow = _ref$onShow === undefined ? function () {
|
32 | return null;
|
33 | } : _ref$onShow,
|
34 | _ref$onHide = _ref.onHide,
|
35 | onHide = _ref$onHide === undefined ? function () {
|
36 | return null;
|
37 | } : _ref$onHide,
|
38 | _ref$onToggle = _ref.onToggle,
|
39 | onToggle = _ref$onToggle === undefined ? function () {
|
40 | return null;
|
41 | } : _ref$onToggle,
|
42 | _ref$cover = _ref.cover,
|
43 | cover = _ref$cover === undefined ? false : _ref$cover,
|
44 | _ref$pivotFrom = _ref.pivotFrom,
|
45 | pivotFrom = _ref$pivotFrom === undefined ? 'DOWNRIGHT' : _ref$pivotFrom,
|
46 | _ref$horizontalOffset = _ref.horizontalOffset,
|
47 | horizontalOffset = _ref$horizontalOffset === undefined ? '0rem' : _ref$horizontalOffset,
|
48 | _ref$verticalOffset = _ref.verticalOffset,
|
49 | verticalOffset = _ref$verticalOffset === undefined ? '0rem' : _ref$verticalOffset,
|
50 | _ref$switchOnHover = _ref.switchOnHover,
|
51 | switchOnHover = _ref$switchOnHover === undefined ? false : _ref$switchOnHover,
|
52 | _ref$useOCL = _ref.useOCL,
|
53 | useOCL = _ref$useOCL === undefined ? false : _ref$useOCL,
|
54 | children = _ref.children,
|
55 | externalIsOn = _ref.externalIsOn,
|
56 | _ref$defaultIsOn = _ref.defaultIsOn,
|
57 | defaultIsOn = _ref$defaultIsOn === undefined ? false : _ref$defaultIsOn,
|
58 | _ref$connected = _ref.connected,
|
59 | connected = _ref$connected === undefined ? false : _ref$connected,
|
60 | _ref$openByDefault = _ref.openByDefault,
|
61 | openByDefault = _ref$openByDefault === undefined ? false : _ref$openByDefault;
|
62 |
|
63 | var baseContainerStyle = {
|
64 | position: 'relative'
|
65 | };
|
66 |
|
67 | var _useReducer = (0, _react.useReducer)(function (state, newState) {
|
68 | return (0, _extends3.default)({}, state, newState);
|
69 | }, {
|
70 | isOn: openByDefault || defaultIsOn
|
71 | }),
|
72 | _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
|
73 | state = _useReducer2[0],
|
74 | setState = _useReducer2[1];
|
75 |
|
76 | var isOn = state.isOn;
|
77 |
|
78 |
|
79 | var toggleIsOn = function toggleIsOn() {
|
80 | onToggle(!isOn);
|
81 | if (isOn === false) {
|
82 | onShow && onShow();
|
83 | }
|
84 | if (isOn === true) {
|
85 | onHide && onHide();
|
86 | }
|
87 | setState({ isOn: !isOn });
|
88 | };
|
89 | var setIsOnTo = function setIsOnTo(value) {
|
90 | onToggle(value);
|
91 | if (value === true) {
|
92 | onShow && onShow();
|
93 | }
|
94 | if (value === false) {
|
95 | onHide && onHide();
|
96 | }
|
97 | setState({ isOn: value });
|
98 | };
|
99 | (0, _react.useEffect)(function () {
|
100 | if (connected === true && isOn !== externalIsOn) {
|
101 | setIsOnTo(externalIsOn);
|
102 | }
|
103 | }, [externalIsOn]);
|
104 |
|
105 | var getContainerProps = function getContainerProps() {
|
106 | var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
107 |
|
108 | var className = _ref2.className,
|
109 | style = _ref2.style,
|
110 | _onClick = _ref2.onClick,
|
111 | _onMouseEnter = _ref2.onMouseEnter,
|
112 | _onMouseLeave = _ref2.onMouseLeave,
|
113 | props = (0, _objectWithoutProperties3.default)(_ref2, ['className', 'style', 'onClick', 'onMouseEnter', 'onMouseLeave']);
|
114 | return (0, _extends3.default)({
|
115 | onClick: function onClick(e) {
|
116 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
117 | args[_key - 1] = arguments[_key];
|
118 | }
|
119 |
|
120 | e.stopPropagation();
|
121 | _onClick && _onClick.apply(undefined, [e].concat(args));
|
122 | },
|
123 | onMouseEnter: function onMouseEnter(e) {
|
124 | for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
125 | args[_key2 - 1] = arguments[_key2];
|
126 | }
|
127 |
|
128 | e.stopPropagation();
|
129 | switchOnHover && setIsOnTo(true);
|
130 | _onMouseEnter && _onMouseEnter.apply(undefined, [e].concat(args));
|
131 | },
|
132 | onMouseLeave: function onMouseLeave(e) {
|
133 | for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
|
134 | args[_key3 - 1] = arguments[_key3];
|
135 | }
|
136 |
|
137 | e.stopPropagation();
|
138 | switchOnHover && setIsOnTo(false);
|
139 | _onMouseLeave && _onMouseLeave.apply(undefined, [e].concat(args));
|
140 | },
|
141 | className: (0, _helperFunctions.advancedMulti)({
|
142 | unflattenedBases: [className, 'ctcgeneric__container'],
|
143 | flipVars: [[isOn, 'on', 'off']]
|
144 | }),
|
145 | style: (0, _extends3.default)({}, baseContainerStyle, style)
|
146 | }, props);
|
147 | };
|
148 |
|
149 | var baseTriggerStyle = {
|
150 | cursor: 'pointer'
|
151 | };
|
152 | var getTriggerProps = function getTriggerProps() {
|
153 | var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
154 |
|
155 | var className = _ref3.className,
|
156 | _ref3$style = _ref3.style,
|
157 | style = _ref3$style === undefined ? {} : _ref3$style,
|
158 | _onClick2 = _ref3.onClick,
|
159 | props = (0, _objectWithoutProperties3.default)(_ref3, ['className', 'style', 'onClick']);
|
160 | return (0, _extends3.default)({
|
161 | onClick: function onClick(e) {
|
162 | for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
|
163 | args[_key4 - 1] = arguments[_key4];
|
164 | }
|
165 |
|
166 | e.stopPropagation();
|
167 | toggleIsOn();
|
168 |
|
169 | _onClick2 && _onClick2.apply(undefined, [e].concat(args));
|
170 | },
|
171 | className: (0, _helperFunctions.advancedMulti)({
|
172 | unflattenedBases: [className, 'ctcgeneric__trigger'],
|
173 | flipVars: [[isOn, 'on', 'off']]
|
174 | }),
|
175 | style: (0, _extends3.default)({}, baseTriggerStyle, style)
|
176 | }, props);
|
177 | };
|
178 |
|
179 | var getChildrenStyle = function getChildrenStyle() {
|
180 | var shared = {
|
181 | position: 'absolute'
|
182 | };
|
183 |
|
184 | var getCoverStyle = function getCoverStyle() {
|
185 | if (cover === true) {
|
186 | switch (pivotFrom) {
|
187 | case 'RIGHTDOWN':
|
188 | return { left: horizontalOffset };
|
189 | case 'RIGHTUP':
|
190 | return { left: horizontalOffset };
|
191 | case 'LEFTDOWN':
|
192 | return { right: horizontalOffset };
|
193 | case 'LEFTUP':
|
194 | return { right: horizontalOffset };
|
195 | case 'UPRIGHT':
|
196 | return { bottom: verticalOffset };
|
197 | case 'UPLEFT':
|
198 | return { bottom: verticalOffset };
|
199 | case 'DOWNLEFT':
|
200 | return { top: verticalOffset };
|
201 | case 'DOWNRIGHT':
|
202 | return { top: verticalOffset };
|
203 | default:
|
204 | return {};
|
205 | }
|
206 | }
|
207 | };
|
208 | var getBaseStyle = function getBaseStyle() {
|
209 | switch (pivotFrom) {
|
210 | case 'RIGHTDOWN':
|
211 | return {
|
212 | left: 'calc(100% + ' + horizontalOffset + ')',
|
213 | top: verticalOffset
|
214 | };
|
215 | case 'RIGHTUP':
|
216 | return {
|
217 | left: 'calc(100% + ' + horizontalOffset + ')',
|
218 | bottom: verticalOffset
|
219 | };
|
220 | case 'LEFTDOWN':
|
221 | return {
|
222 | right: 'calc(100% + ' + horizontalOffset + ')',
|
223 | top: verticalOffset
|
224 | };
|
225 | case 'LEFTUP':
|
226 | return {
|
227 | right: 'calc(100% + ' + horizontalOffset + ')',
|
228 | bottom: verticalOffset
|
229 | };
|
230 | case 'UPRIGHT':
|
231 | return { bottom: 'calc(100% + ' + verticalOffset + ')' };
|
232 | case 'UPLEFT':
|
233 | return {
|
234 | right: horizontalOffset,
|
235 | bottom: 'calc(100% + ' + verticalOffset + ')'
|
236 | };
|
237 | case 'DOWNLEFT':
|
238 | return { right: horizontalOffset };
|
239 | case 'DOWNRIGHT':
|
240 | return { left: horizontalOffset };
|
241 | default:
|
242 | return {};
|
243 | }
|
244 | };
|
245 | return (0, _extends3.default)({}, shared, getBaseStyle(), getCoverStyle());
|
246 | };
|
247 | var getChildrenProps = function getChildrenProps() {
|
248 | var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
249 |
|
250 | var _onClick3 = _ref4.onClick,
|
251 | className = _ref4.className,
|
252 | style = _ref4.style,
|
253 | props = (0, _objectWithoutProperties3.default)(_ref4, ['onClick', 'className', 'style']);
|
254 | return (0, _extends3.default)({
|
255 | onClick: function onClick(e) {
|
256 | for (var _len5 = arguments.length, args = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
|
257 | args[_key5 - 1] = arguments[_key5];
|
258 | }
|
259 |
|
260 | e.stopPropagation();
|
261 | _onClick3 && _onClick3.apply(undefined, [e].concat(args));
|
262 | },
|
263 | className: (0, _helperFunctions.advancedMulti)({
|
264 | unflattenedBases: [className, 'ctcgeneric__children'],
|
265 | flipVars: [[isOn, 'on', 'off']]
|
266 | }),
|
267 | style: (0, _extends3.default)({}, getChildrenStyle(), style)
|
268 | }, props);
|
269 | };
|
270 |
|
271 | var sharedProps = {
|
272 | getChildrenProps: getChildrenProps,
|
273 | getContainerProps: getContainerProps,
|
274 | getTriggerProps: getTriggerProps,
|
275 | isOn: isOn,
|
276 | setIsOnTo: setIsOnTo,
|
277 | toggleIsOn: toggleIsOn
|
278 | };
|
279 | if (useOCL) {
|
280 | var _useOutsideClickListe = (0, _OutsideClickListener.useOutsideClickListener)({
|
281 | shouldCallHandler: isOn === true,
|
282 | outsideHandler: function outsideHandler() {
|
283 | return setIsOnTo(false);
|
284 | }
|
285 | }),
|
286 | elClickListenerRef = _useOutsideClickListe.elClickListenerRef;
|
287 |
|
288 | return children((0, _extends3.default)({
|
289 | elClickListenerRef: elClickListenerRef
|
290 | }, sharedProps));
|
291 | } else {
|
292 | return children((0, _extends3.default)({}, sharedProps));
|
293 | }
|
294 | };
|
295 |
|
296 | exports.default = _react2.default.memo(CTCGeneric); |
\ | No newline at end of file |