30-seconds-of-code/node_modules/gatsby-plugin-transition-link/AniLink/Cover.js

"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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

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 _ = _interopRequireWildcard(require("../"));

var _gsap = require("gsap");

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

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

  function Cover(_props) {
    var _this;

    _this = _Component.call(this, _props) || this;
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "horizontal", function (_ref) {
      var node = _ref.node,
          seconds = _ref.props.length,
          direction = _ref.direction;
      var directionTo = direction === "left" ? "-100%" : "100%";
      var directionFrom = direction === "left" ? "100%" : "-100%";
      var wait = seconds / 6;
      var half = (seconds - wait) / 2;
      return new _gsap.TimelineMax().set(_this.cover, {
        y: 0,
        x: directionFrom,
        display: "block"
      }).to(_this.cover, half, {
        x: "0%",
        ease: _gsap.Power1.easeInOut
      }).to(_this.cover, half, {
        x: directionTo,
        ease: _gsap.Power1.easeInOut
      }, "+=" + wait);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "vertical", function (_ref2) {
      var node = _ref2.node,
          seconds = _ref2.props.length,
          direction = _ref2.direction;
      var directionTo = direction === "up" ? "-100%" : "100%";
      var directionFrom = direction === "up" ? "100%" : "-100%";
      var wait = seconds / 6;
      var half = (seconds - wait) / 2;
      return new _gsap.TimelineMax().set(_this.cover, {
        y: directionFrom
      }).to(_this.cover, half, {
        y: "0%",
        ease: _gsap.Power1.easeInOut
      }).set(node, {
        opacity: 0
      }).to(_this.cover, half, {
        y: directionTo,
        ease: _gsap.Power1.easeIn
      }, "+=" + wait);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "moveInDirection", function (_ref3) {
      var props = _ref3.props,
          direction = _ref3.direction,
          node = _ref3.node;
      if (direction === "left" || direction === "right") return _this.horizontal({
        props: props,
        direction: direction,
        node: node
      });
      return _this.vertical({
        props: props,
        direction: direction,
        node: node
      });
    });
    _this.horizontal = _this.horizontal.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    _this.vertical = _this.vertical.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    _this.cover = _react.default.createRef();
    return _this;
  }

  var _proto = Cover.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var direction = this.props.direction || "left";
    var length = this.props.duration || 1;
    var _this$props = this.props,
        removedExit = _this$props.exit,
        removedEntry = _this$props.entry,
        removedProp = _this$props.cover,
        props = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["exit", "entry", "cover"]);
    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.default, (0, _extends2.default)({
      exit: {
        length: length,
        trigger: function trigger(_ref4) {
          var exit = _ref4.exit,
              node = _ref4.node;
          return _this2.moveInDirection({
            props: exit,
            node: node,
            direction: direction
          });
        }
      },
      entry: {
        delay: length / 2
      }
    }, props, {
      __source: {
        fileName: _jsxFileName,
        lineNumber: 82
      },
      __self: this
    }), this.props.children), _react.default.createElement(_.TransitionPortal, {
      __source: {
        fileName: _jsxFileName,
        lineNumber: 96
      },
      __self: this
    }, _react.default.createElement("div", {
      ref: function ref(n) {
        return _this2.cover = n;
      },
      style: {
        position: "fixed",
        background: this.props.bg || "#4b2571",
        top: 0,
        left: 0,
        width: "100vw",
        height: "100vh",
        transform: "translateY(100%)"
      },
      __source: {
        fileName: _jsxFileName,
        lineNumber: 97
      },
      __self: this
    })));
  };

  return Cover;
}(_react.Component);

exports.default = Cover;