BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix polling component

Browse Source
This commit is contained in:
Michael Zinsmeister 2021-05-01 22:50:24 +02:00
parent 5ca831ff86
commit efbc990c44
1 changed files with 100 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
bigbluebutton-html5/imports/ui/components/polling/component.jsx
View File

@ -107,7 +107,6 @@ class Polling extends Component {
}
}
renderButtonAnswers(pollAnswerStyles) {
const {
isMeteorConnected,
@ -118,123 +117,107 @@ class Polling extends Component {
pollAnswerIds,
} = this.props;
const { question } = poll;
const {
typedAns,
} = this.state;
const { typedAns } = this.state;
if (!poll) return null;
const { stackOptions, answers, question } = poll;
return (
<div className={styles.overlay}>
<div
data-test="pollingContainer"
className={cx({
[styles.pollingContainer]: true,
[styles.autoWidth]: stackOptions,
})}
role="alert"
>
{
question.length > 0 && (
<span className={styles.qHeader}>
<div className={styles.qTitle}>
{intl.formatMessage(intlMessages.pollQestionTitle)}
</div>
<div data-test="pollQuestion" className={styles.qText}>{question}</div>
</span>
)
}
{
poll.pollType !== 'RP' && (
<span>
{
question.length === 0
&& (
<div className={styles.pollingTitle}>
{intl.formatMessage(intlMessages.pollingTitleLabel)}
</div>
)
}
<div className={cx(pollAnswerStyles)}>
{poll.answers.map((pollAnswer) => {
const formattedMessageIndex = pollAnswer.key.toLowerCase();
let label = pollAnswer.key;
if (pollAnswerIds[formattedMessageIndex]) {
label = intl.formatMessage(pollAnswerIds[formattedMessageIndex]);
}
<div>
{
poll.pollType !== 'RP' && (
<span>
{
question.length === 0
&& (
<div className={styles.pollingTitle}>
{intl.formatMessage(intlMessages.pollingTitleLabel)}
</div>
)
}
<div className={cx(pollAnswerStyles)}>
{poll.answers.map((pollAnswer) => {
const formattedMessageIndex = pollAnswer.key.toLowerCase();
let label = pollAnswer.key;
if (pollAnswerIds[formattedMessageIndex]) {
label = intl.formatMessage(pollAnswerIds[formattedMessageIndex]);
}
return (
return (
<div
key={pollAnswer.id}
className={styles.pollButtonWrapper}
>
<Button
disabled={!isMeteorConnected}
className={styles.pollingButton}
color="primary"
size="md"
label={label}
key={pollAnswer.key}
onClick={() => handleVote(poll.pollId, [pollAnswer.id])}
aria-labelledby={`pollAnswerLabel${pollAnswer.key}`}
aria-describedby={`pollAnswerDesc${pollAnswer.key}`}
data-test="pollAnswerOption"
/>
<div
key={pollAnswer.id}
className={styles.pollButtonWrapper}
className={styles.hidden}
id={`pollAnswerLabel${pollAnswer.key}`}
>
<Button
disabled={!isMeteorConnected}
className={styles.pollingButton}
color="primary"
size="md"
label={label}
key={pollAnswer.key}
onClick={() => handleVote(poll.pollId, pollAnswer)}
aria-labelledby={`pollAnswerLabel${pollAnswer.key}`}
aria-describedby={`pollAnswerDesc${pollAnswer.key}`}
data-test="pollAnswerOption"
/>
<div
className={styles.hidden}
id={`pollAnswerLabel${pollAnswer.key}`}
>
{intl.formatMessage(intlMessages.pollAnswerLabel, { 0: label })}
</div>
<div
className={styles.hidden}
id={`pollAnswerDesc${pollAnswer.key}`}
>
{intl.formatMessage(intlMessages.pollAnswerDesc, { 0: label })}
</div>
{intl.formatMessage(intlMessages.pollAnswerLabel, { 0: label })}
</div>
);
})}
</div>
</span>
)
}
{
poll.pollType === 'RP'
&& (
<div className={styles.typedResponseWrapper}>
<input
data-test="pollAnswerOption"
onChange={(e) => {
this.handleUpdateResponseInput(e);
}}
onKeyDown={(e) => {
this.handleMessageKeyDown(e);
}}
type="text"
className={styles.typedResponseInput}
placeholder={intl.formatMessage(intlMessages.responsePlaceholder)}
maxLength={MAX_INPUT_CHARS}
ref={(r) => { this.responseInput = r; }}
/>
<Button
data-test="submitAnswer"
className={styles.submitVoteBtn}
disabled={typedAns.length === 0}
color="primary"
size="sm"
label={intl.formatMessage(intlMessages.submitLabel)}
aria-label={intl.formatMessage(intlMessages.submitAriaLabel)}
onClick={() => {
handleTypedVote(poll.pollId, typedAns);
}}
/>
<div
className={styles.hidden}
id={`pollAnswerDesc${pollAnswer.key}`}
>
{intl.formatMessage(intlMessages.pollAnswerDesc, { 0: label })}
</div>
</div>
);
})}
</div>
)
}
</div>
</span>
)
}
{
poll.pollType === 'RP'
&& (
<div className={styles.typedResponseWrapper}>
<input
data-test="pollAnswerOption"
onChange={(e) => {
this.handleUpdateResponseInput(e);
}}
onKeyDown={(e) => {
this.handleMessageKeyDown(e);
}}
type="text"
className={styles.typedResponseInput}
placeholder={intl.formatMessage(intlMessages.responsePlaceholder)}
maxLength={MAX_INPUT_CHARS}
ref={(r) => { this.responseInput = r; }}
/>
<Button
data-test="submitAnswer"
className={styles.submitVoteBtn}
disabled={typedAns.length === 0}
color="primary"
size="sm"
label={intl.formatMessage(intlMessages.submitLabel)}
aria-label={intl.formatMessage(intlMessages.submitAriaLabel)}
onClick={() => {
handleTypedVote(poll.pollId, typedAns);
}}
/>
</div>
)
}
</div>
);
}
}
renderCheckboxAnswers(pollAnswerStyles) {
const {
@ -252,8 +235,7 @@ class Polling extends Component {
<div className={styles.pollingTitle}>
{intl.formatMessage(intlMessages.pollingTitleLabel)}
</div>
)
}
)}
{/* <div className={cx(pollAnswerStyles)}> */}
<table className={styles.multipleResponseAnswersTable}>
{poll.answers.map((pollAnswer) => {
@ -335,11 +317,15 @@ class Polling extends Component {
})}
role="alert"
>
{question.length > 0 && (
<span className={styles.qHeader}>
<div className={styles.qTitle}>{intl.formatMessage(intlMessages.pollQestionTitle)}</div>
<div data-test="pollQuestion" className={styles.qText}>{question}</div>
</span>)
{
question.length > 0 && (
<span className={styles.qHeader}>
<div className={styles.qTitle}>
{intl.formatMessage(intlMessages.pollQestionTitle)}
</div>
<div data-test="pollQuestion" className={styles.qText}>{question}</div>
</span>
)
}
{poll.isMultipleResponse ? this.renderCheckboxAnswers(pollAnswerStyles) : this.renderButtonAnswers(pollAnswerStyles)}
</div>