"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7555/react/features/polls/components/web/PollAnswer.tsx" (28 Sep 2023, 3806 Bytes) of package /linux/misc/jitsi-meet-7555.tar.gz:

    1 import React from 'react';
    2 import { makeStyles } from 'tss-react/mui';
    3 
    4 import { withPixelLineHeight } from '../../../base/styles/functions.web';
    5 import Button from '../../../base/ui/components/web/Button';
    6 import Checkbox from '../../../base/ui/components/web/Checkbox';
    7 import { BUTTON_TYPES } from '../../../base/ui/constants.web';
    8 import { isSubmitAnswerDisabled } from '../../functions';
    9 import AbstractPollAnswer, { AbstractProps } from '../AbstractPollAnswer';
   10 
   11 const useStyles = makeStyles()(theme => {
   12     return {
   13         container: {
   14             margin: '24px',
   15             padding: '16px',
   16             backgroundColor: theme.palette.ui02,
   17             borderRadius: '8px',
   18             wordBreak: 'break-word'
   19         },
   20         header: {
   21             marginBottom: '24px'
   22         },
   23         question: {
   24             ...withPixelLineHeight(theme.typography.heading6),
   25             color: theme.palette.text01,
   26             marginBottom: '8px'
   27         },
   28         creator: {
   29             ...withPixelLineHeight(theme.typography.bodyShortRegular),
   30             color: theme.palette.text02
   31         },
   32         answerList: {
   33             listStyleType: 'none',
   34             margin: 0,
   35             padding: 0,
   36             marginBottom: '24px'
   37         },
   38         answer: {
   39             display: 'flex',
   40             marginBottom: '16px'
   41         },
   42         footer: {
   43             display: 'flex',
   44             justifyContent: 'flex-end'
   45         },
   46         buttonMargin: {
   47             marginRight: theme.spacing(3)
   48         }
   49     };
   50 });
   51 
   52 const PollAnswer = ({
   53     creatorName,
   54     checkBoxStates,
   55     poll,
   56     setCheckbox,
   57     skipAnswer,
   58     skipChangeVote,
   59     submitAnswer,
   60     t
   61 }: AbstractProps) => {
   62     const { changingVote } = poll;
   63     const { classes } = useStyles();
   64 
   65     return (
   66         <div className = { classes.container }>
   67             <div className = { classes.header }>
   68                 <div className = { classes.question }>
   69                     { poll.question }
   70                 </div>
   71                 <div className = { classes.creator }>
   72                     { t('polls.by', { name: creatorName }) }
   73                 </div>
   74             </div>
   75             <ul className = { classes.answerList }>
   76                 {
   77                     poll.answers.map((answer: any, index: number) => (
   78                         <li
   79                             className = { classes.answer }
   80                             key = { index }>
   81                             <Checkbox
   82                                 checked = { checkBoxStates[index] }
   83                                 key = { index }
   84                                 label = { answer.name }
   85                                 // eslint-disable-next-line react/jsx-no-bind
   86                                 onChange = { ev => setCheckbox(index, ev.target.checked) } />
   87                         </li>
   88                     ))
   89                 }
   90             </ul>
   91             <div className = { classes.footer } >
   92                 <Button
   93                     accessibilityLabel = { t('polls.answer.skip') }
   94                     className = { classes.buttonMargin }
   95                     labelKey = { 'polls.answer.skip' }
   96                     onClick = { changingVote ? skipChangeVote : skipAnswer }
   97                     type = { BUTTON_TYPES.SECONDARY } />
   98                 <Button
   99                     accessibilityLabel = { t('polls.answer.submit') }
  100                     disabled = { isSubmitAnswerDisabled(checkBoxStates) }
  101                     labelKey = { 'polls.answer.submit' }
  102                     onClick = { submitAnswer } />
  103             </div>
  104         </div>
  105     );
  106 };
  107 
  108 /*
  109  * We apply AbstractPollAnswer to fill in the AbstractProps common
  110  * to both the web and native implementations.
  111  */
  112 // eslint-disable-next-line new-cap
  113 export default AbstractPollAnswer(PollAnswer);