stream-chat-react 12.15.0 → 13.0.0-rc.2

package/dist/components/Poll/PollActions/EndPollDialog.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../../types';
 export type EndPollDialogProps = {
     close: () => void;
 };
-export declare const EndPollDialog: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ close, }: EndPollDialogProps) => React.JSX.Element;
+export declare const EndPollDialog: ({ close }: EndPollDialogProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/EndPollDialog.js

@@ -1,7 +1,7 @@
 import { PromptDialog } from '../../Dialog/PromptDialog';
 import React from 'react';
 import { usePollContext, useTranslationContext } from '../../../context';
-export const EndPollDialog = ({ close, }) => {
+export const EndPollDialog = ({ close }) => {
     const { t } = useTranslationContext('SuggestPollOptionForm');
     const { poll } = usePollContext();
     return (React.createElement(PromptDialog, { actions: [

package/dist/components/Poll/PollActions/PollAction.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 export type PollActionProps = {
     buttonText: string;
     closeModal: () => void;

package/dist/components/Poll/PollActions/PollActions.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import { AddCommentFormProps } from './AddCommentForm';
-import { SuggestPollOptionFormProps } from './SuggestPollOptionForm';
-import { EndPollDialogProps } from './EndPollDialog';
-import { PollAnswerListProps } from './PollAnswerList';
-import { FullPollOptionsListingProps } from './PollOptionsFullList';
-import { PollResultsProps } from './PollResults';
-import type { DefaultStreamChatGenerics } from '../../../types';
+import type { AddCommentFormProps } from './AddCommentForm';
+import type { SuggestPollOptionFormProps } from './SuggestPollOptionForm';
+import type { EndPollDialogProps } from './EndPollDialog';
+import type { PollAnswerListProps } from './PollAnswerList';
+import type { FullPollOptionsListingProps } from './PollOptionsFullList';
+import type { PollResultsProps } from './PollResults';
 export type PollActionsProps = {
     AddCommentForm?: React.ComponentType<AddCommentFormProps>;
     EndPollDialog?: React.ComponentType<EndPollDialogProps>;
@@ -14,4 +13,4 @@ export type PollActionsProps = {
     PollResults?: React.ComponentType<PollResultsProps>;
     SuggestPollOptionForm?: React.ComponentType<SuggestPollOptionFormProps>;
 };
-export declare const PollActions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ AddCommentForm, EndPollDialog, PollAnswerList, PollOptionsFullList, PollResults, SuggestPollOptionForm, }: PollActionsProps) => React.JSX.Element;
+export declare const PollActions: ({ AddCommentForm, EndPollDialog, PollAnswerList, PollOptionsFullList, PollResults, SuggestPollOptionForm, }: PollActionsProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/PollActions.js

@@ -1,10 +1,10 @@
 import React, { useCallback, useState } from 'react';
 import { PollAction } from './PollAction';
-import { AddCommentForm as DefaultAddCommentForm, } from './AddCommentForm';
-import { SuggestPollOptionForm as DefaultSuggestPollOptionForm, } from './SuggestPollOptionForm';
-import { EndPollDialog as DefaultEndPollDialog, } from './EndPollDialog';
-import { PollAnswerList as DefaultPollAnswerList, } from './PollAnswerList';
-import { PollOptionsFullList as DefaultPollOptionsFullList, } from './PollOptionsFullList';
+import { AddCommentForm as DefaultAddCommentForm } from './AddCommentForm';
+import { SuggestPollOptionForm as DefaultSuggestPollOptionForm } from './SuggestPollOptionForm';
+import { EndPollDialog as DefaultEndPollDialog } from './EndPollDialog';
+import { PollAnswerList as DefaultPollAnswerList } from './PollAnswerList';
+import { PollOptionsFullList as DefaultPollOptionsFullList } from './PollOptionsFullList';
 import { PollResults as DefaultPollResults } from './PollResults';
 import { MAX_OPTIONS_DISPLAYED, MAX_POLL_OPTIONS } from '../constants';
 import { useChannelStateContext, useChatContext, useMessageContext, usePollContext, useTranslationContext, } from '../../../context';

package/dist/components/Poll/PollActions/PollAnswerList.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../../types';
 export type PollAnswerListProps = {
     onUpdateOwnAnswerClick: () => void;
     close?: () => void;
 };
-export declare const PollAnswerList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ close, onUpdateOwnAnswerClick, }: PollAnswerListProps) => React.JSX.Element;
+export declare const PollAnswerList: ({ close, onUpdateOwnAnswerClick, }: PollAnswerListProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/PollOptionsFullList.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../../types';
 export type FullPollOptionsListingProps = {
     close?: () => void;
 };
-export declare const PollOptionsFullList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ close, }: FullPollOptionsListingProps) => React.JSX.Element;
+export declare const PollOptionsFullList: ({ close }: FullPollOptionsListingProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/PollOptionsFullList.js

@@ -3,8 +3,10 @@ import { ModalHeader } from '../../Modal/ModalHeader';
 import { PollOptionList } from '../PollOptionList';
 import { useStateStore } from '../../../store';
 import { usePollContext, useTranslationContext } from '../../../context';
-const pollStateSelector = (nextValue) => ({ name: nextValue.name });
-export const PollOptionsFullList = ({ close, }) => {
+const pollStateSelector = (nextValue) => ({
+    name: nextValue.name,
+});
+export const PollOptionsFullList = ({ close }) => {
     const { t } = useTranslationContext();
     const { poll } = usePollContext();
     const { name } = useStateStore(poll.state, pollStateSelector);

package/dist/components/Poll/PollActions/PollResults/PollOptionVotesList.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { PollOption } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../../../types';
-export type PollOptionVotesListingProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    option: PollOption<StreamChatGenerics>;
+export type PollOptionVotesListingProps = {
+    option: PollOption;
 };
-export declare const PollOptionVotesList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ option, }: PollOptionVotesListingProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const PollOptionVotesList: ({ option }: PollOptionVotesListingProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/PollResults/PollOptionVotesList.js

@@ -4,7 +4,7 @@ import { usePollOptionVotesPagination } from '../../hooks';
 import { LoadingIndicator } from '../../../Loading';
 import { InfiniteScrollPaginator } from '../../../InfiniteScrollPaginator/InfiniteScrollPaginator';
 import { PollOptionWithVotesHeader } from './PollOptionWithVotesHeader';
-export const PollOptionVotesList = ({ option, }) => {
+export const PollOptionVotesList = ({ option }) => {
     const paginationParams = useMemo(() => ({ filter: { option_id: option.id } }), [option.id]);
     const { error, hasNextPage, loading, loadMore, votes } = usePollOptionVotesPagination({
         paginationParams,

package/dist/components/Poll/PollActions/PollResults/PollOptionWithLatestVotes.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import type { PollOption } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../../../types';
-export type PollOptionWithVotesProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    option: PollOption<StreamChatGenerics>;
+export type PollOptionWithVotesProps = {
+    option: PollOption;
     countVotesPreview?: number;
     showAllVotes?: () => void;
 };
-export declare const PollOptionWithLatestVotes: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ countVotesPreview, option, showAllVotes, }: PollOptionWithVotesProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const PollOptionWithLatestVotes: ({ countVotesPreview, option, showAllVotes, }: PollOptionWithVotesProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
 import type { PollOption } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../../../types';
 export type PollResultOptionVoteCounterProps = {
     optionId: string;
 };
-export declare const PollResultOptionVoteCounter: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ optionId, }: PollResultOptionVoteCounterProps) => React.JSX.Element;
-export type PollOptionWithVotesHeaderProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    option: PollOption<StreamChatGenerics>;
+export declare const PollResultOptionVoteCounter: ({ optionId, }: PollResultOptionVoteCounterProps) => React.JSX.Element;
+export type PollOptionWithVotesHeaderProps = {
+    option: PollOption;
 };
-export declare const PollOptionWithVotesHeader: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ option, }: PollOptionWithVotesHeaderProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const PollOptionWithVotesHeader: ({ option }: PollOptionWithVotesHeaderProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.js

@@ -13,6 +13,6 @@ export const PollResultOptionVoteCounter = ({ optionId, }) => {
         maxVotedOptionIds.length === 1 && maxVotedOptionIds[0] === optionId && (React.createElement("div", { className: 'str-chat__poll-result-winning-option-icon' })),
         React.createElement("span", { className: 'str-chat__poll-result-option-vote-count' }, t('{{count}} votes', { count: vote_counts_by_option[optionId] ?? 0 }))));
 };
-export const PollOptionWithVotesHeader = ({ option, }) => (React.createElement("div", { className: 'str-chat__poll-option__header' },
+export const PollOptionWithVotesHeader = ({ option }) => (React.createElement("div", { className: 'str-chat__poll-option__header' },
     React.createElement("div", { className: 'str-chat__poll-option__option-text' }, option.text),
     React.createElement(PollResultOptionVoteCounter, { optionId: option.id })));

package/dist/components/Poll/PollActions/PollResults/PollResults.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../../../types';
 export type PollResultsProps = {
     close?: () => void;
 };
-export declare const PollResults: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ close, }: PollResultsProps) => React.JSX.Element;
+export declare const PollResults: ({ close }: PollResultsProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/PollResults/PollResults.js

@@ -10,7 +10,7 @@ const pollStateSelector = (nextValue) => ({
     options: nextValue.options,
     vote_counts_by_option: nextValue.vote_counts_by_option,
 });
-export const PollResults = ({ close, }) => {
+export const PollResults = ({ close }) => {
     const { t } = useTranslationContext();
     const { poll } = usePollContext();
     const { name, options, vote_counts_by_option } = useStateStore(poll.state, pollStateSelector);

package/dist/components/Poll/PollActions/SuggestPollOptionForm.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../../types';
 export type SuggestPollOptionFormProps = {
     close: () => void;
     messageId: string;
 };
-export declare const SuggestPollOptionForm: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ close, messageId, }: SuggestPollOptionFormProps) => React.JSX.Element;
+export declare const SuggestPollOptionForm: ({ close, messageId, }: SuggestPollOptionFormProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/SuggestPollOptionForm.js

@@ -2,7 +2,9 @@ import React from 'react';
 import { FormDialog } from '../../Dialog/FormDialog';
 import { useChatContext, usePollContext, useTranslationContext } from '../../../context';
 import { useStateStore } from '../../../store';
-const pollStateSelector = (nextValue) => ({ options: nextValue.options });
+const pollStateSelector = (nextValue) => ({
+    options: nextValue.options,
+});
 export const SuggestPollOptionForm = ({ close, messageId, }) => {
     const { client } = useChatContext('SuggestPollOptionForm');
     const { t } = useTranslationContext('SuggestPollOptionForm');

package/dist/components/Poll/PollContent.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../types';
-export declare const PollContent: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element;
+export declare const PollContent: () => React.JSX.Element;

package/dist/components/Poll/PollCreationDialog/MultipleAnswersField.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MultipleAnswersField: () => React.JSX.Element;

package/dist/components/Poll/PollCreationDialog/MultipleAnswersField.js

@@ -0,0 +1,35 @@
+import clsx from 'clsx';
+import React from 'react';
+import { SimpleSwitchField } from '../../Form/SwitchField';
+import { FieldError } from '../../Form/FieldError';
+import { useTranslationContext } from '../../../context';
+import { useMessageComposer } from '../../MessageInput';
+import { useStateStore } from '../../../store';
+const pollComposerStateSelector = (state) => ({
+    enforce_unique_vote: state.data.enforce_unique_vote,
+    error: state.errors.max_votes_allowed,
+    max_votes_allowed: state.data.max_votes_allowed,
+});
+export const MultipleAnswersField = () => {
+    const { t } = useTranslationContext();
+    const { pollComposer } = useMessageComposer();
+    const { enforce_unique_vote, error, max_votes_allowed } = useStateStore(pollComposer.state, pollComposerStateSelector);
+    return (React.createElement("div", { className: clsx('str-chat__form__expandable-field', {
+            'str-chat__form__expandable-field--expanded': !enforce_unique_vote,
+        }) },
+        React.createElement(SimpleSwitchField, { checked: !enforce_unique_vote, id: 'enforce_unique_vote', labelText: t('Multiple answers'), onChange: (e) => {
+                pollComposer.updateFields({ enforce_unique_vote: !e.target.checked });
+            } }),
+        !enforce_unique_vote && (React.createElement("div", { className: clsx('str-chat__form__input-field', {
+                'str-chat__form__input-field--has-error': error,
+            }) },
+            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: error && t(error) }),
+                React.createElement("input", { id: 'max_votes_allowed', onBlur: () => {
+                        pollComposer.handleFieldBlur('max_votes_allowed');
+                    }, onChange: (e) => {
+                        pollComposer.updateFields({
+                            max_votes_allowed: e.target.value,
+                        });
+                    }, placeholder: t('Maximum number of votes (from 2 to 10)'), type: 'number', value: max_votes_allowed }))))));
+};

package/dist/components/Poll/PollCreationDialog/NameField.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NameField: () => React.JSX.Element;

package/dist/components/Poll/PollCreationDialog/NameField.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import clsx from 'clsx';
+import { FieldError } from '../../Form/FieldError';
+import { useTranslationContext } from '../../../context';
+import { useMessageComposer } from '../../MessageInput';
+import { useStateStore } from '../../../store';
+const pollComposerStateSelector = (state) => ({
+    error: state.errors.name,
+    name: state.data.name,
+});
+export const NameField = () => {
+    const { t } = useTranslationContext();
+    const { pollComposer } = useMessageComposer();
+    const { error, name } = useStateStore(pollComposer.state, pollComposerStateSelector);
+    return (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': error,
+        }) },
+        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: error && t(error) }),
+            React.createElement("input", { id: 'name', onBlur: () => {
+                    pollComposer.handleFieldBlur('name');
+                }, onChange: (e) => {
+                    pollComposer.updateFields({ name: e.target.value });
+                }, placeholder: t('Ask a question'), type: 'text', value: name }))));
+};

package/dist/components/Poll/PollCreationDialog/OptionFieldSet.d.ts

@@ -1,9 +1,2 @@
 import React from 'react';
-import type { OptionErrors, PollFormState } from './types';
-export type OptionFieldSetProps = {
-    errors: OptionErrors;
-    options: PollFormState['options'];
-    setErrors: (fn: (prev: OptionErrors) => OptionErrors) => void;
-    setState: (fn: (prev: PollFormState) => PollFormState) => void;
-};
-export declare const OptionFieldSet: ({ errors, options, setErrors, setState, }: OptionFieldSetProps) => React.JSX.Element;
+export declare const OptionFieldSet: () => React.JSX.Element;

package/dist/components/Poll/PollCreationDialog/OptionFieldSet.js

@@ -1,77 +1,45 @@
 import clsx from 'clsx';
-import { MAX_POLL_OPTIONS } from '../constants';
-import { nanoid } from 'nanoid';
 import React, { useCallback } from 'react';
 import { FieldError } from '../../Form/FieldError';
 import { DragAndDropContainer } from '../../DragAndDrop/DragAndDropContainer';
 import { useTranslationContext } from '../../../context';
-const VALIDATION_ERRORS = { 'Option already exists': true };
-export const OptionFieldSet = ({ errors, options, setErrors, setState, }) => {
+import { useMessageComposer } from '../../MessageInput';
+import { useStateStore } from '../../../store';
+const pollComposerStateSelector = (state) => ({
+    errors: state.errors.options,
+    options: state.data.options,
+});
+export const OptionFieldSet = () => {
+    const { pollComposer } = useMessageComposer();
+    const { errors, options } = useStateStore(pollComposer.state, pollComposerStateSelector);
     const { t } = useTranslationContext('OptionFieldSet');
-    const findOptionDuplicate = (sourceOption) => {
-        const isDuplicateFilter = (option) => !!sourceOption.text.trim() && // do not include empty options into consideration
-            option.id !== sourceOption.id &&
-            option.text.trim() === sourceOption.text.trim();
-        return options.find(isDuplicateFilter);
-    };
     const onSetNewOrder = useCallback((newOrder) => {
-        setState((prev) => ({
-            ...prev,
-            options: newOrder.map((index) => prev.options[index]),
-        }));
-    }, [setState]);
+        const prevOptions = pollComposer.options;
+        pollComposer.updateFields({ options: newOrder.map((index) => prevOptions[index]) });
+    }, [pollComposer]);
     const draggable = options.length > 1;
     return (React.createElement("fieldset", { className: 'str-chat__form__field str-chat__form__input-fieldset' },
         React.createElement("legend", { className: 'str-chat__form__field-label' }, t('Options')),
-        React.createElement(DragAndDropContainer, { className: 'str-chat__form__input-fieldset__values', draggable: draggable, onSetNewOrder: onSetNewOrder }, options.map((option, i) => (React.createElement("div", { className: clsx('str-chat__form__input-field', {
-                'str-chat__form__input-field--draggable': draggable,
-                'str-chat__form__input-field--has-error': errors[option.id],
-            }), key: `new-poll-option-${i}` },
-            React.createElement("div", { className: 'str-chat__form__input-field__value' },
-                React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-option-input-field-error', text: errors[option.id] }),
-                React.createElement("input", { id: option.id, onBlur: (e) => {
-                        if (findOptionDuplicate({ id: e.target.id, text: e.target.value })) {
-                            setErrors((prev) => ({
-                                ...prev,
-                                [e.target.id]: t('Option already exists'),
-                            }));
-                        }
-                    }, onChange: (e) => {
-                        setState((prev) => {
-                            const shouldAddEmptyOption = prev.options.length < MAX_POLL_OPTIONS &&
-                                (!prev.options ||
-                                    (prev.options.slice(i + 1).length === 0 && !!e.target.value));
-                            const shouldRemoveOption = prev.options &&
-                                prev.options.slice(i + 1).length > 0 &&
-                                !e.target.value;
-                            const optionListHead = prev.options ? prev.options.slice(0, i) : [];
-                            const optionListTail = shouldAddEmptyOption
-                                ? [{ id: nanoid(), text: '' }]
-                                : (prev.options || []).slice(i + 1);
-                            if ((errors[option.id] && !e.target.value) ||
-                                (VALIDATION_ERRORS[errors[option.id]] &&
-                                    !findOptionDuplicate({ id: e.target.id, text: e.target.value }))) {
-                                setErrors((prev) => {
-                                    delete prev[option.id];
-                                    return prev;
-                                });
+        React.createElement(DragAndDropContainer, { className: 'str-chat__form__input-fieldset__values', draggable: draggable, onSetNewOrder: onSetNewOrder }, options.map((option, i) => {
+            const error = errors?.[option.id];
+            return (React.createElement("div", { className: clsx('str-chat__form__input-field', {
+                    'str-chat__form__input-field--draggable': draggable,
+                    'str-chat__form__input-field--has-error': error,
+                }), key: `new-poll-option-${i}` },
+                React.createElement("div", { className: 'str-chat__form__input-field__value' },
+                    React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-option-input-field-error', text: error && t(error) }),
+                    React.createElement("input", { id: option.id, onBlur: () => {
+                            pollComposer.handleFieldBlur('options');
+                        }, onChange: (e) => {
+                            pollComposer.updateFields({
+                                options: { index: i, text: e.target.value },
+                            });
+                        }, onKeyUp: (event) => {
+                            if (event.key === 'Enter') {
+                                const nextInputId = options[i + 1].id;
+                                document.getElementById(nextInputId)?.focus();
                             }
-                            return {
-                                ...prev,
-                                options: [
-                                    ...optionListHead,
-                                    ...(shouldRemoveOption
-                                        ? []
-                                        : [{ ...option, text: e.target.value }]),
-                                    ...optionListTail,
-                                ],
-                            };
-                        });
-                    }, onKeyUp: (event) => {
-                        if (event.key === 'Enter') {
-                            const nextInputId = options[i + 1].id;
-                            document.getElementById(nextInputId)?.focus();
-                        }
-                    }, placeholder: t('Add an option'), type: 'text', value: option.text })),
-            draggable && React.createElement("div", { className: 'str-chat__drag-handle' })))))));
+                        }, placeholder: t('Add an option'), type: 'text', value: option.text })),
+                draggable && React.createElement("div", { className: 'str-chat__drag-handle' })));
+        }))));
 };

package/dist/components/Poll/PollCreationDialog/PollCreationDialog.js

@@ -1,96 +1,42 @@
-import clsx from 'clsx';
-import { nanoid } from 'nanoid';
-import React, { useState } from 'react';
-import { FieldError } from '../../Form/FieldError';
+import React, { useCallback } from 'react';
+import { VotingVisibility } from 'stream-chat';
+import { MultipleAnswersField } from './MultipleAnswersField';
+import { NameField } from './NameField';
 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';
+import { useMessageComposer } from '../../MessageInput';
+import { useTranslationContext } from '../../../context';
+import { useStateStore } from '../../../store';
+const pollComposerStateSelector = (state) => ({
+    allow_answers: state.data.allow_answers,
+    allow_user_suggested_options: state.data.allow_user_suggested_options,
+    voting_visibility: state.data.voting_visibility,
+});
 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',
-    }));
+    const { pollComposer } = useMessageComposer();
+    const { allow_answers, allow_user_suggested_options, voting_visibility } = useStateStore(pollComposer.state, pollComposerStateSelector);
+    const onClose = useCallback(() => {
+        pollComposer.initState();
+        close();
+    }, [pollComposer, close]);
     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(ModalHeader, { close: onClose, 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,
+                React.createElement(NameField, null),
+                React.createElement(OptionFieldSet, null),
+                React.createElement(MultipleAnswersField, null),
+                React.createElement(SimpleSwitchField, { checked: voting_visibility === 'anonymous', id: 'voting_visibility', labelText: t('Anonymous poll'), onChange: (e) => pollComposer.updateFields({
+                        voting_visibility: e.target.checked
+                            ? VotingVisibility.anonymous
+                            : VotingVisibility.public,
+                    }) }),
+                React.createElement(SimpleSwitchField, { checked: allow_user_suggested_options, id: 'allow_user_suggested_options', labelText: t('Allow option suggestion'), onChange: (e) => pollComposer.updateFields({
                         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 })));
+                    }) }),
+                React.createElement(SimpleSwitchField, { checked: allow_answers, id: 'allow_answers', labelText: t('Allow comments'), onChange: (e) => pollComposer.updateFields({ allow_answers: e.target.checked }) }))),
+        React.createElement(PollCreationDialogControls, { close: close })));
 };

package/dist/components/Poll/PollCreationDialog/PollCreationDialogControls.d.ts

@@ -1,8 +1,5 @@
 import React from 'react';
-import type { PollFormState } from './types';
 export type PollCreationDialogControlsProps = {
     close: () => void;
-    errors: string[];
-    state: PollFormState;
 };
-export declare const PollCreationDialogControls: ({ close, errors, state, }: PollCreationDialogControlsProps) => React.JSX.Element;
+export declare const PollCreationDialogControls: ({ close, }: PollCreationDialogControlsProps) => React.JSX.Element;