@kiwicom/orbit-components/es/Tile/TileExpandable/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 Slide from "../../utils/Slide";
import defaultTheme from "../../defaultTheme";
const StyledTileExpandable = styled.div.withConfig({
  displayName: "TileExpandable__StyledTileExpandable",
  componentId: "notqy1-0"
})(["border-top:", ";padding:", ";margin:0 ", ";", ";font-size:", ";line-height:", ";color:", ";"], ({
  theme,
  expanded
}) => expanded ? `1px solid ${theme.orbit.paletteCloudNormal}` : `0px solid ${theme.orbit.paletteCloudNormal}`, ({
  theme,
  expanded
}) => expanded && `${theme.orbit.spaceMedium} 0`, ({
  theme
}) => theme.orbit.spaceMedium, ({
  initialExpanded,
  theme
}) => !initialExpanded && css(["transition:max-height ", " ease-in-out,padding ", " ease-in-out,border-top ", " ease-in-out;"], theme.orbit.durationFast, theme.orbit.durationFast, theme.orbit.durationFast), ({
  theme
}) => theme.orbit.fontSizeTextNormal, ({
  theme
}) => theme.orbit.lineHeightTextNormal, ({
  theme
}) => theme.orbit.colorTextPrimary);
StyledTileExpandable.defaultProps = {
  theme: defaultTheme
};

class TileExpandable extends React.PureComponent {
  constructor(props) {
    super(props);

    _defineProperty(this, "timeout", void 0);

    _defineProperty(this, "node", void 0);

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

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

    this.node = React.createRef();
    this.state = {
      contentHeight: 0
    };
  }

  componentDidMount() {
    this.timeout = setTimeout(this.setHeight, 250); // Prevent showing children on initial render

    window.addEventListener("resize", this.setHeight);
  }

  componentDidUpdate() {
    // Calculate height on expand - for dynamic components like TripSector
    this.setHeight();
  }

  componentWillUnmount() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }

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

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

}

export default TileExpandable;