react-fader
Version:
component that fades out old children, then fades in new children when its children change
287 lines (286 loc) • 15.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var React = _interopRequireWildcard(require("react"));
var _reactTransitionContext = require("react-transition-context");
var _inlineStylePrefixer = _interopRequireDefault(require("inline-style-prefixer"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-env browser */
var defaultProps = {
fadeInTransitionDuration: 200,
fadeInTransitionTimingFunction: 'linear',
fadeOutTransitionDuration: 200,
fadeOutTransitionTimingFunction: 'linear',
sizeTransitionDuration: 200,
sizeTransitionTimingFunction: 'ease',
prefixer: new _inlineStylePrefixer["default"](),
style: {},
measureHeight: function measureHeight(el) {
return el.clientHeight;
},
measureWidth: function measureWidth(el) {
return el.clientWidth;
},
shouldTransition: function shouldTransition(oldChildren, newChildren) {
if (oldChildren === newChildren) return false;
if ( /*#__PURE__*/React.isValidElement(oldChildren) && /*#__PURE__*/React.isValidElement(newChildren) && oldChildren.key != null && oldChildren.key === newChildren.key) {
return false;
}
return true;
}
};
function applyDefaults(props) {
var result = _objectSpread({}, props);
for (var key in defaultProps) {
if (Object.prototype.hasOwnProperty.call(defaultProps, key) && props[key] == null) {
result[key] = defaultProps[key];
}
}
return result;
}
var Fader = exports["default"] = /*#__PURE__*/function (_React$Component) {
(0, _inherits2["default"])(Fader, _React$Component);
var _super = _createSuper(Fader);
function Fader() {
var _this;
(0, _classCallCheck2["default"])(this, Fader);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "lastProps", _this.props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "lastDefaultedProps", void 0);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getDefaultedProps", function () {
if (_this.lastProps !== _this.props || !_this.lastDefaultedProps) {
_this.lastProps = _this.props;
_this.lastDefaultedProps = applyDefaults(_this.props);
}
return _this.lastDefaultedProps;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "wrapChildren", function (children, transitionState) {
var _this$getDefaultedPro = _this.getDefaultedProps(),
animateWidth = _this$getDefaultedPro.animateWidth,
prefixer = _this$getDefaultedPro.prefixer,
viewStyle = _this$getDefaultedPro.viewStyle,
innerViewWrapperStyle = _this$getDefaultedPro.innerViewWrapperStyle,
fadeInTransitionDuration = _this$getDefaultedPro.fadeInTransitionDuration,
fadeInTransitionTimingFunction = _this$getDefaultedPro.fadeInTransitionTimingFunction,
fadeOutTransitionDuration = _this$getDefaultedPro.fadeOutTransitionDuration,
fadeOutTransitionTimingFunction = _this$getDefaultedPro.fadeOutTransitionTimingFunction;
var style = _objectSpread({
display: animateWidth ? 'inline-flex' : 'flex',
transitionProperty: 'opacity'
}, viewStyle);
switch (transitionState) {
case 'out':
case 'entering':
style.opacity = transitionState === 'entering' ? 1 : 0;
style.transitionDuration = fadeInTransitionDuration + 'ms';
style.transitionTimingFunction = fadeInTransitionTimingFunction;
break;
case 'in':
case 'leaving':
style.opacity = transitionState === 'in' ? 1 : 0;
style.transitionDuration = fadeOutTransitionDuration + 'ms';
style.transitionTimingFunction = fadeOutTransitionTimingFunction;
break;
}
return /*#__PURE__*/React.createElement("div", {
"data-transition-state": transitionState,
style: prefixer.prefix(style)
}, /*#__PURE__*/React.createElement("div", {
style: prefixer.prefix(_objectSpread({
width: animateWidth ? undefined : '100%'
}, innerViewWrapperStyle)),
ref: function ref(c) {
return _this.wrappedChildrenRef = c;
}
}, /*#__PURE__*/React.createElement(_reactTransitionContext.TransitionContext, {
state: transitionState
}, children)));
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "wrappedChildrenRef", void 0);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "timeouts", {});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
children: _this.props.children,
height: undefined,
width: undefined,
wrappedChildren: _this.wrapChildren(_this.props.children, 'in'),
transitionState: 'in',
transitioningSize: false
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTransitionEnd", function () {
var _this$getDefaultedPro2 = _this.getDefaultedProps(),
shouldTransition = _this$getDefaultedPro2.shouldTransition,
fadeOutTransitionDuration = _this$getDefaultedPro2.fadeOutTransitionDuration;
var transitionState = _this.state.transitionState;
if (transitionState === 'leaving') {
_this.setState({
transitionState: 'out',
wrappedChildren: _this.wrapChildren(_this.props.children, 'out')
});
} else if (transitionState === 'entering') {
if (shouldTransition(_this.state.children, _this.props.children)) {
_this.setState({
transitionState: 'leaving',
wrappedChildren: _this.wrapChildren(_this.state.children, 'leaving')
});
_this.setTimeout('fadeOut', _this.onTransitionEnd, fadeOutTransitionDuration);
} else {
_this.setState({
transitionState: 'in',
height: undefined,
width: undefined,
wrappedChildren: _this.wrapChildren(_this.props.children, 'in')
});
}
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSizeTransitionEnd", function () {
_this.setState({
transitioningSize: false
});
});
return _this;
}
(0, _createClass2["default"])(Fader, [{
key: "setTimeout",
value: function (_setTimeout) {
function setTimeout(_x, _x2, _x3) {
return _setTimeout.apply(this, arguments);
}
setTimeout.toString = function () {
return _setTimeout.toString();
};
return setTimeout;
}(function (name, callback, delay) {
if (this.timeouts[name]) clearTimeout(this.timeouts[name]);
this.timeouts[name] = setTimeout(callback, delay);
})
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
var _this$state = this.state,
transitionState = _this$state.transitionState,
height = _this$state.height,
width = _this$state.width,
transitioningSize = _this$state.transitioningSize;
var _this$getDefaultedPro3 = this.getDefaultedProps(),
animateHeight = _this$getDefaultedPro3.animateHeight,
animateWidth = _this$getDefaultedPro3.animateWidth,
measureHeight = _this$getDefaultedPro3.measureHeight,
measureWidth = _this$getDefaultedPro3.measureWidth,
_shouldTransition = _this$getDefaultedPro3.shouldTransition,
fadeOutTransitionDuration = _this$getDefaultedPro3.fadeOutTransitionDuration,
fadeInTransitionDuration = _this$getDefaultedPro3.fadeInTransitionDuration,
sizeTransitionDuration = _this$getDefaultedPro3.sizeTransitionDuration;
var shouldTransition = _shouldTransition(this.state.children, this.props.children);
if (transitionState === 'in' && shouldTransition) {
var newState = {};
newState.children = this.props.children;
newState.transitionState = 'leaving';
newState.wrappedChildren = this.wrapChildren(this.state.children, 'leaving');
this.setTimeout('fadeOut', this.onTransitionEnd, fadeOutTransitionDuration);
if (animateHeight && height === undefined && this.wrappedChildrenRef) {
newState.height = measureHeight(this.wrappedChildrenRef);
}
if (animateWidth && width === undefined && this.wrappedChildrenRef) {
newState.width = measureWidth(this.wrappedChildrenRef);
}
this.setState(function (state) {
return _objectSpread(_objectSpread({}, state), newState);
});
} else if (transitionState === 'leaving' && (animateHeight || animateWidth)) {
if (!transitioningSize) this.setState({
transitioningSize: true
});
} else if (transitionState === 'out') {
var _newState = {};
if (shouldTransition) {
_newState.children = this.props.children;
_newState.wrappedChildren = this.wrapChildren(this.props.children, 'out');
} else {
_newState.transitionState = 'entering';
_newState.children = this.props.children;
_newState.wrappedChildren = this.wrapChildren(this.props.children, 'entering');
this.setTimeout('fadeIn', this.onTransitionEnd, fadeInTransitionDuration);
if (animateHeight) {
if (this.wrappedChildrenRef) {
_newState.height = measureHeight(this.wrappedChildrenRef);
}
this.setTimeout('height', this.onSizeTransitionEnd, sizeTransitionDuration);
}
if (animateWidth) {
if (this.wrappedChildrenRef) {
_newState.width = measureWidth(this.wrappedChildrenRef);
}
this.setTimeout('width', this.onSizeTransitionEnd, sizeTransitionDuration);
}
}
this.setState(function (state) {
return _objectSpread(_objectSpread({}, state), _newState);
});
} else if (!shouldTransition && this.state.children !== this.props.children) {
var _newState2 = {};
_newState2.children = this.props.children;
_newState2.wrappedChildren = this.wrapChildren(this.props.children, transitionState);
this.setState(function (state) {
return _objectSpread(_objectSpread({}, state), _newState2);
});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
for (var _name in this.timeouts) clearTimeout(this.timeouts[_name]);
}
}, {
key: "render",
value: function render() {
var _this$state2 = this.state,
height = _this$state2.height,
width = _this$state2.width,
transitioningSize = _this$state2.transitioningSize,
wrappedChildren = _this$state2.wrappedChildren;
var _this$getDefaultedPro4 = this.getDefaultedProps(),
animateWidth = _this$getDefaultedPro4.animateWidth,
className = _this$getDefaultedPro4.className,
prefixer = _this$getDefaultedPro4.prefixer,
innerRef = _this$getDefaultedPro4.innerRef,
_style = _this$getDefaultedPro4.style,
sizeTransitionDuration = _this$getDefaultedPro4.sizeTransitionDuration,
sizeTransitionTimingFunction = _this$getDefaultedPro4.sizeTransitionTimingFunction;
var style = _objectSpread({
height: height,
width: width,
display: animateWidth ? 'inline-block' : 'block'
}, _style);
if (transitioningSize) {
style.overflow = 'hidden';
style.transition = "height ".concat(sizeTransitionDuration, "ms ").concat(sizeTransitionTimingFunction, ", width ").concat(sizeTransitionDuration, "ms ").concat(sizeTransitionTimingFunction);
}
return /*#__PURE__*/React.createElement("div", {
className: className,
style: prefixer.prefix(style),
ref: innerRef
}, wrappedChildren);
}
}]);
return Fader;
}(React.Component);
module.exports = exports.default;