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

client/components/multiple-choice-question/docs/example.jsx

83 строки2 KB

James Kenneth Guidaven

Jetpack Manage: Fix the issue with navigating variants in product cards using arrow keys. (#85461)

21 дек 2023, 10:19

21 дек 2023, 10:193cc213e

import { Button, CompactCard as Card } from '@automattic/components';
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import CardHeading from 'calypso/components/card-heading';
import { successNotice } from 'calypso/state/notices/actions';
import MultipleChoiceQuestion from '../';

function MultipleChoiceQuestionExamples() {
	const [ selectedAnswer, setSelectedAnswer ] = useState( null );
	const [ answerText, setAnswerText ] = useState( '' );
	const dispatch = useDispatch();

	const answers = [
		{ id: 'hungry-bunnies', answerText: 'Hungry Bunnies' },
		{
			id: 'ravenous-rhinos',
			answerText: 'Ravenous Rhinos',
			textInput: true,
			textInputPrompt: 'How many?',
		},
		{
			id: 'starving-storks',
			answerText: 'Starving Storks',
			children: (
				<Button
					onClick={ () => {
						dispatch( successNotice( 'The Stork Button was clicked', { duration: 5000 } ) );
					} }
					primary
				>
					The Stork Button
				</Button>
			),
		},
		{
			id: 'something-else',
			answerText: 'Something Else',
			doNotShuffle: true,
			textInput: true,
			textInputPrompt: 'Who else?',
			children: (
				<Button
					onClick={ () => {
						dispatch( successNotice( 'The Extra Button was clicked', { duration: 5000 } ) );
					} }
				>
					The Extra Button
				</Button>
			),
		},
	];

	return (
		<div>
			<Card>
				<MultipleChoiceQuestion
					name="question-1"
					answers={ answers }
					question="Please choose one of the following:"
					onAnswerChange={ ( answer, text ) => {
						setSelectedAnswer( answer );
						setAnswerText( text || '' );
					} }
				/>
			</Card>
			<Card>
				<CardHeading>Selected Answer</CardHeading>
				<p>
					<b>Selected Answer is: </b>
					{ selectedAnswer ? selectedAnswer : 'No Answer Currently Selected' }
				</p>
				<p>
					<b>Answer Text is: </b>
					{ answerText }
				</p>
			</Card>
		</div>
	);
}

MultipleChoiceQuestionExamples.displayName = 'MultipleChoiceQuestion';

export default MultipleChoiceQuestionExamples;