@lonelyplanet/dotcom-core/dist/components/authModal/index.js

This package is meant to house some of our more common UI and shared libs across dotcom applications.

"use strict";

var __extends = this && this.__extends || function () {
  var extendStatics = Object.setPrototypeOf || {
    __proto__: []
  } instanceof Array && function (d, b) {
    d.__proto__ = b;
  } || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  };

  return function (d, b) {
    extendStatics(d, b);

    function __() {
      this.constructor = d;
    }

    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  };
}();

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

var icon_1 = require("backpack-ui/dist/components/icon");

var modal_1 = require("backpack-ui/dist/components/modal");

var multiStep_1 = require("backpack-ui/dist/components/multiStep");

var multiStepLogin_1 = require("backpack-ui/dist/components/multiStep/multiStepLogin");

var grid_1 = require("backpack-ui/dist/utils/grid");

var React = require("react");

var AuthModal =
/** @class */
function (_super) {
  __extends(AuthModal, _super);

  function AuthModal(props) {
    var _this = _super.call(this, props) || this;

    _this.onModalClose = _this.onModalClose.bind(_this);
    return _this;
  }

  AuthModal.shouldModalClose = function (currentStep) {
    return currentStep === 1 || currentStep === 4;
  };

  AuthModal.modalTitle = function () {
    return {
      1: null,
      2: "Sign in / Sign up",
      3: "Sign in / Sign up",
      4: null
    };
  };

  AuthModal.prototype.onModalClose = function (currentStep, setCurrentStep) {
    var _this = this;

    return AuthModal.shouldModalClose(currentStep) ? function () {
      _this.props.closeModal();

      setCurrentStep(1);
    } : function () {
      setCurrentStep(1);
    };
  };

  AuthModal.prototype.render = function () {
    var _this = this;

    var _a = this.props,
        authActions = _a.authActions,
        closeModal = _a.closeModal,
        isMobile = _a.isMobile;
    return React.createElement(multiStep_1.MultiStepWrapper, {
      totalSteps: 4
    }, function (currentStep, goToNextStep, goToPreviousStep, setCurrentStep) {
      return React.createElement(modal_1.default, {
        isOpen: _this.props.isOpen,
        leftAction: _this.onModalClose(currentStep, setCurrentStep),
        leftActionContent: AuthModal.shouldModalClose(currentStep) ? React.createElement(icon_1.Close, {
          width: 24,
          height: 24
        }) : React.createElement(icon_1.ArrowLeft, {
          width: 24,
          height: 24
        }),
        closeModal: function () {
          closeModal();
          setCurrentStep(1);
        },
        desktopMaxHeight: "650px",
        desktopWidth: grid_1.span(6, "static"),
        title: AuthModal.modalTitle()[currentStep]
      }, React.createElement(multiStepLogin_1.default, {
        currentStep: currentStep,
        setStep: setCurrentStep,
        authActions: authActions,
        showLogo: !isMobile,
        doneAction: function () {
          _this.onModalClose(currentStep, setCurrentStep)();
        }
      }));
    });
  };

  return AuthModal;
}(React.Component);

exports.default = AuthModal;