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 _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
|
20 |
|
21 | var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
|
22 |
|
23 | var _extends2 = require('babel-runtime/helpers/extends');
|
24 |
|
25 | var _extends3 = _interopRequireDefault(_extends2);
|
26 |
|
27 | var _propTypes = require('prop-types');
|
28 |
|
29 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
30 |
|
31 | var _react = require('react');
|
32 |
|
33 | var _react2 = _interopRequireDefault(_react);
|
34 |
|
35 | var _defaultStyles = require('./defaultStyles');
|
36 |
|
37 | var _recompose = require('recompose');
|
38 |
|
39 | var _sharedHandlers = require('./sharedHandlers');
|
40 |
|
41 | var _ModalDialog = require('./ModalDialog');
|
42 |
|
43 | var _ModalDialog2 = _interopRequireDefault(_ModalDialog);
|
44 |
|
45 | var _StyledModal = require('./StyledModal');
|
46 |
|
47 | var _RTGTransition = require('./RTGTransition');
|
48 |
|
49 | var _RTGTransition2 = _interopRequireDefault(_RTGTransition);
|
50 |
|
51 | var _ResizeListener = require('./ResizeListener');
|
52 |
|
53 | var _ResizeListener2 = _interopRequireDefault(_ResizeListener);
|
54 |
|
55 | var _Step = require('./Step');
|
56 |
|
57 | var _Step2 = _interopRequireDefault(_Step);
|
58 |
|
59 | var _Button = require('./Button');
|
60 |
|
61 | var _Button2 = _interopRequireDefault(_Button);
|
62 |
|
63 | var _styledComponents = require('styled-components');
|
64 |
|
65 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
66 |
|
67 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
68 |
|
69 | var MultiplePageModal = function MultiplePageModal(_ref) {
|
70 | var _ref$isFreeNavigation = _ref.isFreeNavigation,
|
71 | isFreeNavigation = _ref$isFreeNavigation === undefined ? true : _ref$isFreeNavigation,
|
72 | renderCloseModalButton = _ref.renderCloseModalButton,
|
73 | className = _ref.className,
|
74 | style = _ref.style,
|
75 | _ref$pageNavigationBu = _ref.pageNavigationButtonsAreDisabled,
|
76 | pageNavigationButtonsAreDisabled = _ref$pageNavigationBu === undefined ? false : _ref$pageNavigationBu,
|
77 | _ref$renderNextButton = _ref.renderNextButton,
|
78 | renderNextButton = _ref$renderNextButton === undefined ? function (_ref2) {
|
79 | var getButtonProps = _ref2.getButtonProps,
|
80 | goToNextPage = _ref2.goToNextPage,
|
81 | isDisabled = _ref2.isDisabled;
|
82 | return _react2.default.createElement(
|
83 | _Button2.default,
|
84 | (0, _extends3.default)({}, getButtonProps({ onClick: goToNextPage }), { isDisabled: isDisabled }),
|
85 | 'NEXT'
|
86 | );
|
87 | } : _ref$renderNextButton,
|
88 | _ref$renderBackButton = _ref.renderBackButton,
|
89 | renderBackButton = _ref$renderBackButton === undefined ? function (_ref3) {
|
90 | var getButtonProps = _ref3.getButtonProps,
|
91 | goToPreviousPage = _ref3.goToPreviousPage,
|
92 | isDisabled = _ref3.isDisabled;
|
93 | return _react2.default.createElement(
|
94 | _Button2.default,
|
95 | (0, _extends3.default)({}, getButtonProps({ onClick: goToPreviousPage }), { isDisabled: isDisabled }),
|
96 | 'BACK'
|
97 | );
|
98 | } : _ref$renderBackButton,
|
99 | _ref$isDemo = _ref.isDemo,
|
100 | isDemo = _ref$isDemo === undefined ? false : _ref$isDemo,
|
101 | _ref$onCloseModal = _ref.onCloseModal,
|
102 | onCloseModal = _ref$onCloseModal === undefined ? function () {
|
103 | return null;
|
104 | } : _ref$onCloseModal,
|
105 | _ref$onOpenModal = _ref.onOpenModal,
|
106 | onOpenModal = _ref$onOpenModal === undefined ? function () {
|
107 | return null;
|
108 | } : _ref$onOpenModal,
|
109 | setExternalModalIsOpenTo = _ref.setExternalModalIsOpenTo,
|
110 | _ref$noCloseModalButt = _ref.noCloseModalButton,
|
111 | noCloseModalButton = _ref$noCloseModalButt === undefined ? false : _ref$noCloseModalButt,
|
112 | renderTrigger = _ref.renderTrigger,
|
113 | _ref$onMount = _ref.onMount,
|
114 | onMount = _ref$onMount === undefined ? function () {
|
115 | return null;
|
116 | } : _ref$onMount,
|
117 | _ref$onUnmount = _ref.onUnmount,
|
118 | onUnmount = _ref$onUnmount === undefined ? function () {
|
119 | return null;
|
120 | } : _ref$onUnmount,
|
121 | pages = _ref.pages,
|
122 | steps = _ref.steps,
|
123 | _ref$stepWidth = _ref.stepWidth,
|
124 | stepWidth = _ref$stepWidth === undefined ? 300 : _ref$stepWidth,
|
125 | _ref$backgroundProps = _ref.backgroundProps,
|
126 | backgroundProps = _ref$backgroundProps === undefined ? {
|
127 | className: '',
|
128 | style: {}
|
129 | } : _ref$backgroundProps;
|
130 |
|
131 | var renderPageNavigationButtons = function renderPageNavigationButtons(_ref4) {
|
132 | var currentPage = _ref4.currentPage,
|
133 | length = _ref4.length,
|
134 | getButtonProps = _ref4.getButtonProps;
|
135 |
|
136 | var renderNext = function renderNext() {
|
137 | var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
138 | _ref5$isDisabled = _ref5.isDisabled,
|
139 | isDisabled = _ref5$isDisabled === undefined ? false : _ref5$isDisabled;
|
140 |
|
141 | return renderNextButton({
|
142 | getButtonProps: getButtonProps,
|
143 | isDisabled: pageNavigationButtonsAreDisabled || isDisabled,
|
144 | goToNextPage: goToNextPage
|
145 | });
|
146 | };
|
147 | var renderBack = function renderBack() {
|
148 | var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
149 | _ref6$isDisabled = _ref6.isDisabled,
|
150 | isDisabled = _ref6$isDisabled === undefined ? false : _ref6$isDisabled;
|
151 |
|
152 | return renderBackButton({
|
153 | getButtonProps: getButtonProps,
|
154 | isDisabled: isDisabled,
|
155 | goToPreviousPage: goToPreviousPage
|
156 | });
|
157 | };
|
158 | if (currentPage === 0) {
|
159 | return _react2.default.createElement(
|
160 | _react.Fragment,
|
161 | null,
|
162 | renderBack({ isDisabled: true }),
|
163 | renderNext()
|
164 | );
|
165 | }
|
166 | if (currentPage === length - 1) {
|
167 | return _react2.default.createElement(
|
168 | _react.Fragment,
|
169 | null,
|
170 | renderBack(),
|
171 | renderNext({ isDisabled: true })
|
172 | );
|
173 | } else {
|
174 | return _react2.default.createElement(
|
175 | _react2.default.Fragment,
|
176 | null,
|
177 | renderBack(),
|
178 | renderNext()
|
179 | );
|
180 | }
|
181 | };
|
182 |
|
183 | var _useReducer = (0, _react.useReducer)(function (state, newState) {
|
184 | return (0, _extends3.default)({}, state, newState);
|
185 | }, {
|
186 | modalIsOpen: false,
|
187 | currentPage: 0
|
188 | }),
|
189 | _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
|
190 | state = _useReducer2[0],
|
191 | setState = _useReducer2[1];
|
192 |
|
193 | var closeModal = function () {
|
194 | var _ref7 = (0, _asyncToGenerator3.default)( _regenerator2.default.mark(function _callee() {
|
195 | return _regenerator2.default.wrap(function _callee$(_context) {
|
196 | while (1) {
|
197 | switch (_context.prev = _context.next) {
|
198 | case 0:
|
199 | _context.next = 2;
|
200 | return setState({ modalIsOpen: false });
|
201 |
|
202 | case 2:
|
203 | setExternalModalIsOpenTo && setExternalModalIsOpenTo(false);
|
204 | onCloseModal && onCloseModal();
|
205 |
|
206 | case 4:
|
207 | case 'end':
|
208 | return _context.stop();
|
209 | }
|
210 | }
|
211 | }, _callee, undefined);
|
212 | }));
|
213 |
|
214 | return function closeModal() {
|
215 | return _ref7.apply(this, arguments);
|
216 | };
|
217 | }();
|
218 |
|
219 | var setCurrentPageTo = function setCurrentPageTo(n) {
|
220 | setState({ currentPage: n });
|
221 | };
|
222 | var setModalIsOpenTo = function setModalIsOpenTo(bool) {
|
223 | setState({ modalIsOpen: bool });
|
224 | };
|
225 | var openModal = function () {
|
226 | var _ref8 = (0, _asyncToGenerator3.default)( _regenerator2.default.mark(function _callee2() {
|
227 | return _regenerator2.default.wrap(function _callee2$(_context2) {
|
228 | while (1) {
|
229 | switch (_context2.prev = _context2.next) {
|
230 | case 0:
|
231 | _context2.next = 2;
|
232 | return setState({ modalIsOpen: true });
|
233 |
|
234 | case 2:
|
235 | setExternalModalIsOpenTo && setExternalModalIsOpenTo(true);
|
236 | onOpenModal && onOpenModal();
|
237 |
|
238 | case 4:
|
239 | case 'end':
|
240 | return _context2.stop();
|
241 | }
|
242 | }
|
243 | }, _callee2, undefined);
|
244 | }));
|
245 |
|
246 | return function openModal() {
|
247 | return _ref8.apply(this, arguments);
|
248 | };
|
249 | }();
|
250 |
|
251 | var toggleModalIsOpen = function () {
|
252 | var _ref9 = (0, _asyncToGenerator3.default)( _regenerator2.default.mark(function _callee3() {
|
253 | return _regenerator2.default.wrap(function _callee3$(_context3) {
|
254 | while (1) {
|
255 | switch (_context3.prev = _context3.next) {
|
256 | case 0:
|
257 | _context3.next = 2;
|
258 | return setState({ modalIsOpen: !state.modalIsOpen });
|
259 |
|
260 | case 2:
|
261 | _context3.t0 = setExternalModalIsOpenTo;
|
262 |
|
263 | if (!_context3.t0) {
|
264 | _context3.next = 6;
|
265 | break;
|
266 | }
|
267 |
|
268 | _context3.next = 6;
|
269 | return setExternalModalIsOpenTo(externalModalIsOpen);
|
270 |
|
271 | case 6:
|
272 | _context3.t1 = onOpenModal && modalIsOpen;
|
273 |
|
274 | if (!_context3.t1) {
|
275 | _context3.next = 10;
|
276 | break;
|
277 | }
|
278 |
|
279 | _context3.next = 10;
|
280 | return onOpenModal();
|
281 |
|
282 | case 10:
|
283 | _context3.t2 = onCloseModal && !modalIsOpen;
|
284 |
|
285 | if (!_context3.t2) {
|
286 | _context3.next = 14;
|
287 | break;
|
288 | }
|
289 |
|
290 | _context3.next = 14;
|
291 | return onCloseModal();
|
292 |
|
293 | case 14:
|
294 | case 'end':
|
295 | return _context3.stop();
|
296 | }
|
297 | }
|
298 | }, _callee3, undefined);
|
299 | }));
|
300 |
|
301 | return function toggleModalIsOpen() {
|
302 | return _ref9.apply(this, arguments);
|
303 | };
|
304 | }();
|
305 |
|
306 | var goToNextPage = function goToNextPage(e) {
|
307 | e.stopPropagation();
|
308 | e.nativeEvent.stopImmediatePropagation();
|
309 | setState({
|
310 | currentPage: currentPage === pages.length - 1 ? currentPage : currentPage + 1
|
311 | });
|
312 | };
|
313 |
|
314 | var goToPreviousPage = function goToPreviousPage(e) {
|
315 | e.stopPropagation();
|
316 | e.nativeEvent.stopImmediatePropagation();
|
317 | setState({ currentPage: currentPage === 0 ? currentPage : currentPage - 1 });
|
318 | };
|
319 |
|
320 | var renderSteps = function renderSteps(currentPageNumber, steps) {
|
321 | var flexDirectionThreshold = stepWidth * steps.length;
|
322 | return _react2.default.createElement(
|
323 | _StyledModal.STEPS,
|
324 | {
|
325 | className: 'multiplepagemodal__steps',
|
326 | flexDirectionThreshold: flexDirectionThreshold
|
327 | },
|
328 | steps.map(function (_ref10, stepNumber) {
|
329 | var renderStep = _ref10.renderStep;
|
330 |
|
331 | var handleOnClick = function handleOnClick() {
|
332 | return setCurrentPageTo(stepNumber);
|
333 | };
|
334 |
|
335 | var isUnavailable = stepNumber > currentPageNumber && pageNavigationButtonsAreDisabled;
|
336 | var isOutOfReach = !isFreeNavigation && stepNumber > currentPageNumber + 1;
|
337 | return _react2.default.createElement(_Step2.default, {
|
338 | onClick: handleOnClick,
|
339 | flexDirectionThreshold: flexDirectionThreshold,
|
340 | key: stepNumber,
|
341 | isActive: currentPageNumber === stepNumber,
|
342 | isDisabled: isUnavailable || isOutOfReach,
|
343 | isComplete: currentPageNumber > stepNumber,
|
344 | isLast: stepNumber === steps.length - 1,
|
345 | renderStep: renderStep
|
346 | });
|
347 | })
|
348 | );
|
349 | };
|
350 |
|
351 | var getTriggerProps = function getTriggerProps() {
|
352 | var _ref11 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
353 |
|
354 | var _onClick = _ref11.onClick,
|
355 | className = _ref11.className,
|
356 | props = (0, _objectWithoutProperties3.default)(_ref11, ['onClick', 'className']);
|
357 | return (0, _extends3.default)({
|
358 | onClick: function onClick(e) {
|
359 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
360 | args[_key - 1] = arguments[_key];
|
361 | }
|
362 |
|
363 | e.stopPropagation();
|
364 | setModalIsOpenTo(true);
|
365 | _onClick && _onClick.apply(undefined, [e].concat(args));
|
366 | },
|
367 | className: className ? 'modal__trigger ' + className : 'modal__trigger'
|
368 |
|
369 | }, props);
|
370 | };
|
371 | var getBackgroundProps = function getBackgroundProps() {
|
372 | var _ref12 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
373 |
|
374 | var _onClick2 = _ref12.onClick,
|
375 | style = _ref12.style,
|
376 | className = _ref12.className,
|
377 | props = (0, _objectWithoutProperties3.default)(_ref12, ['onClick', 'style', 'className']);
|
378 | return (0, _extends3.default)({
|
379 | onClick: function onClick(e) {
|
380 | for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
381 | args[_key2 - 1] = arguments[_key2];
|
382 | }
|
383 |
|
384 | e.stopPropagation();
|
385 | setModalIsOpenTo(false);
|
386 | _onClick2 && _onClick2.apply(undefined, [e].concat(args));
|
387 | },
|
388 | className: className ? 'modal__background ' + className : 'modal__background',
|
389 | style: style
|
390 | }, props);
|
391 | };
|
392 |
|
393 | var currentPage = state.currentPage;
|
394 |
|
395 |
|
396 | var renderModalDialog = function renderModalDialog() {
|
397 | var _ref13 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
398 | isDebug = _ref13.isDebug;
|
399 |
|
400 | return _react2.default.createElement(
|
401 | _react.Fragment,
|
402 | null,
|
403 | pages.map(function (page, i) {
|
404 | return currentPage === i && _react2.default.createElement(_ModalDialog2.default, {
|
405 | shouldKeepCount: !isDebug,
|
406 | renderCloseModalButton: renderCloseModalButton,
|
407 | noCloseModalButton: isDebug || noCloseModalButton,
|
408 | setModalIsOpenTo: setModalIsOpenTo,
|
409 | onMount: onMount,
|
410 | onUnmount: onUnmount,
|
411 | className: ['multiplepagemodal__container', className],
|
412 | style: style,
|
413 | closeModal: closeModal,
|
414 | key: currentPage,
|
415 | renderHeader: function renderHeader(_ref14) {
|
416 | var getHeaderProps = _ref14.getHeaderProps;
|
417 | return page.renderHeader ? page.renderHeader({
|
418 | getHeaderProps: getHeaderProps,
|
419 | renderSteps: renderSteps(currentPage, steps)
|
420 | }) : steps ? _react2.default.createElement(
|
421 | _StyledModal.HEADER,
|
422 | getHeaderProps(),
|
423 | renderSteps(currentPage, steps)
|
424 | ) : null;
|
425 | },
|
426 |
|
427 | renderButtons: function renderButtons(_ref15) {
|
428 | var getButtonProps = _ref15.getButtonProps,
|
429 | getButtonsProps = _ref15.getButtonsProps;
|
430 | return page.renderButtons ? page.renderButtons({
|
431 | getButtonProps: getButtonProps,
|
432 | getButtonsProps: getButtonsProps,
|
433 | renderPageNavigationButtons: renderPageNavigationButtons({
|
434 | currentPage: currentPage,
|
435 | length: pages.length,
|
436 | getButtonProps: getButtonProps
|
437 | })
|
438 | }) : _react2.default.createElement(
|
439 | _StyledModal.BUTTONS,
|
440 | (0, _extends3.default)({}, getButtonsProps()),
|
441 | renderPageNavigationButtons({
|
442 | currentPage: i,
|
443 | length: pages.length,
|
444 | getButtonProps: getButtonProps
|
445 | })
|
446 | );
|
447 | },
|
448 |
|
449 | renderBody: function renderBody(_ref16) {
|
450 | var getBodyProps = _ref16.getBodyProps;
|
451 | return page.renderBody ? page.renderBody({
|
452 | getBodyProps: getBodyProps,
|
453 | setCurrentPageTo: setCurrentPageTo,
|
454 | toggleModalIsOpen: toggleModalIsOpen
|
455 | }) : _react2.default.createElement(
|
456 | _StyledModal.BODY,
|
457 | (0, _extends3.default)({}, getBodyProps()),
|
458 | page.renderBody({ setCurrentPageTo: setCurrentPageTo, toggleModalIsOpen: toggleModalIsOpen })
|
459 | );
|
460 | }
|
461 | });
|
462 | })
|
463 | );
|
464 | };
|
465 |
|
466 | return _react2.default.createElement(
|
467 | _react2.default.Fragment,
|
468 | null,
|
469 | renderTrigger && renderTrigger({
|
470 | modalIsOpen: state.modalIsOpen,
|
471 | toggleModalIsOpen: toggleModalIsOpen,
|
472 | getTriggerProps: getTriggerProps
|
473 | }),
|
474 | isDemo && renderModalDialog({ isDebug: true }),
|
475 | _react2.default.createElement(
|
476 | _RTGTransition2.default,
|
477 | { in: state.modalIsOpen },
|
478 | function (_ref17) {
|
479 | var transitionStyle = _ref17.style;
|
480 | return _react2.default.createElement(
|
481 | _StyledModal.USHIRO,
|
482 | (0, _extends3.default)({}, getBackgroundProps({
|
483 | style: (0, _extends3.default)({}, transitionStyle, backgroundProps.style),
|
484 | className: backgroundProps.className ? 'modal__background ' + backgroundProps.className : 'modal__background'
|
485 | })),
|
486 | renderModalDialog()
|
487 | );
|
488 | }
|
489 | )
|
490 | );
|
491 | };
|
492 |
|
493 |
|
494 | MultiplePageModal.propTypes = {
|
495 | pageNavigationButtonsAreDisabled: _propTypes2.default.bool,
|
496 | pages: _propTypes2.default.array.isRequired,
|
497 | steps: _propTypes2.default.arrayOf(_propTypes2.default.shape({
|
498 | renderStep: _propTypes2.default.func.isRequired
|
499 | })).isRequired,
|
500 | noCloseModalButton: _propTypes2.default.bool
|
501 | };
|
502 |
|
503 | exports.default = MultiplePageModal; |
\ | No newline at end of file |