1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
import { ListItem, Row, Select, type SelectProps, Text } from '@umami/react-zen';
import { useState } from 'react';
import { Empty } from '@/components/common/Empty';
import {
useLoginQuery,
useMessages,
useUserWebsitesQuery,
useWebsiteQuery,
} from '@/components/hooks';
export function WebsiteSelect({
websiteId,
teamId,
onChange,
includeTeams,
...props
}: {
websiteId?: string;
teamId?: string;
includeTeams?: boolean;
} & SelectProps) {
const { formatMessage, messages } = useMessages();
const { data: website } = useWebsiteQuery(websiteId);
const [name, setName] = useState<string>(website?.name);
const [search, setSearch] = useState('');
const { user } = useLoginQuery();
const { data, isLoading } = useUserWebsitesQuery(
{ userId: user?.id, teamId },
{ search, pageSize: 10, includeTeams },
);
const listItems: { id: string; name: string }[] = data?.data || [];
const handleSearch = (value: string) => {
setSearch(value);
};
const handleOpenChange = () => {
setSearch('');
};
const handleChange = (id: string) => {
setName(listItems.find(item => item.id === id)?.name);
onChange(id);
};
const renderValue = () => {
return (
<Row maxWidth="160px">
<Text truncate>{name}</Text>
</Row>
);
};
return (
<Select
{...props}
items={listItems}
value={websiteId}
isLoading={isLoading}
allowSearch={true}
searchValue={search}
onSearch={handleSearch}
onChange={handleChange}
onOpenChange={handleOpenChange}
renderValue={renderValue}
listProps={{
renderEmptyState: () => <Empty message={formatMessage(messages.noResultsFound)} />,
style: { maxHeight: '400px' },
}}
>
{({ id, name }: any) => <ListItem key={id}>{name}</ListItem>}
</Select>
);
}
|