fix(polls): Disable submit button if no answers have been chosen
This commit is contained in:
parent
16c3a35da9
commit
7f4fb7f447
|
@ -406,6 +406,7 @@ a.poll-detail-link, a.poll-change-vote-link {
|
||||||
&:disabled {
|
&:disabled {
|
||||||
background-color: #00225A;
|
background-color: #00225A;
|
||||||
color: #858585;
|
color: #858585;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > *:not(:last-child) {
|
& > *:not(:last-child) {
|
||||||
|
|
|
@ -5,6 +5,7 @@ import { Switch, Text, View } from 'react-native';
|
||||||
import { Button } from 'react-native-paper';
|
import { Button } from 'react-native-paper';
|
||||||
|
|
||||||
import { BUTTON_MODES } from '../../../chat/constants';
|
import { BUTTON_MODES } from '../../../chat/constants';
|
||||||
|
import { isSubmitAnswerDisabled } from '../../functions';
|
||||||
import AbstractPollAnswer from '../AbstractPollAnswer';
|
import AbstractPollAnswer from '../AbstractPollAnswer';
|
||||||
import type { AbstractProps } from '../AbstractPollAnswer';
|
import type { AbstractProps } from '../AbstractPollAnswer';
|
||||||
|
|
||||||
|
@ -12,7 +13,6 @@ import { chatStyles, dialogStyles } from './styles';
|
||||||
|
|
||||||
|
|
||||||
const PollAnswer = (props: AbstractProps) => {
|
const PollAnswer = (props: AbstractProps) => {
|
||||||
|
|
||||||
const {
|
const {
|
||||||
checkBoxStates,
|
checkBoxStates,
|
||||||
poll,
|
poll,
|
||||||
|
@ -50,6 +50,7 @@ const PollAnswer = (props: AbstractProps) => {
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
color = '#17a0db'
|
color = '#17a0db'
|
||||||
|
disabled = { isSubmitAnswerDisabled(checkBoxStates) }
|
||||||
mode = { BUTTON_MODES.CONTAINED }
|
mode = { BUTTON_MODES.CONTAINED }
|
||||||
onPress = { submitAnswer }
|
onPress = { submitAnswer }
|
||||||
style = { chatStyles.pollCreateButton } >
|
style = { chatStyles.pollCreateButton } >
|
||||||
|
|
|
@ -3,12 +3,11 @@
|
||||||
import { Checkbox } from '@atlaskit/checkbox';
|
import { Checkbox } from '@atlaskit/checkbox';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
|
import { isSubmitAnswerDisabled } from '../../functions';
|
||||||
import AbstractPollAnswer from '../AbstractPollAnswer';
|
import AbstractPollAnswer from '../AbstractPollAnswer';
|
||||||
import type { AbstractProps } from '../AbstractPollAnswer';
|
import type { AbstractProps } from '../AbstractPollAnswer';
|
||||||
|
|
||||||
|
|
||||||
const PollAnswer = (props: AbstractProps) => {
|
const PollAnswer = (props: AbstractProps) => {
|
||||||
|
|
||||||
const {
|
const {
|
||||||
checkBoxStates,
|
checkBoxStates,
|
||||||
poll,
|
poll,
|
||||||
|
@ -51,7 +50,8 @@ const PollAnswer = (props: AbstractProps) => {
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
aria-label = { t('polls.answer.submit') }
|
aria-label = { t('polls.answer.submit') }
|
||||||
className = { 'poll-small-primary-button' }
|
className = 'poll-small-primary-button'
|
||||||
|
disabled = { isSubmitAnswerDisabled(checkBoxStates) }
|
||||||
onClick = { submitAnswer }>
|
onClick = { submitAnswer }>
|
||||||
<span>{t('polls.answer.submit')}</span>
|
<span>{t('polls.answer.submit')}</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -21,3 +21,13 @@ export function getUnreadPollCount(state: Object) {
|
||||||
|
|
||||||
return nbUnreadPolls;
|
return nbUnreadPolls;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Determines if the submit poll answer button should be disabled.
|
||||||
|
*
|
||||||
|
* @param {Array<boolean>} checkBoxStates - The states of the checkboxes.
|
||||||
|
* @returns {boolean}
|
||||||
|
*/
|
||||||
|
export function isSubmitAnswerDisabled(checkBoxStates: Array<boolean>) {
|
||||||
|
return !checkBoxStates.find(checked => checked);
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue