@fluentui/react-northstar
Version:
A themable React component library.
121 lines (120 loc) • 4.99 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _isNil from "lodash/isNil";
import _invoke from "lodash/invoke";
import { useUnhandledProps, unstable_calculateAnimationTimeout as calculateAnimationTimeout, useFluentContext, useTelemetry, useMergedRefs } from '@fluentui/react-bindings';
import { Ref } from '@fluentui/react-component-ref';
import cx from 'classnames';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { Transition } from 'react-transition-group';
import { childrenExist, commonPropTypes } from '../../utils';
import { useAnimationStyles } from './useAnimationStyles';
/**
* An Animation provides animation effects to rendered elements.
*/
export var Animation = /*#__PURE__*/function () {
var Animation = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _props, _props3;
var context = useFluentContext();
var _useTelemetry = useTelemetry(Animation.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var appear = props.appear,
children = props.children,
className = props.className,
mountOnEnter = props.mountOnEnter,
timeout = props.timeout,
visible = props.visible,
unmountOnExit = props.unmountOnExit;
var handleAnimationEvent = function handleAnimationEvent(event) {
return function () {
_invoke(props, event, null, props);
};
};
var _useAnimationStyles = useAnimationStyles(Animation.displayName, props),
animationClasses = _useAnimationStyles.className,
animationDuration = _useAnimationStyles.animationDuration,
animationDelay = _useAnimationStyles.animationDelay;
var timeoutResult = timeout || calculateAnimationTimeout(animationDuration, animationDelay) || 0;
var unhandledProps = useUnhandledProps(Animation.handledProps, props);
var nodeRef = React.useRef();
var mergedRef = useMergedRefs(ref, nodeRef);
if (_isNil(children)) {
setEnd();
return null;
}
var isChildrenFunction = typeof children === 'function';
var child = childrenExist(children) && !isChildrenFunction && React.Children.only(children);
var element = /*#__PURE__*/React.createElement(Transition, _extends({
nodeRef: nodeRef,
in: visible,
appear: appear,
mountOnEnter: mountOnEnter,
unmountOnExit: unmountOnExit,
timeout: timeoutResult,
onEnter: handleAnimationEvent('onEnter'),
onEntering: handleAnimationEvent('onEntering'),
onEntered: handleAnimationEvent('onEntered'),
onExit: handleAnimationEvent('onExit'),
onExiting: handleAnimationEvent('onExiting'),
onExited: handleAnimationEvent('onExited')
}, unhandledProps, {
className: !isChildrenFunction ? cx(animationClasses, className, child == null ? void 0 : (_props = child.props) == null ? void 0 : _props.className) : ''
}), isChildrenFunction ?
// @ts-ignore - @types/react-transition-group doesn't actually include this API, nor is it documented
function (_ref) {
var _props2;
var state = _ref.state;
var childWithClasses = children({
classes: cx(animationClasses, className, child == null ? void 0 : (_props2 = child.props) == null ? void 0 : _props2.className),
state: state
});
return childWithClasses ? /*#__PURE__*/React.createElement(Ref, {
innerRef: mergedRef
}, childWithClasses) : childWithClasses;
} : /*#__PURE__*/React.createElement(Ref, {
innerRef: mergedRef
}, /*#__PURE__*/React.cloneElement(child, {
className: cx(animationClasses, className, child == null ? void 0 : (_props3 = child.props) == null ? void 0 : _props3.className)
})));
setEnd();
return element;
});
Animation.displayName = 'Animation';
Animation.propTypes = Object.assign({}, commonPropTypes.createCommon({
accessibility: false,
as: false,
content: false,
children: false
}), {
children: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
name: PropTypes.string,
delay: PropTypes.string,
direction: PropTypes.string,
duration: PropTypes.string,
fillMode: PropTypes.string,
iterationCount: PropTypes.string,
keyframeParams: PropTypes.object,
playState: PropTypes.string,
timingFunction: PropTypes.string,
visible: PropTypes.bool,
appear: PropTypes.bool,
mountOnEnter: PropTypes.bool,
unmountOnExit: PropTypes.bool,
timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
appear: PropTypes.number,
enter: PropTypes.number,
exit: PropTypes.number
})]),
onEnter: PropTypes.func,
onEntering: PropTypes.func,
onEntered: PropTypes.func,
onExit: PropTypes.func,
onExiting: PropTypes.func,
onExited: PropTypes.func
});
Animation.handledProps = Object.keys(Animation.propTypes);
return Animation;
}();
//# sourceMappingURL=Animation.js.map