@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
72 lines (70 loc) • 2.52 kB
JavaScript
/**
* @file Transition component.
* @copyright IBM Security 2019 - 2020
*/
import PropTypes from 'prop-types';
import React, { Children } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { getComponentNamespace } from '../../globals/namespace';
var namespace = getComponentNamespace('transition');
var map = Children.map,
toArray = Children.toArray;
/**
* Transition component.
*/
var Transition = function Transition(_ref) {
var appearTimeout = _ref.appearTimeout,
children = _ref.children,
className = _ref.className,
component = _ref.component,
enterTimeout = _ref.enterTimeout,
leaveTimeout = _ref.leaveTimeout,
timeout = _ref.timeout;
return /*#__PURE__*/React.createElement(TransitionGroup, {
className: namespace,
component: component
}, children && map(children, function (child) {
return /*#__PURE__*/React.createElement(CSSTransition, {
classNames: {
appear: "".concat(className, "__transition--appear"),
appearActive: "".concat(className, "__transition--appear--active"),
enter: "".concat(className, "__transition--enter"),
enterActive: "".concat(className, "__transition--enter--active"),
exit: "".concat(className, "__transition--leave"),
exitActive: "".concat(className, "__transition--leave--active")
},
timeout: {
appear: appearTimeout || timeout,
enter: enterTimeout || timeout,
exit: leaveTimeout || timeout
}
}, child);
}));
};
Transition.defaultProps = {
appearTimeout: undefined,
component: function component(_ref2) {
var children = _ref2.children;
return toArray(children)[0] || null;
},
enterTimeout: undefined,
leaveTimeout: undefined,
timeout: 160
};
Transition.propTypes = {
/** @type {number} Appear timeout */
appearTimeout: PropTypes.number,
/** @type {Array.<HTMLElement>|boolean|HTMLElement} Children. */
children: PropTypes.oneOfType([PropTypes.array, PropTypes.bool, PropTypes.element]).isRequired,
/** @type {string} Classes. */
className: PropTypes.string.isRequired,
/** @type {Node} The element to wrap the transition's components children in. */
component: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
/** @type {number} Enter timeout */
enterTimeout: PropTypes.number,
/** @type {number} Leave timeout */
leaveTimeout: PropTypes.number,
/** @type {number} Timeout. */
timeout: PropTypes.number
};
export default Transition;