client/components/multiple-choice-question/answer.jsx - trunk - githubmirror/wp-calypso

client/components/multiple-choice-question/answer.jsx

65 строк2 KB

Griffith Chen

client/components: migrate .jsx function-component defaultProps to default params (React 19) (#111609)

12 июн 2026, 14:17

12 июн 2026, 14:174c68d68

import { FormLabel } from '@automattic/components';
import PropTypes from 'prop-types';
import { useState } from 'react';
import FormRadio from 'calypso/components/forms/form-radio';
import FormTextInput from 'calypso/components/forms/form-text-input';

const MultipleChoiceAnswer = ( {
	disabled = false,
	answer: { id, answerText, textInput, textInputPrompt, children },
	name,
	isSelected,
	onAnswerChange,
	selectedAnswerText = '',
} ) => {
	const [ textResponse, setTextResponse ] = useState( selectedAnswerText );

	return (
		<FormLabel>
			<FormRadio
				value={ id }
				onChange={ () => {
					onAnswerChange( id, textResponse );
				} }
				name={ name }
				checked={ isSelected }
				disabled={ disabled }
				label={ answerText }
			/>
			{ isSelected && (
				<div className="multiple-choice-question__answer-item-content">
					{ textInput && (
						<FormTextInput
							className="multiple-choice-question__answer-item-text-input"
							value={ textResponse }
							onChange={ ( { target: { value } } ) => {
								onAnswerChange( id, value );
								setTextResponse( value );
							} }
							placeholder={ textInputPrompt ? textInputPrompt : '' }
							disabled={ disabled }
						/>
					) }
					{ children }
				</div>
			) }
		</FormLabel>
	);
};

MultipleChoiceAnswer.propTypes = {
	disabled: PropTypes.bool,
	isSelected: PropTypes.bool,
	onAnswerChange: PropTypes.func,
	answer: PropTypes.shape( {
		id: PropTypes.string.isRequired,
		answerText: PropTypes.string.isRequired,
		textInput: PropTypes.bool,
		textInputPrompt: PropTypes.string,
		children: PropTypes.object,
	} ).isRequired,
	selectedAnswerText: PropTypes.string,
	name: PropTypes.string.isRequired,
};

export default MultipleChoiceAnswer;