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

React components to create chat conversations or livestream style chat

import React, { useState } from 'react';
import { Avatar } from '../Avatar';
import { PopperTooltip } from '../Tooltip';
import { useEnterLeaveHandlers } from '../Tooltip/hooks';
import { useChatContext, useTranslationContext } from '../../context';
const PollVoteTimestamp = ({ timestamp }) => {
    const { t } = useTranslationContext();
    const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
    const [referenceElement, setReferenceElement] = useState(null);
    const timestampDate = new Date(timestamp);
    return (React.createElement("div", { className: 'str-chat__poll-vote__timestamp', onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement },
        t('timestamp/PollVote', { timestamp: timestampDate }),
        React.createElement(PopperTooltip, { offset: [0, 5], placement: 'bottom', referenceElement: referenceElement, visible: tooltipVisible }, t('timestamp/PollVoteTooltip', { timestamp: timestampDate }))));
};
const PollVoteAuthor = ({ vote }) => {
    const { t } = useTranslationContext();
    const { client } = useChatContext();
    const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
    const [referenceElement, setReferenceElement] = useState(null);
    const displayName = client.user?.id && client.user.id === vote.user?.id
        ? t('You')
        : vote.user?.name || t('Anonymous');
    return (React.createElement("div", { className: 'str-chat__poll-vote__author', onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement },
        vote.user && (React.createElement(Avatar, { className: 'str-chat__avatar--poll-vote-author', image: vote.user.image, key: `poll-vote-${vote.id}-avatar-${vote.user.id}`, name: vote.user.name })),
        React.createElement("div", { className: 'str-chat__poll-vote__author__name' }, displayName),
        React.createElement(PopperTooltip, { offset: [0, 5], placement: 'bottom', referenceElement: referenceElement, visible: tooltipVisible }, displayName)));
};
export const PollVote = ({ vote }) => (React.createElement("div", { className: 'str-chat__poll-vote' },
    React.createElement(PollVoteAuthor, { vote: vote }),
    React.createElement(PollVoteTimestamp, { timestamp: vote.created_at })));
export const PollVoteListing = ({ votes }) => (React.createElement("div", { className: 'str-chat__poll-vote-listing' }, votes.map((vote) => (React.createElement(PollVote, { key: `poll-vote-${vote.id}`, vote: vote })))));