@kiwicom/orbit-components/es/Card/CardSection/CardSectionContent/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 React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../../../defaultTheme";
import { CardSectionContext } from "../index";
import Slide, { StyledSlide } from "../../../utils/Slide";
import media from "../../../utils/mediaQuery";

const hasPaddingTop = ({
  expandable,
  expanded,
  visible
}) => expanded || visible || !expandable;

export const StyledCardSectionContent = styled.div.withConfig({
  displayName: "CardSectionContent__StyledCardSectionContent",
  componentId: "sc-1mj8dfx-0"
})(["font-family:", ";font-size:", ";line-height:", ";color:", ";border-top:", ";padding-top:", ";transition:padding ", " linear,border-top ", " linear;", " ", "{max-height:", ";}"], ({
  theme
}) => theme.orbit.fontFamily, ({
  theme
}) => theme.orbit.fontSizeTextNormal, ({
  theme
}) => theme.orbit.lineHeightText, ({
  theme
}) => theme.orbit.colorTextPrimary, ({
  theme,
  expanded
}) => expanded ? `1px solid ${theme.orbit.paletteCloudNormal}` : `0px solid ${theme.orbit.paletteCloudNormal}`, ({
  theme,
  expandable,
  expanded,
  visible
}) => hasPaddingTop({
  expandable,
  expanded,
  visible
}) && theme.orbit.spaceMedium, ({
  theme
}) => theme.orbit.durationFast, ({
  theme
}) => theme.orbit.durationFast, media.desktop(css(["padding-top:", ";"], ({
  theme,
  expandable,
  expanded,
  visible
}) => hasPaddingTop({
  expandable,
  expanded,
  visible
}) && theme.orbit.spaceLarge)), StyledSlide, ({
  expandable,
  visible
}) => expandable && visible && "none");
StyledCardSectionContent.defaultProps = {
  theme: defaultTheme
};

const withConsumer = CardSection => ({
  children,
  visible
}) => React.createElement(CardSectionContext.Consumer, null, ({
  expandable,
  expanded
}) => React.createElement(CardSection, {
  expandable: expandable,
  expanded: expanded,
  visible: visible
}, children));

class CardSectionContent extends React.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      contentHeight: 0
    });

    _defineProperty(this, "node", React.createRef());

    _defineProperty(this, "setHeight", () => {
      var _this$node$current;

      this.setState({
        contentHeight: (_this$node$current = this.node.current) === null || _this$node$current === void 0 ? void 0 : _this$node$current.clientHeight
      });
    });
  }

  componentDidMount() {
    const {
      expandable
    } = this.props;

    if (expandable) {
      window.addEventListener("resize", this.setHeight);
      setTimeout(this.setHeight, 10);
    }
  }

  componentDidUpdate(prevProps, prevState) {
    const {
      expandable
    } = this.props;

    if (expandable) {
      if (prevState.contentHeight !== this.state.contentHeight || prevProps.children !== this.props.children) {
        setTimeout(this.setHeight, 10);
      }

      if (prevProps.expanded !== this.props.expanded) {
        // Calculate height on expand - for dynamic components like TripSector
        this.setHeight();
      }
    }
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.setHeight);
  }

  render() {
    const {
      children,
      expanded,
      expandable,
      visible
    } = this.props;
    return React.createElement(StyledCardSectionContent, {
      expanded: expanded,
      expandable: expandable,
      visible: visible,
      contentHeight: this.state.contentHeight
    }, expandable ? React.createElement(Slide, {
      maxHeight: this.state.contentHeight,
      expanded: expanded
    }, React.createElement("div", {
      ref: this.node
    }, children)) : React.createElement("div", {
      ref: this.node
    }, children));
  }

}

const DecoratedComponent = withConsumer(CardSectionContent);
DecoratedComponent.displayName = "CardSectionContent";
export default DecoratedComponent;