@kiwicom/orbit-components/es/utils/Slide/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 from "styled-components";
import defaultTheme from "../../defaultTheme";

const getMaxHeight = ({
  maxHeight
}) => {
  if (maxHeight === 0) return `0px`;
  if (!maxHeight) return undefined;
  return `${maxHeight}px`;
};

export const StyledSlide = styled.div.withConfig({
  displayName: "Slide__StyledSlide",
  componentId: "sc-1xbmdp2-0"
})(["position:relative;width:100%;transition:max-height ", " linear;max-height:", ";overflow:", ";visibility:", ";"], ({
  theme
}) => theme.orbit.durationFast, getMaxHeight, ({
  transitionFinished
}) => !transitionFinished && "hidden", ({
  visible
}) => !visible && "hidden");
StyledSlide.defaultProps = {
  theme: defaultTheme
};

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

    _defineProperty(this, "state", {
      maxHeight: 0,
      transitionFinished: false,
      visible: false
    });

    _defineProperty(this, "expandTimeout", null);

    _defineProperty(this, "collapseTimeout", null);

    _defineProperty(this, "transitionFinishedTimeout", null);

    _defineProperty(this, "visibleTimeout", null);

    _defineProperty(this, "setVisible", visible => () => {
      this.setState({
        visible
      });
    });

    _defineProperty(this, "setMaxHeight", () => {
      const {
        maxHeight
      } = this.props;
      this.setState({
        maxHeight
      });
    });

    _defineProperty(this, "expandCallback", () => {
      this.setState({
        maxHeight: null
      });
      this.transitionFinishedTimeout = setTimeout(this.transitionFinishedCallback(true), 100);
    });

    _defineProperty(this, "collapseCallback", () => {
      this.setState({
        maxHeight: 0,
        transitionFinished: false
      });
      this.visibleTimeout = setTimeout(this.setVisible(false), 150);

      if (this.transitionFinishedTimeout && typeof clearTimeout === "function") {
        clearTimeout(this.transitionFinishedTimeout);
        this.transitionFinishedTimeout = null;
      }
    });

    _defineProperty(this, "transitionFinishedCallback", transitionFinished => () => {
      this.setState({
        transitionFinished
      });
    });
  }

  componentDidMount() {
    this.setMaxHeight();

    if (this.props.expanded) {
      this.setState({
        transitionFinished: true,
        visible: true
      });
    }
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      if (this.props.expanded) {
        this.setMaxHeight();

        if (typeof setTimeout === "function") {
          if (this.visibleTimeout && typeof clearTimeout === "function") {
            clearTimeout(this.visibleTimeout);
            this.visibleTimeout = null;
          }

          this.setVisible(true)();
          this.expandTimeout = setTimeout(this.expandCallback, 150);
        }
      } else {
        if (this.state.maxHeight !== this.props.maxHeight) {
          this.setMaxHeight();
        }

        if (typeof setTimeout === "function") {
          if (this.expandTimeout && typeof clearTimeout === "function") {
            clearTimeout(this.expandTimeout);
            this.expandTimeout = null;
          }

          this.collapseTimeout = setTimeout(this.collapseCallback, 1);
        }
      }
    }
  }

  componentWillUnmount() {
    if (typeof clearTimeout === "function") {
      if (this.expandTimeout) {
        clearTimeout(this.expandTimeout);
      }

      if (this.collapseTimeout) {
        clearTimeout(this.collapseTimeout);
      }

      if (this.transitionFinishedTimeout) {
        clearTimeout(this.transitionFinishedTimeout);
      }

      if (this.visibleTimeout) {
        clearTimeout(this.visibleTimeout);
      }
    }
  }

  getSnapshotBeforeUpdate(prevProps) {
    if (this.props.expanded === prevProps.expanded) return null;
    return true;
  }

  render() {
    const {
      children,
      expanded = false,
      id,
      ariaLabelledBy
    } = this.props;
    const {
      transitionFinished,
      maxHeight,
      visible
    } = this.state;
    return React.createElement(StyledSlide, {
      maxHeight: maxHeight,
      expanded: expanded,
      transitionFinished: transitionFinished,
      "aria-hidden": !expanded,
      id: id,
      "aria-labelledby": ariaLabelledBy,
      visible: visible
    }, children);
  }

}

export default Slide;