Files
cally/components/pages/feedback/EditFeedback.tsx
2024-11-22 03:25:16 +01:00

194 lines
4.7 KiB
TypeScript

import React, { useEffect, useRef, useState } from "react";
import {
Button,
Dialog,
View,
Text,
TextField,
TouchableOpacity,
TextFieldRef,
} from "react-native-ui-lib";
import { Dimensions, StyleSheet } from "react-native";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import PenIcon from "@/assets/svgs/PenIcon";
import BinIcon from "@/assets/svgs/BinIcon";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import CloseXIcon from "@/assets/svgs/CloseXIcon";
import MenuIcon from "@/assets/svgs/MenuIcon";
import { IFeedback, useFeedbackContext } from "@/contexts/FeedbackContext";
import FeedbackDialog from "./FeedbackDialog";
const EditFeedback = (props: {
item: IFeedback;
isVisible: boolean;
setIsVisible: (value: boolean) => void;
}) => {
const { updateFeedback, deleteFeedback } = useFeedbackContext();
const [text, setText] = useState<string>(props.item.text);
const [modalVisible, setModalVisible] = useState<boolean>(false);
const textRef = useRef<TextFieldRef>(null);
const { width } = Dimensions.get("screen");
useEffect(() => {
setText(props.item.text);
}, []);
useEffect(() => {
if (props.isVisible) {
setTimeout(() => {
textRef?.current?.focus();
}, 500);
}
}, [props.isVisible]);
const showConfirmationDialog = () => {
setModalVisible(true);
};
const handleDeleteNote = () => {
deleteFeedback(props.item.id);
};
const hideConfirmationDialog = () => {
setModalVisible(false);
};
return (
<Dialog
bottom={true}
height={"90%"}
width={width}
panDirection={PanningDirectionsEnum.DOWN}
onDismiss={() => props.setIsVisible(false)}
containerStyle={{
borderRadius: 15,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
backgroundColor: "white",
width: "100%",
alignSelf: "stretch",
padding: 10,
paddingTop: 3,
margin: 0,
}}
visible={props.isVisible}
>
<View center paddingT-8>
<TouchableOpacity onPress={() => props.setIsVisible(false)}>
<DropModalIcon />
</TouchableOpacity>
</View>
<View row spread paddingH-10 paddingB-15>
<Button
color="#05a8b6"
style={styles.topBtn}
iconSource={() => <CloseXIcon />}
onPress={() => {
props.setIsVisible(false);
}}
/>
<View row>
<Button
style={styles.topBtn}
marginR-10
iconSource={() => <PenIcon />}
onPress={() => {
console.log("selview");
updateFeedback(props.item.id, { text: text });
props.setIsVisible(false);
}}
/>
<Button
style={styles.topBtn}
marginL-5
iconSource={() => <BinIcon />}
onPress={() => {
showConfirmationDialog();
}}
/>
</View>
</View>
<View centerH>
<Text style={styles.title}>{props.item.title} </Text>
</View>
<View style={styles.divider} />
<View row gap-5 paddingR-20>
<View paddingT-8 marginR-5>
<MenuIcon width={20} height={12} />
</View>
<TextField
textAlignVertical="top"
multiline
style={styles.description}
placeholder="Add description"
numberOfLines={3}
value={text}
onChangeText={(value) => {
setText(value);
}}
ref={textRef}
returnKeyType="done"
/>
</View>
<View style={styles.divider} />
<FeedbackDialog
visible={modalVisible}
title={props.item.title}
onDismiss={hideConfirmationDialog}
onConfirm={handleDeleteNote}
/>
</Dialog>
);
};
const styles = StyleSheet.create({
divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
gradient: {
height: "25%",
position: "absolute",
bottom: 0,
width: "100%",
},
buttonContainer: {
position: "absolute",
bottom: 25,
width: "100%",
},
button: {
backgroundColor: "rgb(253, 23, 117)",
paddingVertical: 20,
},
topBtn: {
backgroundColor: "white",
color: "#05a8b6",
marginTop: -3,
},
rotateSwitch: {
marginLeft: 35,
marginBottom: 10,
marginTop: 25,
},
optionsReg: {
fontSize: 16,
fontFamily: "PlusJakartaSans_400Regular",
},
optionsBold: {
fontSize: 16,
fontFamily: "PlusJakartaSans_600SemiBold",
},
optionsIcon: {
marginRight: 10,
},
title: {
fontSize: 22,
fontFamily: "Manrope_500Medium",
},
description: {
fontFamily: "Manrope_400Regular",
fontSize: 14,
},
});
export default EditFeedback;