@fluent-windows/core/es/Transition/Transition.js

React components that inspired by Microsoft's Fluent Design System.

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); }

import * as React from 'react';
import classNames from 'classnames';
import { CSSTransition } from 'react-transition-group';
import { styles } from './Transition.styled';
import { TransitionPropTypes } from './Transition.type';
import { createUseStyles } from '@fluent-windows/styles';
import { omit } from '../utils';
export const name = 'Transition';
const useStyles = createUseStyles(styles, {
  name
});
const Transition = React.forwardRef((props, ref) => {
  const {
    type = 'fade',
    wrapper = true,
    appear = true,
    timeout = 250,
    visible,
    mountOnEnter,
    unmountOnExit,
    addEndListener,
    onEnter,
    onEntering,
    onEntered,
    onExit,
    onExiting,
    onExited,
    children,
    ...rest
  } = props;
  const otherProps = omit(rest, ['custom']);
  const [wrapperHeight, setWrapperHeight] = React.useState(0);
  const wrapperRef = React.useRef(null);
  React.useEffect(() => {
    if (wrapperRef && wrapperRef.current && wrapperRef.current.clientHeight) {
      setWrapperHeight(wrapperRef.current.clientHeight);
    }
  }, []);
  const classes = useStyles({
    wrapperHeight,
    ...props
  });
  const className = classNames(classes.root, {
    [classes.fade]: type === 'fade',
    [classes.zoom]: type === 'zoom',
    [classes.slide]: type === 'slide',
    [classes.collapse]: type === 'collapse',
    [classes.grow]: type === 'grow'
  });
  return React.createElement(CSSTransition, _extends({
    classNames: type,
    in: visible,
    appear: appear,
    timeout: timeout,
    mountOnEnter: mountOnEnter,
    unmountOnExit: unmountOnExit,
    addEndListener: addEndListener,
    onEnter: onEnter,
    onEntering: onEntering,
    onEntered: onEntered,
    onExit: onExit,
    onExiting: onExiting,
    onExited: onExited
  }, otherProps), wrapper ? React.createElement("div", _extends({
    className: className
  }, otherProps, {
    ref: ref
  }), React.createElement("div", {
    ref: wrapperRef
  }, children)) : React.cloneElement(children, { ...otherProps,
    className: classNames(children.props.className, className)
  }));
});
Transition.displayName = `F${name}`;
Transition.propTypes = TransitionPropTypes;
Transition.defaultProps = {
  type: 'fade',
  wrapper: true,
  appear: true,
  timeout: 250
};
export default Transition;