Merge pull request #938 from akvo/feature/937-color-for-options

[#937] Color for option and multiple option
akvo · Jan 15, 2024 · 3e2d0b5 · 3e2d0b5
2 parents f50f5ae + 203dbbf
commit 3e2d0b5
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 0 deletions.
diff --git a/app/src/form/fields/TypeMultipleOption.js b/app/src/form/fields/TypeMultipleOption.js
@@ -4,6 +4,8 @@ import { FieldLabel } from '../support';
 import { styles } from '../styles';
 import { MultiSelect } from 'react-native-element-dropdown';
 import { FormState } from '../../store';
+import { Text } from 'react-native';
+import { Icon } from '@rneui/themed';
 import { i18n } from '../../lib';
 
 const TypeMultipleOption = ({
@@ -43,7 +45,53 @@ const TypeMultipleOption = ({
             onChange(id, value);
           }
         }}
+        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>
+          );
+        }}
+        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}
       />
     </View>
   );

diff --git a/app/src/form/fields/TypeOption.js b/app/src/form/fields/TypeOption.js
@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { FieldLabel } from '../support';
 import { styles } from '../styles';
 import { Dropdown } from 'react-native-element-dropdown';
+import { Text } from 'react-native';
 import { FormState } from '../../store';
 import { i18n } from '../../lib';
 
@@ -23,13 +24,34 @@ const TypeOption = ({
   const activeLang = FormState.useState((s) => s.lang);
   const trans = i18n.text(activeLang);
   const requiredValue = required ? requiredSign : null;
+  const selectedStyle = React.useMemo(() => {
+    const currentValue = values?.[id]?.[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 {};
+  }, [values, id, option]);
 
   return (
     <View style={styles.optionContainer}>
       <FieldLabel keyform={keyform} name={name} tooltip={tooltip} requiredSign={requiredValue} />
       <Dropdown
         style={[styles.dropdownField]}
         data={option}
+        selectedTextStyle={selectedStyle}
         search={showSearch}
         maxHeight={300}
         labelField="label"
@@ -41,6 +63,22 @@ const TypeOption = ({
             onChange(id, [value]);
           }
         }}
+        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>
+          );
+        }}
         testID="type-option-dropdown"
         placeholder={trans.selectItem}
       />