Merge pull request #9 from openforis/fix/taxon-layout

Fixed taxon attribute layout issue in single node view mode

app.json

@@ -21,10 +21,10 @@
         "backgroundColor": "#FFFFFF"
       },
       "package": "org.openforis.arena_mobile",
-      "versionCode": 4
+      "versionCode": 5
     },
     "ios": {
-      "buildNumber": "4",
+      "buildNumber": "5",
       "bundleIdentifier": "org.openforis.arena-mobile",
       "config": {
         "usesNonExemptEncryption": false

package.json

@@ -32,7 +32,7 @@
     "expo-document-picker": "~12.0.2",
     "expo-file-system": "~17.0.1",
     "expo-image-manipulator": "~12.0.5",
-    "expo-image-picker": "~15.0.7",
+    "expo-image-picker": "~15.1.0",
     "expo-localization": "~15.0.3",
     "expo-location": "~17.0.1",
     "expo-media-library": "~16.0.5",

src/screens/RecordEditor/NodeComponentSwitch/nodeTypes/NodeTaxonComponent/NodeTaxonAutocomplete.js

@@ -1,10 +1,11 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import PropTypes from "prop-types";
 
 import { NodeDefs } from "@openforis/arena-core";
 
 import { SelectableListWithFilter } from "components";
 import { Taxa } from "model";
+
 import { useTaxaFiltered } from "./useTaxaFiltered";
 
 const alwaysIncludeVernacularNames = false;
@@ -135,9 +136,14 @@ export const NodeTaxonAutocomplete = (props) => {
     [updateNodeValue]
   );
 
+  const filterItemsCallback = useMemo(
+    () => filterItems({ nodeDef, unlistedTaxon, unknownTaxon }),
+    [nodeDef, unknownTaxon, unlistedTaxon]
+  );
+
   return (
     <SelectableListWithFilter
-      filterItems={filterItems({ nodeDef, unlistedTaxon, unknownTaxon })}
+      filterItems={filterItemsCallback}
       itemKeyExtractor={itemKeyExtractor}
       itemLabelExtractor={itemLabelExtractor({ nodeDef })}
       itemDescriptionExtractor={itemDescriptionExtractor}

src/screens/RecordEditor/NodeComponentSwitch/nodeTypes/NodeTaxonComponent/NodeTaxonComponent.js

@@ -1,10 +1,9 @@
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 
 import { NodeDefs } from "@openforis/arena-core";
 
 import { Button, CloseIconButton, HView, Text, VView, View } from "components";
-import { useEffectiveTheme } from "hooks";
 import { RecordEditViewMode } from "model";
 import { SurveyOptionsSelectors } from "state";
 
@@ -13,7 +12,7 @@ import { NodeTaxonEditDialog } from "./NodeTaxonEditDialog";
 import { NodeTaxonAutocomplete } from "./NodeTaxonAutocomplete";
 import { TaxonValuePreview } from "../../../NodeValuePreview/TaxonValuePreview";
 import { useTaxonByNodeValue } from "../../../NodeValuePreview/useTaxonByNodeValue";
-
+import { useDynamicStyles } from "./useDynamicStyles";
 import styles from "./styles";
 
 export const NodeTaxonComponent = (props) => {
@@ -24,7 +23,6 @@ export const NodeTaxonComponent = (props) => {
       `rendering NodeTaxonComponent for ${NodeDefs.getName(nodeDef)}`
     );
   }
-  const theme = useEffectiveTheme();
   const viewMode = SurveyOptionsSelectors.useRecordEditViewMode();
 
   const [editDialogOpen, setEditDialogOpen] = useState(false);
@@ -38,18 +36,12 @@ export const NodeTaxonComponent = (props) => {
 
   const selectedTaxon = useTaxonByNodeValue({ value });
   const selectedTaxonVernacularName = selectedTaxon?.vernacularName;
-
-  const selectedTaxonContainerStyle = useMemo(
-    () => [
-      styles.selectedTaxonContainer,
-      { borderColor: theme.colors.onSurfaceVariant },
-      { height: selectedTaxonVernacularName ? 70 : 40 },
-    ],
-    [selectedTaxonVernacularName, theme.colors.onSurfaceVariant]
-  );
+  const { containerStyle, selectedTaxonContainerStyle } = useDynamicStyles({
+    selectedTaxonVernacularName,
+  });
 
   return (
-    <VView style={styles.container}>
+    <VView style={containerStyle}>
       <View style={styles.selectedTaxonWrapper}>
         {selectedTaxon ? (
           <HView style={selectedTaxonContainerStyle}>

src/screens/RecordEditor/NodeComponentSwitch/nodeTypes/NodeTaxonComponent/styles.js

@@ -2,6 +2,7 @@ import { StyleSheet } from "react-native";
 
 export default StyleSheet.create({
   container: { gap: 10 },
+  containerOneNode: { flex: 1 },
   searchButton: {
     alignSelf: "center",
   },

src/screens/RecordEditor/NodeComponentSwitch/nodeTypes/NodeTaxonComponent/useDynamicStyles.js

@@ -0,0 +1,25 @@
+import { useMemo } from "react";
+
+import { useEffectiveTheme } from "hooks";
+import { RecordEditViewMode } from "model";
+import { SurveyOptionsSelectors } from "state";
+
+import defaultStyles from "./styles";
+
+export const useDynamicStyles = ({ selectedTaxonVernacularName }) => {
+  const theme = useEffectiveTheme();
+  const viewMode = SurveyOptionsSelectors.useRecordEditViewMode();
+
+  return useMemo(() => {
+    const selectedTaxonContainerStyle = [
+      defaultStyles.selectedTaxonContainer,
+      { borderColor: theme.colors.onSurfaceVariant },
+      { height: selectedTaxonVernacularName ? 70 : 40 },
+    ];
+    const containerStyle = [defaultStyles.container];
+    if (viewMode === RecordEditViewMode.oneNode) {
+      containerStyle.push(defaultStyles.containerOneNode);
+    }
+    return { containerStyle, selectedTaxonContainerStyle };
+  }, [selectedTaxonVernacularName, theme.colors.onSurfaceVariant, viewMode]);
+};

src/screens/RecordEditor/NodeComponentSwitch/nodeTypes/NodeTaxonComponent/useTaxaFiltered.js

@@ -1,8 +1,10 @@
 import { NodeDefs } from "@openforis/arena-core";
-import { Taxa } from "model/Taxa";
-import { useTaxa } from "./useTaxa";
+
+import { Taxa } from "model";
+import { SurveySelectors } from "state";
+
 import { useItemsFilter } from "../useItemsFilter";
-import { SurveySelectors } from "state/survey";
+import { useTaxa } from "./useTaxa";
 
 const alwaysIncludeTaxaFunction = (item) =>
   [Taxa.unlistedCode, Taxa.unknownCode].includes(item.props.code);

yarn.lock

@@ -4253,7 +4253,7 @@ __metadata:
     expo-document-picker: "npm:~12.0.2"
     expo-file-system: "npm:~17.0.1"
     expo-image-manipulator: "npm:~12.0.5"
-    expo-image-picker: "npm:~15.0.7"
+    expo-image-picker: "npm:~15.1.0"
     expo-localization: "npm:~15.0.3"
     expo-location: "npm:~17.0.1"
     expo-media-library: "npm:~16.0.5"
@@ -7245,14 +7245,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expo-image-picker@npm:~15.0.7":
-  version: 15.0.7
-  resolution: "expo-image-picker@npm:15.0.7"
+"expo-image-picker@npm:~15.1.0":
+  version: 15.1.0
+  resolution: "expo-image-picker@npm:15.1.0"
   dependencies:
     expo-image-loader: "npm:~4.7.0"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/b8869732fa68e907f8da14038f10477bbbb098f3b144d857e9677c59a3557841bb7beac3dcf3b27896c3223d7723e8a83ffcd3d7376ba1d016ee8c9a76096e46
+  checksum: 10c0/a472217434dae08f462011d4bc2811196ffbe1c97392de1e5991fcc0b53125dc049cf8c2045b05a38044aaf642625cf231a4bf47e0a45feff5d10a76e65cd5fa
   languageName: node
   linkType: hard