cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ refactor: use dialog overlay instead of div

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-03-06 13:09:23 +07:00
parent b75957929a
commit 90295fd620
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
1 changed files with 24 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx
View File

@ -26,28 +26,23 @@ export const ProjectSearchBarDialog = ({
const client = useGQLClient(); const client = useGQLClient();
const navigate = useNavigate(); const navigate = useNavigate();
const { const { getInputProps, getItemProps, inputValue, setInputValue } =
getMenuProps, useCombobox({
getInputProps, items,
getItemProps, itemToString(item) {
inputValue, return item ? item.name : '';
setInputValue, },
} = useCombobox({ selectedItem,
items, onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
itemToString(item) { if (newSelectedItem) {
return item ? item.name : ''; setSelectedItem(newSelectedItem);
}, onClickItem?.(newSelectedItem);
selectedItem, navigate(
onSelectedItemChange: ({ selectedItem: newSelectedItem }) => { `/${newSelectedItem.organization.slug}/projects/${newSelectedItem.id}`,
if (newSelectedItem) { );
setSelectedItem(newSelectedItem); }
onClickItem?.(newSelectedItem); },
navigate( });
`/${newSelectedItem.organization.slug}/projects/${newSelectedItem.id}`,
);
}
},
});
const debouncedInputValue = useDebounce<string>(inputValue, 500); const debouncedInputValue = useDebounce<string>(inputValue, 500);
@ -74,9 +69,10 @@ export const ProjectSearchBarDialog = ({
return ( return (
<Dialog.Root {...props}> <Dialog.Root {...props}>
<Dialog.Portal> <Dialog.Portal>
<div className="bg-base-bg fixed inset-0 md:hidden overflow-y-auto"> <Dialog.Overlay className="bg-base-bg fixed inset-0 md:hidden overflow-y-auto" />
<Dialog.Content> <Dialog.Content>
<div className="py-2.5 px-4 w-full flex items-center justify-between border-b border-border-separator/[0.06]"> <div className="h-full flex flex-col fixed top-0 inset-0">
<div className="py-2.5 px-4 flex items-center justify-between border-b border-border-separator/[0.06]">
<Input <Input
{...getInputProps()} {...getInputProps()}
leftIcon={<SearchIcon />} leftIcon={<SearchIcon />}
@ -89,7 +85,7 @@ export const ProjectSearchBarDialog = ({
</Button> </Button>
</div> </div>
{/* Content */} {/* Content */}
<div {...getMenuProps()} className="flex flex-col gap-1 px-2 py-2"> <div className="flex flex-col gap-1 px-2 py-2">
{items.length > 0 {items.length > 0
? items.map((item, index) => ( ? items.map((item, index) => (
<> <>
@ -107,8 +103,8 @@ export const ProjectSearchBarDialog = ({
)) ))
: inputValue && <ProjectSearchBarEmpty />} : inputValue && <ProjectSearchBarEmpty />}
</div> </div>
</Dialog.Content> </div>
</div> </Dialog.Content>
</Dialog.Portal> </Dialog.Portal>
</Dialog.Root> </Dialog.Root>
); );