aaron/mattermost-desktop
1
0
Fork 0
Code Issues Pull requests Actions 2 Packages Projects Releases Wiki Activity

Migrate to react-transition-group v2

Browse source 
https://github.com/reactjs/react-transition-group/blob/v2.2.1/Migration.md
This commit is contained in:
Yuya Ochiai 2018-02-21 20:36:29 +09:00
parent abe274fb66
commit e80aae20d0
4 changed files with 23 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/browser/components/MainPage.jsx
View file

@ -3,7 +3,7 @@ const url = require('url');
const React = require('react'); const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const createReactClass = require('create-react-class'); 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 {Grid, Row} = require('react-bootstrap');
const {ipcRenderer, remote} = require('electron'); const {ipcRenderer, remote} = require('electron');
@ -363,18 +363,20 @@ const MainPage = createReactClass({
{ tabsRow } { tabsRow }
{ viewsRow } { viewsRow }
</Grid> </Grid>
<ReactCSSTransitionGroup <TransitionGroup>
transitionName='hovering'
transitionEnterTimeout={300}
transitionLeaveTimeout={500}
>
{ (this.state.targetURL === '') ? { (this.state.targetURL === '') ?
null : null :
<CSSTransition
classNames='hovering'
timeout={{enter: 300, exit: 500}}
>
<HoveringURL <HoveringURL
key='hoveringURL' key='hoveringURL'
targetURL={this.state.targetURL} targetURL={this.state.targetURL}
/> } />
</ReactCSSTransitionGroup> </CSSTransition>
}
</TransitionGroup>
<div> <div>
{ modal } { modal }
</div> </div>

4
src/browser/css/index.css
View file

@ -9,11 +9,11 @@
transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out;
} }
.hovering-leave { .hovering-exit {
opacity: 1; opacity: 1;
} }
.hovering-leave.hovering-leave-active { .hovering-exit.hovering-exit-active {
opacity: 0.01; opacity: 0.01;
transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out;
} }

2
src/package.json
View file

@ -20,7 +20,7 @@
"react": "^16.2.0", "react": "^16.2.0",
"react-bootstrap": "~0.31.5", "react-bootstrap": "~0.31.5",
"react-dom": "^16.2.0", "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", "simple-spellchecker": "git://github.com/jfmdev/simple-spellchecker.git#723062952a0290c6285aeaf02f14d9c74c41cadb",
"underscore": "^1.8.3", "underscore": "^1.8.3",
"yargs": "^3.32.0" "yargs": "^3.32.0"

13
src/yarn.lock
View file

@ -391,14 +391,14 @@ prop-types-extra@^1.0.1:
dependencies: dependencies:
warning "^3.0.0" warning "^3.0.0"
prop-types@^15.5.10, prop-types@^15.5.6: prop-types@^15.5.10:
version "15.5.10" version "15.5.10"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
dependencies: dependencies:
fbjs "^0.8.9" fbjs "^0.8.9"
loose-envify "^1.3.1" loose-envify "^1.3.1"
prop-types@^15.6.0: prop-types@^15.5.8, prop-types@^15.6.0:
version "15.6.0" version "15.6.0"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
dependencies: dependencies:
@ -444,14 +444,15 @@ react-overlays@^0.7.4:
prop-types-extra "^1.0.1" prop-types-extra "^1.0.1"
warning "^3.0.0" warning "^3.0.0"
react-transition-group@^1.2.1: react-transition-group@^2.2.1:
version "1.2.1" version "2.2.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"
dependencies: dependencies:
chain-function "^1.0.0" chain-function "^1.0.0"
classnames "^2.2.5"
dom-helpers "^3.2.0" dom-helpers "^3.2.0"
loose-envify "^1.3.1" loose-envify "^1.3.1"
prop-types "^15.5.6" prop-types "^15.5.8"
warning "^3.0.0" warning "^3.0.0"
react@^16.2.0: react@^16.2.0: