@kiwicom/orbit-components/lib/Modal/ModalFooter/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";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

var _transition = _interopRequireDefault(require("../../utils/transition"));

var _mediaQuery = _interopRequireWildcard(require("../../utils/mediaQuery"));

var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));

var _rtl = require("../../utils/rtl");

var _ModalContext = require("../ModalContext");

var _consts = require("../../utils/mediaQuery/consts");

var _useModalContextFunctions = _interopRequireDefault(require("../helpers/useModalContextFunctions"));

var _ButtonPrimitive = require("../../primitives/ButtonPrimitive");

var StyledChild = _styledComponents.default.div.withConfig({
  displayName: "ModalFooter__StyledChild",
  componentId: "sc-17ld6v4-0"
})(["flex:", ";box-sizing:border-box;padding:", ";", ";"], function (_ref) {
  var flex = _ref.flex;
  return flex;
}, function (_ref2) {
  var theme = _ref2.theme;
  return (0, _rtl.rtlSpacing)("0 ".concat(theme.orbit.spaceXSmall, " 0 0"));
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["flex:none;"]))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledChild.defaultProps = {
  theme: _defaultTheme.default
};

var StyledModalFooter = _styledComponents.default.div.withConfig({
  displayName: "ModalFooter__StyledModalFooter",
  componentId: "sc-17ld6v4-1"
})(["display:flex;z-index:800;width:100%;background-color:", ";padding:", ";box-sizing:border-box;transition:", ";@media (max-width:", "px){", "{font-size:", ";height:", ";}}", ";", ":last-of-type{padding:0;}"], function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.paletteWhite;
}, function (_ref4) {
  var theme = _ref4.theme;
  return (0, _rtl.rtlSpacing)("0 ".concat(theme.orbit.spaceMedium, " ").concat(theme.orbit.spaceMedium));
}, (0, _transition.default)(["box-shadow"], "fast", "ease-in-out"), function (_ref5) {
  var theme = _ref5.theme;
  return +(0, _mediaQuery.getBreakpointWidth)(_consts.QUERIES.LARGEMOBILE, theme, true) - 1;
}, _ButtonPrimitive.StyledButtonPrimitive, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.fontSizeButtonNormal;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.heightButtonNormal;
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["justify-content:", ";", ";"], function (_ref8) {
  var children = _ref8.children;
  return children.length > 1 ? "space-between" : "flex-end";
}, function (_ref9) {
  var isMobileFullPage = _ref9.isMobileFullPage;
  return !isMobileFullPage && (0, _styledComponents.css)(["border-bottom-left-radius:9px;border-bottom-right-radius:9px;"]);
})), StyledChild); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


exports.StyledModalFooter = StyledModalFooter;
StyledModalFooter.defaultProps = {
  theme: _defaultTheme.default
};

var getChildFlex = function getChildFlex(flex, key) {
  return Array.isArray(flex) && flex.length !== 1 ? flex[key] || flex[0] : flex;
};
/*
  Until flow-bin@0.104.0 it's impossible to assign default values to union types,
  therefore, it's bypassed via declaring it in on this component
 */


var wrappedChildren = function wrappedChildren(children) {
  var flex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "0 1 auto";
  if (!Array.isArray(children)) return children;
  return React.Children.map(children, function (child, key) {
    if (child) {
      return /*#__PURE__*/React.createElement(StyledChild, {
        flex: getChildFlex(flex, key)
      }, /*#__PURE__*/React.cloneElement(child, {
        ref: child.ref ? function (node) {
          // Call the original ref, if any
          var ref = child.ref;

          if (typeof ref === "function") {
            ref(node);
          } else if (ref !== null) {
            ref.current = node;
          }
        } : null
      }));
    }

    return null;
  });
};

var ModalFooter = function ModalFooter(_ref10) {
  var dataTest = _ref10.dataTest,
      children = _ref10.children,
      flex = _ref10.flex;

  var _React$useContext = React.useContext(_ModalContext.ModalContext),
      isMobileFullPage = _React$useContext.isMobileFullPage;

  (0, _useModalContextFunctions.default)();
  return /*#__PURE__*/React.createElement(StyledModalFooter, {
    "data-test": dataTest,
    isMobileFullPage: isMobileFullPage
  }, wrappedChildren(children, flex));
};

var _default = ModalFooter;
exports.default = _default;