45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
/**
|
|
* Autocomplete Dropdown
|
|
* Ball Studios <https://git.balls.studio>
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
interface Suggestion {
|
|
command: string;
|
|
description: string;
|
|
syntax: string;
|
|
dangerous: boolean;
|
|
danger_reason?: string;
|
|
plugin: string;
|
|
examples: string[];
|
|
}
|
|
|
|
interface Props {
|
|
suggestions: Suggestion[];
|
|
selectedIndex: number;
|
|
onSelect: (sug: Suggestion) => void;
|
|
}
|
|
|
|
export default function AutocompleteDropdown({ suggestions, selectedIndex, onSelect }: Props) {
|
|
return (
|
|
<ul className='addon-autocomplete-dropdown' role='listbox'>
|
|
{suggestions.map((sug, i) => (
|
|
<li
|
|
key={sug.command}
|
|
className={`addon-autocomplete-item ${i === selectedIndex ? 'active' : ''} ${sug.dangerous ? 'danger' : ''}`}
|
|
role='option'
|
|
aria-selected={i === selectedIndex}
|
|
onClick={() => onSelect(sug)}
|
|
onMouseDown={e => e.preventDefault()} // prevent blur
|
|
>
|
|
<span className='addon-ac-command'>/{sug.command}</span>
|
|
{sug.dangerous && <span className='addon-ac-danger-badge'>⚠ Danger</span>}
|
|
<span className='addon-ac-desc'>{sug.description}</span>
|
|
<span className='addon-ac-plugin'>{sug.plugin}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|