Thaïs
93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
import { useRef } from 'react';
|
|
import { useTheme } from '@emotion/react';
|
|
|
|
import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
|
|
import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
|
|
import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
|
|
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
|
|
import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
|
|
import { IconPlus } from '@/ui/icon';
|
|
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
|
|
import { isDefined } from '~/utils/isDefined';
|
|
|
|
import { useEntitySelectSearch } from '../hooks/useEntitySelectSearch';
|
|
import { EntityForSelect } from '../types/EntityForSelect';
|
|
|
|
import { SingleEntitySelectBase } from './SingleEntitySelectBase';
|
|
|
|
export type EntitiesForSingleEntitySelect<
|
|
CustomEntityForSelect extends EntityForSelect,
|
|
> = {
|
|
loading: boolean;
|
|
selectedEntity: CustomEntityForSelect;
|
|
entitiesToSelect: CustomEntityForSelect[];
|
|
};
|
|
|
|
export function SingleEntitySelect<
|
|
CustomEntityForSelect extends EntityForSelect,
|
|
>({
|
|
entities,
|
|
onEntitySelected,
|
|
onCreate,
|
|
onCancel,
|
|
width,
|
|
disableBackgroundBlur = false,
|
|
}: {
|
|
onCancel?: () => void;
|
|
onCreate?: () => void;
|
|
entities: EntitiesForSingleEntitySelect<CustomEntityForSelect>;
|
|
onEntitySelected: (entity: CustomEntityForSelect | null | undefined) => void;
|
|
disableBackgroundBlur?: boolean;
|
|
width?: number;
|
|
}) {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const theme = useTheme();
|
|
|
|
const { searchFilter, handleSearchFilterChange } = useEntitySelectSearch();
|
|
|
|
const showCreateButton = isDefined(onCreate) && searchFilter !== '';
|
|
|
|
useListenClickOutside({
|
|
refs: [containerRef],
|
|
callback: (event) => {
|
|
event.stopImmediatePropagation();
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
|
|
onCancel?.();
|
|
},
|
|
});
|
|
|
|
return (
|
|
<DropdownMenu
|
|
disableBlur={disableBackgroundBlur}
|
|
ref={containerRef}
|
|
width={width}
|
|
>
|
|
<DropdownMenuInput
|
|
value={searchFilter}
|
|
onChange={handleSearchFilterChange}
|
|
autoFocus
|
|
/>
|
|
<DropdownMenuSeparator />
|
|
<SingleEntitySelectBase
|
|
entities={entities}
|
|
onEntitySelected={onEntitySelected}
|
|
onCancel={onCancel}
|
|
/>
|
|
{showCreateButton && (
|
|
<>
|
|
<DropdownMenuItemsContainer hasMaxHeight>
|
|
<DropdownMenuItem onClick={onCreate}>
|
|
<IconPlus size={theme.icon.size.md} />
|
|
Add New
|
|
</DropdownMenuItem>
|
|
</DropdownMenuItemsContainer>
|
|
<DropdownMenuSeparator />
|
|
</>
|
|
)}
|
|
</DropdownMenu>
|
|
);
|
|
}
|