[added] Fade Component, replaces FadeMixin

Author: jquense

docs/examples/Fade.js

@@ -0,0 +1,29 @@
+
+class Example extends React.Component {
+
+  constructor(...args){
+    super(...args);
+    this.state = {};
+  }
+
+  render(){
+
+    return (
+      <div>
+        <Button onClick={()=> this.setState({ open: !this.state.open })}>
+          click
+        </Button>
+        <Fade in={this.state.open}>
+          <div>
+            <Well>
+              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
+              Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+            </Well>
+          </div>
+        </Fade>
+      </div>
+    );
+  }
+}
+
+React.render(<Example/>, mountNode);

src/Fade.js

@@ -0,0 +1,90 @@
+'use strict';
+import React from 'react';
+import Transition from './Transition';
+
+class Fade extends React.Component {
+
+  constructor(props, context){
+    super(props, context);
+  }
+
+  render() {
+    return (
+      <Transition
+        {...this.props}
+        in={this.props.in}
+        className='fade'
+        enteredClassName='in'
+        enteringClassName='in'
+      >
+        { this.props.children }
+      </Transition>
+    );
+  }
+}
+
+Fade.propTypes = {
+  /**
+   * Fade the Component in or out.
+   */
+  in:       React.PropTypes.bool,
+
+  /**
+   * Provide the durration of the animation in milliseconds, used to ensure that finishing callbacks are fired even if the
+   * original browser transition end events are canceled.
+   */
+  duration:          React.PropTypes.number,
+
+  /**
+   * A Callback fired before the component starts to fade in.
+   */
+  onEnter: React.PropTypes.func,
+
+  /**
+   * A Callback fired immediately after the component has started to faded in.
+   */
+  onEntering: React.PropTypes.func,
+
+  /**
+   * A Callback fired after the component has faded in.
+   */
+  onEntered: React.PropTypes.func,
+
+  /**
+   * A Callback fired before the component starts to fade out.
+   */
+  onExit: React.PropTypes.func,
+
+  /**
+   * A Callback fired immediately after the component has started to faded out.
+   */
+  onExiting: React.PropTypes.func,
+
+  /**
+   * A Callback fired after the component has faded out.
+   */
+  onExited: React.PropTypes.func,
+
+
+  /**
+   * Specify whether the transitioning component should be unmounted (removed from the DOM) once the exit animation finishes.
+   */
+  unmountOnExit:     React.PropTypes.bool,
+
+  /**
+   * Specify whether the component should fade in or out when it mounts.
+   */
+  transitionAppear: React.PropTypes.bool
+
+};
+
+Fade.defaultProps = {
+  in:       false,
+  duration: 300,
+  dimension: 'height',
+  transitionAppear: false,
+  unmountOnExit: false
+};
+
+export default Fade;
+

src/Modal.js

@@ -4,11 +4,11 @@ import React, { cloneElement } from 'react';
 import classNames from 'classnames';
 import createChainedFunction from './utils/createChainedFunction';
 import BootstrapMixin from './BootstrapMixin';
-import FadeMixin from './FadeMixin';
 import domUtils from './utils/domUtils';
 import EventListener from './utils/EventListener';
 
 import Portal from './Portal';
+import Fade from './Fade';
 
 import Body from './ModalBody';
 import Header from './ModalHeader';
@@ -90,12 +90,17 @@ function getScrollbarSize(){
   document.body.removeChild(scrollDiv);
 
   scrollDiv = null;
+  return scrollbarSize;
 }
 
 
 const ModalMarkup = React.createClass({
 
+<<<<<<< HEAD
   mixins: [ BootstrapMixin, FadeMixin ],
+=======
+  mixins: [ BootstrapMixin ],
+>>>>>>> [added] Fade Component, replaces FadeMixin
 
   propTypes: {
 
@@ -166,8 +171,7 @@ const ModalMarkup = React.createClass({
 
     let classes = {
       modal: true,
-      fade: this.props.animation,
-      'in': !this.props.animation
+      in: this.props.show && !this.props.animation
     };
 
     let modal = (
@@ -206,18 +210,22 @@ const ModalMarkup = React.createClass({
   },
 
   renderBackdrop(modal) {
-    let classes = {
-      'modal-backdrop': true,
-      fade: this.props.animation,
-      'in': !this.props.animation
-    };
-
-    let onClick = this.props.backdrop === true ?
-      this.handleBackdropClick : null;
+    let { animation } = this.props;
+    let duration = Modal.BACKDROP_TRANSITION_DURATION; //eslint-disable-line no-use-before-define
+
+    let backdrop = (
+      <div ref="backdrop"
+       className={classNames('modal-backdrop', { in: this.props.show && !animation })}
+       onClick={this.handleBackdropClick}
+      />
+    );
 
     return (
       <div>
-        <div className={classNames(classes)} ref="backdrop" onClick={onClick} />
+        { animation
+            ? <Fade transitionAppear in={this.props.show} duration={duration}>{backdrop}</Fade>
+            : backdrop
+        }
         {modal}
       </div>
     );
@@ -381,16 +389,40 @@ const Modal = React.createClass({
     ...ModalMarkup.propTypes
   },
 
+  getDefaultProps(){
+    return {
+      show: false,
+      animation: true
+    };
+  },
+
   render() {
-    let { show, ...props } = this.props;
+    let { children, ...props } = this.props;
+
+    let show = !!props.show;
 
     let modal = (
-      <ModalMarkup {...props} ref='modal'>{this.props.children}</ModalMarkup>
+      <ModalMarkup {...props} ref='modal'>
+        { children }
+      </ModalMarkup>
     );
 
     return (
-      <Portal container={props.container} >
-        { show && modal }
+      <Portal container={props.container}>
+        { props.animation
+            ? (
+              <Fade
+                in={show}
+                transitionAppear={show}
+                duration={Modal.TRANSITION_DURATION}
+                unmountOnExit
+              >
+                { modal }
+              </Fade>
+            )
+            : show && modal
+        }
+
       </Portal>
     );
   }
@@ -401,4 +433,7 @@ Modal.Header = Header;
 Modal.Title = Title;
 Modal.Footer = Footer;
 
+Modal.TRANSITION_DURATION = 300;
+Modal.BACKDROP_TRANSITION_DURATION = 150;
+
 export default Modal;

src/Overlay.js

@@ -1,13 +1,26 @@
 /*eslint-disable object-shorthand, react/prop-types */
-import React from 'react';
+import React, { cloneElement } from 'react';
 import Portal from './Portal';
 import Position from './Position';
 import RootCloseWrapper from './RootCloseWrapper';
+import CustomPropTypes from './utils/CustomPropTypes';
+import Fade from './Fade';
+import classNames from 'classnames';
+
 
 class Overlay extends React.Component {
 
   constructor(props, context){
     super(props, context);
+
+    this.state = { exited: false };
+    this.onHiddenListener = this.handleHidden.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.show){
+      this.setState({ exited: false });
+    }
   }
 
   render(){
@@ -17,30 +30,60 @@ class Overlay extends React.Component {
       , target
       , placement
       , rootClose
+      , children
+      , animation: Transition
       , ...props } = this.props;
 
-    let positionedChild = (
-      <Position {...{ container, containerPadding, target, placement }}>
-        { this.props.children }
-      </Position>
-    );
+    let child = null;
 
-    if (rootClose) {
-      positionedChild = (
-        <RootCloseWrapper onRootClose={this.props.onHide}>
-          { positionedChild }
-        </RootCloseWrapper>
+    if ( Transition === true ){
+      Transition = Fade;
+    }
+
+    if (props.show || (Transition && !this.state.exited)) {
+
+      child = children;
+
+      // Position the child before the animation to avoid `null` DOM nodes
+      child = (
+        <Position {...{ container, containerPadding, target, placement }}>
+          { child }
+        </Position>
       );
+
+      child = Transition
+          ? (
+            <Transition
+              unmountOnExit
+              in={props.show}
+              transitionAppear={props.show}
+              onHidden={this.onHiddenListener}
+            >
+              { child }
+            </Transition>
+          )
+          : cloneElement(child, { className: classNames('in', child.className) });
+
+
+      if (rootClose) {
+        child = (
+          <RootCloseWrapper onRootClose={props.onHide}>
+            { child }
+          </RootCloseWrapper>
+        );
+      }
     }
 
     return (
-      <Portal container={container} rootClose={rootClose} onRootClose={this.props.onHide}>
-      { props.show &&
-          positionedChild
-      }
+      <Portal container={container}>
+        { child }
       </Portal>
     );
   }
+
+  handleHidden(){
+    this.setState({ exited: true });
+  }
 }
 
 Overlay.propTypes = {
@@ -57,7 +100,19 @@ Overlay.propTypes = {
   /**
    * A Callback fired by the Overlay when it wishes to be hidden.
    */
-  onHide: React.PropTypes.func
+  onHide: React.PropTypes.func,
+
+  /**
+   * Use animation
+   */
+  animation: React.PropTypes.oneOfType([
+      React.PropTypes.bool,
+      CustomPropTypes.elementType
+  ])
+};
+
+Overlay.defaultProps = {
+  animation: Fade
 };
 
 export default Overlay;