Make logs always scroll to bottom + limit to 100

Author: valentinewallace

src/action/log.js

@@ -15,6 +15,9 @@ class LogAction {
     _ipcRenderer = ipcRenderer;
     _ipcRenderer.on('logs', (event, arg) => {
       store.logs.push(arg);
+      if (store.logs.length > 100) {
+        store.logs.splice(0, store.logs.length - 100);
+      }
     });
     _ipcRenderer.send('logs-ready', true);
   }

src/component/list.js

@@ -53,9 +53,15 @@ export class List extends Component {
   render() {
     return (
       <ListView
+        ref={component => (this.list = component)}
         dataSource={this.dataSource}
         renderHeader={this.props.renderHeader}
-        renderRow={this.props.renderItem}
+        renderRow={data => {
+          this.props.scrollToEnd
+            ? setTimeout(() => this.list._scrollViewRef.scrollToEnd(), 50)
+            : null;
+          return this.props.renderItem(data);
+        }}
         enableEmptySections={true}
       />
     );
@@ -66,6 +72,7 @@ List.propTypes = {
   data: PropTypes.array.isRequired,
   renderHeader: PropTypes.func,
   renderItem: PropTypes.func.isRequired,
+  scrollToEnd: PropTypes.bool,
 };
 
 //

src/view/cli.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
+import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
 import Background from '../component/background';
-import MainContent from '../component/main-content';
 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';
 
@@ -29,9 +30,13 @@ const CLIView = ({ store, nav }) => (
       <Button disabled onPress={() => {}} />
     </Header>
     <Background color={color.cliBackground}>
-      <MainContent style={styles.content}>
-        {store.logs.map((log, i) => <LogItem text={log} key={i} />)}
-      </MainContent>
+      <ListContent>
+        <List
+          data={store.logs.slice()}
+          renderItem={text => <LogItem text={text} />}
+          scrollToEnd={true}
+        />
+      </ListContent>
     </Background>
   </Background>
 );
@@ -54,4 +59,4 @@ LogItem.propTypes = {
   text: PropTypes.string,
 };
 
-export default CLIView;
+export default observer(CLIView);