68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import { MAX_ANSWER_LENGTH } from 'common/answer'
|
|
import Textarea from 'react-expanding-textarea'
|
|
import { XIcon } from '@heroicons/react/solid'
|
|
import { Col } from '../layout/col'
|
|
import { Row } from '../layout/row'
|
|
|
|
export function MultipleChoiceAnswers(props: {
|
|
answers: string[]
|
|
setAnswers: (answers: string[]) => void
|
|
}) {
|
|
const { answers, setAnswers } = props
|
|
|
|
const setAnswer = (i: number, answer: string) => {
|
|
const newAnswers = setElement(answers, i, answer)
|
|
setAnswers(newAnswers)
|
|
}
|
|
|
|
const removeAnswer = (i: number) => {
|
|
const newAnswers = answers.slice(0, i).concat(answers.slice(i + 1))
|
|
setAnswers(newAnswers)
|
|
}
|
|
|
|
const addAnswer = () => setAnswer(answers.length, '')
|
|
|
|
return (
|
|
<Col>
|
|
{answers.map((answer, i) => (
|
|
<Row className="mb-2 items-center gap-2 align-middle">
|
|
{i + 1}.{' '}
|
|
<Textarea
|
|
value={answer}
|
|
onChange={(e) => setAnswer(i, e.target.value)}
|
|
className="textarea textarea-bordered ml-2 w-full resize-none"
|
|
placeholder="Type your answer..."
|
|
rows={1}
|
|
maxLength={MAX_ANSWER_LENGTH}
|
|
/>
|
|
{answers.length > 2 && (
|
|
<button
|
|
onClick={() => removeAnswer(i)}
|
|
type="button"
|
|
className="inline-flex items-center rounded-full border border-gray-300 bg-white p-1 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
|
>
|
|
<XIcon className="h-5 w-5" aria-hidden="true" />
|
|
</button>
|
|
)}
|
|
</Row>
|
|
))}
|
|
|
|
<Row className="justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={addAnswer}
|
|
className="inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
|
>
|
|
Add answer
|
|
</button>
|
|
</Row>
|
|
</Col>
|
|
)
|
|
}
|
|
|
|
const setElement = <T,>(array: T[], i: number, elem: T) => {
|
|
const newArray = array.concat()
|
|
newArray[i] = elem
|
|
return newArray
|
|
}
|