mirror of
https://github.com/urosran/cally.git
synced 2025-07-10 15:17:17 +00:00
162 lines
4.2 KiB
TypeScript
162 lines
4.2 KiB
TypeScript
import {
|
|
Button,
|
|
Dialog,
|
|
TextField,
|
|
TextFieldRef,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native-ui-lib";
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
|
|
import { Dimensions, Platform, StyleSheet } from "react-native";
|
|
|
|
import DropModalIcon from "@/assets/svgs/DropModalIcon";
|
|
import KeyboardManager from "react-native-keyboard-manager";
|
|
import { useFeedbackContext } from "@/contexts/FeedbackContext";
|
|
|
|
interface IAddFeedbackProps {
|
|
isVisible: boolean;
|
|
setIsVisible: (value: boolean) => void;
|
|
}
|
|
|
|
const AddFeedback = ({
|
|
addFeedbackProps,
|
|
}: {
|
|
addFeedbackProps: IAddFeedbackProps;
|
|
}) => {
|
|
const { addFeedback } = useFeedbackContext();
|
|
const [feedback, setFeedback] = useState<string>("");
|
|
const [feedbackTitle, setFeedbackTitle] = useState<string>("");
|
|
const { width } = Dimensions.get("screen");
|
|
|
|
const descriptionRef = useRef<TextFieldRef>(null);
|
|
const titleRef = useRef<TextFieldRef>(null);
|
|
|
|
const isTitleValid = feedbackTitle.trim().length >= 3;
|
|
|
|
useEffect(() => {
|
|
setFeedback("");
|
|
setFeedbackTitle("");
|
|
}, [addFeedbackProps.isVisible]);
|
|
|
|
useEffect(() => {
|
|
if (addFeedbackProps.isVisible) {
|
|
setTimeout(() => {
|
|
titleRef?.current?.focus();
|
|
}, 500);
|
|
}
|
|
}, [addFeedbackProps.isVisible]);
|
|
|
|
useEffect(() => {
|
|
if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(false);
|
|
setFeedbackTitle('');
|
|
setFeedback('');
|
|
}, []);
|
|
|
|
return (
|
|
<Dialog
|
|
bottom={true}
|
|
height={"90%"}
|
|
width={width}
|
|
panDirection={PanningDirectionsEnum.DOWN}
|
|
onDismiss={() => addFeedbackProps.setIsVisible(false)}
|
|
containerStyle={styles.dialogContainer}
|
|
visible={addFeedbackProps.isVisible}
|
|
>
|
|
<View row spread style={styles.topBtns} marginB-20>
|
|
<Button
|
|
color="#05a8b6"
|
|
label="Cancel"
|
|
style={styles.topBtn}
|
|
onPress={() => {
|
|
addFeedbackProps.setIsVisible(false);
|
|
}}
|
|
/>
|
|
<TouchableOpacity onPress={() => addFeedbackProps.setIsVisible(false)}>
|
|
<DropModalIcon style={{ marginTop: 15 }} />
|
|
</TouchableOpacity>
|
|
<Button
|
|
color="#05a8b6"
|
|
label="Save"
|
|
style={[styles.topBtn, !isTitleValid && styles.disabledBtn]}
|
|
disabled={!isTitleValid}
|
|
onPress={() => {
|
|
if (isTitleValid) {
|
|
addFeedback({
|
|
id: 99,
|
|
title: feedbackTitle.trim(),
|
|
text: feedback.trim(),
|
|
});
|
|
addFeedbackProps.setIsVisible(false);
|
|
}
|
|
}}
|
|
/>
|
|
</View>
|
|
<View marginH-20>
|
|
<TextField
|
|
value={feedbackTitle}
|
|
ref={titleRef}
|
|
placeholder="Set Title"
|
|
text60R
|
|
onChangeText={(text) => {
|
|
setFeedbackTitle(text);
|
|
}}
|
|
onSubmitEditing={() => {
|
|
descriptionRef.current?.focus();
|
|
}}
|
|
style={styles.title}
|
|
blurOnSubmit={false}
|
|
returnKeyType="next"
|
|
/>
|
|
<View height={2} backgroundColor="#b3b3b3" width={"100%"} marginB-20 />
|
|
<TextField
|
|
ref={descriptionRef}
|
|
value={feedback}
|
|
placeholder="Write Description"
|
|
text70
|
|
onChangeText={(text) => {
|
|
setFeedback(text);
|
|
}}
|
|
style={styles.description}
|
|
multiline
|
|
numberOfLines={4}
|
|
maxLength={255}
|
|
onEndEditing={() => {
|
|
descriptionRef.current?.blur();
|
|
}}
|
|
returnKeyType="done"
|
|
/>
|
|
</View>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
dialogContainer: {
|
|
borderTopRightRadius: 15,
|
|
borderTopLeftRadius: 15,
|
|
backgroundColor: "white",
|
|
padding: 0,
|
|
paddingTop: 3,
|
|
margin: 0,
|
|
},
|
|
topBtns: {},
|
|
topBtn: {
|
|
backgroundColor: "white",
|
|
color: "#05a8b6",
|
|
},
|
|
disabledBtn: {
|
|
opacity: 0.2,
|
|
},
|
|
title: {
|
|
fontSize: 22,
|
|
fontFamily: "Manrope_500Medium",
|
|
},
|
|
description: {
|
|
fontFamily: "Manrope_400Regular",
|
|
fontSize: 14,
|
|
textAlignVertical: "top",
|
|
},
|
|
});
|
|
|
|
export default AddFeedback; |