Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

admin(ui): fix up SearchableSelect.tsx

Browse source
This commit is contained in:
Matthew Penner 2021-02-15 18:48:10 -07:00
parent f790404845
commit 3971c4499d
7 changed files with 157 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

46
resources/scripts/components/admin/nodes/DatabaseSelect.tsx
View file

@ -1,11 +1,10 @@
import React, { useState } from 'react';
import SearchableSelect from '@/components/elements/SearchableSelect';
import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
import searchDatabases from '@/api/admin/databases/searchDatabases';
import { Database } from '@/api/admin/databases/getDatabases';
import tw from 'twin.macro';
export default () => {
const [ database, setDatabase ] = useState<Database | null>(null);
export default ({ selected }: { selected?: Database | null }) => {
const [ database, setDatabase ] = useState<Database | null>(selected || null);
const [ databases, setDatabases ] = useState<Database[]>([]);
const onSearch = (query: string): Promise<void> => {
@ -21,47 +20,26 @@ export default () => {
setDatabase(database);
};
const getSelectedText = (database: Database | null): string => {
return database?.name || '';
};
return (
<SearchableSelect
id="database"
name="Database"
items={databases}
selected={database}
setItems={setDatabases}
onSearch={onSearch}
onSelect={onSelect}
getSelectedText={getSelectedText}
nullable
>
{databases.map(d => (
d.id === database?.id ?
<li key={d.id} id={'listbox-item-' + d.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={(e) => {
e.stopPropagation();
// selectItem(d);
}}
>
<div css={tw`flex items-center`}>
<span css={tw`block font-medium truncate`}>
{d.name}
</span>
</div>
<span css={tw`absolute inset-y-0 right-0 flex items-center pr-4`}>
<svg css={tw`h-5 w-5 text-primary-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path clipRule="evenodd" fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
</svg>
</span>
</li>
:
<li key={d.id} id={'listbox-item-' + d.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={(e) => {
e.stopPropagation();
// selectItem(d);
}}
>
<div css={tw`flex items-center`}>
<span css={tw`block font-normal truncate`}>
{d.name}
</span>
</div>
</li>
<Option key={d.id} id={d.id} item={d} active={d.id === database?.id}>
{d.name}
</Option>
))}
</SearchableSelect>
);