@kiwicom/orbit-components/es/Card/CardSection/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 from "styled-components";
import defaultTokens from "../../defaultTokens";
import ChevronDown from "../../icons/ChevronDown";
import Heading from "../../Heading/index";
import Text from "../../Text/index";
import { getSize } from "../../Icon";
import { ICON_SIZES } from "../../Icon/consts";
const StyledCardSectionIconRight = styled(ChevronDown).withConfig({
  displayName: "CardSection__StyledCardSectionIconRight",
  componentId: "o8zdxr-0"
})(["align-self:center;transition:", ";"], ({
  theme
}) => theme.orbit.durationFast);
StyledCardSectionIconRight.defaultProps = {
  theme: defaultTokens
};
const StyledCardSectionContent = styled.div.withConfig({
  displayName: "CardSection__StyledCardSectionContent",
  componentId: "o8zdxr-1"
})(["font-size:", ";line-height:", ";color:", ";border-top:", ";padding-top:", ";transition:max-height ", " linear,padding ", " linear,border-top ", " linear;overflow:hidden;"], ({
  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,
  expanded
}) => expanded && `${theme.orbit.spaceMedium}`, ({
  theme
}) => theme.orbit.durationFast, ({
  theme
}) => theme.orbit.durationFast, ({
  theme
}) => theme.orbit.durationFast);
StyledCardSectionContent.defaultProps = {
  theme: defaultTokens
};

const getMaxHeight = ({
  expandable,
  expanded,
  contentHeight
}) => {
  if (expandable) {
    if (expanded) {
      return `${contentHeight}px`;
    }

    return 0;
  }

  return "auto";
};

export const StyledCardSection = styled.div.withConfig({
  displayName: "CardSection__StyledCardSection",
  componentId: "o8zdxr-2"
})(["width:100%;padding:", ";box-sizing:border-box;position:relative;background:", ";", "{transform:", ";}", "{max-height:", ";}"], ({
  theme
}) => theme.orbit.spaceLarge, ({
  theme
}) => theme.orbit.backgroundCard, StyledCardSectionIconRight, ({
  expanded
}) => expanded && "rotate(-180deg)", StyledCardSectionContent, getMaxHeight);
StyledCardSection.defaultProps = {
  theme: defaultTokens
};
const StyledCardSectionHeader = styled.div.withConfig({
  displayName: "CardSection__StyledCardSectionHeader",
  componentId: "o8zdxr-3"
})(["margin-bottom:", ";display:flex;flex-direction:row;transition:margin ", " linear;cursor:pointer;position:relative;min-height:", ";"], ({
  theme,
  expanded
}) => expanded && theme.orbit.spaceMedium, ({
  theme
}) => theme.orbit.durationFast, ({
  expandable
}) => expandable && getSize(ICON_SIZES.MEDIUM));
StyledCardSectionHeader.defaultProps = {
  theme: defaultTokens
};
const StyledTitleAndSubtitle = styled.div.withConfig({
  displayName: "CardSection__StyledTitleAndSubtitle",
  componentId: "o8zdxr-4"
})(["flex:1;padding-right:", ";"], ({
  theme
}) => theme.orbit.spaceMedium);
StyledTitleAndSubtitle.defaultProps = {
  theme: defaultTokens
};

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

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

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

    _defineProperty(this, "contentHeight", 0);

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

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

    if (expandable) {
      setTimeout(this.setHeight, 250); // Prevent showing children on initial render
    }
  }

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

    if (expandable) {
      this.setHeight(); // Prevent showing children on initial render
    }
  }

  render() {
    const {
      title,
      subTitle,
      children,
      dataTest,
      expandable,
      expanded,
      onClick
    } = this.props;
    return React.createElement(StyledCardSection, {
      "data-test": dataTest,
      expandable: expandable,
      expanded: expanded,
      contentHeight: this.contentHeight
    }, React.createElement(StyledCardSectionHeader, {
      expandable: expandable,
      expanded: expanded,
      onClick: onClick
    }, React.createElement(StyledTitleAndSubtitle, null, title && React.createElement(Heading, {
      type: "title3",
      element: "h3"
    }, title), subTitle && React.createElement(Text, null, subTitle)), expandable && React.createElement(StyledCardSectionIconRight, {
      size: "medium",
      color: "secondary"
    })), React.createElement(StyledCardSectionContent, {
      expanded: expanded
    }, React.createElement("div", {
      ref: this.node
    }, children)));
  }

}

export default CardSection;