misc_pterodactyl-panel/resources/scripts/components/admin/nodes/DatabaseSelect.tsx

56 lines
1.9 KiB
TypeScript
Raw Normal View History

import React, { useState } from 'react';
import { useFormikContext } from 'formik';
import { Database } from '@/api/admin/databases/getDatabases';
import searchDatabases from '@/api/admin/databases/searchDatabases';
import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
export default ({ selected }: { selected: Database | null }) => {
const context = useFormikContext();
const [ database, setDatabase ] = useState<Database | null>(selected);
const [ databases, setDatabases ] = useState<Database[] | null>(null);
const onSearch = (query: string): Promise<void> => {
return new Promise((resolve, reject) => {
searchDatabases({ name: query })
.then(databases => {
setDatabases(databases);
return resolve();
})
.catch(reject);
});
};
const onSelect = (database: Database | null) => {
setDatabase(database);
context.setFieldValue('databaseHostId', database?.id || null);
};
const getSelectedText = (database: Database | null): string | undefined => {
return database?.name;
2021-02-16 01:48:10 +00:00
};
return (
<SearchableSelect
id={'databaseId'}
name={'databaseId'}
label={'Database'}
placeholder={'Select a database...'}
items={databases}
2021-02-16 01:48:10 +00:00
selected={database}
setSelected={setDatabase}
setItems={setDatabases}
onSearch={onSearch}
onSelect={onSelect}
2021-02-16 01:48:10 +00:00
getSelectedText={getSelectedText}
nullable
>
{databases?.map(d => (
<Option key={d.id} selectId={'databaseId'} id={d.id} item={d} active={d.id === database?.id}>
2021-02-16 01:48:10 +00:00
{d.name}
</Option>
))}
</SearchableSelect>
);
};