88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
import { Pressable, StyleSheet, Text, View } from 'react-native'
|
|
import React, { useEffect } from 'react'
|
|
import { GenericStyles } from '@rn-ui-lib/styles';
|
|
import TextInput from '@rn-ui-lib/components/TextInput';
|
|
import { COLORS } from '@rn-ui-lib/colors';
|
|
import SendIcon from '@assets/icons/SendIcon';
|
|
import Toast from 'react-native-toast-message';
|
|
import { useAppSelector } from '@hooks';
|
|
import FullScreenLoaderWrapper from '@common/FullScreenLoaderWrapper';
|
|
|
|
interface ITextFieldWithInput {
|
|
onPressSend: (comment: string) => void;
|
|
|
|
setComment: React.Dispatch<React.SetStateAction<string>>;
|
|
comment: string;
|
|
}
|
|
|
|
const TextFieldWithInput: React.FC<ITextFieldWithInput> = (props) => {
|
|
const { onPressSend, comment, setComment } = props;
|
|
const addingComment = useAppSelector(state => state.cosmosSupport.isSubmittingComment);
|
|
|
|
useEffect(() => {
|
|
if(!addingComment){
|
|
setComment('');
|
|
}
|
|
}, [addingComment])
|
|
|
|
const onPress = () => {
|
|
if (!comment) {
|
|
Toast.show({
|
|
type: 'error',
|
|
text1: 'Comment is required',
|
|
})
|
|
return;
|
|
};
|
|
onPressSend(comment);
|
|
}
|
|
|
|
|
|
return (
|
|
<View style={[
|
|
GenericStyles.mt16,
|
|
GenericStyles.relative
|
|
]}>
|
|
<TextInput
|
|
numberOfLines={5}
|
|
style={styles.textInput}
|
|
multiline={true}
|
|
placeholder='Leave a comment...'
|
|
onChangeText={setComment}
|
|
value={comment}
|
|
maxLength={30}
|
|
/>
|
|
<Pressable
|
|
disabled={addingComment}
|
|
style={styles.buttonStyle}
|
|
onPress={onPress}
|
|
>
|
|
<SendIcon />
|
|
</Pressable>
|
|
<FullScreenLoaderWrapper
|
|
loading={addingComment}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
textInput: {
|
|
textAlignVertical: 'top',
|
|
maxHeight: 100,
|
|
},
|
|
buttonStyle: {
|
|
position: 'absolute',
|
|
bottom: 5,
|
|
right: 5,
|
|
height: 30,
|
|
width: 30,
|
|
backgroundColor: COLORS.BASE.BLUE,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: "center",
|
|
borderRadius: 4,
|
|
}
|
|
});
|
|
|
|
export default TextFieldWithInput; |