73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
'use client'
|
|
import type { ReactNode } from 'react'
|
|
import type { RatingOptions } from '@/lib/types'
|
|
|
|
interface RatingScaleProps {
|
|
name: string
|
|
legend: ReactNode
|
|
ratingOptions: RatingOptions
|
|
value: number | undefined
|
|
required: boolean
|
|
onChange: (value: number) => void
|
|
error?: string
|
|
}
|
|
|
|
export function RatingScale({
|
|
name,
|
|
legend,
|
|
ratingOptions,
|
|
value,
|
|
required,
|
|
onChange,
|
|
error,
|
|
}: RatingScaleProps) {
|
|
const { min, max, min_label, max_label } = ratingOptions
|
|
const steps = Array.from({ length: max - min + 1 }, (_, i) => min + i)
|
|
|
|
return (
|
|
<fieldset className="question-fieldset">
|
|
<legend className="question-legend">
|
|
{legend}
|
|
{required && <span className="required-mark" aria-hidden="true"> *</span>}
|
|
{required && <span className="sr-only"> (obligatorio)</span>}
|
|
</legend>
|
|
<div className="rating-wrapper" role="group" aria-label={`Escala ${min} a ${max}`}>
|
|
<span className="rating-label rating-label-min" aria-hidden="true">
|
|
{min_label}
|
|
</span>
|
|
<div className="rating-steps">
|
|
{steps.map((step) => {
|
|
const id = `${name}_${step}`
|
|
return (
|
|
<label key={step} className="rating-step" htmlFor={id}>
|
|
<input
|
|
type="radio"
|
|
id={id}
|
|
name={name}
|
|
value={step}
|
|
checked={value === step}
|
|
onChange={() => onChange(step)}
|
|
aria-required={required}
|
|
aria-label={`${step} — ${step === min ? min_label : step === max ? max_label : ''}`}
|
|
className="rating-input sr-only"
|
|
/>
|
|
<span className="rating-dot" aria-hidden="true">
|
|
{step}
|
|
</span>
|
|
</label>
|
|
)
|
|
})}
|
|
</div>
|
|
<span className="rating-label rating-label-max" aria-hidden="true">
|
|
{max_label}
|
|
</span>
|
|
</div>
|
|
{error && (
|
|
<p role="alert" className="field-error" id={`${name}-error`}>
|
|
{error}
|
|
</p>
|
|
)}
|
|
</fieldset>
|
|
)
|
|
}
|