Merge pull request #515 from mesosphere/dima/update-react-transition-group

Update react transition group

Author: GeorgiSTodorov

package-lock.json

@@ -70,7 +70,7 @@
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
     "react-gemini-scrollbar": "2.3.x",
-    "react-transition-group": "1.2.x",
+    "react-transition-group": "2.5.0",
     "semantic-release": "^15.13.3",
     "source-map-loader": "0.1.5",
     "stylelint": "7.10.1",
@@ -84,7 +84,7 @@
     "cnvs": "1.1.14",
     "react": ">= 16.8.0",
     "react-dom": ">= 16.8.0",
-    "react-transition-group": "1.2.x",
+    "react-transition-group": ">= 2.5.0",
     "react-gemini-scrollbar": "^2.1.5 || ^2.3.0"
   },
   "scripts": {

package.json

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import GeminiScrollbar from "react-gemini-scrollbar";
 import React from "react";
 import PropTypes from "prop-types";
-import { CSSTransitionGroup } from "react-transition-group";
+import { CSSTransition } from "react-transition-group";
 import ReactDOM from "react-dom";
 
 import BindMixin from "../Mixin/BindMixin";
@@ -20,9 +20,7 @@ class Dropdown extends Util.mixin(BindMixin) {
       "handleExternalClick",
       "handleKeyDown",
       "handleMenuRender",
-      "handleWrapperBlur",
-      "setDropdownMenuRef",
-      "setDropdownWrapperRef"
+      "handleWrapperBlur"
     ];
   }
 
@@ -38,6 +36,8 @@ class Dropdown extends Util.mixin(BindMixin) {
       renderHidden: false,
       selectedID: null
     };
+    this.dropdownMenuRef = React.createRef();
+    this.dropdownWrapperRef = React.createRef();
   }
 
   componentWillMount() {
@@ -161,7 +161,7 @@ class Dropdown extends Util.mixin(BindMixin) {
     let menuDirection = this.state.menuDirection;
     const menuPositionStyle = {};
     const spaceAroundDropdownButton = DOMUtil.getNodeClearance(
-      this.dropdownWrapperRef
+      this.dropdownWrapperRef.current
     );
     const dropdownChildHeight =
       this.dropdownMenuRef && this.dropdownMenuRef.current
@@ -174,7 +174,6 @@ class Dropdown extends Util.mixin(BindMixin) {
     const isMenuShorterThanTop = !isMenuTallerThanTop;
     const isTopTallerThanBottom =
       spaceAroundDropdownButton.top > spaceAroundDropdownButton.bottom;
-
     // If the menu height is larger than the space available on the bottom and
     // less than the space available on top, then render it up. If the height
     // of the menu exceeds the space below and above, but there is more space
@@ -317,14 +316,6 @@ class Dropdown extends Util.mixin(BindMixin) {
     );
   }
 
-  setDropdownMenuRef(element) {
-    this.dropdownMenuRef = element;
-  }
-
-  setDropdownWrapperRef(element) {
-    this.dropdownWrapperRef = element;
-  }
-
   render() {
     // Set a key based on the menu height so that React knows to keep the
     // the DOM element around while we are measuring it.
@@ -383,9 +374,10 @@ class Dropdown extends Util.mixin(BindMixin) {
 
       dropdownMenu = (
         <span
+          key="dropdown-menu-key"
           className={dropdownMenuClassSet}
           role="menu"
-          ref={this.setDropdownMenuRef}
+          ref={this.dropdownMenuRef}
           style={state.menuPositionStyle}
         >
           <div className={props.dropdownMenuListClassName}>
@@ -401,17 +393,18 @@ class Dropdown extends Util.mixin(BindMixin) {
           {dropdownMenu}
         </div>
       );
-    }
-
-    if (props.transition) {
+    } else if (props.transition) {
       dropdownMenu = (
-        <CSSTransitionGroup
-          transitionName={transitionName}
-          transitionEnterTimeout={props.transitionEnterTimeout}
-          transitionLeaveTimeout={props.transitionLeaveTimeout}
+        <CSSTransition
+          in={state.isOpen}
+          classNames={transitionName}
+          timeout={{
+            enter: props.transitionEnterTimeout,
+            exit: props.transitionExitTimeout
+          }}
         >
           {dropdownMenu}
-        </CSSTransitionGroup>
+        </CSSTransition>
       );
     }
 
@@ -420,7 +413,7 @@ class Dropdown extends Util.mixin(BindMixin) {
         className={wrapperClassSet}
         tabIndex="1"
         onBlur={this.handleWrapperBlur}
-        ref={this.setDropdownWrapperRef}
+        ref={this.dropdownWrapperRef}
       >
         {React.cloneElement(trigger, {
           selectedItem: this.getSelectedItem(this.getSelectedID(), items),
@@ -442,7 +435,7 @@ Dropdown.defaultProps = {
   transition: false,
   transitionName: "dropdown-menu",
   transitionEnterTimeout: 250,
-  transitionLeaveTimeout: 250,
+  transitionExitTimeout: 250,
   onItemSelection: () => {},
   useGemini: true,
   trigger: <DropdownListTrigger />,
@@ -491,7 +484,7 @@ Dropdown.propTypes = {
   transitionName: PropTypes.string,
   // Transition lengths
   transitionEnterTimeout: PropTypes.number,
-  transitionLeaveTimeout: PropTypes.number,
+  transitionExitTimeout: PropTypes.number,
   trigger: PropTypes.element,
   // Option to use Gemini scrollbar. Defaults to true.
   useGemini: PropTypes.bool,

src/Dropdown/Dropdown.js

@@ -9,7 +9,7 @@
   }
 }
 
-@keyframes dropdown-down-leave {
+@keyframes dropdown-down-exit {
 
   0% {
     transform: translateY(0);
@@ -31,7 +31,7 @@
   }
 }
 
-@keyframes dropdown-up-leave {
+@keyframes dropdown-up-exit {
 
   0% {
     transform: translateY(0);
@@ -153,17 +153,17 @@
   animation: dropdown-fade-in 250ms both, dropdown-down-enter 250ms both;
 }
 
-.dropdown-menu-down-leave {
-  animation: dropdown-fade-out 250ms both, dropdown-down-leave 250ms both;
+.dropdown-menu-down-exit {
+  animation: dropdown-fade-out 250ms both, dropdown-down-exit 250ms both;
   z-index: 3;
 }
 
 .dropdown-menu-up-enter {
   animation: dropdown-fade-in 250ms both, dropdown-up-enter 250ms both;
 }
 
-.dropdown-menu-up-leave {
-  animation: dropdown-fade-out 250ms both, dropdown-up-leave 250ms both;
+.dropdown-menu-up-exit {
+  animation: dropdown-fade-out 250ms both, dropdown-up-exit 250ms both;
   z-index: 3;
 }
 

src/Dropdown/styles.less

@@ -1,35 +1,20 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { CSSTransitionGroup } from "react-transition-group";
 
 import ListItem from "./ListItem";
 import Util from "../Util/Util";
 
 class List extends React.Component {
   getListItems(list, childIndex = 0) {
-    const { props } = this;
     const items = list.map((item, parentIndex) => {
       const key = `${parentIndex}.${childIndex}`;
       childIndex++;
 
-      const htmlAttributes = Util.exclude(item, [
-        "content",
-        "transitionName",
-        "transitionEnterTimeout",
-        "transitionLeaveTimeout"
-      ]);
+      const htmlAttributes = Util.exclude(item, ["content"]);
 
       if (Util.isArrayLike(item.content)) {
         return (
-          <ListItem
-            {...htmlAttributes}
-            key={key}
-            tag={item.tag}
-            transition={true}
-            transitionName={props.transitionName}
-            transitionEnterTimeout={props.transitionEnterTimeout}
-            transitionLeaveTimeout={props.transitionLeaveTimeout}
-          >
+          <ListItem key={key} tag={item.tag} {...htmlAttributes}>
             {this.getListItems(item.content, childIndex)}
           </ListItem>
         );
@@ -52,21 +37,6 @@ class List extends React.Component {
     // Uses all passed properties as attributes, excluding propTypes
     const htmlAttributes = Util.exclude(props, Object.keys(List.propTypes));
 
-    if (props.transition) {
-      return (
-        <CSSTransitionGroup
-          {...htmlAttributes}
-          className={props.className}
-          component={Tag}
-          transitionName={props.transitionName}
-          transitionEnterTimeout={props.transitionEnterTimeout}
-          transitionLeaveTimeout={props.transitionLeaveTimeout}
-        >
-          {this.getListItems(props.content)}
-        </CSSTransitionGroup>
-      );
-    }
-
     return (
       <Tag {...htmlAttributes} className={props.className}>
         {this.getListItems(props.content)}
@@ -77,11 +47,7 @@ class List extends React.Component {
 
 List.defaultProps = {
   className: "list",
-  tag: "ul",
-  transition: true,
-  transitionName: "list-item",
-  transitionEnterTimeout: 500,
-  transitionLeaveTimeout: 500
+  tag: "ul"
 };
 
 List.propTypes = {
@@ -104,12 +70,7 @@ List.propTypes = {
     PropTypes.string
   ]).isRequired,
   // Optional tag for the container of the list
-  tag: PropTypes.string,
-  transition: PropTypes.bool,
-  transitionName: PropTypes.string,
-  // Transition lengths
-  transitionEnterTimeout: PropTypes.number,
-  transitionLeaveTimeout: PropTypes.number
+  tag: PropTypes.string
 };
 
 module.exports = List;

src/List/List.js

@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { CSSTransitionGroup } from "react-transition-group";
 
 import Util from "../Util/Util";
 
@@ -12,18 +11,6 @@ class ListItem extends React.Component {
     // Uses all passed properties as attributes, excluding propTypes
     const htmlAttributes = Util.exclude(props, Object.keys(ListItem.propTypes));
 
-    if (props.transition) {
-      return (
-        <CSSTransitionGroup
-          {...htmlAttributes}
-          className={props.className}
-          component={props.tag}
-        >
-          {props.children}
-        </CSSTransitionGroup>
-      );
-    }
-
     return (
       <Tag {...htmlAttributes} className={props.className}>
         {props.children}
@@ -40,8 +27,7 @@ ListItem.defaultProps = {
 ListItem.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  tag: PropTypes.string,
-  transition: PropTypes.bool
+  tag: PropTypes.string
 };
 
 module.exports = ListItem;

src/List/ListItem.js

@@ -28,6 +28,6 @@
   animation: list-fade-in-left 500ms;
 }
 
-.list-item-leave {
+.list-item-exit {
   animation: list-fade-out-right 500ms;
 }

src/List/styles.less

@@ -6,11 +6,12 @@ import React from "react";
 import PropTypes from "prop-types";
 /**
  * Lifecycle of a Modal:
- * initial page load -> empty ReactCSSTransitionGroup
+ * initial page load -> empty TransitionGroup
  * interaction changes open to true -> render modal content without scrollbars
  * get height of content -> rerender modal content and cap the height
  */
-import { CSSTransitionGroup } from "react-transition-group";
+
+import { CSSTransition } from "react-transition-group";
 
 import BindMixin from "../Mixin/BindMixin";
 import DOMUtil from "../Util/DOMUtil";
@@ -380,18 +381,20 @@ class ModalContents extends Util.mixin(BindMixin) {
     }
 
     return (
-      <CSSTransitionGroup
-        transitionAppear={props.transitionAppear}
-        transitionEnter={props.transitionEnter}
-        transitionLeave={props.transitionLeave}
-        transitionName={props.transitionNameModal}
-        transitionAppearTimeout={props.transitionAppearTimeoutModal}
-        transitionEnterTimeout={props.transitionEnterTimeoutModal}
-        transitionLeaveTimeout={props.transitionLeaveTimeoutModal}
-        component="div"
+      <CSSTransition
+        in={props.open}
+        appear={props.transitionAppear}
+        enter={props.transitionEnter}
+        exit={props.transitionExit}
+        classNames={props.transitionNameModal}
+        timeout={{
+          enter: props.transitionEnterTimeout,
+          exit: props.transitionExitTimeout,
+          appear: props.transitionAppearTimeoutModal
+        }}
       >
-        {modalContent}
-      </CSSTransitionGroup>
+        <div>{modalContent}</div>
+      </CSSTransition>
     );
   }
 }
@@ -409,10 +412,10 @@ ModalContents.defaultProps = {
   transitionNameModal: "modal",
   transitionAppearTimeoutModal: 300,
   transitionEnterTimeoutModal: 300,
-  transitionLeaveTimeoutModal: 300,
+  transitionExitTimeoutModal: 300,
   transitionAppear: true,
   transitionEnter: true,
-  transitionLeave: true,
+  transitionExit: true,
   useGemini: true,
 
   // Default classes.
@@ -455,11 +458,11 @@ ModalContents.propTypes = {
   // Transition lengths, must be non-zero
   transitionAppearTimeoutModal: PropTypes.number,
   transitionEnterTimeoutModal: PropTypes.number,
-  transitionLeaveTimeoutModal: PropTypes.number,
+  transitionExitTimeoutModal: PropTypes.number,
   // Optionally disable transitions
   transitionAppear: PropTypes.bool,
   transitionEnter: PropTypes.bool,
-  transitionLeave: PropTypes.bool,
+  transitionExit: PropTypes.bool,
   // Option to use Gemini scrollbar. Defaults to true.
   useGemini: PropTypes.bool,