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

fixed acquireDevice aside (StickyContainer) first render

Browse Source
This commit is contained in:
Szymon Lesisz 2018-05-10 19:12:23 +02:00
parent c3079bc8d9
commit d4f921ba84
2 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/components/wallet/aside/Aside.js
View File

@ -77,7 +77,7 @@ const Aside = (props: Props): React$Element<typeof StickyContainer | string> =>
} }
return ( return (
<StickyContainer location={ location } devices={ props.deviceDropdownOpened.toString() }> <StickyContainer location={ location.pathname } deviceSelection={ props.deviceDropdownOpened }>
<DeviceSelect {...props} /> <DeviceSelect {...props} />
{ menu } { menu }
<div className="sticky-bottom"> <div className="sticky-bottom">

21
src/js/components/wallet/aside/StickyContainer.js
View File

@ -3,23 +3,24 @@
// https://github.com/KyleAMathews/react-headroom/blob/master/src/shouldUpdate.js // https://github.com/KyleAMathews/react-headroom/blob/master/src/shouldUpdate.js
import React, { PureComponent } from 'react'; import * as React from 'react';
import raf from 'raf'; import raf from 'raf';
import { getViewportHeight, getScrollY } from '../../../utils/windowUtils'; import { getViewportHeight, getScrollY } from '../../../utils/windowUtils';
type Props = { type Props = {
location: any, location: string,
devices: any, deviceSelection: boolean,
children: any, children?: React.Node,
} }
export default class StickyContainer extends PureComponent<Props> { export default class StickyContainer extends React.PureComponent<Props> {
// Class variables. // Class variables.
currentScrollY: number = 0; currentScrollY: number = 0;
lastKnownScrollY: number = 0; lastKnownScrollY: number = 0;
topOffset: number = 0; topOffset: number = 0;
firstRender: boolean = false;
framePending: boolean = false; framePending: boolean = false;
stickToBottom: boolean = false; stickToBottom: boolean = false;
top: number = 0; top: number = 0;
@ -49,7 +50,6 @@ export default class StickyContainer extends PureComponent<Props> {
const bottomBounds = bottom.getBoundingClientRect(); const bottomBounds = bottom.getBoundingClientRect();
const asideBounds = aside.getBoundingClientRect(); const asideBounds = aside.getBoundingClientRect();
const wrapperBounds = wrapper.getBoundingClientRect(); const wrapperBounds = wrapper.getBoundingClientRect();
const scrollDirection = this.currentScrollY >= this.lastKnownScrollY ? 'down' : 'up'; const scrollDirection = this.currentScrollY >= this.lastKnownScrollY ? 'down' : 'up';
const distanceScrolled = Math.abs(this.currentScrollY - this.lastKnownScrollY); const distanceScrolled = Math.abs(this.currentScrollY - this.lastKnownScrollY);
@ -100,7 +100,6 @@ export default class StickyContainer extends PureComponent<Props> {
componentDidMount() { componentDidMount() {
window.addEventListener('scroll', this.handleScroll); window.addEventListener('scroll', this.handleScroll);
window.addEventListener('resize', this.handleScroll); window.addEventListener('resize', this.handleScroll);
this.handleScroll(null);
} }
componentWillUnmount() { componentWillUnmount() {
@ -116,17 +115,17 @@ export default class StickyContainer extends PureComponent<Props> {
this.topOffset = 0; this.topOffset = 0;
raf(this.update); raf(this.update);
} }
} } else if (this.props.deviceSelection !== prevProps.deviceSelection) {
if (this.props.devices !== prevProps.devices) {
raf(this.update); raf(this.update);
} else if (!this.firstRender) {
raf(this.update);
this.firstRender = true;
} }
} }
render() { render() {
return ( return (
<aside <aside
{ ...this.props }
ref={ node => this.aside = node } ref={ node => this.aside = node }
onScroll={this.handleScroll} onScroll={this.handleScroll}
onTouchStart={this.handleScroll} onTouchStart={this.handleScroll}