feat: use react-transition-group instead of react-overlay transitions (…

…#61) react-overlay ^0.8 removed transition components, and instead uses react-transition-group package. This commit introduces changes analogous to react-bootstrap/react-bootstrap#2676
jquense · Sep 23, 2018 · ba2997f · ba2997f
1 parent 9dbc939
commit ba2997f
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -82,7 +82,7 @@ The main Modal Component.
 - `keyboard`: `Boolean(default true)` Modal is dismissible via the `esc` key
 
 - `transition` `Boolean(default true)` Fade the entry and exit of the modal. You can also provide a
-Transition component from the `react-overlays` library to customize the animation more minutely.
+Transition component from the `react-transition-group` v2 library to customize the animation more minutely.
 - `attentionClass`: `String(default 'shake')` - an animation class added to the modal when a "static" backdrop is clicked, set to nothing if
 no animation is desired
 - `container`: `Node(default document.body)`, a DOM Node to append the modal too

diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
     "dom-helpers": "^3.3.1",
     "prop-types": "^15.6.1",
     "prop-types-extra": "^1.1.0",
-    "react-overlays": "^0.7.3"
+    "react-overlays": "^0.8.0",
+    "react-transition-group": "^2.0.0"
   }
 }
diff --git a/src/Fade.js b/src/Fade.js
@@ -1,22 +1,38 @@
 import React from 'react';
-import Transition from 'react-overlays/lib/Transition';
+import Transition, {
+  ENTERED,
+  ENTERING
+} from 'react-transition-group/Transition';
+import cn from 'classnames';
 
-class Fade extends React.Component {
+const fadeStyles = {
+  [ENTERING]: 'in',
+  [ENTERED]: 'in'
+};
 
-  constructor(props, context){
+class Fade extends React.Component {
+  constructor(props, context) {
     super(props, context);
   }
 
   render() {
+    const { className, children, ...props } = this.props;
     return (
-      <Transition
-        {...this.props}
-        className='fade'
-        enteredClassName='in'
-        enteringClassName='in'
-      />
+      <Transition {...props}>
+        {(status, innerProps) =>
+          React.cloneElement(children, {
+            ...innerProps,
+            className: cn(
+              'fade',
+              className,
+              children.props.className,
+              fadeStyles[status]
+            )
+          })
+        }
+      </Transition>
     );
   }
 }
 
-export default Fade
+export default Fade;
diff --git a/src/Modal.js b/src/Modal.js
@@ -28,6 +28,12 @@ let omit = (obj, keys) => Object.keys(obj).reduce((o, key) => {
   return o;
 }, {});
 
+function DialogTransition(props) {
+  return <Fade {...props} timeout={Modal.TRANSITION_DURATION} />;
+}
+function BackdropTransition(props) {
+  return <Fade {...props} timeout={Modal.BACKDROP_TRANSITION_DURATION} />;
+}
 
 class Modal extends React.Component {
 
@@ -155,7 +161,7 @@ class Modal extends React.Component {
     let prefix = modalPrefix || Modal.getDefaultPrefix();
 
     if (transition === true)
-      transition = Fade;
+      transition = DialogTransition;
 
     let modal = (
       <div
@@ -193,19 +199,18 @@ class Modal extends React.Component {
         container={container}
         backdrop={props.backdrop}
         show={props.show}
+        backdropStyle={backdrop}
+        backdropClassName={prefix + '-backdrop'}
+        containerClassName={prefix + '-open'}
+        transition={transition || undefined}
+        backdropTransition={transition ? BackdropTransition : undefined}
         onHide={this.props.onHide}
         onEnter={onEnter}
         onEntering={this.handleEntering}
         onEntered={onEntered}
         onExit={onExit}
         onExiting={this.handleExiting}
         onExited={onExited}
-        backdropStyle={backdrop}
-        backdropClassName={prefix + '-backdrop'}
-        containerClassName={prefix + '-open'}
-        transition={transition}
-        dialogTransitionTimeout={Modal.TRANSITION_DURATION}
-        backdropTransitionTimeout={Modal.BACKDROP_TRANSITION_DURATION}
       >
         {modal}
       </BaseModal>

diff --git a/yarn.lock b/yarn.lock
@@ -7051,6 +7051,13 @@ prop-types@^15.6.1:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+prop-types@^15.6.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+  dependencies:
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 protocols@^1.1.0, protocols@^1.4.0:
   version "1.4.6"
   resolved "https://registry.yarnpkg.com/protocols/-/protocols-1.4.6.tgz#f8bb263ea1b5fd7a7604d26b8be39bd77678bf8a"
@@ -7236,6 +7243,10 @@ react-is@^16.3.2, react-is@^16.4.1:
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+
 react-live@^1.7.1:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/react-live/-/react-live-1.7.1.tgz#a4fc7a4d23c2596cf7d4ed10f62dca9a02915e26"
@@ -7247,14 +7258,15 @@ react-live@^1.7.1:
     prop-types "^15.5.8"
     unescape "^0.2.0"
 
-react-overlays@^0.7.3:
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.7.4.tgz#ef2ec652c3444ab8aa014262b18f662068e56d5c"
+react-overlays@^0.8.0:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.8.3.tgz#fad65eea5b24301cca192a169f5dddb0b20d3ac5"
   dependencies:
     classnames "^2.2.5"
     dom-helpers "^3.2.1"
     prop-types "^15.5.10"
     prop-types-extra "^1.0.1"
+    react-transition-group "^2.2.0"
     warning "^3.0.0"
 
 react-reconciler@^0.7.0:
@@ -7282,6 +7294,15 @@ react-test-renderer@^16.4.1:
     prop-types "^15.6.0"
     react-is "^16.4.1"
 
+react-transition-group@^2.0.0, react-transition-group@^2.2.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.4.0.tgz#1d9391fabfd82e016f26fabd1eec329dbd922b5a"
+  dependencies:
+    dom-helpers "^3.3.1"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-lifecycles-compat "^3.0.4"
+
 react@^16.0.0:
   version "16.0.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"