react-misc-toolbox/dist/MultiplePageModal.js

- [ ] diagramexample | optimize creating from blank slate

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _defaultStyles = require('./defaultStyles');

var _recompose = require('recompose');

var _sharedHandlers = require('./sharedHandlers');

var _ModalDialog = require('./ModalDialog');

var _ModalDialog2 = _interopRequireDefault(_ModalDialog);

var _StyledModal = require('./StyledModal');

var _RTGTransition = require('./RTGTransition');

var _RTGTransition2 = _interopRequireDefault(_RTGTransition);

var _ResizeListener = require('./ResizeListener');

var _ResizeListener2 = _interopRequireDefault(_ResizeListener);

var _Step = require('./Step');

var _Step2 = _interopRequireDefault(_Step);

var _Button = require('./Button');

var _Button2 = _interopRequireDefault(_Button);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var MultiplePageModal = function MultiplePageModal(_ref) {
  var _ref$isFreeNavigation = _ref.isFreeNavigation,
      isFreeNavigation = _ref$isFreeNavigation === undefined ? true : _ref$isFreeNavigation,
      renderCloseModalButton = _ref.renderCloseModalButton,
      className = _ref.className,
      style = _ref.style,
      _ref$pageNavigationBu = _ref.pageNavigationButtonsAreDisabled,
      pageNavigationButtonsAreDisabled = _ref$pageNavigationBu === undefined ? false : _ref$pageNavigationBu,
      _ref$renderNextButton = _ref.renderNextButton,
      renderNextButton = _ref$renderNextButton === undefined ? function (_ref2) {
    var getButtonProps = _ref2.getButtonProps,
        goToNextPage = _ref2.goToNextPage,
        isDisabled = _ref2.isDisabled;
    return _react2.default.createElement(
      _Button2.default,
      (0, _extends3.default)({}, getButtonProps({ onClick: goToNextPage }), { isDisabled: isDisabled }),
      'NEXT'
    );
  } : _ref$renderNextButton,
      _ref$renderBackButton = _ref.renderBackButton,
      renderBackButton = _ref$renderBackButton === undefined ? function (_ref3) {
    var getButtonProps = _ref3.getButtonProps,
        goToPreviousPage = _ref3.goToPreviousPage,
        isDisabled = _ref3.isDisabled;
    return _react2.default.createElement(
      _Button2.default,
      (0, _extends3.default)({}, getButtonProps({ onClick: goToPreviousPage }), { isDisabled: isDisabled }),
      'BACK'
    );
  } : _ref$renderBackButton,
      _ref$isDemo = _ref.isDemo,
      isDemo = _ref$isDemo === undefined ? false : _ref$isDemo,
      _ref$onCloseModal = _ref.onCloseModal,
      onCloseModal = _ref$onCloseModal === undefined ? function () {
    return null;
  } : _ref$onCloseModal,
      _ref$onOpenModal = _ref.onOpenModal,
      onOpenModal = _ref$onOpenModal === undefined ? function () {
    return null;
  } : _ref$onOpenModal,
      setExternalModalIsOpenTo = _ref.setExternalModalIsOpenTo,
      _ref$noCloseModalButt = _ref.noCloseModalButton,
      noCloseModalButton = _ref$noCloseModalButt === undefined ? false : _ref$noCloseModalButt,
      renderTrigger = _ref.renderTrigger,
      _ref$onMount = _ref.onMount,
      onMount = _ref$onMount === undefined ? function () {
    return null;
  } : _ref$onMount,
      _ref$onUnmount = _ref.onUnmount,
      onUnmount = _ref$onUnmount === undefined ? function () {
    return null;
  } : _ref$onUnmount,
      pages = _ref.pages,
      steps = _ref.steps,
      _ref$stepWidth = _ref.stepWidth,
      stepWidth = _ref$stepWidth === undefined ? 300 : _ref$stepWidth,
      _ref$backgroundProps = _ref.backgroundProps,
      backgroundProps = _ref$backgroundProps === undefined ? {
    className: '',
    style: {}
  } : _ref$backgroundProps;

  var renderPageNavigationButtons = function renderPageNavigationButtons(_ref4) {
    var currentPage = _ref4.currentPage,
        length = _ref4.length,
        getButtonProps = _ref4.getButtonProps;

    var renderNext = function renderNext() {
      var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
          _ref5$isDisabled = _ref5.isDisabled,
          isDisabled = _ref5$isDisabled === undefined ? false : _ref5$isDisabled;

      return renderNextButton({
        getButtonProps: getButtonProps,
        isDisabled: pageNavigationButtonsAreDisabled || isDisabled,
        goToNextPage: goToNextPage
      });
    };
    var renderBack = function renderBack() {
      var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
          _ref6$isDisabled = _ref6.isDisabled,
          isDisabled = _ref6$isDisabled === undefined ? false : _ref6$isDisabled;

      return renderBackButton({
        getButtonProps: getButtonProps,
        isDisabled: isDisabled,
        goToPreviousPage: goToPreviousPage
      });
    };
    if (currentPage === 0) {
      return _react2.default.createElement(
        _react.Fragment,
        null,
        renderBack({ isDisabled: true }),
        renderNext()
      );
    }
    if (currentPage === length - 1) {
      return _react2.default.createElement(
        _react.Fragment,
        null,
        renderBack(),
        renderNext({ isDisabled: true })
      );
    } else {
      return _react2.default.createElement(
        _react2.default.Fragment,
        null,
        renderBack(),
        renderNext()
      );
    }
  };

  var _useReducer = (0, _react.useReducer)(function (state, newState) {
    return (0, _extends3.default)({}, state, newState);
  }, {
    modalIsOpen: false,
    currentPage: 0
  }),
      _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
      state = _useReducer2[0],
      setState = _useReducer2[1];

  var closeModal = function () {
    var _ref7 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
      return _regenerator2.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.next = 2;
              return setState({ modalIsOpen: false });

            case 2:
              setExternalModalIsOpenTo && setExternalModalIsOpenTo(false);
              onCloseModal && onCloseModal();

            case 4:
            case 'end':
              return _context.stop();
          }
        }
      }, _callee, undefined);
    }));

    return function closeModal() {
      return _ref7.apply(this, arguments);
    };
  }();

  var setCurrentPageTo = function setCurrentPageTo(n) {
    setState({ currentPage: n });
  };
  var setModalIsOpenTo = function setModalIsOpenTo(bool) {
    setState({ modalIsOpen: bool });
  };
  var openModal = function () {
    var _ref8 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee2() {
      return _regenerator2.default.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              _context2.next = 2;
              return setState({ modalIsOpen: true });

            case 2:
              setExternalModalIsOpenTo && setExternalModalIsOpenTo(true);
              onOpenModal && onOpenModal();

            case 4:
            case 'end':
              return _context2.stop();
          }
        }
      }, _callee2, undefined);
    }));

    return function openModal() {
      return _ref8.apply(this, arguments);
    };
  }();

  var toggleModalIsOpen = function () {
    var _ref9 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee3() {
      return _regenerator2.default.wrap(function _callee3$(_context3) {
        while (1) {
          switch (_context3.prev = _context3.next) {
            case 0:
              _context3.next = 2;
              return setState({ modalIsOpen: !state.modalIsOpen });

            case 2:
              _context3.t0 = setExternalModalIsOpenTo;

              if (!_context3.t0) {
                _context3.next = 6;
                break;
              }

              _context3.next = 6;
              return setExternalModalIsOpenTo(externalModalIsOpen);

            case 6:
              _context3.t1 = onOpenModal && modalIsOpen;

              if (!_context3.t1) {
                _context3.next = 10;
                break;
              }

              _context3.next = 10;
              return onOpenModal();

            case 10:
              _context3.t2 = onCloseModal && !modalIsOpen;

              if (!_context3.t2) {
                _context3.next = 14;
                break;
              }

              _context3.next = 14;
              return onCloseModal();

            case 14:
            case 'end':
              return _context3.stop();
          }
        }
      }, _callee3, undefined);
    }));

    return function toggleModalIsOpen() {
      return _ref9.apply(this, arguments);
    };
  }();

  var goToNextPage = function goToNextPage(e) {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    setState({
      currentPage: currentPage === pages.length - 1 ? currentPage : currentPage + 1
    });
  };

  var goToPreviousPage = function goToPreviousPage(e) {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    setState({ currentPage: currentPage === 0 ? currentPage : currentPage - 1 });
  };

  var renderSteps = function renderSteps(currentPageNumber, steps) {
    var flexDirectionThreshold = stepWidth * steps.length;
    return _react2.default.createElement(
      _StyledModal.STEPS,
      {
        className: 'multiplepagemodal__steps',
        flexDirectionThreshold: flexDirectionThreshold
      },
      steps.map(function (_ref10, stepNumber) {
        var renderStep = _ref10.renderStep;

        var handleOnClick = function handleOnClick() {
          return setCurrentPageTo(stepNumber);
        };

        var isUnavailable = stepNumber > currentPageNumber && pageNavigationButtonsAreDisabled;
        var isOutOfReach = !isFreeNavigation && stepNumber > currentPageNumber + 1;
        return _react2.default.createElement(_Step2.default, {
          onClick: handleOnClick,
          flexDirectionThreshold: flexDirectionThreshold,
          key: stepNumber,
          isActive: currentPageNumber === stepNumber,
          isDisabled: isUnavailable || isOutOfReach,
          isComplete: currentPageNumber > stepNumber,
          isLast: stepNumber === steps.length - 1,
          renderStep: renderStep
        });
      })
    );
  };

  var getTriggerProps = function getTriggerProps() {
    var _ref11 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var _onClick = _ref11.onClick,
        className = _ref11.className,
        props = (0, _objectWithoutProperties3.default)(_ref11, ['onClick', 'className']);
    return (0, _extends3.default)({
      onClick: function onClick(e) {
        for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
          args[_key - 1] = arguments[_key];
        }

        e.stopPropagation();
        setModalIsOpenTo(true);
        _onClick && _onClick.apply(undefined, [e].concat(args));
      },
      className: className ? 'modal__trigger ' + className : 'modal__trigger'

    }, props);
  };
  var getBackgroundProps = function getBackgroundProps() {
    var _ref12 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var _onClick2 = _ref12.onClick,
        style = _ref12.style,
        className = _ref12.className,
        props = (0, _objectWithoutProperties3.default)(_ref12, ['onClick', 'style', 'className']);
    return (0, _extends3.default)({
      onClick: function onClick(e) {
        for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
          args[_key2 - 1] = arguments[_key2];
        }

        e.stopPropagation();
        setModalIsOpenTo(false);
        _onClick2 && _onClick2.apply(undefined, [e].concat(args));
      },
      className: className ? 'modal__background ' + className : 'modal__background',
      style: style
    }, props);
  };

  var currentPage = state.currentPage;


  var renderModalDialog = function renderModalDialog() {
    var _ref13 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
        isDebug = _ref13.isDebug;

    return _react2.default.createElement(
      _react.Fragment,
      null,
      pages.map(function (page, i) {
        return currentPage === i && _react2.default.createElement(_ModalDialog2.default, {
          shouldKeepCount: !isDebug,
          renderCloseModalButton: renderCloseModalButton,
          noCloseModalButton: isDebug || noCloseModalButton,
          setModalIsOpenTo: setModalIsOpenTo,
          onMount: onMount,
          onUnmount: onUnmount,
          className: ['multiplepagemodal__container', className],
          style: style,
          closeModal: closeModal,
          key: currentPage,
          renderHeader: function renderHeader(_ref14) {
            var getHeaderProps = _ref14.getHeaderProps;
            return page.renderHeader ? page.renderHeader({
              getHeaderProps: getHeaderProps,
              renderSteps: renderSteps(currentPage, steps)
            }) : steps ? _react2.default.createElement(
              _StyledModal.HEADER,
              getHeaderProps(),
              renderSteps(currentPage, steps)
            ) : null;
          },

          renderButtons: function renderButtons(_ref15) {
            var getButtonProps = _ref15.getButtonProps,
                getButtonsProps = _ref15.getButtonsProps;
            return page.renderButtons ? page.renderButtons({
              getButtonProps: getButtonProps,
              getButtonsProps: getButtonsProps,
              renderPageNavigationButtons: renderPageNavigationButtons({
                currentPage: currentPage,
                length: pages.length,
                getButtonProps: getButtonProps
              })
            }) : _react2.default.createElement(
              _StyledModal.BUTTONS,
              (0, _extends3.default)({}, getButtonsProps()),
              renderPageNavigationButtons({
                currentPage: i,
                length: pages.length,
                getButtonProps: getButtonProps
              })
            );
          },

          renderBody: function renderBody(_ref16) {
            var getBodyProps = _ref16.getBodyProps;
            return page.renderBody ? page.renderBody({
              getBodyProps: getBodyProps,
              setCurrentPageTo: setCurrentPageTo,
              toggleModalIsOpen: toggleModalIsOpen
            }) : _react2.default.createElement(
              _StyledModal.BODY,
              (0, _extends3.default)({}, getBodyProps()),
              page.renderBody({ setCurrentPageTo: setCurrentPageTo, toggleModalIsOpen: toggleModalIsOpen })
            );
          }
        });
      })
    );
  };

  return _react2.default.createElement(
    _react2.default.Fragment,
    null,
    renderTrigger && renderTrigger({
      modalIsOpen: state.modalIsOpen,
      toggleModalIsOpen: toggleModalIsOpen,
      getTriggerProps: getTriggerProps
    }),
    isDemo && renderModalDialog({ isDebug: true }),
    _react2.default.createElement(
      _RTGTransition2.default,
      { in: state.modalIsOpen },
      function (_ref17) {
        var transitionStyle = _ref17.style;
        return _react2.default.createElement(
          _StyledModal.USHIRO,
          (0, _extends3.default)({}, getBackgroundProps({
            style: (0, _extends3.default)({}, transitionStyle, backgroundProps.style),
            className: backgroundProps.className ? 'modal__background ' + backgroundProps.className : 'modal__background'
          })),
          renderModalDialog()
        );
      }
    )
  );
}; // rearrange next/back buttons for ease of use


MultiplePageModal.propTypes = {
  pageNavigationButtonsAreDisabled: _propTypes2.default.bool,
  pages: _propTypes2.default.array.isRequired,
  steps: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    renderStep: _propTypes2.default.func.isRequired
  })).isRequired,
  noCloseModalButton: _propTypes2.default.bool
};

exports.default = MultiplePageModal;