From 4a5a047ff1b2805d56e26253ea18caed4171cb8e Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Tue, 10 Jul 2018 14:25:15 +0200 Subject: [PATCH 1/6] Render all logs in a single Text node to speed up DOM rendering --- src/view/cli.js | 53 ++++++++++++++++++++++++++++++++++--------------- 1 file changed, 37 insertions(+), 16 deletions(-) diff --git a/src/view/cli.js b/src/view/cli.js index f1f1eaaff..235052d35 100644 --- a/src/view/cli.js +++ b/src/view/cli.js @@ -1,11 +1,10 @@ -import React from 'react'; -import { StyleSheet } from 'react-native'; +import React, { Component } from 'react'; +import { ScrollView, StyleSheet } from 'react-native'; import { observer } from 'mobx-react'; import PropTypes from 'prop-types'; import Background from '../component/background'; import { Header, Title } from '../component/header'; import Text from '../component/text'; -import { List, ListContent } from '../component/list'; import { Button, BackButton } from '../component/button'; import { color, font } from '../component/style'; @@ -20,15 +19,7 @@ const CLIView = ({ store, nav }) => ( <Button disabled onPress={() => {}} /> </Header> - <Background color={color.cliBackground}> - <ListContent> - <List - data={store.logs.slice()} - renderItem={text => <LogItem text={text} />} - scrollToEnd={true} - /> - </ListContent> - </Background> + <LogOutput logs={store.logs.slice()} /> </Background> ); @@ -37,17 +28,47 @@ CLIView.propTypes = { nav: PropTypes.object.isRequired, }; -const iStyles = StyleSheet.create({ +// +// Log Output +// + +const logStyles = StyleSheet.create({ + content: { + flexGrow: 1, + backgroundColor: color.cliBackground, + paddingTop: 25, + paddingBottom: 25, + paddingLeft: 50, + paddingRight: 50, + }, text: { textAlign: 'left', fontSize: font.sizeS, }, }); -const LogItem = ({ text }) => <Text style={iStyles.text}>{text}</Text>; +class LogOutput extends Component { + constructor(props) { + super(props); + this._ref = React.createRef(); + } + + get printLogs() { + setTimeout(() => this._ref.current.scrollToEnd(), 50); + return this.props.logs.map(l => l.replace(/\s$/g, '')).join('\n'); + } + + render() { + return ( + <ScrollView ref={this._ref} contentContainerStyle={logStyles.content}> + <Text style={logStyles.text}>{this.printLogs}</Text> + </ScrollView> + ); + } +} -LogItem.propTypes = { - text: PropTypes.string, +LogOutput.propTypes = { + logs: PropTypes.array.isRequired, }; export default observer(CLIView); From c8ae8a48218588c8525d5e5c436527369a42c4ac Mon Sep 17 00:00:00 2001 From: Tankred Hase <mail@tankredhase.de> Date: Tue, 10 Jul 2018 14:25:47 +0200 Subject: [PATCH 2/6] Display header separator above output background --- src/view/cli.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/view/cli.js b/src/view/cli.js index 235052d35..d4630f369 100644 --- a/src/view/cli.js +++ b/src/view/cli.js @@ -12,9 +12,15 @@ import { color, font } from '../component/style'; // CLI View // +const styles = StyleSheet.create({ + header: { + marginBottom: 1, // display separator above output background color + }, +}); + const CLIView = ({ store, nav }) => ( <Background color={color.blackDark}> - <Header separator> + <Header separator style={styles.header}> <BackButton onPress={() => nav.goSettings()} /> <Title title="Logs" /> <Button disabled onPress={() => {}} /> From 765e4cbffa8890ba8ca7e113659f5e016b80ceb5 Mon Sep 17 00:00:00 2001 From: Tankred Hase <mail@tankredhase.de> Date: Tue, 10 Jul 2018 14:26:31 +0200 Subject: [PATCH 3/6] Increase log limit to 100 again --- src/config.js | 2 +- test/unit/action/log.spec.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/config.js b/src/config.js index 362fb4c2b..8de5fdc74 100644 --- a/src/config.js +++ b/src/config.js @@ -13,7 +13,7 @@ module.exports.PREFIX_URI = `${prefixName}:`; module.exports.DEFAULT_ROUTE = 'Welcome'; module.exports.MIN_PASSWORD_LENGTH = 8; -module.exports.MAX_LOG_LENGTH = 30; +module.exports.MAX_LOG_LENGTH = 100; module.exports.UNITS = { sat: { display: 'SAT', displayLong: 'Satoshi', denominator: 1 }, diff --git a/test/unit/action/log.spec.js b/test/unit/action/log.spec.js index a738d661e..083ab3636 100644 --- a/test/unit/action/log.spec.js +++ b/test/unit/action/log.spec.js @@ -51,12 +51,12 @@ describe('Action Logs Unit Tests', () => { describe('constructor()', () => { it('should keep logs trimmed and keep the tail of the logs', () => { - for (var i = 0; i < 31; i++) { + for (var i = 0; i < 101; i++) { ipcRendererStub.emit('logs', 'some-event', i.toString()); } - expect(store.logs.length, 'to equal', 30); + expect(store.logs.length, 'to equal', 100); expect(store.logs[0], 'to equal', '1'); - expect(store.logs[29], 'to equal', '30'); + expect(store.logs[99], 'to equal', '100'); }); }); }); From 1834f5bcca1dfd63d3b1b8801b9fc970042b1cf5 Mon Sep 17 00:00:00 2001 From: Tankred Hase <mail@tankredhase.de> Date: Tue, 10 Jul 2018 14:26:51 +0200 Subject: [PATCH 4/6] Remove scrollToEnd prop from List component --- src/component/list.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/component/list.js b/src/component/list.js index 4edc08371..d8d35143c 100644 --- a/src/component/list.js +++ b/src/component/list.js @@ -56,12 +56,7 @@ export class List extends Component { ref={component => (this.list = component)} dataSource={this.dataSource} renderHeader={this.props.renderHeader} - renderRow={data => { - if (this.props.scrollToEnd) { - setTimeout(() => this.list._scrollViewRef.scrollToEnd(), 50); - } - return this.props.renderItem(data); - }} + renderRow={this.props.renderItem} enableEmptySections={true} /> ); @@ -72,7 +67,6 @@ List.propTypes = { data: PropTypes.array.isRequired, renderHeader: PropTypes.func, renderItem: PropTypes.func.isRequired, - scrollToEnd: PropTypes.bool, }; // From e89cb9345da5fb112b32f3a873a51b1857310357 Mon Sep 17 00:00:00 2001 From: Tankred Hase <mail@tankredhase.de> Date: Tue, 10 Jul 2018 15:16:51 +0200 Subject: [PATCH 5/6] Fix regex --- src/view/cli.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/view/cli.js b/src/view/cli.js index d4630f369..bf1b5ca5d 100644 --- a/src/view/cli.js +++ b/src/view/cli.js @@ -61,7 +61,7 @@ class LogOutput extends Component { get printLogs() { setTimeout(() => this._ref.current.scrollToEnd(), 50); - return this.props.logs.map(l => l.replace(/\s$/g, '')).join('\n'); + return this.props.logs.map(l => l.replace(/\s+$/, '')).join('\n'); } render() { From 666ba2d56366006a1ebb84c257cc80a3e966cb26 Mon Sep 17 00:00:00 2001 From: Tankred Hase <mail@tankredhase.de> Date: Tue, 10 Jul 2018 16:05:08 +0200 Subject: [PATCH 6/6] Remove unecessary textAlign --- src/view/cli.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/view/cli.js b/src/view/cli.js index bf1b5ca5d..e68f79e62 100644 --- a/src/view/cli.js +++ b/src/view/cli.js @@ -48,7 +48,6 @@ const logStyles = StyleSheet.create({ paddingRight: 50, }, text: { - textAlign: 'left', fontSize: font.sizeS, }, });