Update GoalCheckboxItem.js

SocialGouv · Dec 23, 2024 · 74d909d · 74d909d
1 parent 233e54f
commit 74d909d
Showing 1 changed file with 30 additions and 51 deletions.
diff --git a/app/src/scenes/goals/survey/GoalCheckboxItem.js b/app/src/scenes/goals/survey/GoalCheckboxItem.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
-import { Pressable, StyleSheet, Text, View, LayoutAnimation } from "react-native";
-import Lottie from "lottie-react-native";
-import { InputText } from "../../../components/InputText";
+import React, {useEffect, useState} from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import {InputText} from '../../../components/InputText';
+import {InputCheckbox} from '../../../components/InputCheckbox';
 
-export const GoalCheckboxItem = ({ goal, index, checked, comment, onCheckedChanged, onCommentChanged }) => {
+export const GoalCheckboxItem = ({goal, index, checked, comment, onCheckedChanged, onCommentChanged}) => {
   const [_checked, _setChecked] = useState(checked);
   useEffect(() => {
     _setChecked(checked);
@@ -18,60 +18,39 @@ export const GoalCheckboxItem = ({ goal, index, checked, comment, onCheckedChang
       style={[
         styles.container,
         {
-          backgroundColor: _checked ? "#F0FFF0" : "#F8F9FB",
-          borderColor: _checked ? "#D0E8D0" : "#E7EAF1",
+          backgroundColor: _checked ? '#F0FFF0' : '#F8F9FB',
+          borderColor: _checked ? '#D0E8D0' : '#E7EAF1',
         },
-      ]}
-    >
+      ]}>
       <Pressable
         onPress={() => {
           const nextChecked = !_checked;
           _setChecked(nextChecked);
-          onCheckedChanged?.({ checked: nextChecked, goal });
+          onCheckedChanged?.({checked: nextChecked, goal});
         }}
-        hitSlop={{ bottom: 8, left: 8, right: 8, top: 8 }}
-      >
+        hitSlop={{bottom: 8, left: 8, right: 8, top: 8}}>
         <View style={[styles.contentContainer]}>
           <View style={[styles.topContainer]}>
-            <View
-              style={[
-                styles.checkboxContainer,
-                !_checked
-                  ? {
-                      borderColor: "#26387C",
-                    }
-                  : {
-                      borderColor: "#1FC6D5",
-                      backgroundColor: "#1FC6D5",
-                    },
-              ]}
-            >
-              {_checked && (
-                <Lottie
-                  source={require("../../../../assets/lottiefiles/checkmark.json")}
-                  style={styles.lottieAnim}
-                  loop={false}
-                  autoPlay
-                  colorFilters={[
-                    {
-                      keypath: "Shape Layer 1",
-                      color: "white",
-                    },
-                  ]}
-                />
-              )}
-            </View>
+            <InputCheckbox
+              containerStyle={{marginVertical: 0, marginRight: 0}}
+              contentContainerStyle={{paddingRight: 0}}
+              checked={_checked}
+              onCheckedChanged={({checked}) => {
+                _setChecked(checked);
+                onCheckedChanged?.({checked, goal});
+              }}
+            />
             <Text style={[styles.label]}>{goal.label}</Text>
           </View>
           <InputText
             fill
             preset="lighten"
             placeholder="Ajoutez une note sur cet objectif"
-            containerStyle={{ marginTop: 16 }}
+            containerStyle={{marginTop: 16}}
             value={_comment}
-            onChangeText={(nextComment) => {
+            onChangeText={nextComment => {
               _setComment(nextComment);
-              onCommentChanged?.({ comment: nextComment, goal });
+              onCommentChanged?.({comment: nextComment, goal});
             }}
             multiline={true}
             textAlignVertical="top"
@@ -85,7 +64,7 @@ export const GoalCheckboxItem = ({ goal, index, checked, comment, onCheckedChang
 
 const styles = StyleSheet.create({
   container: {
-    width: "100%",
+    width: '100%',
     borderWidth: 1,
     borderRadius: 16,
     marginVertical: 8,
@@ -94,17 +73,17 @@ const styles = StyleSheet.create({
     padding: 16,
   },
   topContainer: {
-    flexDirection: "row",
-    alignItems: "flex-start",
+    flexDirection: 'row',
+    alignItems: 'flex-start',
   },
   label: {
     fontSize: 16,
-    fontFamily: "Karla",
-    fontWeight: "400",
-    textAlign: "left",
-    color: "#26387C",
+    fontFamily: 'Karla',
+    fontWeight: '400',
+    textAlign: 'left',
+    color: '#26387C',
     flexShrink: 1,
-    marginLeft: 8,
+    marginLeft: 0,
     paddingTop: 3,
   },
   checkboxContainer: {