Merge pull request #429 from monkvision/fix/MN-178/minor-fixes

Fix/mn 178/minor fixes
monkvision · Feb 9, 2023 · 14a51c9 · 14a51c9
2 parents 9b2dcc9 + 7a0e619
commit 14a51c9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/packages/camera/src/components/AddDamageModal/PartSelector.js b/packages/camera/src/components/AddDamageModal/PartSelector.js
@@ -1,25 +1,36 @@
 import React, { useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import PropTypes from 'prop-types';
 
 import { useWireframe, useXMLParser } from './hooks';
 import SVGComponentMapper from './SVGComponentMapper';
 
 const PART_SELECTOR_CONTAINER_WIDTH = 420;
-const PART_SELECTOR_CONTAINER_HEIGHT = 235;
+const PART_SELECTOR_CONTAINER_HEIGHT_DIMENSION = [
+  { screenHeightSpan: [0, 285], partSelectorHeight: 190 },
+  { screenHeightSpan: [285, 310], partSelectorHeight: 190 },
+  { screenHeightSpan: [310, 99999], partSelectorHeight: 235 },
+];
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     position: 'relative',
     width: PART_SELECTOR_CONTAINER_WIDTH,
-    height: PART_SELECTOR_CONTAINER_HEIGHT,
   },
 });
 
 export default function PartSelector({ orientation, togglePart, isPartSelected, vehicleType }) {
+  const { height } = useWindowDimensions();
   const wireframeXML = useWireframe({ orientation, vehicleType });
   const doc = useXMLParser(wireframeXML);
+
+  const containerHeight = useMemo(
+    () => PART_SELECTOR_CONTAINER_HEIGHT_DIMENSION
+      .find(({ screenHeightSpan }) => screenHeightSpan[0] <= height
+        && height < screenHeightSpan[1])?.partSelectorHeight ?? 235,
+    [height],
+  );
   const svgElement = useMemo(() => {
     const svg = doc.children[0];
     if (svg.tagName !== 'svg') {
@@ -29,7 +40,7 @@ export default function PartSelector({ orientation, togglePart, isPartSelected,
   }, [doc]);
 
   return (
-    <View style={[styles.container]}>
+    <View style={[styles.container, { height: containerHeight }]}>
       <SVGComponentMapper
         element={svgElement}
         togglePart={togglePart}

diff --git a/packages/camera/src/components/AddDamageModal/index.js b/packages/camera/src/components/AddDamageModal/index.js
@@ -101,8 +101,8 @@ export default function AddDamageModal({
   const isConfirmDisabled = useMemo(() => selectedParts.length === 0, [selectedParts]);
 
   return (
-    <View style={[styles.container, isCompact ? { paddingVertical: 3 } : null]}>
-      <View style={[styles.header, isCompact ? { marginBottom: 0 } : null]}>
+    <View style={[styles.container, isCompact ? { paddingVertical: 3 } : {}]}>
+      <View style={[styles.header, isCompact ? { marginBottom: 0 } : {}]}>
         <Text style={[styles.text, styles.title]}>
           {t('partSelector.modal.title')}
         </Text>
@@ -145,15 +145,15 @@ export default function AddDamageModal({
       </View>
       <View style={[styles.footer]}>
         <TouchableOpacity
-          style={[styles.button, isCompact ? styles.buttonCompact : null]}
+          style={[styles.button, isCompact ? styles.buttonCompact : {}]}
           onPress={onCancel}
         >
           <Text style={[styles.text]}>
             {t('partSelector.modal.cancel')}
           </Text>
         </TouchableOpacity>
         <TouchableOpacity
-          style={[styles.button, isCompact ? styles.buttonCompact : null]}
+          style={[styles.button, isCompact ? styles.buttonCompact : {}]}
           onPress={() => onConfirm(selectedParts)}
           disabled={isConfirmDisabled}
         >

diff --git a/src/components/Modal/styles.js b/src/components/Modal/styles.js
@@ -27,7 +27,7 @@ export default StyleSheet.create({
     width: '90%',
     height: 'auto',
     padding: 4,
-    marginTop: 30,
+    marginTop: 200,
   },
   item: {
     borderRadius: 4,