From e80aae20d0bb1ab47bc1bfafc49d552e9cbbbb83 Mon Sep 17 00:00:00 2001
From: Yuya Ochiai <yuya0321@gmail.com>
Date: Wed, 21 Feb 2018 20:36:29 +0900
Subject: [PATCH] Migrate to react-transition-group v2

https://github.com/reactjs/react-transition-group/blob/v2.2.1/Migration.md
---
 src/browser/components/MainPage.jsx | 24 +++++++++++++-----------
 src/browser/css/index.css           |  4 ++--
 src/package.json                    |  2 +-
 src/yarn.lock                       | 13 +++++++------
 4 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/browser/components/MainPage.jsx b/src/browser/components/MainPage.jsx
index 16005dea..8a190527 100644
--- a/src/browser/components/MainPage.jsx
+++ b/src/browser/components/MainPage.jsx
@@ -3,7 +3,7 @@ const url = require('url');
 const React = require('react');
 const PropTypes = require('prop-types');
 const createReactClass = require('create-react-class');
-const ReactCSSTransitionGroup = require('react-transition-group/CSSTransitionGroup');
+const {CSSTransition, TransitionGroup} = require('react-transition-group');
 const {Grid, Row} = require('react-bootstrap');
 
 const {ipcRenderer, remote} = require('electron');
@@ -363,18 +363,20 @@ const MainPage = createReactClass({
           { tabsRow }
           { viewsRow }
         </Grid>
-        <ReactCSSTransitionGroup
-          transitionName='hovering'
-          transitionEnterTimeout={300}
-          transitionLeaveTimeout={500}
-        >
+        <TransitionGroup>
           { (this.state.targetURL === '') ?
             null :
-            <HoveringURL
-              key='hoveringURL'
-              targetURL={this.state.targetURL}
-            /> }
-        </ReactCSSTransitionGroup>
+            <CSSTransition
+              classNames='hovering'
+              timeout={{enter: 300, exit: 500}}
+            >
+              <HoveringURL
+                key='hoveringURL'
+                targetURL={this.state.targetURL}
+              />
+            </CSSTransition>
+          }
+        </TransitionGroup>
         <div>
           { modal }
         </div>
diff --git a/src/browser/css/index.css b/src/browser/css/index.css
index dbc1b374..e2287735 100644
--- a/src/browser/css/index.css
+++ b/src/browser/css/index.css
@@ -9,11 +9,11 @@
   transition: opacity 300ms ease-in-out;
 }
 
-.hovering-leave {
+.hovering-exit {
   opacity: 1;
 }
 
-.hovering-leave.hovering-leave-active {
+.hovering-exit.hovering-exit-active {
   opacity: 0.01;
   transition: opacity 500ms ease-in-out;
 }
diff --git a/src/package.json b/src/package.json
index 4e60ff74..56254dfb 100644
--- a/src/package.json
+++ b/src/package.json
@@ -20,7 +20,7 @@
     "react": "^16.2.0",
     "react-bootstrap": "~0.31.5",
     "react-dom": "^16.2.0",
-    "react-transition-group": "^1.2.1",
+    "react-transition-group": "^2.2.1",
     "simple-spellchecker": "git://github.com/jfmdev/simple-spellchecker.git#723062952a0290c6285aeaf02f14d9c74c41cadb",
     "underscore": "^1.8.3",
     "yargs": "^3.32.0"
diff --git a/src/yarn.lock b/src/yarn.lock
index 5b8bc515..0ffad39d 100644
--- a/src/yarn.lock
+++ b/src/yarn.lock
@@ -391,14 +391,14 @@ prop-types-extra@^1.0.1:
   dependencies:
     warning "^3.0.0"
 
-prop-types@^15.5.10, prop-types@^15.5.6:
+prop-types@^15.5.10:
   version "15.5.10"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
     fbjs "^0.8.9"
     loose-envify "^1.3.1"
 
-prop-types@^15.6.0:
+prop-types@^15.5.8, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -444,14 +444,15 @@ react-overlays@^0.7.4:
     prop-types-extra "^1.0.1"
     warning "^3.0.0"
 
-react-transition-group@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
+react-transition-group@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"
   dependencies:
     chain-function "^1.0.0"
+    classnames "^2.2.5"
     dom-helpers "^3.2.0"
     loose-envify "^1.3.1"
-    prop-types "^15.5.6"
+    prop-types "^15.5.8"
     warning "^3.0.0"
 
 react@^16.2.0: