Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
3.2 kB · 97 lines
TSX
at develop
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798import { q } from "@thorium/context/AppContext";import { Icon } from "@thorium/ui/Icon";import { cn } from "@thorium/utils/cn";import { matchSorter } from "match-sorter";import { useState } from "react";import { Button, ComboBox, Group, Input, ListBox, ListBoxItem, Popover,} from "react-aria-components";
export function EventCombobox({ value, onChange, placeholder = "Events",}: { value: { name: string; event: string; input?: any; } | null; onChange: (value: { name: string; event: string; input?: any }) => void; placeholder?: string; className?: string;}) { const [availableEvents] = q.thorium.events.useNetRequest(); const [query, setQuery] = useState(value?.event || ""); const filteredEvents = matchSorter(availableEvents, query, { keys: ["name", "event"], }).map((a) => ({ ...a, key: a.event }));
return ( <ComboBox className="group flex flex-col gap-1" inputValue={query} onInputChange={setQuery} selectedKey={value?.event} allowsCustomValue={false} onSelectionChange={(key) => { const event = availableEvents.find((a) => a.event === key)!; if (!event) return; onChange(event); setQuery(event.name); }} onOpenChange={(open) => { setQuery(open ? "" : value?.name || ""); }} aria-label={placeholder} > <Group className="flex h-6 min-h-6 rounded-lg border border-teal-300 shadow-md ring-1 ring-black/10 transition focus-visible:ring-2 focus-visible:ring-black"> <Input placeholder={placeholder} className="w-full flex-1 border-none bg-transparent py-2 pr-0 pl-3 text-xs leading-5 text-teal-300 outline-none placeholder:font-semibold placeholder:text-teal-300 focus:ring-0" /> <Button className="pressed:bg-teal-300/50 flex cursor-pointer items-center rounded-r-lg border-0 border-l border-solid border-l-teal-300 bg-teal-300/20 px-3 text-teal-300 transition hover:bg-teal-300/50"> <Icon name="chevrons-up-down" /> </Button> </Group> <Popover className="entering:animate-in entering:fade-in exiting:animate-out exiting:fade-out max-h-60 min-w-(--trigger-width) overflow-auto rounded-md border border-gray-400 bg-gray-900/90 text-base shadow-lg ring-1 ring-black/5"> <ListBox className="p-1 outline-hidden" items={filteredEvents}> {(item) => ( <ListBoxItem textValue={item.name} key={item.key} className="group flex cursor-default items-center gap-0.5 rounded-sm text-gray-900 outline-hidden select-none focus:bg-sky-600 focus:text-white" > {({ isSelected, isFocusVisible, isHovered }) => ( <> <span className={cn( "flex-1 flex items-center gap-1 truncate font-normal group-selected:font-medium text-white py-1 pl-1 pr-2 rounded", { "text-white bg-teal-300": isFocusVisible, "bg-teal-400/40": isHovered, }, )} > {item.name} </span> {isSelected && ( <span className="flex w-5 items-center text-teal-300 group-focus:text-white"> <Icon name="check" /> </span> )} </> )} </ListBoxItem> )} </ListBox> </Popover> </ComboBox> );}