68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
|
|
import { usePlatformLanguage } from "../i18n/LanguageContext";
|
|
|
|
export type SelectionListProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> & {
|
|
children: ReactNode;
|
|
label?: string;
|
|
};
|
|
|
|
export type SelectionListItemProps = Omit<
|
|
ButtonHTMLAttributes<HTMLButtonElement>,
|
|
"aria-selected" | "children" | "role"
|
|
> & {
|
|
children: ReactNode;
|
|
selected: boolean;
|
|
};
|
|
|
|
export default function SelectionList({
|
|
"aria-label": ariaLabel,
|
|
children,
|
|
className = "",
|
|
label,
|
|
...props
|
|
}: SelectionListProps) {
|
|
const { translateText } = usePlatformLanguage();
|
|
const rootClassName = ["selection-list", className].filter(Boolean).join(" ");
|
|
|
|
return (
|
|
<div
|
|
{...props}
|
|
className={rootClassName}
|
|
role="listbox"
|
|
aria-label={label ? translateText(label) : ariaLabel}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SelectionListItem({
|
|
children,
|
|
className = "",
|
|
disabled = false,
|
|
selected,
|
|
type = "button",
|
|
...props
|
|
}: SelectionListItemProps) {
|
|
const itemClassName = [
|
|
"selection-list-item",
|
|
selected ? "is-selected" : "",
|
|
disabled ? "is-disabled" : "",
|
|
className
|
|
].filter(Boolean).join(" ");
|
|
|
|
return (
|
|
<button
|
|
{...props}
|
|
type={type}
|
|
role="option"
|
|
aria-selected={selected}
|
|
aria-disabled={disabled || undefined}
|
|
className={itemClassName}
|
|
disabled={disabled}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|