mirror of
https://github.com/urosran/cally.git
synced 2025-07-10 15:17:17 +00:00
194 lines
4.7 KiB
TypeScript
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;
|