ars9
32beec2229
- add Timestamp component with moment relative time and ISO tooltip - add Timestamp stories (JustNow, MinutesAgo, HoursAgo, DaysAgo, MonthsAgo) - add ESLint 10 with typescript-eslint, react-hooks, react-refresh, prettier - add Prettier config with singleQuote, semi, trailingComma all, printWidth 100 - add lint, lint:fix, format, test:storybook scripts to package.json - fix react-hooks/set-state-in-effect in all page components - auto-fix 113 Prettier formatting issues across src and .storybook
80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import React, { useId } from 'react';
|
|
import styles from './Select.module.css';
|
|
|
|
export interface SelectOption {
|
|
value: string;
|
|
label: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'id'> {
|
|
label?: string;
|
|
hint?: string;
|
|
error?: string;
|
|
options: SelectOption[];
|
|
placeholder?: string;
|
|
}
|
|
|
|
export function Select({
|
|
label,
|
|
hint,
|
|
error,
|
|
options,
|
|
placeholder,
|
|
className,
|
|
...props
|
|
}: SelectProps) {
|
|
const id = useId();
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
{label && (
|
|
<label htmlFor={id} className={styles.label}>
|
|
{label}
|
|
</label>
|
|
)}
|
|
<div className={styles.control}>
|
|
<select
|
|
id={id}
|
|
className={[styles.select, error ? styles.hasError : '', className]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
aria-describedby={error ? `${id}-error` : hint ? `${id}-hint` : undefined}
|
|
aria-invalid={error ? true : undefined}
|
|
{...props}
|
|
>
|
|
{placeholder && (
|
|
<option value="" disabled>
|
|
{placeholder}
|
|
</option>
|
|
)}
|
|
{options.map((opt) => (
|
|
<option key={opt.value} value={opt.value} disabled={opt.disabled}>
|
|
{opt.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<span className={styles.chevron} aria-hidden="true">
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
|
<path
|
|
d="M2 4L6 8L10 4"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
{error ? (
|
|
<span id={`${id}-error`} className={styles.error} role="alert">
|
|
{error}
|
|
</span>
|
|
) : hint ? (
|
|
<span id={`${id}-hint`} className={styles.hint}>
|
|
{hint}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|