51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { useState } from 'react';
|
|
import { Select, SelectProps, ListItem, Text } from '@umami/react-zen';
|
|
import { useUserWebsitesQuery, useWebsiteQuery, useNavigation } from '@/components/hooks';
|
|
import { ButtonProps } from 'react-basics';
|
|
|
|
export function WebsiteSelect({
|
|
websiteId,
|
|
teamId,
|
|
buttonProps,
|
|
...props
|
|
}: {
|
|
websiteId?: string;
|
|
teamId?: string;
|
|
buttonProps?: ButtonProps;
|
|
} & SelectProps) {
|
|
const { router, renderUrl } = useNavigation();
|
|
const [search, setSearch] = useState('');
|
|
const { data: website } = useWebsiteQuery(websiteId);
|
|
const { data, isLoading } = useUserWebsitesQuery({ teamId }, { search, pageSize: 5 });
|
|
|
|
const handleSelect = (value: any) => {
|
|
router.push(renderUrl(`/websites/${value}`));
|
|
};
|
|
|
|
const handleSearch = (value: string) => {
|
|
setSearch(value);
|
|
};
|
|
|
|
return (
|
|
<Select
|
|
{...props}
|
|
placeholder=""
|
|
items={data?.['data'] || []}
|
|
value={websiteId}
|
|
isLoading={isLoading}
|
|
buttonProps={{ ...buttonProps }}
|
|
allowSearch={true}
|
|
searchValue={search}
|
|
onSearch={handleSearch}
|
|
onChange={handleSelect}
|
|
renderValue={() => (
|
|
<Text truncate weight="bold" style={{ maxWidth: 160, lineHeight: 1 }}>
|
|
{website?.name}
|
|
</Text>
|
|
)}
|
|
>
|
|
{({ id, name }: any) => <ListItem key={id}>{name}</ListItem>}
|
|
</Select>
|
|
);
|
|
}
|