47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useFormikContext } from 'formik';
|
|
import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
|
|
import { Node, searchNodes } from '@/api/admin/node';
|
|
|
|
export default ({ selected }: { selected?: Node }) => {
|
|
const context = useFormikContext();
|
|
|
|
const [ node, setNode ] = useState<Node | null>(selected || null);
|
|
const [ nodes, setNodes ] = useState<Node[] | null>(null);
|
|
|
|
const onSearch = async (query: string) => {
|
|
setNodes(
|
|
await searchNodes({ filters: { name: query } }),
|
|
);
|
|
};
|
|
|
|
const onSelect = (node: Node | null) => {
|
|
setNode(node);
|
|
context.setFieldValue('ownerId', 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>
|
|
);
|
|
};
|