Fix Android Keyboard display issue

2023-06-13 15:51:51 -04:00
parent 576855c3b3
commit b2f8c4cd95
4 changed files with 135 additions and 87 deletions
--- a/components/Selects/select-cost-center.jsx
+++ b/components/Selects/select-cost-center.jsx
@@ -53,7 +53,7 @@ export function CostCenterSelect(props) {
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        
-        maxHeight={300}
+        maxHeight={200}
        labelField="label"
        valueField="value"
        placeholder={!isFocus ? t("selectcostcenter.labels.placeholder") : t("selectcostcenter.labels.selectedplaceholder")}
@@ -82,7 +82,7 @@ const styles = StyleSheet.create({
    alignContent: "center",
  },
  dropdown: {
-    height: 48,
+    height: 50,
    borderColor: "gray",
    borderWidth: 0.5,
    borderRadius: 4,
@@ -101,10 +101,10 @@ const styles = StyleSheet.create({
    fontSize: 14,
  },
  placeholderStyle: {
-    fontSize: 16,
+    fontSize: 14,
  },
  selectedTextStyle: {
-    fontSize: 16,
+    fontSize: 14,
  },
  iconStyle: {
    width: 20,
@@ -112,6 +112,6 @@ const styles = StyleSheet.create({
  },
  inputSearchStyle: {
    height: 40,
-    fontSize: 16,
+    fontSize: 14,
  },
 });
--- a/components/Selects/select-job-id.jsx
+++ b/components/Selects/select-job-id.jsx
@@ -94,21 +94,27 @@ export function JobIdSearchSelect(
  }, [data, idData]);

  useEffect(() => {
-    // console.log("useEfectDependentOn: [theOptions]");
-    var count = Object.keys(theOptions).length;
-    // console.log("useEfectDependentOn: [theOptions] count:", count);
-    let selectDataArray = [];
-    for (let i = 0; i < count; i++) {
-      selectDataArray.push({
-        value: theOptions[i].id,
-        label: `${clm_no && theOptions[i].clm_no ? `${theOptions[i].clm_no} | ` : ""}${
+    if (typeof theOptions !== "undefined") {
+      //  console.log("useEfectDependentOn: [theOptions]");
+      var count = Object.keys(theOptions).length;
+      // console.log("useEfectDependentOn: [theOptions] count:", count);
+      let selectDataArray = [];
+      for (let i = 0; i < count; i++) {
+        selectDataArray.push({
+          value: theOptions[i].id,
+          label: `${
+            clm_no && theOptions[i].clm_no ? `${theOptions[i].clm_no} | ` : ""
+          }${
            theOptions[i].ro_number || t("general.labels.na")
-          } | ${OwnerNameDisplayFunction(theOptions[i])} | ${theOptions[i].v_model_yr || ""} ${theOptions[i].v_make_desc || ""} ${
+          } | ${OwnerNameDisplayFunction(theOptions[i])} | ${
+            theOptions[i].v_model_yr || ""
+          } ${theOptions[i].v_make_desc || ""} ${
            theOptions[i].v_model_desc || ""
          }`,
-      });
+        });
+      }
+      setSelectorData(selectDataArray);
    }
-    setSelectorData(selectDataArray);
  }, [theOptions]);

  //   useEffect(() => {
@@ -128,7 +134,7 @@ export function JobIdSearchSelect(
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        search
-        maxHeight={300}
+        maxHeight={200}
        labelField="label"
        valueField="value"
        placeholder={!isFocus ? t("selectjobid.labels.placeholder") : t("selectjobid.labels.selectedplaceholder")}
@@ -137,7 +143,14 @@ export function JobIdSearchSelect(
        onBlur={() => setIsFocus(false)}
        data={selectorData}
        value={props.currentValue?.value} //{selectedvalue}
-        onChange={(item) => props.onJobSelected(item)}//TODO: add setIsFocus(false); to this
+        onChange={(item) => {
+          // console.log("onChange Fired!!!!");
+          props.onJobSelected(item);
+          setIsFocus(false);
+        }} 
+        
+        
+        //TODO: add setIsFocus(false); to this
        //     {
        //     console.log("onValueSelected!!!!");
        //    // (item) => {onJobSelected(item.value)};
@@ -198,10 +211,10 @@ const styles = StyleSheet.create({
    fontSize: 14,
  },
  placeholderStyle: {
-    fontSize: 16,
+    fontSize: 14,
  },
  selectedTextStyle: {
-    fontSize: 16,
+    fontSize: 14,
  },
  iconStyle: {
    width: 20,
@@ -209,6 +222,6 @@ const styles = StyleSheet.create({
  },
  inputSearchStyle: {
    height: 40,
-    fontSize: 16,
+    fontSize: 14,
  },
 });
--- a/components/keyboards/KeyboardAvoidingComponent.js
+++ b/components/keyboards/KeyboardAvoidingComponent.js
@@ -0,0 +1,31 @@
+import { View, Text, Platform } from "react-native";
+import React from "react";
+import { KeyboardAvoidingView } from "react-native";
+import { StyleSheet } from "react-native";
+import { TouchableWithoutFeedback } from "react-native";
+import { Keyboard } from "react-native";
+
+const KeyboardAvoidingComponent = ({ children }) => {
+  return (
+    <KeyboardAvoidingView
+      enabled
+      behavior={Platform.OS === "ios" ? "padding":"height" }
+      style={styles.container}
+    >
+      {/* <TouchableWithoutFeedback onPress={Keyboard.dismiss}> */}
+        <View style={styles.inner}>{children}</View>
+      {/* </TouchableWithoutFeedback> */}
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  inner: {
+    flex: 1,
+  },
+});
+
+export default KeyboardAvoidingComponent;
--- a/components/screen-time-ticket-browser/screen-time-ticket-browser.component.jsx
+++ b/components/screen-time-ticket-browser/screen-time-ticket-browser.component.jsx
@@ -50,6 +50,8 @@ import ClockedinListItem from "../time-ticket-items/clockedin-list-item.componen
 import SignOutButton from "../Buttons/employee-sign-out-button.component";
 import AddTimeTicketButton from "../Buttons/create-time-ticket-button.component";

+import KeyboardAvoidingComponent from "../keyboards/KeyboardAvoidingComponent";
+
 const mapStateToProps = createStructuredSelector({
  currentEmployee: selectCurrentEmployee,
  loaderGettingRates: selectGettingRates,
@@ -198,75 +200,77 @@ export function ScreenTimeTicketBrowser({

  return (
    <View style={styles.cardBackground}>
-      <FlatList
-        ListHeaderComponent={
-          <Card style={localStyles.localCardStyle}>
-            <Card.Title
-              title={t("timeticketbrowser.labels.loggedinemployee")}
-              //  right={(props) => <SignOutButton />}
-            />
-            <Card.Content>
-              {currentEmployeeFullName && (
-                <Subheading>{currentEmployeeFullName}</Subheading>
-              )}
-            </Card.Content>
-          </Card>
-        }
-        data={!!itemState ? [itemState] : null}
-        renderItem={({ item }) => (
-          <MyItem style={localStyles.localCardStyle} itemState={item} />
-        )}
-        ListFooterComponent={
-          <Card style={localStyles.localCardStyle}>
-            <Card.Title
-              title={t("timeticketbrowser.labels.clockintojob")}
-              //     right={(props) =>
-              //     <View style={{ flexDirection:"row" }} ><AddTimeTicketButton />
-              //     <Button mode="outlined"
-              // compact={true} loading={loading} onPress={handleFinish}
-              // style={{margin:4}}
-              // >
-              //       <Text>Clock In</Text>
-              //     </Button></View>
-              //     }
-            />
-            <Card.Content>
-              <JobIdSearchSelect
-                currentValue={currentSJobId}
-                onJobSelected={setCurrentSJobId}
-                convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
-                notExported={!currentBodyshop.tt_allow_post_to_invoiced}
-                notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
+      <KeyboardAvoidingComponent>
+        <FlatList
+          ListHeaderComponent={
+            <Card style={localStyles.localCardStyle}>
+              <Card.Title
+                title={t("timeticketbrowser.labels.loggedinemployee")}
+                //  right={(props) => <SignOutButton />}
              />
-              <CostCenterSelect
-                currentValue={currentSCC}
-                currentRatesNCostCenters={currentRatesNCostCenters}
-                onValueSelected={setCurrentSCC}
+              <Card.Content>
+                {currentEmployeeFullName && (
+                  <Subheading>{currentEmployeeFullName}</Subheading>
+                )}
+              </Card.Content>
+            </Card>
+          }
+          data={!!itemState ? [itemState] : null}
+          renderItem={({ item }) => (
+            <MyItem style={localStyles.localCardStyle} itemState={item} />
+          )}
+          ListFooterComponent={
+            <Card style={localStyles.localCardStyle}>
+              <Card.Title
+                title={t("timeticketbrowser.labels.clockintojob")}
+                //     right={(props) =>
+                //     <View style={{ flexDirection:"row" }} ><AddTimeTicketButton />
+                //     <Button mode="outlined"
+                // compact={true} loading={loading} onPress={handleFinish}
+                // style={{margin:4}}
+                // >
+                //       <Text>Clock In</Text>
+                //     </Button></View>
+                //     }
              />
-              {error && error?.message ? (
-                <ErrorDisplay errorMessage={error.message} />
-              ) : null}
-            </Card.Content>
-            <Card.Actions
-              style={{
-                justifyContent: "center",
-              }}
-            >
-              <Button
-                mode="outlined"
-                style={styles.buttonBasicOutlined}
-                loading={loadingClockIn}
-                onPress={handleFinish}
+              <Card.Content>
+                <JobIdSearchSelect
+                  currentValue={currentSJobId}
+                  onJobSelected={setCurrentSJobId}
+                  convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
+                  notExported={!currentBodyshop.tt_allow_post_to_invoiced}
+                  notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
+                />
+                <CostCenterSelect
+                  currentValue={currentSCC}
+                  currentRatesNCostCenters={currentRatesNCostCenters}
+                  onValueSelected={setCurrentSCC}
+                />
+                {error && error?.message ? (
+                  <ErrorDisplay errorMessage={error.message} />
+                ) : null}
+              </Card.Content>
+              <Card.Actions
+                style={{
+                  justifyContent: "center",
+                }}
              >
-                <Text>{t("timeticketbrowser.actions.clockin")}</Text>
-              </Button>
-            </Card.Actions>
-          </Card>
-        }
-        refreshControl={
-          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
-        }
-      />
+                <Button
+                  mode="outlined"
+                  style={styles.buttonBasicOutlined}
+                  loading={loadingClockIn}
+                  onPress={handleFinish}
+                >
+                  <Text>{t("timeticketbrowser.actions.clockin")}</Text>
+                </Button>
+              </Card.Actions>
+            </Card>
+          }
+          refreshControl={
+            <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+          }
+        />
+      </KeyboardAvoidingComponent>
    </View>
  );
 }