@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;
exports.__esModule = 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-1ryeorb-0"
})(["", ";"], ({
  theme,
  flex
}) => (0, _styledComponents.css)(["flex:", ";box-sizing:border-box;padding:", ";"], flex, (0, _rtl.rtlSpacing)(`0 ${theme.orbit.spaceXSmall} 0 0`)));
StyledChild.defaultProps = {
  theme: _defaultTheme.default
};
const StyledModalFooter = _styledComponents.default.div.withConfig({
  displayName: "ModalFooter__StyledModalFooter",
  componentId: "sc-1ryeorb-1"
})(["", ""], ({
  theme,
  childrenLength,
  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:", ";", ";"], childrenLength > 1 ? "space-between" : "flex-end", !isMobileFullPage && (0, _styledComponents.css)(["border-bottom-left-radius:9px;border-bottom-right-radius:9px;"]))), StyledChild));
exports.StyledModalFooter = StyledModalFooter;
StyledModalFooter.defaultProps = {
  theme: _defaultTheme.default
};
const getChildFlex = (flex, key) => Array.isArray(flex) && flex.length !== 1 ? flex[key] || flex[0] : flex;
const wrappedChildren = (children, flex) => {
  if (!Array.isArray(children)) return children;
  return React.Children.map(children, (child, key) => {
    if (! /*#__PURE__*/React.isValidElement(child)) return null;
    return /*#__PURE__*/React.createElement(StyledChild, {
      flex: getChildFlex(flex, key),
      "data-test": "footer-el-wrapper"
    }, /*#__PURE__*/React.cloneElement(child, {
      // @ts-expect-error React.cloneElement  issue
      ref: child.ref ? node => {
        // Call the original ref, if any
        // @ts-expect-error React.cloneElement  issue
        const {
          ref
        } = child;
        if (typeof ref === "function") {
          ref(node);
        } else if (ref !== null) {
          ref.current = node;
        }
      } : null
    }));
  });
};
const ModalFooter = ({
  dataTest,
  children,
  flex = "0 1 auto"
}) => {
  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?.addEventListener("transitionend", transitionEndHandler);
    return () => {
      containerEl?.removeEventListener("transitionend", transitionEndHandler);
    };
  }, [setFooterHeight]);
  return /*#__PURE__*/React.createElement(StyledModalFooter, {
    ref: containerRef,
    "data-test": dataTest,
    isMobileFullPage: isMobileFullPage,
    childrenLength: React.Children.toArray(children).length
  }, flex && wrappedChildren(children, flex));
};
var _default = ModalFooter;
exports.default = _default;