sfm-uikit-react-native/src/view/AnswerDialog.js

It is a react native component for SmartFloMeet users.

import React from 'react';
import {
  Modal,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  Switch
} from 'react-native';
import { styles } from "../style/AnswerDialogStyle.js";

class AnswerDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      answer: '',
      isPrivate: false,
    };
  }

  handleAnswerChange = (text) => {
    this.setState({ answer: text });
  };

  handleCheckboxChange = (value) => {
    this.setState({ isPrivate: value });
  };

  handleSubmit = () => {
    const { answer, isPrivate } = this.state;
    this.props.onSubmit(answer, isPrivate);
    this.props.onClose();
  };

  render() {
    const { visible, onClose } = this.props;
    const { answer, isPrivate } = this.state;

    return (
      <Modal
        transparent={true}
        visible={visible}
        animationType="slide"
        onRequestClose={onClose}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.dialogContainer}>
            <TextInput
              style={styles.textInput}
              placeholder="Type answer here ....."
              multiline={true}
              value={answer}
              onChangeText={this.handleAnswerChange}
            />
            <View style={styles.checkboxContainer}>
              <Switch
                value={isPrivate}
                onValueChange={this.handleCheckboxChange}
              />
              <Text style={styles.checkboxLabel}>Send Privately</Text>
            </View>
            <View style={styles.buttonContainer}>
              <TouchableOpacity style={styles.cancelButton} onPress={onClose}>
                <Text style={styles.cancelButtonText}>Cancel</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.sendButton} onPress={this.handleSubmit}>
                <Text style={styles.sendButtonText}>Send</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>
    );
  }
}



export default AnswerDialog;