diff --git a/app/src/scenes/goals/survey/GoalCheckboxItem.js b/app/src/scenes/goals/survey/GoalCheckboxItem.js index e8f21f35..c44b5802 100644 --- 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', }, - ]} - > + ]}> { 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}}> - - {_checked && ( - - )} - + { + _setChecked(checked); + onCheckedChanged?.({checked, goal}); + }} + /> {goal.label} { + 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: {