@kiwicom/orbit-components/lib/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.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
const getTransitionDurationClass = duration => {
  const classes = {
    slow: "duration-slow",
    normal: "duration-normal",
    fast: "duration-fast"
  };
  return classes[duration];
};
class Slide extends React.Component {
  state = {
    maxHeight: typeof this.props.maxHeight !== "undefined" ? this.props.maxHeight : 0,
    transitionFinished: false,
    visible: false
  };
  static defaultProps = {
    transitionDuration: "fast",
    stopClickPropagation: true
  };
  expandTimeout = null;
  collapseTimeout = null;
  transitionFinishedTimeout = null;
  visibleTimeout = null;
  componentDidMount() {
    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;
  }
  setVisible = visible => () => {
    this.setState({
      visible
    });
  };
  setMaxHeight = () => {
    const {
      maxHeight
    } = this.props;
    this.setState({
      maxHeight
    });
  };
  expandCallback = () => {
    this.setState({
      maxHeight: null
    });
    this.transitionFinishedTimeout = setTimeout(this.transitionFinishedCallback(true), 100);
  };
  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;
    }
  };
  transitionFinishedCallback = transitionFinished => () => {
    this.setState({
      transitionFinished
    });
  };
  render() {
    const {
      children,
      expanded = false,
      id,
      ariaLabelledBy,
      transitionDuration
    } = this.props;
    const {
      transitionFinished,
      maxHeight,
      visible
    } = this.state;
    return (
      /*#__PURE__*/
      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
      React.createElement("div", {
        className: (0, _clsx.default)("orbit-slide relative w-full cursor-default", transitionDuration && "transition-[max-height] ease-linear", transitionDuration && getTransitionDurationClass(transitionDuration), !transitionFinished && "overflow-hidden", !visible && "invisible"),
        style: {
          maxHeight: maxHeight ?? undefined
        },
        "aria-hidden": !expanded,
        id: id,
        "aria-labelledby": ariaLabelledBy,
        onClick: this.props.stopClickPropagation ? ev => {
          ev.stopPropagation();
        } : undefined
      }, children)
    );
  }
}
var _default = exports.default = Slide;