125 lines
3.2 KiB
TypeScript
125 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { LegacyRef } from 'react';
|
|
import { useFormStatus } from 'react-dom';
|
|
import Spinner from './Spinner';
|
|
import { clsx } from 'clsx/lite';
|
|
import { FieldSetType, AnnotatedTag } from '@/photo/form';
|
|
import TagInput from './TagInput';
|
|
|
|
export default function FieldSetWithStatus({
|
|
id,
|
|
label,
|
|
note,
|
|
error,
|
|
value,
|
|
onChange,
|
|
selectOptions,
|
|
selectOptionsDefaultLabel,
|
|
tagOptions,
|
|
placeholder,
|
|
loading,
|
|
required,
|
|
readOnly,
|
|
capitalize,
|
|
type = 'text',
|
|
inputRef,
|
|
}: {
|
|
id: string
|
|
label: string
|
|
note?: string
|
|
error?: string
|
|
value: string
|
|
onChange?: (value: string) => void
|
|
selectOptions?: { value: string, label: string }[]
|
|
selectOptionsDefaultLabel?: string
|
|
tagOptions?: AnnotatedTag []
|
|
placeholder?: string
|
|
loading?: boolean
|
|
required?: boolean
|
|
readOnly?: boolean
|
|
capitalize?: boolean
|
|
type?: FieldSetType
|
|
inputRef?: LegacyRef<HTMLInputElement>
|
|
}) {
|
|
const { pending } = useFormStatus();
|
|
|
|
return (
|
|
<div className="space-y-1">
|
|
<label
|
|
className="flex gap-2 items-center select-none"
|
|
htmlFor={id}
|
|
>
|
|
{label}
|
|
{note && !error &&
|
|
<span className="text-gray-400 dark:text-gray-600">
|
|
({note})
|
|
</span>}
|
|
{error &&
|
|
<span className="text-error">
|
|
{error}
|
|
</span>}
|
|
{required &&
|
|
<span className="text-gray-400 dark:text-gray-600">
|
|
Required
|
|
</span>}
|
|
{loading &&
|
|
<span className="translate-y-[1.5px]">
|
|
<Spinner />
|
|
</span>}
|
|
</label>
|
|
{selectOptions
|
|
? <select
|
|
id={id}
|
|
name={id}
|
|
value={value}
|
|
onChange={e => onChange?.(e.target.value)}
|
|
className={clsx(
|
|
'w-full',
|
|
clsx(Boolean(error) && 'error'),
|
|
// Use special class because `select` can't be readonly
|
|
readOnly || pending && 'disabled-select',
|
|
)}
|
|
>
|
|
{selectOptionsDefaultLabel &&
|
|
<option value="">{selectOptionsDefaultLabel}</option>}
|
|
{selectOptions.map(({ value: optionValue, label: optionLabel }) =>
|
|
<option
|
|
key={optionValue}
|
|
value={optionValue}
|
|
>
|
|
{optionLabel}
|
|
</option>)}
|
|
</select>
|
|
: tagOptions
|
|
? <TagInput
|
|
name={id}
|
|
value={value}
|
|
options={tagOptions}
|
|
onChange={onChange}
|
|
className={clsx(Boolean(error) && 'error')}
|
|
readOnly={readOnly || pending}
|
|
/>
|
|
: <input
|
|
ref={inputRef}
|
|
id={id}
|
|
name={id}
|
|
value={value}
|
|
checked={type === 'checkbox' ? value === 'true' : undefined}
|
|
placeholder={placeholder}
|
|
onChange={e => onChange?.(type === 'checkbox'
|
|
? e.target.value === 'true' ? 'false' : 'true'
|
|
: e.target.value)}
|
|
type={type}
|
|
autoComplete="off"
|
|
autoCapitalize={!capitalize ? 'off' : undefined}
|
|
readOnly={readOnly || pending}
|
|
className={clsx(
|
|
type === 'text' && 'w-full',
|
|
Boolean(error) && 'error',
|
|
)}
|
|
/>}
|
|
</div>
|
|
);
|
|
};
|