Add prop to disappear to allow custom disappear func

[th3fallen]

Disppear component is fantastic but it would be great if there was a way to call a function after the animation is complete.

I.e. i use this for a Notice and i need to trigger a redux action once it's closed to keep the store in sync.

[th3fallen]

something like this may do it just fine... not sure since cloning this repo is... interesting

import PropTypes from 'prop-types';
import { fadeIn } from 'animate-keyframes';
import { getElementType, avoidNest } from 'element-utils';

export default class Disappear extends PureComponent {
  constructor(props: Object) {
    super(props);
  };

  static defaultProps = {
    name: fadeIn,
    duration: '2s',
    as: 'div',
    timingFunction: 'ease',
+    onDisappear: () => {}
  };

  static propTypes = {
    name: PropTypes.string,
    duration: PropTypes.string,
    as: PropTypes.string,
    timingFunction: PropTypes.string,
    component: PropTypes.func,
+    onDisappear: PropTypes.func
  };

  componentWillMount = () => {
    this.timeouts = null;
  };

  componentDidMount = () => {
    this.performAndDisapper(this.props);
  };

  componentWillUnmount = () => {
    clearTimeout(this.timeouts);
  };

  performAndDisapper = (props) => {
    const element = document.getElementById('animation-root');
    element.style = `animation: ${props.name} ${props.duration} ${props.timingFunction}`; // start on initial render
    element.addEventListener('animationend', () => {
      element.style =
        'visibility: \'hidden\'; opacity: 0; transition: visibility 0s 2s, opacity 2s linear;';
      this.timeouts = setTimeout(() => {
        element.remove();
+        props.onDisappear()
      }, 2000); // Sync with fadeOut
    });
  };

  render() {
    const { name, duration, children, as, timingFunction, component, ...rest } = this.props;
    const ElementType = getElementType(Disappear, this.props);
    const NormalizedComponent = avoidNest(ElementType, this.props, 'Disappear');
    const Wrapper = this.props.component;

    return (
      <NormalizedComponent id='animation-root' {...rest}>
        { Wrapper ? React.createElement(Wrapper, children) : children }
      </NormalizedComponent>
    );
  }
}

[nitin42]

Similar to what I was about to suggest. Can you create a PR for this ?

[th3fallen]

crap i had one but forgot to push it (facepalm)

[nitin42]

Haha no issues 😄