stream-chat-react/dist/components/Poll/PollActions/PollActions.js

React components to create chat conversations or livestream style chat

import React, { useCallback, useState } from 'react';
import { PollAction } from './PollAction';
import { AddCommentForm as DefaultAddCommentForm } from './AddCommentForm';
import { SuggestPollOptionForm as DefaultSuggestPollOptionForm } from './SuggestPollOptionForm';
import { EndPollDialog as DefaultEndPollDialog } from './EndPollDialog';
import { PollAnswerList as DefaultPollAnswerList } from './PollAnswerList';
import { PollOptionsFullList as DefaultPollOptionsFullList } from './PollOptionsFullList';
import { PollResults as DefaultPollResults } from './PollResults';
import { MAX_OPTIONS_DISPLAYED, MAX_POLL_OPTIONS } from '../constants';
import { useChannelStateContext, useChatContext, useMessageContext, usePollContext, useTranslationContext, } from '../../../context';
import { useStateStore } from '../../../store';
const pollStateSelector = (nextValue) => ({
    allow_answers: nextValue.allow_answers,
    allow_user_suggested_options: nextValue.allow_user_suggested_options,
    answers_count: nextValue.answers_count,
    created_by_id: nextValue.created_by_id,
    is_closed: nextValue.is_closed,
    options: nextValue.options,
    ownAnswer: nextValue.ownAnswer,
});
export const PollActions = ({ AddCommentForm = DefaultAddCommentForm, EndPollDialog = DefaultEndPollDialog, PollAnswerList = DefaultPollAnswerList, PollOptionsFullList = DefaultPollOptionsFullList, PollResults = DefaultPollResults, SuggestPollOptionForm = DefaultSuggestPollOptionForm, }) => {
    const { client } = useChatContext();
    const { t } = useTranslationContext('PollActions');
    const { channelCapabilities = {} } = useChannelStateContext('PollActions');
    const { message } = useMessageContext('PollActions');
    const { poll } = usePollContext();
    const { allow_answers, allow_user_suggested_options, answers_count, created_by_id, is_closed, options, ownAnswer, } = useStateStore(poll.state, pollStateSelector);
    const [modalOpen, setModalOpen] = useState();
    const closeModal = useCallback(() => setModalOpen(undefined), []);
    const onUpdateAnswerClick = useCallback(() => setModalOpen('add-comment'), []);
    return (React.createElement("div", { className: 'str-chat__poll-actions' },
        options.length > MAX_OPTIONS_DISPLAYED && (React.createElement(PollAction, { buttonText: t('See all options ({{count}})', {
                count: options.length,
            }), closeModal: closeModal, modalIsOpen: modalOpen === 'view-all-options', openModal: () => setModalOpen('view-all-options') },
            React.createElement(PollOptionsFullList, { close: closeModal }))),
        !is_closed &&
            allow_user_suggested_options &&
            options.length < MAX_POLL_OPTIONS && (React.createElement(PollAction, { buttonText: t('Suggest an option'), closeModal: closeModal, modalClassName: 'str-chat__suggest-poll-option-modal', modalIsOpen: modalOpen === 'suggest-option', openModal: () => setModalOpen('suggest-option') },
            React.createElement(SuggestPollOptionForm, { close: closeModal, messageId: message.id }))),
        !is_closed && allow_answers && (React.createElement(PollAction, { buttonText: ownAnswer ? t('Update your comment') : t('Add a comment'), closeModal: closeModal, modalClassName: 'str-chat__add-poll-answer-modal', modalIsOpen: modalOpen === 'add-comment', openModal: () => setModalOpen('add-comment') },
            React.createElement(AddCommentForm, { close: closeModal, messageId: message.id }))),
        answers_count > 0 && channelCapabilities['query-poll-votes'] && (React.createElement(PollAction, { buttonText: t('View {{count}} comments', { count: answers_count }), closeModal: closeModal, modalClassName: 'str-chat__poll-answer-list-modal', modalIsOpen: modalOpen === 'view-comments', openModal: () => setModalOpen('view-comments') },
            React.createElement(PollAnswerList, { close: closeModal, onUpdateOwnAnswerClick: onUpdateAnswerClick }))),
        React.createElement(PollAction, { buttonText: t('View results'), closeModal: closeModal, modalClassName: 'str-chat__poll-results-modal', modalIsOpen: modalOpen === 'view-results', openModal: () => setModalOpen('view-results') },
            React.createElement(PollResults, { close: closeModal })),
        !is_closed && created_by_id === client.user?.id && (React.createElement(PollAction, { buttonText: t('End vote'), closeModal: closeModal, modalClassName: 'str-chat__end-poll-modal', modalIsOpen: modalOpen === 'end-vote', openModal: () => setModalOpen('end-vote') },
            React.createElement(EndPollDialog, { close: closeModal })))));
};