react-native-chating-ui-kit
Version:
CometChat React Native UI Kit is a collection of custom UI Components designed to build text , chat and calling features in your application. The UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly
218 lines • 8.52 kB
JavaScript
import { View, Text, TouchableOpacity, TextInput, Image, FlatList, } from 'react-native';
import React, { useContext, useLayoutEffect, useRef, useState, } from 'react';
import Header from './Header';
import { styles } from './style';
//@ts-ignore
import { CometChat } from '@cometchat-pro/react-native-chat';
import { CometChatContext } from "../../shared/CometChatContext";
import { localize } from "../../shared/resources/CometChatLocalize";
import { ICONS } from './resources';
import { CometChatSwipeRow } from '../../shared/views/SwipeRow';
export const CometChatCreatePoll = (props) => {
const { theme } = useContext(CometChatContext);
const { title, closeIcon, createIcon, questionPlaceholderText, onError, createPollsStyle, user, group, onClose, answerPlaceholderText, answerHelpText, addAnswerText, deleteIcon, createPollIcon, defaultAnswers, } = props;
const [question, setQuestion] = React.useState('');
const [error, setError] = React.useState('');
const [answersList, setAnswersList] = useState([]);
const [answers, setAnswers] = useState({});
const loggedInUser = useRef(null);
const answersFinalValues = useRef([]);
const validate = () => {
let answersValues = [];
if (!question) {
setError(localize('INVALID_POLL_QUESTION'));
return false;
}
if (answersList.length === 0) {
setError(localize('INVALID_POLL_OPTION'));
return false;
}
for (const value of Object.values(answers)) {
if (value)
answersValues.push(value);
}
if (answersValues.length === 0) {
setError(answerHelpText ?? localize('INVALID_POLL_OPTION'));
return false;
}
answersFinalValues.current = answersValues;
setError('');
return true;
};
const polls = () => {
if (!validate())
return;
CometChat.callExtension('polls', 'POST', 'v2/create', {
question: question,
options: answersFinalValues.current,
receiver: user ? user['uid'] : group ? group['guid'] : '',
receiverType: user ? 'user' : group ? 'group' : '',
})
.then((response) => {
console.log('poll created', response);
onClose && onClose();
// Details about the created poll
})
.catch((error) => {
console.log('poll error', error);
onError && onError(error);
// Error occured
});
};
const ErrorView = () => {
if (!error && error === '')
return null;
return (<View style={[
styles.errorContainer,
{
backgroundColor: 'rgba(255, 59, 48, 0.1)', //Note add this color to palette
},
]}>
<View style={[
styles.errorImageContainer,
{
backgroundColor: theme.palette.getError(),
},
]}>
<Image source={ICONS.WARNING} style={[
styles.errorImage,
{ tintColor: theme.palette.getBackgroundColor() },
]}/>
</View>
<View style={styles.errorTextContainer}>
<Text style={[
styles.errorTextTitle,
theme.typography.body,
{ color: theme.palette.getError() },
]}>
{error?.length > 0 ? error : ''}
</Text>
<Text style={[
styles.errorText,
theme.typography.body,
{ color: theme.palette.getError() },
]}>
{localize('TRY_AGAIN_LATER')}
</Text>
</View>
</View>);
};
const handleAnswerTextChange = (text, index) => {
setAnswers((prev) => {
return { ...prev, [index]: text };
});
};
const handleAddAnswerRow = () => {
setAnswersList((prev) => [
...prev,
{ id: prev[prev.length - 1]['id'] + 1 },
]);
};
const removeRow = (id) => {
setAnswersList((prev) => prev.filter((_) => _.id !== id));
};
const AnswersListItem = ({ item, index }) => {
return (<>
<CometChatSwipeRow id={item.id} options={defaultAnswers <= item.id
? () => [
{
id: item.id,
icon: deleteIcon ?? ICONS.KICK,
onPress: removeRow,
},
]
: () => []}>
<View style={{
backgroundColor: createPollsStyle?.backgroundColor ??
theme.palette.getBackgroundColor(),
}}>
<TextInput value={answers[item.id]} onChangeText={(text) => handleAnswerTextChange(text, item.id)} placeholder={`${answerPlaceholderText} ${index + 1}`} placeholderTextColor={theme.palette.getAccent600()} style={[
styles.textInputAnswers,
{
borderBottomColor: theme.palette.getAccent200(),
color: theme.palette.getAccent(),
},
theme.typography.body,
answers[item.id]?.length > 0
? createPollsStyle.answersPlaceholderTextStyle
: createPollsStyle.answersInputTextStyle,
]}/>
</View>
</CometChatSwipeRow>
</>);
};
const AddAnswer = () => {
return (<>
<TouchableOpacity onPress={handleAddAnswerRow} style={{
height: 56,
width: '100%',
justifyContent: 'center',
paddingHorizontal: 5,
}}>
<Text style={[
theme.typography.name,
{
color: theme.palette.getPrimary(),
},
]}>
{addAnswerText ?? localize('ADD_ANOTHER_ANSWER')}
</Text>
</TouchableOpacity>
<ErrorView />
</>);
};
useLayoutEffect(() => {
let answerslist = [];
for (let index = 0; index < defaultAnswers; index++) {
answerslist.push({ id: index });
}
setAnswersList(answerslist);
CometChat.getLoggedinUser()
.then((u) => (loggedInUser.current = u))
.catch((e) => { });
}, []);
return (<View style={[
styles.container,
{
width: createPollsStyle.width ?? 'auto',
height: createPollsStyle.height ?? 'auto',
backgroundColor: createPollsStyle.backgroundColor ??
theme.palette.getBackgroundColor(),
borderRadius: createPollsStyle.borderRadius ?? 0,
},
createPollsStyle.border ?? {},
]}>
<Header title={title} joinIcon={createPollIcon ?? createIcon} closeIcon={closeIcon} titleStyle={[
createPollsStyle.titleTextStyle ?? theme.typography.heading,
{ color: theme.palette.getAccent() },
]} closeIconTint={createPollsStyle.closeIconTint ?? theme.palette.getPrimary()} createIconTint={createPollsStyle.createIconTint ?? theme.palette.getPrimary()} onSubmit={polls} onCancel={onClose ? onClose : () => { }}/>
<TextInput value={question} onChangeText={setQuestion} placeholder={questionPlaceholderText} placeholderTextColor={theme.palette.getAccent600()} style={[
styles.textInput,
{
borderBottomColor: theme.palette.getAccent200(),
color: theme.palette.getAccent(),
},
theme.typography.body,
question?.length > 0
? createPollsStyle.questionPlaceholderTextStyle
: createPollsStyle.questionInputTextStyle,
]}/>
<View style={styles.addAnswerButtonContainer}>
<Text style={(theme.typography.text2,
{
color: theme.palette.getAccent500(),
})}>
{localize('SET_THE_ANSWERS')}
</Text>
</View>
<FlatList keyExtractor={(_, i) => `${i}`} data={answersList} renderItem={AnswersListItem} ListFooterComponent={AddAnswer}/>
</View>);
};
CometChatCreatePoll.defaultProps = {
title: 'Create Polls',
questionPlaceholderText: localize('NAME'),
answerPlaceholderText: localize('ANSWER'),
createPollsStyle: {},
defaultAnswers: 2,
};
//# sourceMappingURL=Polls.js.map