@animxyz/react
Version:
AnimXYZ is a composable animation library that makes your site shine
396 lines (323 loc) • 12 kB
JavaScript
/**
* ReactAnimXyz v0.6.6
* Copyright (c) 2020-present Ingram Projects
* Released under the MIT License.
* https://animxyz.com
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var PropTypes = require('prop-types');
var clsx = require('clsx');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
function _typeof(obj) {
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function (obj) {
return typeof obj;
};
} else {
_typeof = function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(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 _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function deleteUndefined (obj) {
Object.keys(obj).forEach(function (key) {
if (obj[key] === undefined) {
delete obj[key];
}
});
}
function getXyzDurationForMode (mode, duration) {
switch (_typeof(duration)) {
case 'number':
return duration;
case 'string':
return duration;
case 'object':
if (duration === null) return null;
return duration[mode];
}
return null;
}
function getXyzElementMode (el) {
if (el.classList.contains('xyz-appear')) {
return 'appear';
}
if (el.classList.contains('xyz-in')) {
return 'in';
}
if (el.classList.contains('xyz-out')) {
return 'out';
}
return null;
}
function clearXyzElementProperties(el) {
if (el._xyzAppearObserver) {
el._xyzAppearObserver.disconnect();
}
if (el._xyzAnimTimeout) {
clearTimeout(el._xyzAnimTimeout);
}
el.removeEventListener('animationend', el._xyzAnimEnd);
el.removeEventListener('animationcancelled', el._xyzAnimEnd);
delete el._xyzAppearObserver;
delete el._xyzAnimTimeout;
delete el._xyzAnimEnd;
}
function getXyzAnimationHook (duration, appearVisible) {
return function (el, done) {
clearXyzElementProperties(el);
function xyzAnimDone() {
clearXyzElementProperties(el);
done();
}
var mode = getXyzElementMode(el);
function runAnim() {
var modeDuration = getXyzDurationForMode(mode, duration);
if (typeof modeDuration === 'number') {
el._xyzAnimTimeout = setTimeout(xyzAnimDone, modeDuration);
return;
}
var xyzModeKeyframes = "xyz-".concat(mode, "-keyframes");
var xyzEls = new Set([el]);
if (modeDuration === 'auto') {
var xyzNestedEls = el.querySelectorAll(".xyz-nested, .xyz-".concat(mode, "-nested"));
xyzNestedEls.forEach(xyzEls.add, xyzEls);
}
function removeXyzEl(xyzEl) {
xyzEls.delete(xyzEl);
if (xyzEls.size === 0) {
xyzAnimDone();
}
} // After one tick remove any elements that are dont have active animations
el._xyzAnimTimeout = setTimeout(function () {
xyzEls.forEach(function (xyzEl) {
// Remove if element isnt visible
var visible = xyzEl.offsetParent || xyzEl.getClientRects().length;
if (!visible) {
removeXyzEl(xyzEl);
} // Remove if element has xyz animation overridden
var animationName = window.getComputedStyle(xyzEl).getPropertyValue('animation-name');
if (animationName.indexOf(xyzModeKeyframes) === -1) {
removeXyzEl(xyzEl);
}
});
});
el._xyzAnimEnd = function (event) {
if (event.animationName === xyzModeKeyframes) {
removeXyzEl(event.target);
}
};
el.addEventListener('animationend', el._xyzAnimEnd, false);
el.addEventListener('animationcancelled', el._xyzAnimEnd, false);
}
if (mode === 'appear' && appearVisible) {
var observerOptions = Object.assign({}, appearVisible);
el.classList.add('xyz-paused-all');
el._xyzAppearObserver = new IntersectionObserver(function (entries, observer) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
el.classList.remove('xyz-paused-all');
observer.disconnect();
runAnim();
}
});
}, observerOptions);
el._xyzAppearObserver.observe(el);
} else {
runAnim();
}
};
}
var xyzTransitionClasses = {
appearFrom: 'xyz-appear-from',
appearActive: 'xyz-appear',
appearTo: 'xyz-appear-to',
inFrom: 'xyz-in-from',
inActive: 'xyz-in',
inTo: 'xyz-in-to',
outFrom: 'xyz-out-from',
outActive: 'xyz-out',
outTo: 'xyz-out-to'
};
function mergeProps() {
var props1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var props2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return Object.assign({}, props1, props2, {
classNames: Object.assign({}, props1.classNames, props2.classNames)
});
}
function getXyzTransitionProps() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
deleteUndefined(props);
props.appear = Boolean(props.appear || props.appearVisible);
var appearVisible = props.appearVisible,
duration = props.duration,
nodeRef = props.nodeRef;
var animationHook = getXyzAnimationHook(duration, appearVisible);
var transitionProps = {
classNames: {
appear: xyzTransitionClasses.appearFrom,
appearActive: xyzTransitionClasses.appearActive,
appearDone: xyzTransitionClasses.appearTo,
enter: xyzTransitionClasses.inFrom,
enterActive: xyzTransitionClasses.inActive,
enterDone: xyzTransitionClasses.inTo,
exit: xyzTransitionClasses.outFrom,
exitActive: xyzTransitionClasses.outActive,
exitDone: xyzTransitionClasses.outTo
},
addEndListener: function addEndListener(done) {
return animationHook(nodeRef.current, done);
}
};
var mergedProps = mergeProps(transitionProps, props);
delete mergedProps.appearVisible;
delete mergedProps.duration;
return mergedProps;
}
var _excluded$2 = ["xyz", "className", "style", "children"];
function XyzTransitionBase(props) {
var xyz = props.xyz,
className = props.className,
style = props.style,
children = props.children,
rest = _objectWithoutProperties(props, _excluded$2);
var childArray = React.Children.toArray(children).filter(React.isValidElement);
if (childArray.length !== 1) {
throw new Error('XyzTransitionBase must have a single truthy child at all times');
}
var child = childArray[0];
var fallbackRef = React.useRef(null);
var nodeRef = child.ref || fallbackRef;
var xyzTransitionProps = getXyzTransitionProps(Object.assign({}, rest, {
nodeRef: nodeRef
}));
return /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.CSSTransition, xyzTransitionProps, React.cloneElement(child, Object.assign({
xyz: xyz
}, child.props, {
className: clsx__default['default'](className, child.props.className),
style: Object.assign({}, style, child.props.style),
ref: nodeRef
})));
}
XyzTransitionBase.propTypes = Object.assign({}, reactTransitionGroup.CSSTransition.propTypes, {
xyz: PropTypes__default['default'].string,
appearVisible: PropTypes__default['default'].oneOfType([PropTypes__default['default'].bool, PropTypes__default['default'].object]),
duration: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].object]),
children: PropTypes__default['default'].node
});
delete XyzTransitionBase.propTypes.timeout;
var _excluded$1 = ["mode", "children"];
function XyzTransition(props) {
var mode = props.mode,
children = props.children,
rest = _objectWithoutProperties(props, _excluded$1);
var childArray = React.Children.toArray(children).filter(React.isValidElement);
if (childArray.length > 1) {
throw new Error('XyzTransition can have no more than one child at any point');
}
var child = childArray.length === 1 ? childArray[0] : /*#__PURE__*/React__default['default'].createElement(React.Fragment, null);
return /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.SwitchTransition, {
mode: mode
}, /*#__PURE__*/React__default['default'].createElement(XyzTransitionBase, _extends({}, rest, {
key: child.key
}), child));
}
XyzTransition.propTypes = Object.assign({}, reactTransitionGroup.SwitchTransition.propTypes, XyzTransitionBase.propTypes);
var _excluded = ["appearVisible", "duration", "mountOnEnter", "unmountOnExit", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "children"];
function XyzTransitionGroup(props) {
var appearVisible = props.appearVisible,
duration = props.duration,
mountOnEnter = props.mountOnEnter,
unmountOnExit = props.unmountOnExit,
addEndListener = props.addEndListener,
onEnter = props.onEnter,
onEntering = props.onEntering,
onEntered = props.onEntered,
onExit = props.onExit,
onExiting = props.onExiting,
onExited = props.onExited,
children = props.children,
rest = _objectWithoutProperties(props, _excluded);
var baseProps = {
appearVisible: appearVisible,
duration: duration,
mountOnEnter: mountOnEnter,
unmountOnExit: unmountOnExit,
addEndListener: addEndListener,
onEnter: onEnter,
onEntering: onEntering,
onEntered: onEntered,
onExit: onExit,
onExiting: onExiting,
onExited: onExited
};
var childArray = React.Children.toArray(children).filter(React.isValidElement);
return /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.TransitionGroup, rest, childArray.map(function (child, index) {
return /*#__PURE__*/React__default['default'].createElement(XyzTransitionBase, _extends({}, baseProps, {
style: {
'--xyz-index': index,
'--xyz-index-rev': childArray.length - index - 1
},
key: child.key
}), child);
}));
}
XyzTransitionGroup.propTypes = Object.assign({}, reactTransitionGroup.TransitionGroup.propTypes, XyzTransitionBase.propTypes);
Object.defineProperty(exports, 'xyz', {
enumerable: true,
get: function () {
return clsx__default['default'];
}
});
exports.XyzTransition = XyzTransition;
exports.XyzTransitionGroup = XyzTransitionGroup;