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

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

@ -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>

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

@ -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;
}

2
src/package.json
View file

@ -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"

13
src/yarn.lock
View file

@ -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: