"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

var _requestanimationframeTimer = require("requestanimationframe-timer");

var _createTransitionContext = require("../context/createTransitionContext");

var _jsxFileName = "/Users/tylerbarnes/Documents/GitHub/transitionlink-workspace/gatsby-plugin-transition-link/src/components/TransitionRenderer.js";

var TransitionRenderer =
/*#__PURE__*/
function (_Component) {
  (0, _inheritsLoose2.default)(TransitionRenderer, _Component);

  function TransitionRenderer() {
    var _this;

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

    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
      shouldBeVisible: !!!_this.props.appearAfter
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "componentDidMount", function () {
      var delay = typeof _this.props.delay === "number" ? _this.props.delay : 0;
      var appearafter = typeof _this.props.appearAfter === "number" ? _this.props.appearAfter : 0;
      var timeout = delay + appearafter;
      _this.appearTimeout = (0, _requestanimationframeTimer.setTimeout)(function () {
        return _this.setState({
          shouldBeVisible: true
        });
      }, timeout);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "componentWillUnmount", function () {
      (0, _requestanimationframeTimer.clearTimeout)(_this.appearTimeout);
    });
    return _this;
  }

  var _proto = TransitionRenderer.prototype;

  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
    // only rerender if the transition status changes.
    return this.props.transitionStatus !== nextProps.transitionStatus || this.state.shouldBeVisible !== nextState.shouldBeVisible;
  };

  _proto.render = function render() {
    var _this$props = this.props,
        mount = _this$props.mount,
        entryZindex = _this$props.entryZindex,
        exitZindex = _this$props.exitZindex,
        transitionStatus = _this$props.transitionStatus,
        transitionState = _this$props.transitionState,
        children = _this$props.children;
    return _react.default.createElement("div", {
      className: "tl-wrapper " + (mount ? "tl-wrapper--mount" : "tl-wrapper--unmount") + " tl-wrapper-status--" + transitionStatus,
      style: {
        zIndex: mount ? entryZindex : exitZindex,
        opacity: this.state.shouldBeVisible ? 1 : 0
      },
      __source: {
        fileName: _jsxFileName,
        lineNumber: 45
      },
      __self: this
    }, _react.default.createElement(_createTransitionContext.PublicProvider, {
      value: (0, _extends2.default)({}, transitionState),
      __source: {
        fileName: _jsxFileName,
        lineNumber: 54
      },
      __self: this
    }, (0, _react.cloneElement)(children, (0, _extends2.default)({}, transitionState))));
  };

  return TransitionRenderer;
}(_react.Component);

exports.default = TransitionRenderer;