87 lines
2.4 KiB
JavaScript
87 lines
2.4 KiB
JavaScript
import React from 'react';
|
|
import Button from '/imports/ui/components/button/component';
|
|
import styles from './styles.scss';
|
|
import { defineMessages, injectIntl } from 'react-intl';
|
|
|
|
const intlMessages = defineMessages({
|
|
pollingTitleLabel: {
|
|
id: 'app.polling.pollingTitle',
|
|
description: 'Title label for polling options',
|
|
},
|
|
});
|
|
|
|
class PollingComponent extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
componentDidMount() {
|
|
// to let the whiteboard know that the presentation area's size has changed
|
|
window.dispatchEvent(new Event('resize'));
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
// to let the whiteboard know that the presentation area's size has changed
|
|
window.dispatchEvent(new Event('resize'));
|
|
}
|
|
|
|
getStyles() {
|
|
const number = this.props.poll.answers.length + 1;
|
|
const buttonStyle =
|
|
{
|
|
width: `calc(75%/ ${number} )`,
|
|
marginLeft: `calc(25%/${number * 2})`,
|
|
marginRight: `calc(25%/${number * 2})`,
|
|
};
|
|
|
|
return buttonStyle;
|
|
}
|
|
|
|
render() {
|
|
const poll = this.props.poll;
|
|
const calculatedStyles = this.getStyles();
|
|
const { intl } = this.props;
|
|
|
|
return (
|
|
<div className={styles.pollingContainer}>
|
|
<div className={styles.pollingTitle}>
|
|
<p>
|
|
{intl.formatMessage(intlMessages.pollingTitleLabel)}
|
|
</p>
|
|
</div>
|
|
{poll.answers.map((pollAnswer, index) =>
|
|
(<div
|
|
key={index}
|
|
style={calculatedStyles}
|
|
className={styles.pollButtonWrapper}
|
|
>
|
|
<Button
|
|
className={styles.pollingButton}
|
|
label={pollAnswer.key}
|
|
size="lg"
|
|
color="primary"
|
|
onClick={() => this.props.handleVote(poll.pollId, pollAnswer)}
|
|
aria-labelledby={`pollAnswerLabel${pollAnswer.key}`}
|
|
aria-describedby={`pollAnswerDesc${pollAnswer.key}`}
|
|
/>
|
|
<div
|
|
className={styles.hidden}
|
|
id={`pollAnswerLabel${pollAnswer.key}`}
|
|
>
|
|
{`Poll answer ${pollAnswer.key}`}
|
|
</div>
|
|
<div
|
|
className={styles.hidden}
|
|
id={`pollAnswerDesc${pollAnswer.key}`}
|
|
>
|
|
{`Select this option to vote for ${pollAnswer.key}`}
|
|
</div>
|
|
</div>),
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default injectIntl(PollingComponent);
|