"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactTransitionGroup = require("react-transition-group");
var _constants = require("./constants");
var _utils = require("./utils/utils");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Transition/Transition.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/** Transition is a wrapper that allows animations of other components. */
var Transition = _ref => {
  var {
    animateOnLoad = false,
    dataHook,
    children,
    enterAnimation,
    exitAnimation,
    mountOnEnter,
    unmountOnExit,
    onEnd,
    onStart,
    show,
    className
  } = _ref;
  var [dimensions, setDimensions] = (0, _react.useState)({});
  var [stateRef, setStateRef] = (0, _react.useState)(null);
  var _ref2 = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    if (stateRef) {
      setDimensions({
        height: stateRef.scrollHeight,
        width: stateRef.scrollWidth
      });
    }
  }, [stateRef]);
  var {
    fade,
    move,
    scale,
    toggle
  } = (0, _react.useMemo)(() => {
    if (dimensions) {
      return (0, _utils.getTransitionStyles)(dimensions, enterAnimation, exitAnimation);
    }
    return {
      fade: {},
      move: {},
      scale: {},
      toggle: {}
    };
  }, [enterAnimation, exitAnimation, dimensions]);
  var timeout = (0, _react.useMemo)(() => {
    return (0, _utils.getTimeout)(enterAnimation, exitAnimation);
  }, [enterAnimation, exitAnimation]);
  var childrenClone = _react.Children.map(children, child => {
    if (/*#__PURE__*/_react.default.isValidElement(child) && (show === undefined || !!show)) {
      return /*#__PURE__*/_react.default.cloneElement(child);
    }
    return;
  });
  var handleStart = animationTiming => {
    onStart == null || onStart(animationTiming);
  };
  var handleEnd = animationTiming => {
    onEnd == null || onEnd(animationTiming);
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": dataHook,
    className: className,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 79,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, {
    appear: animateOnLoad,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 80,
      columnNumber: 7
    }
  }, childrenClone && childrenClone.map(child => {
    return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition
    // Transition component needs React key property to find correct child in the list
    , {
      key: child.key,
      "data-hook": _constants.dataHooks.transition,
      mountOnEnter: mountOnEnter,
      unmountOnExit: unmountOnExit,
      in: show,
      timeout: {
        // Transition component won't show enter animation when enter timeout is set
        enter: 0,
        exit: timeout.exit
      },
      onEntering: () => handleStart('enter'),
      onExiting: () => handleStart('exit'),
      onEntered: () => handleEnd('enter'),
      onExited: () => handleEnd('exit'),
      nodeRef: _ref2,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 84,
        columnNumber: 15
      }
    }, state => {
      return /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": _constants.dataHooks.fadeStyles,
        style: fade[state],
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 104,
          columnNumber: 21
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": _constants.dataHooks.moveStyles,
        style: move[state],
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 105,
          columnNumber: 23
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": _constants.dataHooks.scaleStyles,
        style: scale[state],
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 106,
          columnNumber: 25
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": _constants.dataHooks.toggleStyles,
        style: toggle[state],
        ref: callback => {
          setStateRef(callback);
          _ref2.current = callback;
        },
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 110,
          columnNumber: 27
        }
      }, child))));
    });
  })));
};
Transition.displayName = 'Transition';
var _default = exports.default = Transition;
//# sourceMappingURL=Transition.js.map