@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 from "styled-components";
import media from "../../utils/media";
import defaultTokens from "../../defaultTokens";
import { StyledButton } from "../../Button";
import { StyledButtonLink } from "../../ButtonLink";
const StyledChild = styled.div.withConfig({
  displayName: "ModalFooter__StyledChild",
  componentId: "sc-17ld6v4-0"
})(["flex:", ";box-sizing:border-box;padding-right:", ";", ";"], ({
  flex
}) => flex, ({
  theme
}) => theme.orbit.spaceMedium, media.desktop`
    flex: none;
  `);
StyledChild.defaultProps = {
  theme: defaultTokens
};
export const StyledModalFooter = styled.div.withConfig({
  displayName: "ModalFooter__StyledModalFooter",
  componentId: "sc-17ld6v4-1"
})(["display:flex;bottom:0;width:100%;background-color:", ";padding:", ";box-sizing:border-box;@media (max-width:599px){", ",", "{font-size:", ";height:", ";}}", ";", ":last-of-type{padding-right:0;}"], ({
  theme
}) => theme.orbit.paletteWhite, ({
  theme
}) => `0 ${theme.orbit.spaceMedium} ${theme.orbit.spaceMedium}`, StyledButton, StyledButtonLink, ({
  theme
}) => theme.orbit.fontSizeButtonNormal, ({
  theme
}) => theme.orbit.heightButtonNormal, media.desktop`
    justify-content: ${({
  children
}) => children.length > 1 ? "space-between" : "flex-end"};
    // TODO: create token paddingModalFooterDesktop
    border-bottom-left-radius: ${({
  theme
}) => theme.orbit.borderRadiusNormal};
    border-bottom-right-radius: ${({
  theme
}) => theme.orbit.borderRadiusNormal};
  `, StyledChild);
StyledModalFooter.defaultProps = {
  theme: defaultTokens
};

const ModalFooter = props => {
  const {
    flex = "0 1 auto",
    children,
    dataTest
  } = props;
  return React.createElement(StyledModalFooter, {
    "data-test": dataTest
  }, React.Children.map(children, (item, key) => {
    if (item) {
      const childFlex = Array.isArray(flex) && flex.length !== 1 ? flex[key] || flex[0] : flex;
      return React.createElement(StyledChild, {
        flex: childFlex
      }, React.createElement(item.type, item.props));
    }

    return null;
  }));
};

export default ModalFooter;