@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";
const StyledChild = styled.div.withConfig({
  displayName: "ModalFooter__StyledChild",
  componentId: "sc-2szp8x-0"
})(["", ""], ({
  theme,
  flex
}) => css(["flex:", ";box-sizing:border-box;padding:", ";", ";"], flex, rtlSpacing(`0 ${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 const StyledModalFooter = styled.div.withConfig({
  displayName: "ModalFooter__StyledModalFooter",
  componentId: "sc-2szp8x-1"
})(["", ""], ({
  theme,
  children,
  isMobileFullPage
}) => 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, rtlSpacing(`0 ${theme.orbit.spaceMedium} ${theme.orbit.spaceMedium}`), transition(["box-shadow"], "fast", "ease-in-out"), +getBreakpointWidth(QUERIES.LARGEMOBILE, theme, true) - 1, StyledButtonPrimitive, theme.orbit.fontSizeButtonNormal, theme.orbit.heightButtonNormal, media.largeMobile(css(["justify-content:", ";", ";"], children.length > 1 ? "space-between" : "flex-end", !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
};

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);
  const containerRef = React.useRef(null);
  useModalContextFunctions();
  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));
};

export default ModalFooter;