@kiwicom/orbit-components/lib/Modal/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _defaultTokens = _interopRequireDefault(require("../defaultTokens"));

var _ButtonLink = _interopRequireWildcard(require("../ButtonLink"));

var _Close = _interopRequireDefault(require("../icons/Close"));

var _consts = _interopRequireDefault(require("./consts"));

var _media = _interopRequireDefault(require("../utils/media"));

var _ModalFooter = require("./ModalFooter");

var _ModalHeader = require("./ModalHeader");

var _ModalSection = require("./ModalSection");

var _Heading = require("../Heading");

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n    position: relative;\n    border-radius: ", ";\n    padding-bottom: 0;\n    height: auto;\n    overflow: visible;\n    ", ":last-of-type {\n      padding-bottom: ", ";\n      margin-bottom: 0;\n      &::after {\n        content: none;\n      }\n    }\n    ", " {\n      position: relative;\n      box-shadow: none;\n      padding: ", ";\n    }\n    ", " {\n      position: absolute;\n      top: 0;\n    }\n  "]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n    box-shadow: none!important;\n    background: transparent!important;\n  "]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n    position: relative;\n    top: 0;\n    max-width: ", ";\n    align-items: center;\n  "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    overflow-y: auto;\n    padding: ", ";\n "]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var getSizeToken = function getSizeToken() {
  return function (_ref) {
    var _tokens;

    var size = _ref.size;
    var tokens = (_tokens = {}, _defineProperty(_tokens, _consts.default.SMALL, "540px"), _defineProperty(_tokens, _consts.default.NORMAL, "740px"), _defineProperty(_tokens, _consts.default.LARGE, "1280px"), _tokens);
    return tokens[size];
  };
};

var ModalBody = _styledComponents.default.div.withConfig({
  displayName: "Modal__ModalBody",
  componentId: "sc-1f0srsl-0"
})(["width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;z-index:", ";box-sizing:border-box;outline:none;overflow-x:hidden;background-color:rgba(0,0,0,0.5);font-family:", ";", ";"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.zIndexModalOverlay;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.fontfamily;
}, _media.default.desktop(_templateObject(), function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.spaceXXLarge;
}));

ModalBody.defaultProps = {
  theme: _defaultTokens.default
};

var ModalWrapper = _styledComponents.default.div.withConfig({
  displayName: "Modal__ModalWrapper",
  componentId: "sc-1f0srsl-1"
})(["box-sizing:border-box;min-height:100%;display:flex;align-items:flex-start;margin:0 auto;position:fixed;width:100%;border-top-left-radius:", ";border-top-right-radius:", ";transition:top ", " ease-in-out;top:", ";", ";"], function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.durationNormal;
}, function (_ref8) {
  var loaded = _ref8.loaded;
  return loaded ? "32px" : "100%";
}, _media.default.desktop(_templateObject2(), getSizeToken));

ModalWrapper.defaultProps = {
  theme: _defaultTokens.default
};

var CloseContainer = _styledComponents.default.div.withConfig({
  displayName: "Modal__CloseContainer",
  componentId: "sc-1f0srsl-2"
})(["display:flex;position:absolute;top:0;right:0;z-index:1;justify-content:flex-end;align-items:center;box-sizing:border-box;height:52px;width:100%;transition:box-shadow ", " ease-in-out,background-color ", " ease-in-out;border-top-left-radius:", ";border-top-right-radius:", ";", " & + ", ":first-of-type{padding-top:52px;border-top:0;margin:0;}", "{margin-right:4px;& svg{transition:color ", " ease-in-out;color:", ";}&:hover svg{color:", ";}&:active svg{color:", ";}}"], function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.durationNormal;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.orbit.durationNormal;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.orbit.borderRadiusNormal;
}, _media.default.desktop(_templateObject3()), _ModalSection.StyledModalSection, _ButtonLink.StyledButtonLink, function (_ref13) {
  var theme = _ref13.theme;
  return theme.orbit.durationFast;
}, function (_ref14) {
  var theme = _ref14.theme;
  return theme.orbit.paletteInkLight;
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.orbit.paletteInkLightHover;
}, function (_ref16) {
  var theme = _ref16.theme;
  return theme.orbit.paletteInkLightActive;
});

CloseContainer.defaultProps = {
  theme: _defaultTokens.default
};

var ModalWrapperContent = _styledComponents.default.div.withConfig({
  displayName: "Modal__ModalWrapperContent",
  componentId: "sc-1f0srsl-3"
})(["position:absolute;box-sizing:border-box;border-top-left-radius:", ";border-top-right-radius:", ";background-color:", ";font-family:", ";width:100%;height:calc( 100% - ", " - ", " );box-shadow:", ";overflow-y:auto;overflow-x:hidden;", ":last-of-type{padding-bottom:", ";margin-bottom:", ";}", ";", "{top:", ";opacity:", ";}", "{top:", ";position:", ";box-shadow:", ";background-color:", ";}", ";"], function (_ref17) {
  var theme = _ref17.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref18) {
  var theme = _ref18.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref19) {
  var theme = _ref19.theme;
  return theme.orbit.backgroundModal;
}, function (_ref20) {
  var theme = _ref20.theme;
  return theme.orbit.fontFamily;
}, function (_ref21) {
  var theme = _ref21.theme;
  return theme.orbit.spaceXLarge;
}, function (_ref22) {
  var fixedFooter = _ref22.fixedFooter;
  return fixedFooter ? "76px" : "0px";
}, function (_ref23) {
  var theme = _ref23.theme;
  return theme.orbit.boxShadowModal;
}, _ModalSection.StyledModalSection, function (_ref24) {
  var theme = _ref24.theme,
      fixedFooter = _ref24.fixedFooter;
  return fixedFooter && theme.orbit.spaceLarge;
}, function (_ref25) {
  var fixedFooter = _ref25.fixedFooter;
  return fixedFooter && "0";
}, function (_ref26) {
  var fixedFooter = _ref26.fixedFooter,
      theme = _ref26.theme;
  return fixedFooter && (0, _styledComponents.css)(["", "{padding:", ";box-shadow:", ";position:fixed;transition:box-shadow ", " ease-in-out;}"], _ModalFooter.StyledModalFooter, theme.orbit.spaceMedium, function (_ref27) {
    var fullyScrolled = _ref27.fullyScrolled;
    return fullyScrolled ? "0 0 1px 0 ".concat(theme.orbit.paletteCloudNormal) : "0 -2px 4px 0 rgba(23, 27, 30, 0.1)";
  }, theme.orbit.durationFast);
}, _ModalHeader.MobileHeader, function (_ref28) {
  var scrolled = _ref28.scrolled,
      theme = _ref28.theme;
  return scrolled && theme.orbit.spaceXLarge;
}, function (_ref29) {
  var scrolled = _ref29.scrolled;
  return scrolled && "1";
}, CloseContainer, function (_ref30) {
  var scrolled = _ref30.scrolled,
      fixedClose = _ref30.fixedClose;
  return (fixedClose || scrolled) && "32px";
}, function (_ref31) {
  var scrolled = _ref31.scrolled,
      fixedClose = _ref31.fixedClose;
  return (fixedClose || scrolled) && "fixed";
}, function (_ref32) {
  var scrolled = _ref32.scrolled;
  return scrolled && "0 2px 4px 0 rgba(23, 27, 30, 0.1)";
}, function (_ref33) {
  var theme = _ref33.theme,
      scrolled = _ref33.scrolled;
  return scrolled && theme.orbit.paletteWhite;
}, _media.default.desktop(_templateObject4(), function (_ref34) {
  var theme = _ref34.theme;
  return theme.orbit.borderRadiusNormal;
}, _ModalSection.StyledModalSection, function (_ref35) {
  var theme = _ref35.theme;
  return theme.orbit.spaceXXLarge;
}, _ModalFooter.StyledModalFooter, function (_ref36) {
  var theme = _ref36.theme;
  return "0 ".concat(theme.orbit.spaceXXLarge, " ").concat(theme.orbit.spaceXXLarge);
}, CloseContainer));

ModalWrapperContent.defaultProps = {
  theme: _defaultTokens.default
};

var CloseElement = function CloseElement(_ref37) {
  var onClose = _ref37.onClose,
      closable = _ref37.closable;
  return React.createElement(CloseContainer, null, closable && React.createElement(_ButtonLink.default, {
    onClick: onClose,
    size: "normal",
    icon: React.createElement(_Close.default, null),
    transparent: true
  }));
};

var Modal =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(Modal, _React$PureComponent);

  function Modal() {
    var _this;

    _classCallCheck(this, Modal);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Modal).call(this)); // $FlowExpected

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
      scrolled: false,
      loaded: false,
      fixedClose: false,
      fullyScrolled: false
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleKeyDown", function (ev) {
      var _this$props = _this.props,
          onClose = _this$props.onClose,
          closable = _this$props.closable;

      if (closable && ev.key === "Escape" && onClose) {
        onClose(ev);
      }
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClickOutside", function (ev) {
      var _this$node;

      var _this$props2 = _this.props,
          onClose = _this$props2.onClose,
          closable = _this$props2.closable;

      if (closable && onClose && ((_this$node = _this.node) === null || _this$node === void 0 ? void 0 : _this$node.current) && ev.target instanceof Node && !_this.node.current.contains(ev.target)) {
        // If is clicked outside of modal
        onClose(ev);
      }
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "node", React.createRef());

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "offset", 40);

    _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    return _this;
  }

  _createClass(Modal, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      // eslint-disable-next-line
      setTimeout(function () {
        return _this2.setState({
          loaded: true
        });
      }, 150);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (!this.state.scrolled) {
        this.setScrollPoint();
      }
    }
  }, {
    key: "setScrollPoint",
    value: function setScrollPoint() {
      var _this3 = this;

      setTimeout(function () {
        if (!_this3.state.scrolled) {
          var node = _this3.node;

          if (node instanceof HTMLElement) {
            var el = node.querySelector(".".concat(React.createElement(_Heading.StyledHeading, null).type.styledComponentId));

            if (el) {
              _this3.offset = el.clientHeight + el.offsetTop;
            }
          }
        }
      }, 550);
    }
  }, {
    key: "handleScroll",
    value: function handleScroll(ev) {
      if (ev.target instanceof HTMLDivElement && ev.target === this.node) {
        this.setState({
          scrolled: ev.target.scrollTop >= this.offset,
          fixedClose: ev.target.scrollTop >= 1,
          fullyScrolled: this.props.fixedFooter && // set this state sooner than the exact end of the scroll (with 10 value)
          ev.target.scrollTop >= ev.target.scrollHeight - ev.target.clientHeight - 10
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          onClose = _this$props3.onClose,
          children = _this$props3.children,
          _this$props3$size = _this$props3.size,
          size = _this$props3$size === void 0 ? _consts.default.NORMAL : _this$props3$size,
          _this$props3$closable = _this$props3.closable,
          closable = _this$props3$closable === void 0 ? true : _this$props3$closable,
          _this$props3$fixedFoo = _this$props3.fixedFooter,
          fixedFooter = _this$props3$fixedFoo === void 0 ? false : _this$props3$fixedFoo,
          dataTest = _this$props3.dataTest;
      var _this$state = this.state,
          scrolled = _this$state.scrolled,
          loaded = _this$state.loaded,
          fixedClose = _this$state.fixedClose,
          fullyScrolled = _this$state.fullyScrolled;
      return React.createElement(ModalBody, {
        tabIndex: "0",
        onKeyDown: this.handleKeyDown,
        onClick: this.handleClickOutside,
        "data-test": dataTest
      }, React.createElement(ModalWrapper, {
        size: size,
        loaded: loaded,
        onScroll: this.handleScroll,
        fixedFooter: fixedFooter
      }, React.createElement(ModalWrapperContent, {
        size: size,
        fixedFooter: fixedFooter,
        scrolled: scrolled,
        ref: this.node,
        fixedClose: fixedClose,
        fullyScrolled: fullyScrolled
      }, React.createElement(CloseElement, {
        onClose: onClose,
        closable: closable
      }), children)));
    }
  }]);

  return Modal;
}(React.PureComponent);

var _default = Modal;
exports.default = _default;