misc_pterodactyl-panel/resources/scripts/components/admin/servers/NodeSelect.tsx

45 lines
1.4 KiB
TypeScript
Raw Normal View History

import React, { useState } from 'react';
import { useFormikContext } from 'formik';
import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
import { Node, searchNodes } from '@/api/admin/node';
2021-10-29 06:04:28 +00:00
export default ({ node, setNode }: { node: Node | null, setNode: (_: Node | null) => void }) => {
const { setFieldValue } = useFormikContext();
const [ nodes, setNodes ] = useState<Node[] | null>(null);
const onSearch = async (query: string) => {
2021-10-29 06:04:28 +00:00
setNodes(await searchNodes({ filters: { name: query } }));
};
const onSelect = (node: Node | null) => {
setNode(node);
2021-10-29 06:04:28 +00:00
setFieldValue('nodeId', node?.id || null);
};
const getSelectedText = (node: Node | null): string => node?.name || '';
return (
<SearchableSelect
id={'nodeId'}
name={'nodeId'}
label={'Node'}
placeholder={'Select a node...'}
items={nodes}
selected={node}
setSelected={setNode}
setItems={setNodes}
onSearch={onSearch}
onSelect={onSelect}
getSelectedText={getSelectedText}
nullable
>
{nodes?.map(d => (
<Option key={d.id} selectId={'nodeId'} id={d.id} item={d} active={d.id === node?.id}>
{d.name}
</Option>
))}
</SearchableSelect>
);
};