fix: text-wrapping on inputs

hopetambala · May 28, 2021 · 8eb0900 · 8eb0900
1 parent dde5a10
commit 8eb0900
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 94 deletions.
diff --git a/components/FormikFields/PaperInputPicker/index.js b/components/FormikFields/PaperInputPicker/index.js
@@ -66,10 +66,10 @@ const PaperInputPicker = ({
     <>
       {fieldType === 'input' && (
         <View style={stylesDefault.container} key={formikKey}>
-          {translatedLabel.length > 40
+          {translatedLabel.length > 30
             && <Text style={stylesDefault.label}>{translatedLabel}</Text>}
           <TextInput
-            label={translatedLabel.length > 40 ? '' : translatedLabel}
+            label={translatedLabel.length > 30 ? '' : translatedLabel}
             onChangeText={handleChange(formikKey)}
             onBlur={handleBlur(formikKey)}
             {...rest} //eslint-disable-line
@@ -84,7 +84,7 @@ const PaperInputPicker = ({
       )}
       {fieldType === 'numberInput' && (
         <View style={stylesDefault.container} key={formikKey}>
-          {translatedLabel.length > 40
+          {translatedLabel.length > 30
             && (
               <Text style={[stylesDefault.label, {
                 bottom: -15, zIndex: 1, left: 5, padding: 5
@@ -94,7 +94,7 @@ const PaperInputPicker = ({
               </Text>
             )}
           <TextInput
-            label={translatedLabel.length > 40 ? '' : translatedLabel}
+            label={translatedLabel.length > 30 ? '' : translatedLabel}
             onChangeText={handleChange(formikKey)}
             onBlur={handleBlur(formikKey)}
             {...rest} //eslint-disable-line
@@ -415,91 +415,87 @@ const PaperInputPicker = ({
           </View>
         </View>
       )}
-      {
-        fieldType === 'multiInputRowNum' && (
-          <View style={stylesDefault.container}>
-            <Text style={stylesDefault.label}>{translatedLabel}</Text>
-            <View style={stylesDefault.multiInputContainer}>
-              {data.options.map((result) => (result.textSplit ? (
-                <View key={`${result}`} style={{ flex: 1 }}>
-                  <Text style={styleX.textSplit}>{result.label}</Text>
-                </View>
-              ) : (
-                <View key={result.value} style={stylesDefault.inputItem}>
-                  <TextInput
-                    label={customForm ? result.label : I18n.t(result.label)}
-                    onChangeText={handleChange(result.value)}
-                    onBlur={handleBlur(result.value)}
+      {fieldType === 'multiInputRowNum' && (
+      <View style={stylesDefault.container}>
+        <Text style={stylesDefault.label}>{translatedLabel}</Text>
+        <View style={stylesDefault.multiInputContainer}>
+          {data.options.map((result) => (result.textSplit ? (
+            <View key={`${result}`} style={{ flex: 1 }}>
+              <Text style={styleX.textSplit}>{result.label}</Text>
+            </View>
+          ) : (
+            <View key={result.value} style={stylesDefault.inputItem}>
+              <TextInput
+                label={customForm ? result.label : I18n.t(result.label)}
+                onChangeText={handleChange(result.value)}
+                onBlur={handleBlur(result.value)}
                     {...rest} //eslint-disable-line
-                    mode="outlined"
-                    keyboardType="numeric"
-                    maxLength={result.maxLength ? result.maxLength : null}
-                    theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
-                  />
-                  <Text style={{ color: 'red' }}>
-                    {errors[result.value]}
-                  </Text>
-                </View>
-              )))}
+                mode="outlined"
+                keyboardType="numeric"
+                maxLength={result.maxLength ? result.maxLength : null}
+                theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
+              />
+              <Text style={{ color: 'red' }}>
+                {errors[result.value]}
+              </Text>
             </View>
-          </View>
-        )
-      }
-      {
-        fieldType === 'photo' && (
-          <View style={stylesDefault.container}>
-            {!cameraVisible && image === null && (
-              <View>
-                <Text style={stylesDefault.labelImage}>{translatedLabel}</Text>
-                <Button onPress={() => setCameraVisible(true)}>Take Photo</Button>
-                <UseCameraRoll
-                  pictureUris={pictureUris}
-                  setPictureUris={setPictureUris}
-                  formikProps={formikProps}
-                  formikKey={formikKey}
-                  image={image}
-                  setImage={setImage}
-                />
-              </View>
-            )}
-            {!cameraVisible && image !== null && (
-              <View>
-                <Text style={stylesDefault.labelImage}>{translatedLabel}</Text>
-                <Image source={{ uri: image }} style={{ width: 'auto', height: 400 }} />
-                <Button onPress={() => {
-                  setCameraVisible(true);
-                }}
-                >
-                  Take Picture
-                </Button>
-                <UseCameraRoll
-                  pictureUris={pictureUris}
-                  setPictureUris={setPictureUris}
-                  formikProps={formikProps}
-                  formikKey={formikKey}
-                  image={image}
-                  setImage={setImage}
-                />
-              </View>
-            )}
-            {cameraVisible && (
-              <View>
-                <Text style={stylesDefault.labelImage}>{label}</Text>
-                <UseCamera
-                  cameraVisible={cameraVisible}
-                  setCameraVisible={setCameraVisible}
-                  pictureUris={pictureUris}
-                  setPictureUris={setPictureUris}
-                  formikProps={formikProps}
-                  formikKey={formikKey}
-                  image={image}
-                  setImage={setImage}
-                />
-              </View>
-            )}
-          </View>
-        )
-      }
+          )))}
+        </View>
+      </View>
+      )}
+      {fieldType === 'photo' && (
+        <View style={stylesDefault.container}>
+          {!cameraVisible && image === null && (
+            <View>
+              <Text style={stylesDefault.labelImage}>{translatedLabel}</Text>
+              <Button onPress={() => setCameraVisible(true)}>Take Photo</Button>
+              <UseCameraRoll
+                pictureUris={pictureUris}
+                setPictureUris={setPictureUris}
+                formikProps={formikProps}
+                formikKey={formikKey}
+                image={image}
+                setImage={setImage}
+              />
+            </View>
+          )}
+          {!cameraVisible && image !== null && (
+            <View>
+              <Text style={stylesDefault.labelImage}>{translatedLabel}</Text>
+              <Image source={{ uri: image }} style={{ width: 'auto', height: 400 }} />
+              <Button onPress={() => {
+                setCameraVisible(true);
+              }}
+              >
+                Take Picture
+              </Button>
+              <UseCameraRoll
+                pictureUris={pictureUris}
+                setPictureUris={setPictureUris}
+                formikProps={formikProps}
+                formikKey={formikKey}
+                image={image}
+                setImage={setImage}
+              />
+            </View>
+          )}
+          {cameraVisible && (
+            <View>
+              <Text style={stylesDefault.labelImage}>{label}</Text>
+              <UseCamera
+                cameraVisible={cameraVisible}
+                setCameraVisible={setCameraVisible}
+                pictureUris={pictureUris}
+                setPictureUris={setPictureUris}
+                formikProps={formikProps}
+                formikKey={formikKey}
+                image={image}
+                setImage={setImage}
+              />
+            </View>
+          )}
+        </View>
+      )}
     </>
   );
 };

diff --git a/domains/DataCollection/Assets/NewAssets/AssetSupplementary/AssetFormSelect/index.js b/domains/DataCollection/Assets/NewAssets/AssetSupplementary/AssetFormSelect/index.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ScrollView, View } from 'react-native';
+import { ActivityIndicator, ScrollView, View } from 'react-native';
 import { Card, IconButton, Text } from 'react-native-paper';
 
 import { assetFormsQuery } from '../../../../../../modules/cached-resources';
@@ -8,15 +8,20 @@ import styles from './index.style';
 
 const AssetFormSelect = ({ setSelectedForm }) => {
   const [assetForms, setAssetForms] = useState([]);
+  const [loading, setLoading] = useState(false);
   useEffect(() => {
+    setLoading(true);
     assetFormsQuery().then((forms) => {
+      setLoading(false);
       setAssetForms(forms);
     });
-  });
+  }, []);
 
-  const refreshAssetForms = () => {
-    assetFormsQuery().then((forms) => {
+  const refreshAssetForms = async () => {
+    setLoading(true);
+    await assetFormsQuery().then((forms) => {
       setAssetForms(forms);
+      setLoading(false);
     });
   };
 
@@ -36,6 +41,8 @@ const AssetFormSelect = ({ setSelectedForm }) => {
           onPress={refreshAssetForms}
         />
       </View>
+      {loading
+        && <ActivityIndicator />}
       <ScrollView horizontal style={styles.componentContainer}>
         {assetForms && assetForms.map((form) => (
           <Card

diff --git a/modules/cached-resources/read.js b/modules/cached-resources/read.js
@@ -114,8 +114,8 @@ function assetFormsQuery() {
   return new Promise((resolve, reject) => {
     checkOnlineStatus().then((online) => {
       if (online) {
-        customQueryService(0, 5000, 'FormSpecificationsV2', 'typeOfForm', 'Assets').then(async (forms) => {
-          await storeData(forms, 'assetForms');
+        customQueryService(0, 5000, 'FormSpecificationsV2', 'typeOfForm', 'Assets').then((forms) => {
+          storeData(forms, 'assetForms');
           resolve(JSON.parse(JSON.stringify(forms)));
         }, (error) => {
           reject(error);

diff --git a/scripts/update-version/versionNumber.js b/scripts/update-version/versionNumber.js
@@ -1,4 +1,4 @@
- /* eslint-disable */
+/* eslint-disable */
 
 const { toUpper } = require('lodash');
 const prompt = require('prompt');