removing react-transitions-group

Author: samuelcolvin

package.json

@@ -38,7 +38,6 @@
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.0.17",
     "react-select": "^1.1.0",
-    "react-transition-group": "1.x",
     "sass-loader": "^6.0.6",
     "shelljs": "^0.7.8",
     "webpack": "^3.10.0",

src/components/App.test.js

@@ -9,5 +9,5 @@ it('renders without crashing', () => {
     router_mode: 'history',
     mode: 'grid',
   }
-  ReactDOM.render(<Router><App config={config}/></Router>, div)
+  ReactDOM.render(<Router><App config={config} url_generator={u => u}/></Router>, div)
 })

src/components/shared/Modal.js

@@ -1,12 +1,11 @@
 import React, { Component } from 'react'
-import { CSSTransitionGroup } from 'react-transition-group'
 import { Cross, Footer }  from './Tools'
 
 class Modal extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      show: true,
+      show: false,
     }
     this.scroll_disabled = false
     this.close = this.close.bind(this)
@@ -26,6 +25,7 @@ class Modal extends Component {
     window.onwheel = this.prevent_scroll
     window.onmousewheel = document.onmousewheel = this.prevent_scroll
     window.ontouchmove  = this.prevent_scroll
+    setTimeout(() => this.setState({show: true}), 0)
   }
 
   componentWillUnmount () {
@@ -42,29 +42,22 @@ class Modal extends Component {
 
   render () {
     return (
-      <CSSTransitionGroup
-          transitionName="tcs-modal-trans"
-          transitionAppear={true}
-          transitionAppearTimeout={200}
-          transitionEnter={false}
-          transitionLeaveTimeout={200}>
-        {this.state.show && (
-          <div className="tcs-modal-mask" onClick={this.close}>
-            <div className="tcs-modal" onClick={e => e.stopPropagation()}>
-              <div className="tcs-header">
-                <h2>{this.props.title}</h2>
-                <div className="close" onClick={this.close}>
-                  <Cross/>
-                </div>
+      <div className={'tcs-modal-trans' + (this.state.show ? ' show' : '')}>
+        <div className="tcs-modal-mask" onClick={this.close}>
+          <div className="tcs-modal" onClick={e => e.stopPropagation()}>
+            <div className="tcs-header">
+              <h2>{this.props.title}</h2>
+              <div className="close" onClick={this.close}>
+                <Cross/>
               </div>
+            </div>
 
-              {this.props.children}
+            {this.props.children}
 
-              <Footer/>
-            </div>
+            <Footer/>
           </div>
-        )}
-      </CSSTransitionGroup>
+        </div>
+      </div>
     )
   }
 }

src/styles/modal.scss

@@ -41,36 +41,17 @@
   }
 }
 
-// auto applied:
-.tcs-modal-trans-appear {
+.tcs-modal-trans {
   opacity: 0;
-  .tcs-modal {
-    transform: translate(0, 40px);
-  }
-}
-
-.tcs-modal-trans-appear.tcs-modal-trans-appear-active {
-  opacity: 1;
-  transition: all .3s ease;
-  .tcs-modal {
-    transition: all .3s ease;
-    transform: translate(0, 0);
-  }
-}
-
-.tcs-modal-trans-leave {
-  opacity: 1;
   transition: all .3s ease;
   .tcs-modal {
     transition: all .3s ease;
-    transform: translate(0, 0);
-  }
-}
-
-.tcs-modal-trans-leave.tcs-modal-trans-leave-active {
-  opacity: 0;
-  .tcs-modal {
     transform: translate(0, 40px);
   }
+  &.show {
+    opacity: 1;
+    .tcs-modal {
+      transform: translate(0, 0);
+    }
+  }
 }
-

yarn.lock

@@ -1277,10 +1277,6 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
-chain-function@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
-
 [email protected], chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -1934,10 +1930,6 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
-dom-helpers@^3.2.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
-
 dom-serializer@0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -5216,7 +5208,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.5.4, 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:
@@ -5471,16 +5463,6 @@ react-select@^1.1.0:
     prop-types "^15.5.8"
     react-input-autosize "^2.1.0"
 
-[email protected]:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
-  dependencies:
-    chain-function "^1.0.0"
-    dom-helpers "^3.2.0"
-    loose-envify "^1.3.1"
-    prop-types "^15.5.6"
-    warning "^3.0.0"
-
 react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"