@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 toggleDown from "../../utils/toggleDown/index";
import toggleUp from "../../utils/toggleUp/index";
import defaultTokens from "../../defaultTokens";

const getAnimation = ({
  theme,
  expanded,
  contentHeight
}) => expanded ? css(["", " ", " linear;"], theme.orbit.durationFast, toggleDown(contentHeight)) : css(["", " ", " linear;"], theme.orbit.durationFast, toggleUp(contentHeight));

const StyledTileExpandable = styled.div.withConfig({
  displayName: "TileExpandable__StyledTileExpandable",
  componentId: "notqy1-0"
})(["border-top:", ";padding:", ";margin:0 ", ";max-height:", ";transition:", ";overflow:hidden;animation:", ";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, ({
  contentHeight,
  expanded,
  initialExpanded
}) => !initialExpanded && (expanded ? `${contentHeight}px` : "0"), ({
  initialExpanded,
  theme
}) => !initialExpanded && `
      max-height ${theme.orbit.durationFast} linear,
      padding ${theme.orbit.durationFast} linear,
      border-top ${theme.orbit.durationFast} linear
    `, ({
  initialExpanded
}) => !initialExpanded && getAnimation, ({
  theme
}) => theme.orbit.fontSizeTextNormal, ({
  theme
}) => theme.orbit.lineHeightText, ({
  theme
}) => theme.orbit.colorTextPrimary);
StyledTileExpandable.defaultProps = {
  theme: defaultTokens
};

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

    _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", void 0);

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

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

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

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

}

export default TileExpandable;