97 lines
3.8 KiB
JavaScript
97 lines
3.8 KiB
JavaScript
"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; |