mirror of
https://github.com/Hackdex-App/hackdex-website.git
synced 2026-03-21 17:54:09 -05:00
Add filtering support to Select component
This commit is contained in:
Jared Schoeny
parent
06cc2a558e
commit
debded0bdb
|
|
@ -774,6 +774,7 @@ export default function HackSubmitForm({
|
|||
<label className="text-sm text-foreground/80">Base ROM <span className="text-red-500">*</span></label>
|
||||
{!isDummy ? (
|
||||
<Select
|
||||
enableFilter
|
||||
value={baseRom}
|
||||
onChange={setBaseRom}
|
||||
disabled={!platform}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import React, { Fragment } from "react";
|
||||
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, Transition } from "@headlessui/react";
|
||||
import React, { Fragment, useState } from "react";
|
||||
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, Transition, Combobox, ComboboxInput, ComboboxOptions, ComboboxOption } from "@headlessui/react";
|
||||
import { FiChevronDown, FiCheck } from "react-icons/fi";
|
||||
|
||||
export interface SelectOption {
|
||||
|
|
@ -9,12 +9,18 @@ export interface SelectOption {
|
|||
label: string;
|
||||
disabled?: boolean;
|
||||
icon?: React.ComponentType<{ className?: string }>;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface SelectDivider {
|
||||
type: "divider";
|
||||
label?: string;
|
||||
}
|
||||
|
||||
interface SelectProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
options: SelectOption[];
|
||||
options: (SelectOption | SelectDivider)[];
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
|
|
@ -22,6 +28,24 @@ interface SelectProps {
|
|||
dropdownAlign?: "left" | "right";
|
||||
id?: string;
|
||||
name?: string;
|
||||
enableFilter?: boolean;
|
||||
}
|
||||
|
||||
function DividerContent({ divider, index }: { divider: SelectDivider; index: number }) {
|
||||
return (
|
||||
<div key={`divider-${index}`} className="relative py-2 pointer-events-none">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-[var(--border)]" />
|
||||
</div>
|
||||
{divider.label && (
|
||||
<div className="relative flex justify-center">
|
||||
<span className="bg-background/95 px-2 text-xs text-foreground/60">
|
||||
{divider.label}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Select({
|
||||
|
|
@ -35,9 +59,118 @@ export default function Select({
|
|||
dropdownAlign = "left",
|
||||
id,
|
||||
name,
|
||||
enableFilter = false,
|
||||
}: SelectProps) {
|
||||
const selectedOption = options.find((opt) => opt.value === value);
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
// Separate options and dividers
|
||||
const actualOptions = options.filter((opt): opt is SelectOption => "value" in opt);
|
||||
const selectedOption = actualOptions.find((opt) => opt.value === value);
|
||||
|
||||
// Filter function for Combobox
|
||||
const filterOptions = (query: string) => {
|
||||
if (!query) return options;
|
||||
|
||||
// When filtering, exclude dividers and return only filtered options
|
||||
return actualOptions.filter((opt) =>
|
||||
opt.label.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
if (enableFilter) {
|
||||
// Use Combobox for filterable select
|
||||
return (
|
||||
<Combobox
|
||||
value={value}
|
||||
onChange={(newValue) => {
|
||||
onChange(newValue || "");
|
||||
setQuery("");
|
||||
}}
|
||||
disabled={disabled}
|
||||
immediate
|
||||
>
|
||||
{({ open }) => (
|
||||
<div className="relative">
|
||||
<ComboboxInput
|
||||
id={id}
|
||||
displayValue={() => selectedOption?.label ?? ""}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
className={`relative h-11 w-full rounded-md bg-[var(--surface-2)] px-3 pr-10 text-left text-sm ring-1 ring-inset ring-[var(--border)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)] disabled:cursor-not-allowed disabled:opacity-50 ${
|
||||
!selectedOption ? "text-foreground/60" : ""
|
||||
} ${className}`}
|
||||
/>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<FiChevronDown className={`h-4 w-4 text-foreground/60 transition-transform ${open ? "rotate-180" : ""}`} aria-hidden="true" />
|
||||
</span>
|
||||
{name && <input type="hidden" name={name} value={value} />}
|
||||
<Transition
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<ComboboxOptions className={`absolute z-50 mt-1 max-h-60 min-w-full max-w-[400px] w-max overflow-auto rounded-md bg-background/95 backdrop-blur-sm py-1 text-sm shadow-lg ring-1 ring-[var(--border)] focus:outline-none ${dropdownAlign === "right" ? "right-0" : ""} ${dropdownClassName}`}>
|
||||
{(() => {
|
||||
const displayItems = filterOptions(query);
|
||||
|
||||
if (displayItems.length === 0) {
|
||||
return (
|
||||
<div className="py-2 px-4 text-foreground/60 text-center">No results found</div>
|
||||
);
|
||||
}
|
||||
|
||||
return displayItems.map((item, index) => {
|
||||
if ("type" in item && item.type === "divider") {
|
||||
return <DividerContent key={`divider-${index}`} divider={item} index={index} />;
|
||||
}
|
||||
|
||||
const option = item as SelectOption;
|
||||
const Icon = option.icon;
|
||||
return (
|
||||
<ComboboxOption
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
disabled={option.disabled}
|
||||
className={({ focus }) =>
|
||||
`relative cursor-pointer select-none py-2 pl-10 pr-4 ${
|
||||
focus ? "bg-black/5 dark:bg-white/10" : ""
|
||||
} ${option.disabled ? "opacity-50 cursor-not-allowed" : ""}`
|
||||
}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
<span className={`flex items-center gap-2 min-w-0 ${selected ? "font-medium" : "font-normal"}`}>
|
||||
{Icon && <Icon className="h-4 w-4 shrink-0" />}
|
||||
<span className="shrink-0">{option.label}</span>
|
||||
{option.description && (
|
||||
<span className="ml-auto text-xs text-foreground/40 pl-2 truncate min-w-0">
|
||||
{option.description}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
{selected && (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-foreground">
|
||||
<FiCheck className="h-4 w-4" aria-hidden="true" />
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</ComboboxOption>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
</ComboboxOptions>
|
||||
</Transition>
|
||||
</div>
|
||||
)}
|
||||
</Combobox>
|
||||
);
|
||||
}
|
||||
|
||||
// Use Listbox for non-filterable select
|
||||
return (
|
||||
<Listbox value={value} onChange={onChange} disabled={disabled}>
|
||||
{({ open }) => (
|
||||
|
|
@ -61,7 +194,12 @@ export default function Select({
|
|||
leaveTo="opacity-0"
|
||||
>
|
||||
<ListboxOptions className={`absolute z-50 mt-1 max-h-60 min-w-full max-w-[400px] w-max overflow-auto rounded-md bg-background/95 backdrop-blur-sm py-1 text-sm shadow-lg ring-1 ring-[var(--border)] focus:outline-none ${dropdownAlign === "right" ? "right-0" : ""} ${dropdownClassName}`}>
|
||||
{options.map((option) => {
|
||||
{options.map((item, index) => {
|
||||
if ("type" in item && item.type === "divider") {
|
||||
return <DividerContent key={`divider-${index}`} divider={item} index={index} />;
|
||||
}
|
||||
|
||||
const option = item as SelectOption;
|
||||
const Icon = option.icon;
|
||||
return (
|
||||
<ListboxOption
|
||||
|
|
@ -76,9 +214,14 @@ export default function Select({
|
|||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
<span className={`flex items-center gap-2 truncate ${selected ? "font-medium" : "font-normal"}`}>
|
||||
<span className={`flex items-center gap-2 min-w-0 ${selected ? "font-medium" : "font-normal"}`}>
|
||||
{Icon && <Icon className="h-4 w-4 shrink-0" />}
|
||||
{option.label}
|
||||
<span className="shrink-0">{option.label}</span>
|
||||
{option.description && (
|
||||
<span className="ml-auto text-xs text-foreground/40 pl-2 truncate min-w-0">
|
||||
{option.description}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
{selected && (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-foreground">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user