stream-chat-react
Version:
React components to create chat conversations or livestream style chat
27 lines (26 loc) • 1.53 kB
JavaScript
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 }))));
};