stream-chat-react
Version:
React components to create chat conversations or livestream style chat
97 lines (96 loc) • 6.67 kB
JavaScript
import clsx from 'clsx';
import { nanoid } from 'nanoid';
import React, { useState } from 'react';
import { FieldError } from '../../Form/FieldError';
import { OptionFieldSet } from './OptionFieldSet';
import { PollCreationDialogControls } from './PollCreationDialogControls';
import { VALID_MAX_VOTES_VALUE_REGEX } from '../constants';
import { ModalHeader } from '../../Modal/ModalHeader';
import { SimpleSwitchField } from '../../Form/SwitchField';
import { useChatContext, useTranslationContext } from '../../../context';
export const PollCreationDialog = ({ close }) => {
const { client } = useChatContext();
const { t } = useTranslationContext();
const [nameError, setNameError] = useState();
const [optionsErrors, setOptionsErrors] = useState({});
const [multipleAnswerCountError, setMultipleAnswerCountError] = useState();
const [state, setState] = useState(() => ({
allow_answers: false,
allow_user_suggested_options: false,
description: '',
enforce_unique_vote: true,
id: nanoid(),
max_votes_allowed: '',
name: '',
options: [{ id: nanoid(), text: '' }],
user_id: client.user?.id,
voting_visibility: 'public',
}));
return (React.createElement("div", { className: 'str-chat__dialog str-chat__poll-creation-dialog', "data-testid": 'poll-creation-dialog' },
React.createElement(ModalHeader, { close: close, title: t('Create poll') }),
React.createElement("div", { className: 'str-chat__dialog__body' },
React.createElement("form", { autoComplete: 'off' },
React.createElement("div", { className: clsx('str-chat__form__field str-chat__form__input-field str-chat__form__input-field--with-label', {
'str-chat__form__input-field--has-error': nameError,
}) },
React.createElement("label", { className: 'str-chat__form__field-label', htmlFor: 'name' }, t('Question')),
React.createElement("div", { className: clsx('str-chat__form__input-field__value') },
React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-name-input-field-error', text: nameError }),
React.createElement("input", { id: 'name', onBlur: (e) => {
if (!e.target.value) {
setNameError('The field is required');
}
}, onChange: (e) => {
setState((prev) => ({ ...prev, name: e.target.value }));
if (nameError && e.target.value) {
setNameError(undefined);
}
}, placeholder: t('Ask a question'), type: 'text', value: state.name }))),
React.createElement(OptionFieldSet, { errors: optionsErrors, options: state.options, setErrors: setOptionsErrors, setState: setState }),
React.createElement("div", { className: clsx('str-chat__form__expandable-field', {
'str-chat__form__expandable-field--expanded': !state.enforce_unique_vote,
}) },
React.createElement(SimpleSwitchField, { checked: !state.enforce_unique_vote, id: 'enforce_unique_vote', labelText: t('Multiple answers'), onChange: (e) => {
setState((prev) => ({
...prev,
enforce_unique_vote: !e.target.checked,
max_votes_allowed: '',
}));
setMultipleAnswerCountError(undefined);
} }),
!state.enforce_unique_vote && (React.createElement("div", { className: clsx('str-chat__form__input-field', {
'str-chat__form__input-field--has-error': multipleAnswerCountError,
}) },
React.createElement("div", { className: clsx('str-chat__form__input-field__value') },
React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-max-votes-allowed-input-field-error', text: multipleAnswerCountError }),
React.createElement("input", { id: 'max_votes_allowed', onChange: (e) => {
const isValidValue = !e.target.value ||
e.target.value.match(VALID_MAX_VOTES_VALUE_REGEX);
if (!isValidValue) {
setMultipleAnswerCountError(t('Type a number from 2 to 10'));
}
else if (multipleAnswerCountError) {
setMultipleAnswerCountError(undefined);
}
setState((prev) => ({
...prev,
max_votes_allowed: e.target.value,
}));
}, placeholder: t('Maximum number of votes (from 2 to 10)'), type: 'number', value: state.max_votes_allowed }))))),
React.createElement(SimpleSwitchField, { checked: state.voting_visibility === 'anonymous', id: 'voting_visibility', labelText: t('Anonymous poll'), onChange: (e) => setState((prev) => ({
...prev,
voting_visibility: (e.target.checked
? 'anonymous'
: 'public'),
})) }),
React.createElement(SimpleSwitchField, { checked: state.allow_user_suggested_options, id: 'allow_user_suggested_options', labelText: t('Allow option suggestion'), onChange: (e) => setState((prev) => ({
...prev,
allow_user_suggested_options: e.target.checked,
})) }),
React.createElement(SimpleSwitchField, { checked: state.allow_answers, id: 'allow_answers', labelText: t('Allow comments'), onChange: (e) => setState((prev) => ({ ...prev, allow_answers: e.target.checked })) }))),
React.createElement(PollCreationDialogControls, { close: close, errors: [
...(nameError ?? []),
...(multipleAnswerCountError ?? []),
...Object.keys(optionsErrors),
], state: state })));
};