diff --git a/app/src/form/fields/TypeMultipleOption.js b/app/src/form/fields/TypeMultipleOption.js index b36fc99ed..0f89e2ec7 100644 --- 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 ( + + + {item?.label || item?.name} + + + ); + }} + renderSelectedItem={(item) => { + return ( + + + {item?.label || item?.name} + {' '} ✖ + + + ); + }} testID="type-multiple-option-dropdown" + confirmUnSelectItem={true} /> ); diff --git a/app/src/form/fields/TypeOption.js b/app/src/form/fields/TypeOption.js index 4e13e084f..9e7758358 100644 --- 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,6 +24,26 @@ 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 ( @@ -30,6 +51,7 @@ const TypeOption = ({ { + return ( + + + {item?.label || item?.name} + + + ); + }} testID="type-option-dropdown" placeholder={trans.selectItem} />