@kiwicom/orbit-components/es/Modal/ModalHeader/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 Text from "../../Text";
import Heading, { StyledHeading } from "../../Heading";
import defaultTheme from "../../defaultTheme";
import media from "../../utils/mediaQuery";
import { StyledModalSection } from "../ModalSection";
import { left, right, rtlSpacing } from "../../utils/rtl";
import { withModalContext } from "../ModalContext";
const ModalTitle = styled.div.withConfig({
  displayName: "ModalHeader__ModalTitle",
  componentId: "sc-13vyf6i-0"
})(["margin-top:", ";", "{padding-", ":", ";}", ";"], ({
  theme,
  illustration
}) => illustration && theme.orbit.spaceXSmall, StyledHeading, right, ({
  theme
}) => theme.orbit.spaceXLarge, media.desktop(css(["", "{padding:0;}"], StyledHeading)));
ModalTitle.defaultProps = {
  theme: defaultTheme
};
const ModalDescription = styled.div.withConfig({
  displayName: "ModalHeader__ModalDescription",
  componentId: "sc-13vyf6i-1"
})(["margin-top:", ";"], ({
  theme
}) => theme.orbit.spaceXSmall);
ModalDescription.defaultProps = {
  theme: defaultTheme
};
export const StyledModalHeader = styled.div.withConfig({
  displayName: "ModalHeader__StyledModalHeader",
  componentId: "sc-13vyf6i-2"
})(["width:100%;display:block;padding:", ";border-top-left-radius:", ";border-top-right-radius:", ";box-sizing:border-box;background-color:", ";& ~ ", ":first-of-type{border-top:", ";border-top-left-radius:0;border-top-right-radius:0;margin-top:", ";}", ";"], ({
  theme,
  illustration,
  suppressed
}) => rtlSpacing(illustration && suppressed && `${theme.orbit.spaceXLarge} ${theme.orbit.spaceMedium} ${theme.orbit.spaceLarge} ${theme.orbit.spaceMedium}` || illustration && !suppressed && `${theme.orbit.spaceXLarge} ${theme.orbit.spaceMedium} 0 ${theme.orbit.spaceMedium}` || !illustration && suppressed && `${theme.orbit.spaceLarge} ${theme.orbit.spaceMedium} ${theme.orbit.spaceLarge} ${theme.orbit.spaceMedium}` || `${theme.orbit.spaceLarge} ${theme.orbit.spaceMedium} 0 ${theme.orbit.spaceMedium}`), ({
  isMobileFullPage
}) => !isMobileFullPage && "9px", ({
  isMobileFullPage
}) => !isMobileFullPage && "9px", ({
  suppressed,
  theme
}) => suppressed ? theme.orbit.paletteCloudLight : theme.orbit.paletteWhite, StyledModalSection, ({
  suppressed,
  theme
}) => suppressed && `1px solid ${theme.orbit.paletteCloudNormal}`, ({
  suppressed
}) => suppressed && "0!important", media.largeMobile(css(["padding:", ";& ~ ", ":first-of-type{border-top-left-radius:0;border-top-right-radius:0;}"], ({
  theme,
  illustration,
  suppressed
}) => rtlSpacing(illustration ? `${theme.orbit.spaceXLarge} ${theme.orbit.spaceXXLarge} ${suppressed ? theme.orbit.spaceXXLarge : "0"} ${theme.orbit.spaceXXLarge}` : `${theme.orbit.spaceXXLarge} ${theme.orbit.spaceXXLarge} ${suppressed ? theme.orbit.spaceXXLarge : "0"} ${theme.orbit.spaceXXLarge}`), StyledModalSection)));
StyledModalHeader.defaultProps = {
  theme: defaultTheme
};
export const MobileHeader = styled.div.withConfig({
  displayName: "ModalHeader__MobileHeader",
  componentId: "sc-13vyf6i-3"
})(["display:inline-block;position:fixed;visibility:hidden;height:52px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;top:", ";", ":48px;", ":0;font-family:", ";font-weight:", ";font-size:18px;color:", ";line-height:52px;box-sizing:border-box;padding:", ";opacity:0;transition:top ", " ease-in-out,opacity ", " ease-in-out,visibility ", " ease-in-out;z-index:800;", ";"], ({
  isMobileFullPage
}) => isMobileFullPage ? "0" : "16px", right, left, ({
  theme
}) => theme.orbit.fontFamily, ({
  theme
}) => theme.orbit.fontWeightHeadingDisplay, ({
  theme
}) => theme.orbit.colorHeading, ({
  theme
}) => rtlSpacing(`0 0 0 ${theme.orbit.spaceLarge}`), ({
  theme
}) => theme.orbit.durationFast, ({
  theme
}) => theme.orbit.durationFast, ({
  theme
}) => theme.orbit.durationFast, media.largeMobile(css(["left:auto;right:auto;padding:0;"])));
MobileHeader.defaultProps = {
  theme: defaultTheme
};
const StyledModalHeaderContent = styled.div.withConfig({
  displayName: "ModalHeader__StyledModalHeaderContent",
  componentId: "sc-13vyf6i-4"
})(["margin-top:", ";"], ({
  description
}) => description ? "32px" : "16px");

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

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

      if (setDimensions) {
        setDimensions();
      }

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

  componentDidMount() {
    this.callContextFunctions();
  }

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

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

  render() {
    const {
      title,
      illustration,
      description,
      children,
      suppressed,
      dataTest,
      isMobileFullPage
    } = this.props;
    const hasHeader = title || description;
    return React.createElement(StyledModalHeader, {
      illustration: !!illustration,
      suppressed: suppressed,
      "data-test": dataTest,
      isMobileFullPage: isMobileFullPage
    }, illustration, hasHeader && React.createElement(ModalTitle, {
      illustration: !!illustration
    }, title && React.createElement(Heading, {
      type: "title1"
    }, title), description && React.createElement(ModalDescription, null, React.createElement(Text, {
      size: "large",
      element: "div"
    }, description))), children && React.createElement(StyledModalHeaderContent, {
      description: !!description
    }, children), title && React.createElement(MobileHeader, {
      isMobileFullPage: isMobileFullPage
    }, title));
  }

}

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

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