@kiwicom/orbit-components/lib/hooks/useTransition/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 _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

const useTransition = ({
  show,
  appear = false
}) => {
  // if appear is true, we want to start from unmounted state, so that we can transition in
  const [mounted, setMounted] = React.useState(!appear && show);
  const [state, setState] = React.useState(!appear && show ? "enter" : "leave");
  const [done, setDone] = React.useState(!appear || !show);
  const ref = React.useRef(null);
  const firstRender = React.useRef(true); // const [, updateState] = React.useState()
  // const forceUpdate = React.useCallback(() => updateState({}), [])
  // if (module.hot) {
  //   module.hot.dispose(() => {
  //     firstRender.current = true
  //     setMounted(!appear && show)
  //     setEnter(!appear && show)
  //     setDone(!appear || !show)
  //     forceUpdate()
  //   })
  // }

  React.useEffect(() => {
    if (firstRender.current) {
      if (appear && show) {
        setMounted(true);
      }
    }
  }, [appear, show]);
  React.useEffect(() => {
    let listener;
    const el = ref.current;

    if (!firstRender.current) {
      if (show) {
        setMounted(true);
      } else {
        setState("leave");
        setDone(false);

        listener = () => {
          setMounted(false);
          setDone(true);
        };

        el === null || el === void 0 ? void 0 : el.addEventListener("transitionend", listener);
      }
    }

    return () => {
      el === null || el === void 0 ? void 0 : el.removeEventListener("transitionend", listener);
    };
  }, [show]);
  React.useEffect(() => {
    let listener;
    const el = ref.current;

    if (!firstRender.current) {
      if (mounted) {
        var _ref$current;

        // reading from properties like scrollTop forces a repaint, which we need
        // to make transition work immediately after mount
        // eslint-disable-next-line babel/no-unused-expressions
        (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollTop;
        setState("enter");
        setDone(false);

        listener = () => {
          setDone(true);
        };

        el === null || el === void 0 ? void 0 : el.addEventListener("transitionend", listener);
      }
    }

    return () => {
      el === null || el === void 0 ? void 0 : el.removeEventListener("transitionend", listener);
    };
  }, [mounted]);
  React.useEffect(() => {
    firstRender.current = false;
  }, []);
  return {
    ref,
    mounted,
    state,
    done
  };
};

var _default = useTransition;
exports.default = _default;