102 lines
3.1 KiB
JavaScript
102 lines
3.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import Button from '/imports/ui/components/button/component';
|
|
import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
|
|
import { defineMessages, injectIntl } from 'react-intl';
|
|
import Tooltip from '/imports/ui/components/tooltip/component';
|
|
import { styles } from './styles.scss';
|
|
|
|
const intlMessages = defineMessages({
|
|
pollingTitleLabel: {
|
|
id: 'app.polling.pollingTitle',
|
|
},
|
|
pollAnswerLabel: {
|
|
id: 'app.polling.pollAnswerLabel',
|
|
},
|
|
pollAnswerDesc: {
|
|
id: 'app.polling.pollAnswerDesc',
|
|
},
|
|
});
|
|
|
|
class Polling extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.play = this.play.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.play();
|
|
}
|
|
|
|
play() {
|
|
this.alert = new Audio(`${Meteor.settings.public.app.cdn || Meteor.settings.public.app.basename}/resources/sounds/Poll.mp3`);
|
|
this.alert.play();
|
|
}
|
|
|
|
render() {
|
|
const { intl, poll, handleVote } = this.props;
|
|
|
|
return (
|
|
<div className={styles.overlay}>
|
|
<div className={styles.pollingContainer} role="alert">
|
|
<div className={styles.pollingTitle}>
|
|
{intl.formatMessage(intlMessages.pollingTitleLabel)}
|
|
</div>
|
|
<div className={styles.pollingAnswers}>
|
|
{poll.answers.map(pollAnswer => (
|
|
<div
|
|
key={pollAnswer.id}
|
|
className={styles.pollButtonWrapper}
|
|
>
|
|
<Tooltip
|
|
key={pollAnswer.id}
|
|
title={pollAnswer.key}
|
|
>
|
|
<Button
|
|
className={styles.pollingButton}
|
|
color="primary"
|
|
size="md"
|
|
label={pollAnswer.key}
|
|
key={pollAnswer.key}
|
|
onClick={() => handleVote(poll.pollId, pollAnswer)}
|
|
aria-labelledby={`pollAnswerLabel${pollAnswer.key}`}
|
|
aria-describedby={`pollAnswerDesc${pollAnswer.key}`}
|
|
/>
|
|
</Tooltip>
|
|
<div
|
|
className={styles.hidden}
|
|
id={`pollAnswerLabel${pollAnswer.key}`}
|
|
>
|
|
{intl.formatMessage(intlMessages.pollAnswerLabel, { 0: pollAnswer.key })}
|
|
</div>
|
|
<div
|
|
className={styles.hidden}
|
|
id={`pollAnswerDesc${pollAnswer.key}`}
|
|
>
|
|
{intl.formatMessage(intlMessages.pollAnswerDesc, { 0: pollAnswer.key })}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>);
|
|
}
|
|
}
|
|
|
|
export default injectIntl(injectWbResizeEvent(Polling));
|
|
|
|
Polling.propTypes = {
|
|
intl: PropTypes.shape({
|
|
formatMessage: PropTypes.func.isRequired,
|
|
}).isRequired,
|
|
handleVote: PropTypes.func.isRequired,
|
|
poll: PropTypes.shape({
|
|
pollId: PropTypes.string.isRequired,
|
|
answers: PropTypes.arrayOf(PropTypes.shape({
|
|
id: PropTypes.number.isRequired,
|
|
key: PropTypes.string.isRequired,
|
|
}).isRequired).isRequired,
|
|
}).isRequired,
|
|
};
|