@kiwicom/orbit-components/es/Modal/ModalSection/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 defaultTheme from "../../defaultTheme";
import media from "../../utils/mediaQuery";
import { StyledModalFooter } from "../ModalFooter";
import { withModalContext } from "../ModalContext";
export const StyledModalSection = styled.section.withConfig({
  displayName: "ModalSection__StyledModalSection",
  componentId: "sc-1ayrdn8-0"
})(["width:100%;padding:", ";background-color:", ";border-bottom:1px solid ", ";box-sizing:border-box;&:first-of-type{border-top:", ";border-top-left-radius:", ";border-top-right-radius:", ";margin-top:", ";}&:last-of-type{border-bottom:", ";border-bottom-left-radius:", ";border-bottom-right-radius:", ";& ~ ", "{margin-top:", ";}&:not(:last-child){border-radius:0;}}", ";"], ({
  theme
}) => `${theme.orbit.spaceLarge} ${theme.orbit.spaceMedium}`, ({
  theme,
  suppressed
}) => suppressed ? theme.orbit.paletteCloudLight : theme.orbit.paletteWhite, ({
  theme
}) => theme.orbit.paletteCloudNormal, ({
  suppressed,
  theme
}) => suppressed && `1px solid ${theme.orbit.paletteCloudNormal}`, ({
  isMobileFullPage
}) => !isMobileFullPage && "9px", ({
  isMobileFullPage
}) => !isMobileFullPage && "9px", ({
  suppressed,
  theme
}) => suppressed && theme.orbit.spaceLarge, ({
  suppressed,
  theme
}) => suppressed ? `1px solid ${theme.orbit.paletteCloudNormal}` : "0", ({
  isMobileFullPage
}) => !isMobileFullPage && "9px", ({
  isMobileFullPage
}) => !isMobileFullPage && "9px", StyledModalFooter, ({
  theme,
  suppressed
}) => suppressed && theme.orbit.spaceMedium, media.largeMobile(css(["padding:", ";&:first-of-type{margin-top:", ";}&:last-of-type{& ~ ", "{padding-top:", ";margin-top:0;}}"], ({
  theme
}) => theme.orbit.spaceXXLarge, ({
  suppressed,
  theme
}) => suppressed && theme.orbit.spaceXXLarge, StyledModalFooter, ({
  suppressed
}) => !suppressed && "0")));
StyledModalSection.defaultProps = {
  theme: defaultTheme
};

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

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

      if (setDimensions) {
        setDimensions();
      }

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

  componentDidMount() {
    const {
      setHasModalSection
    } = this.props;
    this.callContextFunctions();

    if (setHasModalSection) {
      setHasModalSection();
    }
  }

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

      if (setHasModalSection) {
        setHasModalSection();
      }

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

  componentWillUnmount() {
    const {
      removeHasModalSection
    } = this.props;
    this.callContextFunctions();

    if (removeHasModalSection) {
      removeHasModalSection();
    }
  }

  render() {
    const {
      suppressed,
      children,
      dataTest,
      isMobileFullPage
    } = this.props;
    return React.createElement(StyledModalSection, {
      suppressed: suppressed,
      "data-test": dataTest,
      isMobileFullPage: isMobileFullPage
    }, children);
  }

}

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

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