arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

Refactor animation handling, update react-transition

Browse Source
This commit is contained in:
Vladimir Volek 2018-09-17 14:23:57 +02:00
parent 91f20e0dd2
commit e867c521f7
3 changed files with 47 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -47,7 +47,7 @@
"react-router-redux": "next",
"react-scale-text": "^1.2.2",
"react-select": "2.0.0",
"react-transition-group": "^2.2.1",
"react-transition-group": "^2.4.0",
"redbox-react": "^1.6.0",
"redux": "4.0.0",
"redux-logger": "^3.0.6",

68
src/views/Wallet/components/LeftNavigation/index.js
View File

@ -58,6 +58,29 @@ const A = styled.a`
}
`;
const Transition = ({ children, animationType }) => (
<TransitionGroupWrapper component="div">
<CSSTransition
key={animationType}
onExit={() => {
console.log('ON EXIT');
window.dispatchEvent(new Event('resize'));
}}
onEntering={el => console.warn('Entering', el)}
onExited={() => window.dispatchEvent(new Event('resize'))}
classNames={animationType}
appear={false}
timeout={20000}
in
out
>
<TransitionContentWrapper>
{children}
</TransitionContentWrapper>
</CSSTransition>
</TransitionGroupWrapper>
);
class LeftNavigation extends Component {
constructor(props) {
super(props);
@ -96,39 +119,6 @@ class LeftNavigation extends Component {
}
}
// TODO: refactor to transition component for reuse of transitions
getMenuTransition(children) {
return (
<TransitionGroupWrapper component="div" className="transition-container">
<CSSTransition
key={this.state.animationType}
onEnter={() => {
console.warn('ON ENTER');
}}
onEntering={() => {
console.warn('ON ENTERING (ACTIVE)');
}}
onExit={() => {
console.warn('ON EXIT');
window.dispatchEvent(new Event('resize'));
}}
onExiting={() => {
console.warn('ON EXITING (ACTIVE)');
}}
onExited={() => window.dispatchEvent(new Event('resize'))}
classNames={this.state.animationType}
appear={false}
timeout={30000}
in
out
>
<TransitionContentWrapper>
{children}
</TransitionContentWrapper>
</CSSTransition>
</TransitionGroupWrapper>);
}
shouldRenderAccounts() {
const { selectedDevice } = this.props.wallet;
return selectedDevice
@ -163,8 +153,16 @@ class LeftNavigation extends Component {
/>
<Body>
{this.state.shouldRenderDeviceSelection && <DeviceMenu {...this.props} />}
{this.shouldRenderAccounts() && this.getMenuTransition(<AccountMenu {...this.props} />)}
{this.shouldRenderCoins() && this.getMenuTransition(<CoinMenu {...this.props} />)}
{this.shouldRenderAccounts() && (
<Transition animationType="slide-left">
<AccountMenu {...this.props} />
</Transition>
)}
{this.shouldRenderCoins() && (
<Transition animationType="slide-right">
<CoinMenu {...this.props} />
</Transition>
)}
</Body>
<Footer className="sticky-bottom">
<Help>

13
yarn.lock
View File

@ -3146,6 +3146,10 @@ dom-helpers@^3.2.0:
version "3.2.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
dom-helpers@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
dom-serializer@0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@ -8038,6 +8042,15 @@ react-transition-group@^2.2.1:
prop-types "^15.5.8"
warning "^3.0.0"
react-transition-group@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.4.0.tgz#1d9391fabfd82e016f26fabd1eec329dbd922b5a"
dependencies:
dom-helpers "^3.3.1"
loose-envify "^1.3.1"
prop-types "^15.6.2"
react-lifecycles-compat "^3.0.4"
"react@^15.4.2 || ^16.0.0":
version "16.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"