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, }; // 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/src/view/cli.js b/src/view/cli.js index f1f1eaaff..e68f79e62 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'; @@ -13,22 +12,20 @@ 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 }) => ( -
+
nav.goSettings()} /> <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 +34,46 @@ 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+$/, '')).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); 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'); }); }); });