@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.

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from "react";
import styled, { css } from "styled-components";
import media, { getBreakpointWidth } from "../../utils/mediaQuery";
import defaultTheme from "../../defaultTheme";
import { StyledButton } from "../../Button";
import { rtlSpacing } from "../../utils/rtl";
import { StyledButtonLink } from "../../ButtonLink";
import { withModalContext } from "../ModalContext";
import { QUERIES } from "../../utils/mediaQuery/consts";
const StyledChild = styled.div.withConfig({
  displayName: "ModalFooter__StyledChild",
  componentId: "sc-17ld6v4-0"
})(["flex:", ";box-sizing:border-box;padding:", ";", ";"], ({
  flex
}) => flex, ({
  theme
}) => rtlSpacing(`0 ${theme.orbit.spaceMedium} 0 0`), media.largeMobile(css(["flex:none;"])));
StyledChild.defaultProps = {
  theme: defaultTheme
};
export const 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:box-shadow ", " ease-in-out;@media (max-width:", "px){", ",", "{font-size:", ";height:", ";}}", ";", ":last-of-type{padding:0;}"], ({
  theme
}) => theme.orbit.paletteWhite, ({
  theme
}) => rtlSpacing(`0 ${theme.orbit.spaceMedium} ${theme.orbit.spaceMedium}`), ({
  theme
}) => theme.orbit.durationFast, ({
  theme
}) => +getBreakpointWidth(QUERIES.LARGEMOBILE, theme, true) - 1, StyledButton, StyledButtonLink, ({
  theme
}) => theme.orbit.fontSizeButtonNormal, ({
  theme
}) => theme.orbit.heightButtonNormal, media.largeMobile(css(["justify-content:", ";border-bottom-left-radius:", ";border-bottom-right-radius:", ";"], ({
  children
}) => children.length > 1 ? "space-between" : "flex-end", ({
  isMobileFullPage
}) => !isMobileFullPage && "9px", ({
  isMobileFullPage
}) => !isMobileFullPage && "9px")), StyledChild);
StyledModalFooter.defaultProps = {
  theme: defaultTheme
};

class ModalFooter extends React.PureComponent {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "callContextFunctions", () => {
      const {
        setDimensions,
        decideFixedFooter
      } = this.props;

      if (setDimensions) {
        setDimensions();
      }

      if (decideFixedFooter) {
        decideFixedFooter();
      }
    });

    _defineProperty(this, "renderWrappedChildren", () => {
      const {
        children,
        flex = "0 1 auto"
      } = this.props;

      const getChildFlex = key => Array.isArray(flex) && flex.length !== 1 ? flex[key] || flex[0] : flex;

      return React.Children.map(children, (child, key) => {
        if (child) {
          return React.createElement(StyledChild, {
            flex: getChildFlex(key)
          }, React.cloneElement(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;
              }
            }
          }));
        }

        return null;
      });
    });
  }

  componentDidMount() {
    this.callContextFunctions();
  }

  componentDidUpdate(prevProps) {
    if (prevProps !== this.props) {
      this.callContextFunctions();
      const {
        manageFocus
      } = this.props;

      if (manageFocus) {
        manageFocus();
      }
    }
  }

  render() {
    const {
      children,
      dataTest,
      isMobileFullPage
    } = this.props;
    return React.createElement(StyledModalFooter, {
      "data-test": dataTest,
      isMobileFullPage: isMobileFullPage
    }, Array.isArray(children) ? this.renderWrappedChildren() : children);
  }

}

const DecoratedComponent = withModalContext(ModalFooter); // $FlowFixMe flow doesn't recognize displayName for functions

DecoratedComponent.displayName = "ModalFooter";
export default DecoratedComponent;