Merge branch 'master' into plot-line-overlaps-data-#671

ChildMindInstitute · Jan 22, 2020 · 69b2d9d · 69b2d9d
2 parents 3f644b3 + f54d6b1
commit 69b2d9d
Showing 1 changed file with 36 additions and 1 deletion.
diff --git a/app/components/screen/index.js b/app/components/screen/index.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
-import { StyleSheet, ScrollView, View } from 'react-native';
+import { Dimensions, StyleSheet, ScrollView, View } from 'react-native';
 import PropTypes from 'prop-types';
+import { Icon, Button, Text } from 'native-base';
 import ScreenDisplay from './ScreenDisplay';
 import Widget from './Widget';
 import Timer from '../Timer';
@@ -45,8 +46,16 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     opacity: 0.5,
   },
+  icon: {
+    color: '#fff',
+    fontSize: 16,
+    paddingBottom: 5,
+    paddingHorizontal: 5,
+  },
 });
 
+const { height } = Dimensions.get('window');
+
 class ActivityScreen extends Component {
   static isValid(answer, screen) {
     if (screen.inputType === 'markdown-message') {
@@ -61,6 +70,7 @@ class ActivityScreen extends Component {
       scrollEnabled: true,
       inputDelayed: false,
       timerActive: false,
+      screenHeight: 0,
     };
     this.interval = null;
     this.startTime = null;
@@ -131,6 +141,10 @@ class ActivityScreen extends Component {
     }
   }
 
+  onContentSizeChange = (contentWidth, contentHeight) => {
+    this.setState({ screenHeight: contentHeight });
+  }
+
   render() {
     const { screen, answer, onChange, isCurrent, onContentError } = this.props;
     const { scrollEnabled, inputDelayed, timerActive } = this.state;
@@ -141,6 +155,9 @@ class ActivityScreen extends Component {
           style={styles.container}
           contentContainerStyle={styles.contentContainer}
           scrollEnabled={scrollEnabled}
+          // eslint-disable-next-line no-return-assign
+          ref={scrollView => this.scrollView = scrollView}
+          onContentSizeChange={this.onContentSizeChange}
         >
           <ScreenDisplay screen={screen} />
           {inputDelayed
@@ -184,6 +201,24 @@ class ActivityScreen extends Component {
             <Timer duration={screen.timer} color={colors.primary} size={40} />
           </View>
         )}
+        { this.state.screenHeight > height ? (
+          <View style={{ position: 'absolute', bottom: 0, alignSelf: 'center' }}>
+            <Button
+              onPress={() => {
+                this.scrollView.scrollToEnd();
+                this.setState({ screenHeight: height });
+              }}
+              full
+              rounded
+              style={{ backgroundColor: colors.primaryColor }}
+            >
+              <Icon type="FontAwesome" name="chevron-down" style={styles.icon} />
+              <Text>See More</Text>
+              <Icon type="FontAwesome" name="chevron-down" style={styles.icon} />
+            </Button>
+          </View>
+        ) : (null)}
+
       </View>
     );
   }