wix-style-react/dist/src/Transition/Transition.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactTransitionGroup = require("react-transition-group");
var _constants = require("./constants");
var _utils = require("./utils/utils");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/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 [ref, setRef] = (0, _react.useState)(null);
  (0, _react.useEffect)(() => {
    if (ref) {
      setDimensions({
        height: ref.scrollHeight,
        width: ref.scrollWidth
      });
    }
  }, [ref]);
  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 = () => {
    onStart == null || onStart();
  };
  var handleEnd = () => {
    onEnd == null || onEnd();
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": dataHook,
    className: className,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 78,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, {
    appear: animateOnLoad,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 79,
      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,
      onExiting: handleStart,
      onEntered: handleEnd,
      onExited: handleEnd,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 83,
        columnNumber: 15
      }
    }, state => {
      return /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": _constants.dataHooks.fadeStyles,
        style: fade[state],
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 102,
          columnNumber: 21
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": _constants.dataHooks.moveStyles,
        style: move[state],
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 103,
          columnNumber: 23
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": _constants.dataHooks.scaleStyles,
        style: scale[state],
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 104,
          columnNumber: 25
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": _constants.dataHooks.toggleStyles,
        style: toggle[state],
        ref: callback => setRef(callback),
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 108,
          columnNumber: 27
        }
      }, child))));
    });
  })));
};
Transition.displayName = 'Transition';
Transition.propTypes = {
  animateOnLoad: _propTypes.default.bool,
  children: _propTypes.default.node,
  dataHook: _propTypes.default.string,
  enterAnimation: _propTypes.default.shape({
    fadeIn: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
    moveIn: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
    expand: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
    scaleUp: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool])
  }),
  exitAnimation: _propTypes.default.shape({
    fadeOut: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
    moveOut: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
    collapse: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
    scaleDown: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool])
  }),
  mountOnEnter: _propTypes.default.bool,
  onStart: _propTypes.default.func,
  onEnd: _propTypes.default.func,
  show: _propTypes.default.bool,
  unmountOnExit: _propTypes.default.bool
};
var _default = exports.default = Transition;
//# sourceMappingURL=Transition.js.map