Merge pull request #986 from akvo/feature/948-dropdown-item-style-for…

…-colored-options Feature/948 dropdown item style for colored options
akvo · Jan 18, 2024 · 519de62 · 519de62
2 parents 0a52213 + 84ca9bf
commit 519de62
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 80 deletions.
diff --git a/app/src/components/AnimatedTooltip.js b/app/src/components/AnimatedTooltip.js
@@ -23,16 +23,18 @@ const styles = StyleSheet.create({
     height: 0,
     backgroundColor: 'transparent',
     borderStyle: 'solid',
-    borderLeftWidth: 10,
-    borderRightWidth: 10,
-    borderBottomWidth: 20,
+    borderLeftWidth: 8,
+    borderRightWidth: 8,
+    borderBottomWidth: 10,
     borderLeftColor: 'transparent',
     borderRightColor: 'transparent',
     borderBottomColor: 'grey',
-    marginLeft: 10,
+    marginLeft: 0,
   },
   tooltipContainer: {
     padding: 10,
+    marginLeft: -10,
+    maxWidth: 360,
     backgroundColor: 'grey',
     borderRadius: 5,
     shadowOpacity: 0.3,

diff --git a/app/src/form/fields/TypeMultipleOption.js b/app/src/form/fields/TypeMultipleOption.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { FieldLabel } from '../support';
+import { FieldLabel, OptionItem } from '../support';
 import { styles } from '../styles';
 import { MultiSelect } from 'react-native-element-dropdown';
 import { FormState } from '../../store';
@@ -44,51 +44,27 @@ const TypeMultipleOption = ({
             onChange(id, value);
           }
         }}
-        renderItem={({ label, color, name }, active) => {
+        renderItem={OptionItem}
+        renderSelectedItem={({ color, label, name }) => {
           return (
-            <View style={[{ backgroundColor: active ? '#0047AB' : color || '#FFF', padding: 15 }]}>
-              <Text
-                style={[
-                  {
-                    color: color ? '#FFF' : '#000',
-                    fontWeight: color ? 'bold' : 'normal',
-                  },
-                ]}
-              >
+            <View style={[styles.optionSelectedList]}>
+              <Text>
+                {color ? (
+                  <Text
+                    style={[
+                      {
+                        color: color,
+                      },
+                    ]}
+                  >
+                    ●{'  '}
+                  </Text>
+                ) : null}
                 {label || name}
               </Text>
             </View>
           );
         }}
-        renderSelectedItem={(item) => {
-          return (
-            <View
-              style={[
-                {
-                  backgroundColor: item?.color || '#CCC',
-                  padding: 10,
-                  marginLeft: 10,
-                  marginTop: 5,
-                  borderRadius: 5,
-                  borderWidth: 0,
-                },
-              ]}
-            >
-              <Text
-                style={[
-                  {
-                    color: item?.color ? '#FFF' : '#000',
-                    fontWeight: item?.color ? 'bold' : 'normal',
-                    fontSize: 14,
-                  },
-                ]}
-              >
-                {item?.label || item?.name}
-                {'  '} ✖
-              </Text>
-            </View>
-          );
-        }}
         testID="type-multiple-option-dropdown"
         confirmUnSelectItem={true}
       />

diff --git a/app/src/form/fields/TypeOption.js b/app/src/form/fields/TypeOption.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { FieldLabel } from '../support';
+import { FieldLabel, OptionItem } from '../support';
 import { styles } from '../styles';
 import { Dropdown } from 'react-native-element-dropdown';
 import { Text } from 'react-native';
@@ -24,25 +24,9 @@ const TypeOption = ({
   const activeLang = FormState.useState((s) => s.lang);
   const trans = i18n.text(activeLang);
   const requiredValue = required ? requiredSign : null;
-  const selectedStyle = React.useMemo(() => {
+  const color = React.useMemo(() => {
     const currentValue = value?.[0];
-    const color = option.find((x) => x.name === currentValue)?.color;
-    if (color) {
-      return {
-        marginLeft: -10,
-        marginRight: -30,
-        marginTop: -5,
-        marginBottom: -5,
-        borderRadius: 5,
-        paddingTop: 10,
-        paddingLeft: 10,
-        paddingBottom: 10,
-        fontWeight: 'bold',
-        color: '#FFF',
-        backgroundColor: color,
-      };
-    }
-    return {};
+    return option.find((x) => x.name === currentValue)?.color;
   }, [value, id, option]);
 
   return (
@@ -51,7 +35,13 @@ const TypeOption = ({
       <Dropdown
         style={[styles.dropdownField]}
         data={option}
-        selectedTextStyle={selectedStyle}
+        renderLeftIcon={() =>
+          color ? (
+            <View>
+              <Text style={[{ color: color }]}>● </Text>
+            </View>
+          ) : null
+        }
         search={showSearch}
         maxHeight={300}
         labelField="label"
@@ -63,22 +53,7 @@ const TypeOption = ({
             onChange(id, [optValue]);
           }
         }}
-        renderItem={(item) => {
-          return (
-            <View style={[{ backgroundColor: item?.color || '#FFF', padding: 15 }]}>
-              <Text
-                style={[
-                  {
-                    color: item?.color ? '#FFF' : '#000',
-                    fontWeight: item?.color ? 'bold' : 'normal',
-                  },
-                ]}
-              >
-                {item?.label || item?.name}
-              </Text>
-            </View>
-          );
-        }}
+        renderItem={OptionItem}
         testID="type-option-dropdown"
         placeholder={trans.selectItem}
       />

diff --git a/app/src/form/styles.js b/app/src/form/styles.js
@@ -78,6 +78,15 @@ export const styles = StyleSheet.create({
   optionContainer: {
     marginBottom: 25,
   },
+  optionSelectedList: {
+    backgroundColor: '#f2f2f2',
+    padding: 10,
+    marginLeft: 10,
+    marginTop: 5,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+  },
   multipleOptionContainer: {
     marginBottom: 25,
   },

diff --git a/app/src/form/support/OptionItem.js b/app/src/form/support/OptionItem.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Text } from 'react-native';
+
+const OptionItem = ({ label, color, name }, active) => {
+  return (
+    <View style={[{ padding: 15 }]}>
+      <Text>
+        {color ? <Text style={[{ color: color }]}>●</Text> : null} {label || name}
+      </Text>
+    </View>
+  );
+};
+
+export default OptionItem;
diff --git a/app/src/form/support/index.js b/app/src/form/support/index.js
@@ -4,3 +4,4 @@ export { default as FieldGroupHeader } from './FieldGroupHeader';
 export { default as QuestionGroupList } from './QuestionGroupList';
 export { default as SaveDialogMenu } from './SaveDialogMenu';
 export { default as SaveDropdownMenu } from './SaveDropdownMenu';
+export { default as OptionItem } from './OptionItem';