diff options
| author | Hsuan Lee <boczeratul@gmail.com> | 2019-04-09 15:17:08 +0800 |
|---|---|---|
| committer | Hsuan Lee <boczeratul@gmail.com> | 2019-04-09 15:17:08 +0800 |
| commit | 21fd4a3cd2edf60b42a1e8d30e275beed2b23733 (patch) | |
| tree | adb044e12f4a6c138df4276a7be30d5fe3950b23 | |
| parent | b9c0c169ce805124cb6b3fb84c7db8df9a76151e (diff) | |
| download | dexon-lottery-21fd4a3cd2edf60b42a1e8d30e275beed2b23733.tar.gz dexon-lottery-21fd4a3cd2edf60b42a1e8d30e275beed2b23733.tar.zst dexon-lottery-21fd4a3cd2edf60b42a1e8d30e275beed2b23733.zip | |
Add scrollability to console
| -rw-r--r-- | app/containers/App/Console.js | 22 | ||||
| -rw-r--r-- | app/containers/App/LotteryItem.js | 5 |
2 files changed, 22 insertions, 5 deletions
diff --git a/app/containers/App/Console.js b/app/containers/App/Console.js index ba8f6fc..bb2f2ab 100644 --- a/app/containers/App/Console.js +++ b/app/containers/App/Console.js @@ -13,9 +13,7 @@ const Body = styled.div` position: absolute; height: calc(100% - 30px); width: calc(100% - 40px); - display: flex; - flex-direction: column; - justify-content: flex-end; + display: block; `; // eslint-disable-next-line react/prefer-stateless-function @@ -29,12 +27,26 @@ class Console extends PureComponent { setInterval(this.updateList, 10000); } + setBodyRef = (ref) => { + this.body = ref; + + this.scrollToBottom(); + }; + updateList = () => { LotteryContract.getPastEvents('NumberRevealed', { fromBlock: 0, toBlock: 'latest', }) - .then(events => this.setState({ list: events })); + .then(events => this.setState({ + list: events, + }, this.scrollToBottom)); + } + + scrollToBottom = () => { + if (!this.body) return; + + this.body.scrollTop = this.body.offsetHeight; } render() { @@ -46,7 +58,7 @@ class Console extends PureComponent { Lottery History </Header> - <Body> + <Body innerRef={this.setBodyRef}> {list.map(event => ( <LotteryItem key={event.transactionHash} diff --git a/app/containers/App/LotteryItem.js b/app/containers/App/LotteryItem.js index 619b842..454f430 100644 --- a/app/containers/App/LotteryItem.js +++ b/app/containers/App/LotteryItem.js @@ -19,6 +19,7 @@ const Marker = styled.span` const Item = styled.a` margin-top: 20px; + flex: 1 0 auto; display: flex; align-items: flex-end; white-space: pre; @@ -28,6 +29,10 @@ const Item = styled.a` display: block; } + &:first-child { + margin-top: 0; + } + &:hover { background: #222222; } |