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

It is a react native component for SmartFloMeet users.

import React, { Component } from 'react';
import { Modal,Image, View,ScrollView, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
import RadioButton from '../commonClass/RadioButton'; // Import the RadioButton component
import { styles } from "../style/EnxPollDialogStyle";

export default class PollAnswerDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      optionSelected: null, 
      optionSelectedValue:null, // Stores the selected answer
      isModalVisible: false, // Controls modal visibility
      countdown: this.props.countdownDuration, // Countdown duration
    };
    this.timer = null; // To store the countdown timer reference
  }
  componentDidMount() {
    this.setState({ isModalVisible: true });

    // Start the countdown timer
    this.timer = setInterval(() => {
      this.setState((prevState) => {
        if (prevState.countdown <= 1) {
          clearInterval(this.timer);
          this.props.onCancel(); // Auto-cancel when timer 
          this.hideModal();
          return { countdown: 0 };
        }
        return { countdown: prevState.countdown - 1 };
      });
    }, 1000);
  }

  componentWillUnmount() {
    // Clear the timer when component unmounts
    if (this.timer) clearInterval(this.timer);
  }
  increaseTime = (seconds) => {
    // Increase time dynamically
    this.setState((prevState) => ({
      countdown: prevState.countdown + seconds,
    }));
  };
  // Handle radio button selection
  handleAnswerSelect = (id,option) => {
    this.setState({ 
      optionSelected: id ,
      optionSelectedValue:option
    });
  };

  // Show the modal
  showModal = () => {
    this.setState({ isModalVisible: true });
  };

  // Hide the modal
  hideModal = () => {
    this.setState({ isModalVisible: false });
  };

  renderAnswerItem = ({ item }) => (
    <TouchableOpacity
      style={styles.answerContainer}
      onPress={() => this.handleAnswerSelect(item.id,item.option)}
    >
      <RadioButton
        isChecked={this.state.optionSelected === item.id}
        text={item.option}
        onRadioButtonPress={() => this.handleAnswerSelect(item.id,item.option)}
      />
    </TouchableOpacity>
  );

  render() {
    const { question,answers, onCancel, onSubmit } = this.props;
    const {optionSelected,optionSelectedValue,countdown,option, isModalVisible } = this.state;

    return (
      <View style={styles.container}>

        {/* Poll Modal Dialog */}
        <Modal
          visible={isModalVisible}
          animationType="slide"
          transparent={true}
          onRequestClose={this.hideModal}
        >
          <View style={styles.modalBackground}>
            <View style={styles.dialogContainer}>
              {/* Header: Question and Cancel Button */}
              <View style={styles.headerContainer}>
              <Text style={styles.titleText}>⏳ {countdown}s</Text>

                <TouchableOpacity onPress={() => { this.hideModal(); onCancel(); }}>
                <Image source={require("../image_asset/close.png")} style={{width: 27,height: 27,alignSelf: 'center'}} />
                </TouchableOpacity>
              </View>

              <Text style={styles.titleText}>{"Participant in Poll!"}</Text>

              {/* Question */}
              <Text style={styles.questionText}>{question}</Text>

              {/* List of Answers */}
              <ScrollView style={styles.answersContainer}>
              <FlatList
                data={answers}
                keyExtractor={(item) => item.id.toString()}
                renderItem={this.renderAnswerItem}
              />
              </ScrollView>

              {/* Submit Button */}
              <TouchableOpacity
                style={styles.submitButton}
                onPress={() => {
                  onSubmit(optionSelected,optionSelectedValue); // Callback for submitting the selected answer
                  this.hideModal(); // Close the modal
                }}
              >
                <Text style={styles.submitText}>Submit</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}