stream-chat-react
Version:
React components to create chat conversations or livestream style chat
47 lines (46 loc) • 2.98 kB
JavaScript
import clsx from 'clsx';
import React, { useCallback } from 'react';
import { FieldError } from '../../Form/FieldError';
import { DragAndDropContainer } from '../../DragAndDrop/DragAndDropContainer';
import { useTranslationContext } from '../../../context';
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 onSetNewOrder = useCallback((newOrder) => {
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) => {
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) => {
const isFocusedLastOptionField = i === options.length - 1;
if (event.key === 'Enter' && !isFocusedLastOptionField) {
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' })));
}))));
};