"use strict";

Liferay.Loader.define("sharing-web$react-transition-group@4.4.1/cjs/CSSTransition", ['module', 'exports', 'require', 'frontend-js-react-web$prop-types', 'sharing-web$dom-helpers/addClass', 'sharing-web$dom-helpers/removeClass', 'frontend-js-react-web$react', './Transition', './utils/PropTypes'], function (module, exports, require) {
  var define = undefined;
  var global = window;
  {
    exports.__esModule = true;
    exports.default = void 0;

    var _propTypes = _interopRequireDefault(require("frontend-js-react-web$prop-types"));

    var _addClass2 = _interopRequireDefault(require("sharing-web$dom-helpers/addClass"));

    var _removeClass = _interopRequireDefault(require("sharing-web$dom-helpers/removeClass"));

    var _react = _interopRequireDefault(require("frontend-js-react-web$react"));

    var _Transition = _interopRequireDefault(require("./Transition"));

    var _PropTypes = require("./utils/PropTypes");

    function _interopRequireDefault(obj) {
      return obj && obj.__esModule ? obj : { default: obj };
    }

    function _extends() {
      _extends = Object.assign || function (target) {
        for (var i = 1; i < arguments.length; i++) {
          var source = arguments[i];for (var key in source) {
            if (Object.prototype.hasOwnProperty.call(source, key)) {
              target[key] = source[key];
            }
          }
        }return target;
      };return _extends.apply(this, arguments);
    }

    function _objectWithoutPropertiesLoose(source, excluded) {
      if (source == null) return {};var target = {};var sourceKeys = Object.keys(source);var key, i;for (i = 0; i < sourceKeys.length; i++) {
        key = sourceKeys[i];if (excluded.indexOf(key) >= 0) continue;target[key] = source[key];
      }return target;
    }

    function _inheritsLoose(subClass, superClass) {
      subClass.prototype = Object.create(superClass.prototype);subClass.prototype.constructor = subClass;subClass.__proto__ = superClass;
    }

    var _addClass = function addClass(node, classes) {
      return node && classes && classes.split(' ').forEach(function (c) {
        return (0, _addClass2.default)(node, c);
      });
    };

    var removeClass = function removeClass(node, classes) {
      return node && classes && classes.split(' ').forEach(function (c) {
        return (0, _removeClass.default)(node, c);
      });
    };
    /**
     * A transition component inspired by the excellent
     * [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should
     * use it if you're using CSS transitions or animations. It's built upon the
     * [`Transition`](https://reactcommunity.org/react-transition-group/transition)
     * component, so it inherits all of its props.
     *
     * `CSSTransition` applies a pair of class names during the `appear`, `enter`,
     * and `exit` states of the transition. The first class is applied and then a
     * second `*-active` class in order to activate the CSS transition. After the
     * transition, matching `*-done` class names are applied to persist the
     * transition state.
     *
     * ```jsx
     * function App() {
     *   const [inProp, setInProp] = useState(false);
     *   return (
     *     <div>
     *       <CSSTransition in={inProp} timeout={200} classNames="my-node">
     *         <div>
     *           {"I'll receive my-node-* classes"}
     *         </div>
     *       </CSSTransition>
     *       <button type="button" onClick={() => setInProp(true)}>
     *         Click to Enter
     *       </button>
     *     </div>
     *   );
     * }
     * ```
     *
     * When the `in` prop is set to `true`, the child component will first receive
     * the class `example-enter`, then the `example-enter-active` will be added in
     * the next tick. `CSSTransition` [forces a
     * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
     * between before adding the `example-enter-active`. This is an important trick
     * because it allows us to transition between `example-enter` and
     * `example-enter-active` even though they were added immediately one after
     * another. Most notably, this is what makes it possible for us to animate
     * _appearance_.
     *
     * ```css
     * .my-node-enter {
     *   opacity: 0;
     * }
     * .my-node-enter-active {
     *   opacity: 1;
     *   transition: opacity 200ms;
     * }
     * .my-node-exit {
     *   opacity: 1;
     * }
     * .my-node-exit-active {
     *   opacity: 0;
     *   transition: opacity 200ms;
     * }
     * ```
     *
     * `*-active` classes represent which styles you want to animate **to**, so it's
     * important to add `transition` declaration only to them, otherwise transitions
     * might not behave as intended! This might not be obvious when the transitions
     * are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in
     * the example above (minus `transition`), but it becomes apparent in more
     * complex transitions.
     *
     * **Note**: If you're using the
     * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)
     * prop, make sure to define styles for `.appear-*` classes as well.
     */

    var CSSTransition = /*#__PURE__*/function (_React$Component) {
      _inheritsLoose(CSSTransition, _React$Component);

      function CSSTransition() {
        var _this;

        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
          args[_key] = arguments[_key];
        }

        _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
        _this.appliedClasses = {
          appear: {},
          enter: {},
          exit: {}
        };

        _this.onEnter = function (maybeNode, maybeAppearing) {
          var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),
              node = _this$resolveArgument[0],
              appearing = _this$resolveArgument[1];

          _this.removeClasses(node, 'exit');

          _this.addClass(node, appearing ? 'appear' : 'enter', 'base');

          if (_this.props.onEnter) {
            _this.props.onEnter(maybeNode, maybeAppearing);
          }
        };

        _this.onEntering = function (maybeNode, maybeAppearing) {
          var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),
              node = _this$resolveArgument2[0],
              appearing = _this$resolveArgument2[1];

          var type = appearing ? 'appear' : 'enter';

          _this.addClass(node, type, 'active');

          if (_this.props.onEntering) {
            _this.props.onEntering(maybeNode, maybeAppearing);
          }
        };

        _this.onEntered = function (maybeNode, maybeAppearing) {
          var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),
              node = _this$resolveArgument3[0],
              appearing = _this$resolveArgument3[1];

          var type = appearing ? 'appear' : 'enter';

          _this.removeClasses(node, type);

          _this.addClass(node, type, 'done');

          if (_this.props.onEntered) {
            _this.props.onEntered(maybeNode, maybeAppearing);
          }
        };

        _this.onExit = function (maybeNode) {
          var _this$resolveArgument4 = _this.resolveArguments(maybeNode),
              node = _this$resolveArgument4[0];

          _this.removeClasses(node, 'appear');

          _this.removeClasses(node, 'enter');

          _this.addClass(node, 'exit', 'base');

          if (_this.props.onExit) {
            _this.props.onExit(maybeNode);
          }
        };

        _this.onExiting = function (maybeNode) {
          var _this$resolveArgument5 = _this.resolveArguments(maybeNode),
              node = _this$resolveArgument5[0];

          _this.addClass(node, 'exit', 'active');

          if (_this.props.onExiting) {
            _this.props.onExiting(maybeNode);
          }
        };

        _this.onExited = function (maybeNode) {
          var _this$resolveArgument6 = _this.resolveArguments(maybeNode),
              node = _this$resolveArgument6[0];

          _this.removeClasses(node, 'exit');

          _this.addClass(node, 'exit', 'done');

          if (_this.props.onExited) {
            _this.props.onExited(maybeNode);
          }
        };

        _this.resolveArguments = function (maybeNode, maybeAppearing) {
          return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`
          : [maybeNode, maybeAppearing];
        };

        _this.getClassNames = function (type) {
          var classNames = _this.props.classNames;
          var isStringClassNames = typeof classNames === 'string';
          var prefix = isStringClassNames && classNames ? classNames + "-" : '';
          var baseClassName = isStringClassNames ? "" + prefix + type : classNames[type];
          var activeClassName = isStringClassNames ? baseClassName + "-active" : classNames[type + "Active"];
          var doneClassName = isStringClassNames ? baseClassName + "-done" : classNames[type + "Done"];
          return {
            baseClassName: baseClassName,
            activeClassName: activeClassName,
            doneClassName: doneClassName
          };
        };

        return _this;
      }

      var _proto = CSSTransition.prototype;

      _proto.addClass = function addClass(node, type, phase) {
        var className = this.getClassNames(type)[phase + "ClassName"];

        var _this$getClassNames = this.getClassNames('enter'),
            doneClassName = _this$getClassNames.doneClassName;

        if (type === 'appear' && phase === 'done' && doneClassName) {
          className += " " + doneClassName;
        } // This is for to force a repaint,
        // which is necessary in order to transition styles when adding a class name.


        if (phase === 'active') {
          /* eslint-disable no-unused-expressions */
          node && node.scrollTop;
        }

        if (className) {
          this.appliedClasses[type][phase] = className;

          _addClass(node, className);
        }
      };

      _proto.removeClasses = function removeClasses(node, type) {
        var _this$appliedClasses$ = this.appliedClasses[type],
            baseClassName = _this$appliedClasses$.base,
            activeClassName = _this$appliedClasses$.active,
            doneClassName = _this$appliedClasses$.done;
        this.appliedClasses[type] = {};

        if (baseClassName) {
          removeClass(node, baseClassName);
        }

        if (activeClassName) {
          removeClass(node, activeClassName);
        }

        if (doneClassName) {
          removeClass(node, doneClassName);
        }
      };

      _proto.render = function render() {
        var _this$props = this.props,
            _ = _this$props.classNames,
            props = _objectWithoutPropertiesLoose(_this$props, ["classNames"]);

        return (/*#__PURE__*/_react.default.createElement(_Transition.default, _extends({}, props, {
            onEnter: this.onEnter,
            onEntered: this.onEntered,
            onEntering: this.onEntering,
            onExit: this.onExit,
            onExiting: this.onExiting,
            onExited: this.onExited
          }))
        );
      };

      return CSSTransition;
    }(_react.default.Component);

    CSSTransition.defaultProps = {
      classNames: ''
    };
    CSSTransition.propTypes = {};
    var _default = CSSTransition;
    exports.default = _default;
    module.exports = exports.default;
  }
});
//# sourceMappingURL=CSSTransition.js.map