@kiwicom/orbit-components/es/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.

import * as React from "react";
import styled, { css } from "styled-components";
import transition from "../../utils/transition";
import media, { getBreakpointWidth } from "../../utils/mediaQuery";
import defaultTheme from "../../defaultTheme";
import { rtlSpacing } from "../../utils/rtl";
import { ModalContext } from "../ModalContext";
import { QUERIES } from "../../utils/mediaQuery/consts";
import useModalContextFunctions from "../helpers/useModalContextFunctions";
import { StyledButtonPrimitive } from "../../primitives/ButtonPrimitive";
var StyledChild = styled.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 rtlSpacing("0 ".concat(theme.orbit.spaceXSmall, " 0 0"));
}, media.largeMobile(css(["flex:none;"]))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledChild.defaultProps = {
  theme: defaultTheme
};
export var StyledModalFooter = styled.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 rtlSpacing("0 ".concat(theme.orbit.spaceMedium, " ").concat(theme.orbit.spaceMedium));
}, transition(["box-shadow"], "fast", "ease-in-out"), function (_ref5) {
  var theme = _ref5.theme;
  return +getBreakpointWidth(QUERIES.LARGEMOBILE, theme, true) - 1;
}, StyledButtonPrimitive, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.fontSizeButtonNormal;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.heightButtonNormal;
}, media.largeMobile(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 && css(["border-bottom-left-radius:9px;border-bottom-right-radius:9px;"]);
})), StyledChild); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledModalFooter.defaultProps = {
  theme: defaultTheme
};

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),
      isMobileFullPage = _React$useContext.isMobileFullPage,
      setFooterHeight = _React$useContext.setFooterHeight;

  var containerRef = React.useRef(null);
  useModalContextFunctions();
  React.useEffect(function () {
    function transitionEndHandler() {
      if (setFooterHeight && containerRef.current) {
        setFooterHeight(containerRef.current.clientHeight);
      }
    }

    var containerEl = containerRef.current;
    containerEl === null || containerEl === void 0 ? void 0 : containerEl.addEventListener("transitionend", transitionEndHandler);
    return function () {
      containerEl === null || containerEl === void 0 ? void 0 : containerEl.removeEventListener("transitionend", transitionEndHandler);
    };
  }, [setFooterHeight]);
  return /*#__PURE__*/React.createElement(StyledModalFooter, {
    ref: containerRef,
    "data-test": dataTest,
    isMobileFullPage: isMobileFullPage
  }, wrappedChildren(children, flex));
};

export default ModalFooter;