From f7c8b3254b6e0133df5fe2c83ad74e793b82aade Mon Sep 17 00:00:00 2001
From: Eden2016 <eden201621@gmail.com>
Date: Mon, 20 Jan 2020 15:26:09 -0500
Subject: [PATCH] Added See More button for scrollable content on options that
 overflow the page

---
 CHANGELOG.md                   |  2 ++
 android/app/build.gradle       |  4 ++--
 app/components/screen/index.js | 37 +++++++++++++++++++++++++++++++++-
 ios/MDCApp/Info.plist          |  4 ++--
 package.json                   |  2 +-
 5 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e60458a6..a1efa28f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 =======
+## [0.9.18] - 2019-01-20
+:sparkles: Added See More button for scrollable contenent on options that overflow the page
 ## [0.9.16] - 2019-01-16
 - :lipstick: Redesign Progress Bar
 
diff --git a/android/app/build.gradle b/android/app/build.gradle
index d7e324030..4ec2f2442 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -101,8 +101,8 @@ android {
         applicationId "lab.childmindinstitute.data"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 109
-        versionName "0.9.16"
+        versionCode 111
+        versionName "0.9.18"
         ndk {
             abiFilters "arm64-v8a", "x86_64", "armeabi-v7a", "x86"
         }
diff --git a/app/components/screen/index.js b/app/components/screen/index.js
index fc0102b08..e85b710d0 100644
--- 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>
     );
   }
diff --git a/ios/MDCApp/Info.plist b/ios/MDCApp/Info.plist
index 1b3c4cecf..29d5147d3 100644
--- a/ios/MDCApp/Info.plist
+++ b/ios/MDCApp/Info.plist
@@ -17,11 +17,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>0.9.16</string>
+	<string>0.9.18</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>109</string>
+	<string>111</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSRequiresIPhoneOS</key>
diff --git a/package.json b/package.json
index cc3eb88c7..798e5c645 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "MindLogger",
-    "version": "0.9.16",
+    "version": "0.9.18",
     "private": true,
     "scripts": {
         "start": "node node_modules/react-native/local-cli/cli.js start",