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 _regenerator = require('babel-runtime/regenerator');
|
12 |
|
13 | var _regenerator2 = _interopRequireDefault(_regenerator);
|
14 |
|
15 | var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');
|
16 |
|
17 | var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);
|
18 |
|
19 | var _extends2 = require('babel-runtime/helpers/extends');
|
20 |
|
21 | var _extends3 = _interopRequireDefault(_extends2);
|
22 |
|
23 | var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
|
24 |
|
25 | var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
|
26 |
|
27 | var _react = require('react');
|
28 |
|
29 | var _react2 = _interopRequireDefault(_react);
|
30 |
|
31 | var _SVGPrev = require('./svg/SVGPrev');
|
32 |
|
33 | var _SVGPrev2 = _interopRequireDefault(_SVGPrev);
|
34 |
|
35 | var _SVGNext = require('./svg/SVGNext');
|
36 |
|
37 | var _SVGNext2 = _interopRequireDefault(_SVGNext);
|
38 |
|
39 | var _SVGExpandMore = require('./svg/SVGExpandMore');
|
40 |
|
41 | var _SVGExpandMore2 = _interopRequireDefault(_SVGExpandMore);
|
42 |
|
43 | var _SVGExpandLess = require('./svg/SVGExpandLess');
|
44 |
|
45 | var _SVGExpandLess2 = _interopRequireDefault(_SVGExpandLess);
|
46 |
|
47 | var _RTGTransition = require('./RTGTransition');
|
48 |
|
49 | var _RTGTransition2 = _interopRequireDefault(_RTGTransition);
|
50 |
|
51 | var _Button = require('./Button');
|
52 |
|
53 | var _Button2 = _interopRequireDefault(_Button);
|
54 |
|
55 | var _helperFunctions = require('./helperFunctions');
|
56 |
|
57 | var _ = require('.');
|
58 |
|
59 | var _reactSwipeable = require('react-swipeable');
|
60 |
|
61 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
62 |
|
63 |
|
64 |
|
65 |
|
66 | var interval = void 0;
|
67 |
|
68 | var useSetState = function useSetState(initialState) {
|
69 | var _useReducer = (0, _react.useReducer)(function (state, newState) {
|
70 | return (0, _extends3.default)({}, state, newState);
|
71 | }, (0, _extends3.default)({}, initialState)),
|
72 | _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
|
73 | state = _useReducer2[0],
|
74 | setState = _useReducer2[1];
|
75 |
|
76 | return [state, setState];
|
77 | };
|
78 |
|
79 | var useSafeSetState = function useSafeSetState(initialState) {
|
80 | var _useSetState = useSetState(initialState),
|
81 | _useSetState2 = (0, _slicedToArray3.default)(_useSetState, 2),
|
82 | state = _useSetState2[0],
|
83 | setState = _useSetState2[1];
|
84 |
|
85 | var mountedRef = (0, _react.useRef)(false);
|
86 | (0, _react.useEffect)(function () {
|
87 | mountedRef.current = true;
|
88 | return function () {
|
89 | return mountedRef.current = false;
|
90 | };
|
91 | }, []);
|
92 |
|
93 | var safeSetState = function safeSetState() {
|
94 | return mountedRef.current && setState.apply(undefined, arguments);
|
95 | };
|
96 | return [state, safeSetState];
|
97 | };
|
98 |
|
99 | var Accordion = function Accordion(_ref) {
|
100 | var externalSwipeableRef = _ref.externalSwipeableRef,
|
101 | _ref$pointerScrollDis = _ref.pointerScrollDistance,
|
102 | pointerScrollDistance = _ref$pointerScrollDis === undefined ? 200 : _ref$pointerScrollDis,
|
103 | _ref$swipeScrollDista = _ref.swipeScrollDistance,
|
104 | swipeScrollDistance = _ref$swipeScrollDista === undefined ? 300 : _ref$swipeScrollDista,
|
105 | _ref$showLog = _ref.showLog,
|
106 | showLog = _ref$showLog === undefined ? false : _ref$showLog,
|
107 | _ref$noX = _ref.noX,
|
108 | noX = _ref$noX === undefined ? false : _ref$noX,
|
109 | _ref$noY = _ref.noY,
|
110 | noY = _ref$noY === undefined ? false : _ref$noY,
|
111 | _ref$scrollSpeed = _ref.scrollSpeed,
|
112 | scrollSpeed = _ref$scrollSpeed === undefined ? 400 : _ref$scrollSpeed,
|
113 | height = _ref.height,
|
114 | swipeableProps = _ref.swipeableProps,
|
115 | children = _ref.children,
|
116 | width = _ref.width,
|
117 | renderButton = _ref.renderButton;
|
118 |
|
119 | var swipeableRef = externalSwipeableRef ? externalSwipeableRef : (0, _react.useRef)(null);
|
120 |
|
121 | var _useSafeSetState = useSafeSetState({
|
122 | showLeft: false,
|
123 | showRight: false,
|
124 | showUp: false,
|
125 | showDown: false
|
126 | }),
|
127 | _useSafeSetState2 = (0, _slicedToArray3.default)(_useSafeSetState, 2),
|
128 | state = _useSafeSetState2[0],
|
129 | safeSetState = _useSafeSetState2[1];
|
130 |
|
131 | var showLeft = state.showLeft,
|
132 | showRight = state.showRight,
|
133 | showUp = state.showUp,
|
134 | showDown = state.showDown;
|
135 |
|
136 |
|
137 | (0, _react.useEffect)(function () {
|
138 | handleNavButtons();
|
139 | var containerElement = swipeableRef.current;
|
140 |
|
141 | if (typeof window !== 'undefined' && containerElement) {
|
142 | showLog && console.log('Added event listeners');
|
143 |
|
144 | containerElement.addEventListener('scroll', handleNavButtons);
|
145 | window.addEventListener('resize', handleNavButtons);
|
146 | }
|
147 |
|
148 | return function () {
|
149 | var containerElement = swipeableRef.current;
|
150 | if (typeof window !== 'undefined' && containerElement) {
|
151 | showLog && console.log('Removed event listeners');
|
152 |
|
153 | containerElement.removeEventListener('scroll', handleNavButtons);
|
154 | window.removeEventListener('resize', handleNavButtons);
|
155 | }
|
156 | };
|
157 | }, [children]);
|
158 |
|
159 | var handleNavButtons = function () {
|
160 | var _ref2 = (0, _asyncToGenerator3.default)( _regenerator2.default.mark(function _callee() {
|
161 | var containerElement;
|
162 | return _regenerator2.default.wrap(function _callee$(_context) {
|
163 | while (1) {
|
164 | switch (_context.prev = _context.next) {
|
165 | case 0:
|
166 | containerElement = swipeableRef.current;
|
167 |
|
168 |
|
169 |
|
170 |
|
171 |
|
172 |
|
173 |
|
174 |
|
175 |
|
176 |
|
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 |
|
183 |
|
184 |
|
185 |
|
186 |
|
187 | if (!(containerElement.scrollLeft === 0 || containerElement.scrollWidth === containerElement.clientWidth)) {
|
188 | _context.next = 6;
|
189 | break;
|
190 | }
|
191 |
|
192 | _context.next = 4;
|
193 | return safeSetState({ showLeft: false });
|
194 |
|
195 | case 4:
|
196 | _context.next = 9;
|
197 | break;
|
198 |
|
199 | case 6:
|
200 | if (!(containerElement.scrollLeft > 0)) {
|
201 | _context.next = 9;
|
202 | break;
|
203 | }
|
204 |
|
205 | _context.next = 9;
|
206 | return safeSetState({ showLeft: true });
|
207 |
|
208 | case 9:
|
209 | if (!(containerElement.scrollLeft + 1 >= containerElement.scrollWidth - containerElement.clientWidth || containerElement.scrollWidth === containerElement.clientWidth)) {
|
210 | _context.next = 14;
|
211 | break;
|
212 | }
|
213 |
|
214 | _context.next = 12;
|
215 | return safeSetState({ showRight: false });
|
216 |
|
217 | case 12:
|
218 | _context.next = 17;
|
219 | break;
|
220 |
|
221 | case 14:
|
222 | if (!(containerElement.scrollWidth >= containerElement.clientWidth)) {
|
223 | _context.next = 17;
|
224 | break;
|
225 | }
|
226 |
|
227 | _context.next = 17;
|
228 | return safeSetState({ showRight: true });
|
229 |
|
230 | case 17:
|
231 | if (!(containerElement.scrollTop === 0 || containerElement.scrollHeight === containerElement.clientHeight)) {
|
232 | _context.next = 22;
|
233 | break;
|
234 | }
|
235 |
|
236 | _context.next = 20;
|
237 | return safeSetState({ showUp: false });
|
238 |
|
239 | case 20:
|
240 | _context.next = 25;
|
241 | break;
|
242 |
|
243 | case 22:
|
244 | if (!(containerElement.scrollTop > 0)) {
|
245 | _context.next = 25;
|
246 | break;
|
247 | }
|
248 |
|
249 | _context.next = 25;
|
250 | return safeSetState({ showUp: true });
|
251 |
|
252 | case 25:
|
253 | if (!(containerElement.scrollTop + 1 >= containerElement.scrollHeight - containerElement.clientHeight || containerElement.scrollHeight === containerElement.clientHeight)) {
|
254 | _context.next = 30;
|
255 | break;
|
256 | }
|
257 |
|
258 | _context.next = 28;
|
259 | return safeSetState({ showDown: false });
|
260 |
|
261 | case 28:
|
262 | _context.next = 33;
|
263 | break;
|
264 |
|
265 | case 30:
|
266 | if (!(containerElement.scrollTop === 0)) {
|
267 | _context.next = 33;
|
268 | break;
|
269 | }
|
270 |
|
271 | _context.next = 33;
|
272 | return safeSetState({ showDown: true });
|
273 |
|
274 | case 33:
|
275 | case 'end':
|
276 | return _context.stop();
|
277 | }
|
278 | }
|
279 | }, _callee, undefined);
|
280 | }));
|
281 |
|
282 | return function handleNavButtons() {
|
283 | return _ref2.apply(this, arguments);
|
284 | };
|
285 | }();
|
286 |
|
287 | var endScroll = function endScroll(e) {
|
288 | console.log('endScroll');
|
289 | e.stopPropagation();
|
290 | clearInterval(interval);
|
291 | };
|
292 |
|
293 | var startScroll = function startScroll(e, direction) {
|
294 | var scrollDistance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
|
295 | var isContinuous = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
296 | var isTouch = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
297 |
|
298 | console.log('startScroll');
|
299 | e.stopPropagation();
|
300 | var containerElement = swipeableRef.current;
|
301 | clearInterval(interval);
|
302 | var touchMod = isTouch ? -1 : 1;
|
303 | var execScroll = function execScroll() {
|
304 | switch (direction) {
|
305 | case 'Left':
|
306 | containerElement.scrollTo({
|
307 | left: containerElement.scrollLeft - touchMod * scrollDistance,
|
308 | behavior: 'smooth'
|
309 | });
|
310 | break;
|
311 | case 'Right':
|
312 | containerElement.scrollTo({
|
313 | left: containerElement.scrollLeft + touchMod * scrollDistance,
|
314 | behavior: 'smooth'
|
315 | });
|
316 | break;
|
317 | case 'Up':
|
318 | containerElement.scrollTo({
|
319 | top: containerElement.scrollTop - touchMod * scrollDistance,
|
320 | behavior: 'smooth'
|
321 | });
|
322 | break;
|
323 | case 'Down':
|
324 | containerElement.scrollTo({
|
325 | top: containerElement.scrollTop + touchMod * scrollDistance,
|
326 | behavior: 'smooth'
|
327 | });
|
328 | break;
|
329 | }
|
330 | };
|
331 | if (containerElement) {
|
332 | execScroll();
|
333 | interval = isContinuous && setInterval(execScroll, scrollSpeed);
|
334 | }
|
335 | };
|
336 |
|
337 | var renderNav = function renderNav(direction) {
|
338 | var containerElement = swipeableRef.current;
|
339 |
|
340 | var autoHeight = containerElement && containerElement.clientHeight;
|
341 | var autoWidth = 30;
|
342 | var vertWidth = containerElement && containerElement.clientWidth;
|
343 | var vertHeight = 30;
|
344 |
|
345 | var SVGProps = {
|
346 | fill: '#555',
|
347 | size: width ? width : 18
|
348 | };
|
349 | var renderIcon = function renderIcon(_ref3) {
|
350 | var direction = _ref3.direction,
|
351 | props = (0, _objectWithoutProperties3.default)(_ref3, ['direction']);
|
352 |
|
353 | switch (direction) {
|
354 | case 'Right':
|
355 | return _react2.default.createElement(_SVGNext2.default, (0, _extends3.default)({}, SVGProps, { dir: direction }, props));
|
356 | case 'Left':
|
357 | return _react2.default.createElement(_SVGPrev2.default, (0, _extends3.default)({}, SVGProps, { dir: direction }, props));
|
358 | case 'Up':
|
359 | return _react2.default.createElement(_SVGExpandLess2.default, (0, _extends3.default)({}, SVGProps, props));
|
360 | case 'Down':
|
361 | return _react2.default.createElement(_SVGExpandMore2.default, (0, _extends3.default)({}, SVGProps, props));
|
362 | }
|
363 | };
|
364 | var inProp = function inProp(_ref4) {
|
365 | var direction = _ref4.direction;
|
366 |
|
367 | switch (direction) {
|
368 | case 'Right':
|
369 | return showRight;
|
370 | case 'Left':
|
371 | return showLeft;
|
372 | case 'Up':
|
373 | return showUp;
|
374 | case 'Down':
|
375 | return showDown;
|
376 | }
|
377 | };
|
378 |
|
379 | var getXShapeLayout = function getXShapeLayout() {
|
380 | return {
|
381 | width: width ? width : autoWidth,
|
382 | height: height ? height : autoHeight
|
383 | };
|
384 | };
|
385 | var getYShapeLayout = function getYShapeLayout() {
|
386 | return {
|
387 | width: width ? width : vertWidth,
|
388 | height: height ? height : vertHeight
|
389 | };
|
390 | };
|
391 | var getStyle = function getStyle(_ref5) {
|
392 | var direction = _ref5.direction;
|
393 |
|
394 | switch (direction) {
|
395 | case 'Right':
|
396 | return (0, _extends3.default)({
|
397 | top: 0,
|
398 | right: 0
|
399 | }, getXShapeLayout());
|
400 | case 'Left':
|
401 | return (0, _extends3.default)({
|
402 | top: 0
|
403 | }, getXShapeLayout());
|
404 | case 'Up':
|
405 | return (0, _extends3.default)({
|
406 | top: 0
|
407 | }, getYShapeLayout());
|
408 | case 'Down':
|
409 | return (0, _extends3.default)({
|
410 | bottom: 0
|
411 | }, getYShapeLayout());
|
412 | }
|
413 | };
|
414 |
|
415 | return _react2.default.createElement(
|
416 | _RTGTransition2.default,
|
417 | { in: inProp({ direction: direction }) },
|
418 | function (_ref6) {
|
419 | var transitionStyle = _ref6.style;
|
420 |
|
421 | var getButtonProps = function getButtonProps() {
|
422 | var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
423 |
|
424 | var style = _ref7.style,
|
425 | className = _ref7.className,
|
426 | colors = _ref7.colors,
|
427 | props = (0, _objectWithoutProperties3.default)(_ref7, ['style', 'className', 'colors']);
|
428 | return (0, _extends3.default)({
|
429 | onPointerDown: function onPointerDown(e) {
|
430 | return startScroll(e, direction, pointerScrollDistance, true);
|
431 | },
|
432 | onPointerUp: function onPointerUp(e) {
|
433 | return endScroll(e);
|
434 | },
|
435 | className: (0, _helperFunctions.advancedMulti)({
|
436 | unflattenedBases: [className, 'accordion__navbutton'],
|
437 | suffixes: ['--' + direction.toLowerCase()]
|
438 | }),
|
439 | colors: colors ? colors : _.buttonStyles.violet,
|
440 | style: (0, _extends3.default)({}, transitionStyle, {
|
441 | padding: 0,
|
442 | position: 'absolute'
|
443 | }, getStyle({ direction: direction }), style)
|
444 | }, props);
|
445 | };
|
446 | return renderButton ? renderButton({ getButtonProps: getButtonProps, renderIcon: renderIcon, direction: direction }) : _react2.default.createElement(
|
447 | _Button2.default,
|
448 | (0, _extends3.default)({}, getButtonProps({
|
449 | colors: 'smoke'
|
450 | })),
|
451 | renderIcon({ direction: direction, fill: '#555' })
|
452 | );
|
453 | }
|
454 | );
|
455 | };
|
456 |
|
457 | var handlers = (0, _reactSwipeable.useSwipeable)({
|
458 | onSwiped: function onSwiped(e) {
|
459 | startScroll(e.event, e.dir, swipeScrollDistance, false, true);
|
460 | },
|
461 | preventDefaultTouchmoveEvent: true
|
462 | });
|
463 |
|
464 | return typeof window !== 'undefined' && _react2.default.createElement(
|
465 | _react2.default.Fragment,
|
466 | null,
|
467 | !noX && renderNav('Left'),
|
468 | !noY && renderNav('Up'),
|
469 | typeof children === 'function' ? children({ handlers: handlers, swipeableRef: swipeableRef }) : _react2.default.createElement(
|
470 | 'div',
|
471 | (0, _extends3.default)({}, handlers, {
|
472 | ref: swipeableRef
|
473 | }, swipeableProps),
|
474 | children
|
475 | ),
|
476 | !noX && renderNav('Right'),
|
477 | !noY && renderNav('Down')
|
478 | );
|
479 | };
|
480 |
|
481 | exports.default = _react2.default.memo(Accordion); |
\ | No newline at end of file |