@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").default;

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

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");

const StyledChild = _styledComponents.default.div.withConfig({
  displayName: "ModalFooter__StyledChild",
  componentId: "sc-2szp8x-0"
})(["", ""], ({
  theme,
  flex
}) => (0, _styledComponents.css)(["flex:", ";box-sizing:border-box;padding:", ";", ";"], flex, (0, _rtl.rtlSpacing)(`0 ${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
};

const StyledModalFooter = _styledComponents.default.div.withConfig({
  displayName: "ModalFooter__StyledModalFooter",
  componentId: "sc-2szp8x-1"
})(["", ""], ({
  theme,
  children,
  isMobileFullPage
}) => (0, _styledComponents.css)(["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;}"], theme.orbit.paletteWhite, (0, _rtl.rtlSpacing)(`0 ${theme.orbit.spaceMedium} ${theme.orbit.spaceMedium}`), (0, _transition.default)(["box-shadow"], "fast", "ease-in-out"), +(0, _mediaQuery.getBreakpointWidth)(_consts.QUERIES.LARGEMOBILE, theme, true) - 1, _ButtonPrimitive.StyledButtonPrimitive, theme.orbit.fontSizeButtonNormal, theme.orbit.heightButtonNormal, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["justify-content:", ";", ";"], children.length > 1 ? "space-between" : "flex-end", !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
};

const getChildFlex = (flex, key) => 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
 */


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

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

    return null;
  });
};

const ModalFooter = ({
  dataTest,
  children,
  flex
}) => {
  const {
    isMobileFullPage,
    setFooterHeight
  } = React.useContext(_ModalContext.ModalContext);
  const containerRef = React.useRef(null);
  (0, _useModalContextFunctions.default)();
  React.useEffect(() => {
    function transitionEndHandler() {
      if (setFooterHeight && containerRef.current) {
        setFooterHeight(containerRef.current.clientHeight);
      }
    }

    const containerEl = containerRef.current;
    containerEl === null || containerEl === void 0 ? void 0 : containerEl.addEventListener("transitionend", transitionEndHandler);
    return () => {
      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));
};

var _default = ModalFooter;
exports.default = _default;