DMC/studentportalen
1
1
Fork 0
Code Issues 50 Pull Requests 1 Actions Projects 1 Wiki Activity

List components #31

Merged
stne3960 merged 68 commits from list_item into main 2025-12-18 12:41:13 +01:00
Conversation 12 Commits 68 Files Changed 8 +76 -63
1 changed files with 76 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 99a6d9bde5 - Show all commits

47
frontend/src/components/ParticipantPicker/ParticipantPicker.tsx
View File

@ -1,12 +1,19 @@
import Combobox, { type ComboboxOption, type ComboboxSize } from '../Combobox/Combobox'; import type { HTMLAttributes } from "react";
import ListCard from '../ListCard/ListCard'; import clsx from "clsx";
import Combobox, {
type ComboboxOption,
type ComboboxSize,
} from "../Combobox/Combobox";
import ListCard from "../ListCard/ListCard";
export interface ParticipantPickerProps { export interface ParticipantPickerProps
extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
options: ComboboxOption[]; options: ComboboxOption[];
value: string[]; value: string[];
onChange: (value: string[]) => void; onChange: (value: string[]) => void;
placeholder?: string; placeholder?: string;
label?: string; label: string;
hideLabel?: boolean;
noResultsText?: string; noResultsText?: string;
size?: ComboboxSize; size?: ComboboxSize;
fullWidth?: boolean; fullWidth?: boolean;
@ -16,22 +23,26 @@ export interface ParticipantPickerProps {
} }
const widthClasses: Record<ComboboxSize, string> = { const widthClasses: Record<ComboboxSize, string> = {
sm: 'w-(--text-input-default-width-md)', sm: "w-(--text-input-default-width-md)",
md: 'w-(--text-input-default-width-md)', md: "w-(--text-input-default-width-md)",
lg: 'w-(--text-input-default-width-lg)', lg: "w-(--text-input-default-width-lg)",
}; };
export default function ParticipantPicker({ export default function ParticipantPicker({
options, options,
value, value,
onChange, onChange,
placeholder = 'Sök...', placeholder = "Sök...",
label, label,
noResultsText = 'Inga resultat', hideLabel = false,
size = 'md', noResultsText = "Inga resultat",
size = "md",
fullWidth = false, fullWidth = false,
customWidth, customWidth,
onSearchChange, onSearchChange,
className,
style,
...props
}: ParticipantPickerProps) { }: ParticipantPickerProps) {
const handleRemove = (valueToRemove: string) => { const handleRemove = (valueToRemove: string) => {
onChange(value.filter((v) => v !== valueToRemove)); onChange(value.filter((v) => v !== valueToRemove));
@ -39,21 +50,23 @@ export default function ParticipantPicker({
const selectedOptions = options.filter((opt) => value.includes(opt.value)); const selectedOptions = options.filter((opt) => value.includes(opt.value));
const containerClasses = fullWidth const containerClasses = clsx(
? 'flex flex-col gap-(--spacing-sm) w-full' "flex flex-col gap-(--spacing-sm)",
: customWidth fullWidth && "w-full",
? 'flex flex-col gap-(--spacing-sm)' !fullWidth && !customWidth && widthClasses[size],
: `flex flex-col gap-(--spacing-sm) ${widthClasses[size]}`; className,
const widthStyle = customWidth ? { width: customWidth } : undefined; );
const widthStyle = customWidth ? { width: customWidth, ...style } : style;
return ( return (
<div className={containerClasses} style={widthStyle}> <div className={containerClasses} style={widthStyle} {...props}>
<Combobox <Combobox
options={options} options={options}
value={value} value={value}
onChange={(v) => onChange(v as string[])} onChange={(v) => onChange(v as string[])}
placeholder={placeholder} placeholder={placeholder}
label={label} label={label}
hideLabel={hideLabel}
noResultsText={noResultsText} noResultsText={noResultsText}
size={size} size={size}
fullWidth fullWidth