758 lines
21 KiB
TypeScript
758 lines
21 KiB
TypeScript
import {
|
|
Card,
|
|
Group,
|
|
type OptionsFilter,
|
|
Overlay,
|
|
Select,
|
|
Stack,
|
|
Text,
|
|
} from '@mantine/core';
|
|
import { useDisclosure, useElementSize } from '@mantine/hooks';
|
|
import { HelpModal, WeatherModal } from 'components';
|
|
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
|
|
import { useEffect, useState } from 'react';
|
|
import * as fa6 from 'react-icons/fa6';
|
|
import * as si from 'react-icons/si';
|
|
import * as vsc from 'react-icons/vsc';
|
|
import { selectClasses } from 'styles';
|
|
import type {
|
|
Application,
|
|
Bookmark,
|
|
CurrentWeather,
|
|
ExtendedForecast,
|
|
GuacamoleClient,
|
|
PersonalData,
|
|
Provider,
|
|
SearchHistoryItem,
|
|
} from 'types';
|
|
import RecommendedApplications from './components/RecommendedApplications';
|
|
import RecommendedBookmarks from './components/RecommendedBookmarks';
|
|
import RecommendedClients from './components/RecommendedClients';
|
|
import SearchSelectItem from './components/SearchSelectItem';
|
|
|
|
export default function Search({
|
|
current,
|
|
extendedForecast,
|
|
weatherModalOpened,
|
|
closeWeatherModal,
|
|
openWeatherModal,
|
|
position,
|
|
personal,
|
|
}: {
|
|
current: CurrentWeather;
|
|
extendedForecast: ExtendedForecast[];
|
|
weatherModalOpened: boolean;
|
|
closeWeatherModal: () => void;
|
|
openWeatherModal: () => void;
|
|
position: string;
|
|
personal: PersonalData;
|
|
}) {
|
|
const { ref, height } = useElementSize();
|
|
const allIcons: any = { ...fa6, ...vsc, ...si };
|
|
const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
|
|
endpoint: 'api/providers',
|
|
});
|
|
const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
|
|
endpoint: 'api/enabledApplications',
|
|
});
|
|
const { data: guacamoleHostData, isFetched: guacamoleHostDataIsFetched } = useQueryAPI({
|
|
endpoint: 'api/guacamoleHost',
|
|
});
|
|
const { data: guacamoleClientData, isFetched: guacamoleClientDataIsFetched } =
|
|
useQueryAPI({
|
|
endpoint: 'api/guacamoleClients',
|
|
});
|
|
const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
|
|
endpoint: 'api/bookmarks',
|
|
});
|
|
const { data: defaultProviderData, isFetched: defaultProviderDataIsFetched } =
|
|
useQueryAPI({
|
|
endpoint: 'api/providers/default',
|
|
});
|
|
const [providers, setProviders] = useState<Provider[]>([]);
|
|
const [guacamoleHost, setGuacamoleHost] = useState<string | undefined>('');
|
|
const [guacamoleClients, setGuacamoleClients] = useState<GuacamoleClient[]>([]);
|
|
const [filteredGuacamoleClients, setFilteredGuacamoleClients] = useState<
|
|
GuacamoleClient[]
|
|
>([]);
|
|
const [applications, setApplications] = useState<Application[]>([]);
|
|
const [filteredApplications, setFilteredApplications] = useState<Application[]>([]);
|
|
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
|
|
const searchEndpoint = 'api/searchHistory';
|
|
const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
|
|
endpoint: searchEndpoint,
|
|
});
|
|
const [searchHistory, setSearchHistory] = useState<SearchHistoryItem[]>([]);
|
|
const [filteredHistory, setFilteredHistory] = useState<SearchHistoryItem[]>([]);
|
|
const { mutateAsync } = useMutationAPI();
|
|
const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
|
|
useDisclosure(false);
|
|
const [dropdownOpened, { open: openDropdown, close: closeDropdown }] = useDisclosure();
|
|
const [listIndex, setListIndex] = useState(-1);
|
|
const {
|
|
isMobile,
|
|
urlPattern,
|
|
providerLabel,
|
|
setProviderLabel,
|
|
providerURL,
|
|
setProviderURL,
|
|
providerPrefix,
|
|
setProviderPrefix,
|
|
providerIcon,
|
|
setProviderIcon,
|
|
searchValue,
|
|
setSearchValue,
|
|
defaultProviderURL,
|
|
setDefaultProviderURL,
|
|
defaultProviderLabel,
|
|
setDefaultProviderLabel,
|
|
defaultProviderPrefix,
|
|
setDefaultProviderPrefix,
|
|
defaultProviderIcon,
|
|
setDefaultProviderIcon,
|
|
} = useCommonHooks();
|
|
const [placeholderValue, setPlaceholderValue] = useState<string>('');
|
|
const [value, setValue] = useState(0);
|
|
const [historyMultiplier, setHistoryMultiplier] = useState(1);
|
|
const Icon = allIcons[providerIcon];
|
|
|
|
const handleResetSearch = () => {
|
|
setSearchValue('');
|
|
setListIndex(-1);
|
|
setHistoryMultiplier(1);
|
|
setProviderLabel(defaultProviderLabel);
|
|
setProviderURL(defaultProviderURL);
|
|
};
|
|
|
|
const handleSearchHistoryItem = ({ option }: { option: SearchHistoryItem }) => {
|
|
const url =
|
|
providerData.find((provider: Provider) => provider.prefix === option.prefix)?.url ??
|
|
defaultProviderURL;
|
|
open(`${url}${option.searchTerm}`, '_self');
|
|
};
|
|
|
|
const handleAppLaunchItem = ({ option }: { option: any }) => {
|
|
const validUrl =
|
|
option.url.startsWith('http://') || option.url.startsWith('https://')
|
|
? option.url
|
|
: `http://${option.url}`;
|
|
open(validUrl, '_self');
|
|
};
|
|
|
|
const handleGuacamoleClientLaunchItem = ({ option }: { option: any }) => {
|
|
const validUrl = `${guacamoleHost}/#/client/${option.clientIdentifier}`;
|
|
open(validUrl, '_self');
|
|
};
|
|
|
|
const handleKeyPress = (item: any) => {
|
|
let option = '';
|
|
let subtext = '';
|
|
if (item.target.value.startsWith('/')) {
|
|
option =
|
|
item.target.value.substr(1, item.target.value.indexOf(' ') - 1) ??
|
|
item.target.value.substr(1);
|
|
subtext = item.target.value.substr(2 + option.length);
|
|
} else {
|
|
subtext = item.target.value;
|
|
}
|
|
if (item.key === 'Enter') {
|
|
if (providerLabel === 'Show help') {
|
|
setSearchValue('');
|
|
closeDropdown();
|
|
openProviderModal();
|
|
} else if (item.target.value.startsWith('/')) {
|
|
mutateAsync({
|
|
method: 'POST',
|
|
endpoint: searchEndpoint,
|
|
body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext },
|
|
}).then(() => {
|
|
open(`${providerURL}${subtext}`, '_self');
|
|
});
|
|
} else if (providerLabel === 'Show weather') {
|
|
openWeatherModal();
|
|
} else if (providerLabel.startsWith('Launch')) {
|
|
const url = applications.find(
|
|
(app: Application) =>
|
|
app.baseUrl.substring(1).toLowerCase() === item.target.value.substr(1),
|
|
)?.url;
|
|
const validUrl =
|
|
url?.startsWith('http://') || url?.startsWith('https://')
|
|
? url
|
|
: `http://${url}`;
|
|
open(validUrl, '_self');
|
|
} else if (providerLabel.startsWith('Connect to')) {
|
|
const client = guacamoleClients?.find(
|
|
(client: GuacamoleClient) =>
|
|
client.clientName.toLowerCase() === item.target.value.toLowerCase().substr(1),
|
|
);
|
|
open(`${guacamoleHost}/#/client/${client?.clientIdentifier}`, '_self');
|
|
} else if (urlPattern.test(item.target.value)) {
|
|
if (/^(https?:\/\/).*/i.test(item.target.value))
|
|
globalThis.location = item.target.value;
|
|
else open(`https://${item.target.value}`, '_self');
|
|
} else if (item.target.value.length > 0) {
|
|
mutateAsync({
|
|
method: 'POST',
|
|
endpoint: searchEndpoint,
|
|
body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext },
|
|
}).then(() => {
|
|
open(`${providerURL}${subtext}`, '_self');
|
|
});
|
|
} else {
|
|
open(`${providerURL}${subtext}`, '_self');
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleKeyUp = (item: any) => {
|
|
if (item.code === 'Escape') {
|
|
setListIndex(-1);
|
|
handleResetSearch();
|
|
setPlaceholderValue('');
|
|
if (dropdownOpened) {
|
|
closeDropdown();
|
|
}
|
|
}
|
|
if (item.code === 'ArrowDown' && !dropdownOpened) {
|
|
setListIndex(0);
|
|
openDropdown();
|
|
setPlaceholderValue(
|
|
searchHistory.length > 0
|
|
? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`
|
|
: '',
|
|
);
|
|
}
|
|
if (!providerLabel.startsWith('Invalid')) {
|
|
handleKeyPress(item);
|
|
}
|
|
if (dropdownOpened) {
|
|
if (searchValue === '') {
|
|
if (item.code === 'ArrowUp') {
|
|
if (listIndex === 0) {
|
|
setListIndex(9);
|
|
} else {
|
|
setListIndex(listIndex - 1);
|
|
}
|
|
} else if (item.code === 'ArrowDown') {
|
|
if (listIndex === 9) {
|
|
setListIndex(0);
|
|
} else {
|
|
setListIndex(listIndex + 1);
|
|
}
|
|
} else if (item.code === 'ArrowRight' || item.code === 'Tab') {
|
|
setSearchValue(
|
|
searchHistory.length > 0
|
|
? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`
|
|
: '',
|
|
);
|
|
setValue(searchHistory[listIndex].id ?? 0);
|
|
}
|
|
} else if (searchValue !== '') {
|
|
if (item.code === 'ArrowUp') {
|
|
if (listIndex === 0) {
|
|
setListIndex(filteredHistory.length - 1);
|
|
} else if (listIndex >= filteredHistory.length) {
|
|
setListIndex(filteredHistory.length - 1);
|
|
} else {
|
|
setListIndex(listIndex - 1);
|
|
}
|
|
} else if (item.code === 'ArrowDown') {
|
|
if (listIndex >= filteredHistory.length - 1) {
|
|
setListIndex(0);
|
|
} else if (value === 0) {
|
|
setListIndex(0);
|
|
setValue(-1);
|
|
} else {
|
|
setListIndex(listIndex + 1);
|
|
}
|
|
} else if (item.code === 'ArrowRight' || item.code === 'Tab') {
|
|
setSearchValue(
|
|
`${filteredHistory[listIndex].prefix} ${filteredHistory[listIndex].searchTerm}`,
|
|
);
|
|
setValue(filteredHistory[listIndex].id ?? 0);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const onInput = (item: any) => {
|
|
openDropdown();
|
|
setSearchValue(item.currentTarget.value);
|
|
if (
|
|
item.target.value === '/?' ||
|
|
item.target.value === '!help' ||
|
|
item.target.value === '/help' ||
|
|
item.target.value === '!h' ||
|
|
item.target.value === '/h'
|
|
) {
|
|
setProviderLabel('Show help');
|
|
} else if (item.target.value.startsWith('/g')) {
|
|
setProviderLabel('Google Search');
|
|
setProviderURL('https://www.google.com/search?q=');
|
|
setProviderPrefix('/g');
|
|
setProviderIcon('FaGoogle');
|
|
} else if (item.target.value.startsWith('/')) {
|
|
const provider = providers?.find(
|
|
(p: Provider) => p.prefix === item.target.value.split(' ')[0],
|
|
);
|
|
setProviderLabel(provider?.name ?? 'Invalid Search');
|
|
setProviderURL(provider?.url ?? '');
|
|
setProviderPrefix(provider?.prefix ?? '');
|
|
setProviderIcon(provider?.icon ?? '');
|
|
} else if (item.target.value.startsWith('!')) {
|
|
if (item.target.value === '!w' || item.target.value === '!weather') {
|
|
setProviderLabel('Show weather');
|
|
} else if (
|
|
applications?.find(
|
|
(app: Application) =>
|
|
app.baseUrl.substring(1).toLowerCase() === item.target.value.substr(1),
|
|
)
|
|
) {
|
|
setProviderLabel(`Launch ${item.target.value.substr(1)}`);
|
|
} else {
|
|
setProviderLabel('Invalid function');
|
|
}
|
|
} else if (item.target.value.startsWith('>') && personal.enableGuacamole === 1) {
|
|
if (
|
|
guacamoleClients?.find(
|
|
(client: GuacamoleClient) =>
|
|
client.clientName.toLowerCase() === item.target.value.toLowerCase().substr(1),
|
|
)
|
|
) {
|
|
setProviderLabel(`Connect to ${item.target.value.substr(1)}`);
|
|
} else {
|
|
setProviderLabel('Invalid connection');
|
|
}
|
|
} else {
|
|
setProviderLabel(defaultProviderLabel);
|
|
setProviderURL(defaultProviderURL);
|
|
setProviderPrefix(defaultProviderPrefix);
|
|
setProviderIcon(defaultProviderIcon);
|
|
}
|
|
};
|
|
|
|
const optionsFilter: OptionsFilter = ({ options, search }) => {
|
|
const splittedSearch = search.toLowerCase().trim().split(' ');
|
|
if (splittedSearch[0].startsWith('!')) {
|
|
return applicationData
|
|
.filter((app: Application) =>
|
|
app.name.toLowerCase().includes(splittedSearch[0].substring(1).toLowerCase()),
|
|
)
|
|
.map((app: Application) => {
|
|
return {
|
|
label: app.name,
|
|
value: app.baseUrl,
|
|
...app,
|
|
};
|
|
});
|
|
}
|
|
if (splittedSearch[0].startsWith('>') && personal.enableGuacamole === 1) {
|
|
return guacamoleClientData
|
|
.filter((guacamoleClient: GuacamoleClient) =>
|
|
guacamoleClient.clientName
|
|
.toLowerCase()
|
|
.includes(splittedSearch[0].substring(1).toLowerCase()),
|
|
)
|
|
.map((guacamoleClient: GuacamoleClient) => {
|
|
return {
|
|
label: guacamoleClient.clientName,
|
|
value: guacamoleClient.clientIdentifier,
|
|
...guacamoleClient,
|
|
};
|
|
});
|
|
}
|
|
const historyOptions = options
|
|
.filter((option: any) => {
|
|
return splittedSearch.every((searchWord) =>
|
|
option.value
|
|
.toLowerCase()
|
|
.trim()
|
|
.split(' ')
|
|
.some((word: string) => word.includes(searchWord)),
|
|
);
|
|
})
|
|
.slice(0, 10 * historyMultiplier);
|
|
|
|
if (historyOptions.length >= 10 * historyMultiplier) {
|
|
return [
|
|
...historyOptions,
|
|
{
|
|
label: 'Load more history...',
|
|
value: 'load',
|
|
id: 0,
|
|
dateTimeStamp: '',
|
|
prefix: '',
|
|
provider: '',
|
|
searchTerm: '',
|
|
},
|
|
];
|
|
}
|
|
return historyOptions;
|
|
};
|
|
|
|
const renderItem: any = (item: any) => {
|
|
const Icon = item.option.prefix
|
|
? allIcons[
|
|
item.option.prefix === '/g'
|
|
? 'FaGoogle'
|
|
: (providers.find((p: Provider) => p.prefix === item.option.prefix)?.icon ??
|
|
'')
|
|
]
|
|
: item.option.icon
|
|
? allIcons[item.option.icon]
|
|
: item.option.type && item.option.type === 'SSH'
|
|
? allIcons.FaTerminal
|
|
: item.option.type === 'RDP'
|
|
? allIcons.FaComputer
|
|
: allIcons.FaDesktop;
|
|
return (searchValue as string).startsWith('!') ? (
|
|
<Group
|
|
pos={'relative'}
|
|
m={0}
|
|
p={0}
|
|
gap={0}
|
|
justify='center'
|
|
w={'100%'}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
handleAppLaunchItem(item);
|
|
}}
|
|
>
|
|
<Text pos={'absolute'} left={'1rem'} c={'var(--mantine-color-accent-0)'}>
|
|
Launch
|
|
</Text>
|
|
{Icon && (
|
|
<Icon
|
|
style={{
|
|
color: 'var(--mantine-color-primary-0)',
|
|
height: '2rem',
|
|
width: '2rem',
|
|
}}
|
|
/>
|
|
)}
|
|
<Text pos={'absolute'} right={'1rem'} c={'var(--mantine-color-accent-0)'}>
|
|
{item.option.name}
|
|
</Text>
|
|
</Group>
|
|
) : (searchValue as string).startsWith('>') && personal.enableGuacamole === 1 ? (
|
|
<Group
|
|
pos={'relative'}
|
|
m={0}
|
|
p={0}
|
|
gap={0}
|
|
justify='center'
|
|
w={'100%'}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
handleGuacamoleClientLaunchItem(item);
|
|
}}
|
|
>
|
|
<Text pos={'absolute'} left={'1rem'} c={'var(--mantine-color-accent-0)'}>
|
|
Connect to
|
|
</Text>
|
|
<Icon
|
|
style={{
|
|
color: 'var(--mantine-color-primary-0)',
|
|
height: '2rem',
|
|
width: '2rem',
|
|
}}
|
|
/>
|
|
<Text pos={'absolute'} right={'1rem'} c={'var(--mantine-color-accent-0)'}>
|
|
{item.option.name || item.option.clientName || 'Invalid connection'}
|
|
</Text>
|
|
</Group>
|
|
) : item.option.value === 'load' ? (
|
|
<Group
|
|
pos={'relative'}
|
|
m={0}
|
|
p={0}
|
|
gap={0}
|
|
w={'100%'}
|
|
h={'2rem'}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setHistoryMultiplier((prev: number) => prev + 1);
|
|
}}
|
|
>
|
|
<Text
|
|
w={'100%'}
|
|
c={'var(--mantine-color-accent-0)'}
|
|
style={{ textAlign: 'center' }}
|
|
>
|
|
{item.option.label}
|
|
</Text>
|
|
</Group>
|
|
) : (
|
|
<SearchSelectItem
|
|
item={item}
|
|
handleSearchHistoryItem={handleSearchHistoryItem}
|
|
searchEndpoint={searchEndpoint}
|
|
setSearchValue={setSearchValue}
|
|
Icon={Icon}
|
|
/>
|
|
);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (providerData && providerDataIsFetched) {
|
|
setProviders(providerData);
|
|
}
|
|
}, [providerData, providerDataIsFetched]);
|
|
|
|
useEffect(() => {
|
|
if (guacamoleHostData && guacamoleHostDataIsFetched) {
|
|
setGuacamoleHost(guacamoleHostData[0].guacamoleHost);
|
|
}
|
|
}, [guacamoleClientData, guacamoleClientDataIsFetched]);
|
|
|
|
useEffect(() => {
|
|
if (guacamoleClientData && guacamoleClientDataIsFetched) {
|
|
setGuacamoleClients(guacamoleClientData);
|
|
}
|
|
}, [guacamoleClientData, guacamoleClientDataIsFetched]);
|
|
|
|
useEffect(() => {
|
|
if (guacamoleClients) {
|
|
setFilteredGuacamoleClients(
|
|
guacamoleClients.filter((client: GuacamoleClient) =>
|
|
client.clientName.toLowerCase().includes((searchValue as string).toLowerCase()),
|
|
),
|
|
);
|
|
}
|
|
}, [guacamoleClients, searchValue]);
|
|
|
|
useEffect(() => {
|
|
if (applicationData && !isApplicationDataFetching) {
|
|
setApplications(applicationData);
|
|
}
|
|
}, [applicationData, isApplicationDataFetching]);
|
|
|
|
useEffect(() => {
|
|
if (applications) {
|
|
setFilteredApplications(
|
|
applications.filter((app: Application) =>
|
|
app.name.toLowerCase().includes((searchValue as string).toLowerCase()),
|
|
),
|
|
);
|
|
}
|
|
}, [applications, searchValue]);
|
|
|
|
useEffect(() => {
|
|
if (bookmarkData && bookmarksIsFetched) {
|
|
setBookmarks(
|
|
bookmarkData.filter(
|
|
(bookmark: Bookmark) =>
|
|
bookmark.enabled === 1 &&
|
|
bookmark.name.toLowerCase().includes((searchValue as string).toLowerCase()),
|
|
),
|
|
);
|
|
}
|
|
}, [bookmarksIsFetched, bookmarkData, searchValue]);
|
|
|
|
useEffect(() => {
|
|
if (historyData && historyDataIsFetched) {
|
|
setSearchHistory(historyData);
|
|
if (filteredHistory.length === 0) {
|
|
setFilteredHistory(historyData.slice(0, 10 * historyMultiplier));
|
|
}
|
|
}
|
|
}, [historyData, historyDataIsFetched]);
|
|
|
|
useEffect(() => {
|
|
if (dropdownOpened && listIndex >= 0) {
|
|
setPlaceholderValue(
|
|
searchHistory.length > 0
|
|
? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`
|
|
: '',
|
|
);
|
|
}
|
|
}, [listIndex, dropdownOpened]);
|
|
|
|
useEffect(() => {
|
|
const splittedSearch = (searchValue as string).toLowerCase().trim().split(' ');
|
|
const filtered = searchHistory.filter((item: SearchHistoryItem) => {
|
|
const option = `${item.prefix} ${item.searchTerm}`;
|
|
const words = option.toLowerCase().trim().split(' ');
|
|
return splittedSearch.every((searchWord) =>
|
|
words.some((word: string) => word.includes(searchWord)),
|
|
);
|
|
});
|
|
setFilteredHistory(filtered);
|
|
}, [searchValue]);
|
|
|
|
useEffect(() => {
|
|
if (defaultProviderData && defaultProviderDataIsFetched) {
|
|
setDefaultProviderURL(
|
|
defaultProviderData[0]?.url ?? 'https://www.google.com/search?q=',
|
|
);
|
|
setDefaultProviderPrefix(defaultProviderData[0]?.prefix ?? '/g');
|
|
setDefaultProviderLabel(defaultProviderData[0]?.name ?? 'Google Search');
|
|
setDefaultProviderIcon(defaultProviderData[0]?.icon ?? 'FaGoogle');
|
|
}
|
|
}, [defaultProviderData, defaultProviderDataIsFetched]);
|
|
|
|
return (
|
|
<>
|
|
{dropdownOpened && <Overlay blur={5} onClick={closeDropdown} fixed zIndex={200} />}
|
|
<Stack
|
|
style={{
|
|
height: position === 'center' ? '100%' : '100px',
|
|
backgroundColor: 'transparent',
|
|
textAlign: 'center',
|
|
position: 'relative',
|
|
padding: '.3rem',
|
|
display: position === 'center' ? 'inline-flex' : 'inline-block',
|
|
transition: 'margin-top .5s ease',
|
|
width: '100%',
|
|
}}
|
|
align='center'
|
|
justify='center'
|
|
>
|
|
<Select
|
|
classNames={selectClasses}
|
|
data={searchHistory.map((item: SearchHistoryItem) => ({
|
|
label: `${item.provider}`,
|
|
value: `${item.prefix} ${item.searchTerm} ${item.dateTimeStamp}`,
|
|
...item,
|
|
}))}
|
|
filter={optionsFilter}
|
|
value={searchValue as string}
|
|
searchValue={searchValue as string}
|
|
placeholder={placeholderValue}
|
|
nothingFoundMessage={
|
|
<Text c={'var(--mantine-color-primary-0)'}>Nothing found...</Text>
|
|
}
|
|
data-active={dropdownOpened}
|
|
dropdownOpened={dropdownOpened}
|
|
comboboxProps={{
|
|
transitionProps: { transition: 'fade', duration: 200 },
|
|
}}
|
|
styles={{
|
|
wrapper: {
|
|
zIndex: 1000,
|
|
},
|
|
root: {
|
|
width: '100%',
|
|
},
|
|
}}
|
|
spellCheck={true}
|
|
searchable
|
|
autoFocus={!isMobile}
|
|
leftSection={
|
|
providerIcon ? (
|
|
<Icon
|
|
style={{
|
|
height: 32,
|
|
width: 32,
|
|
}}
|
|
/>
|
|
) : (
|
|
providerLabel
|
|
)
|
|
}
|
|
rightSection={<div />}
|
|
clearable
|
|
onClear={handleResetSearch}
|
|
clearButtonProps={{
|
|
'aria-label': 'Clear search',
|
|
c: 'var(--mantine-color-accent-0)',
|
|
bg: 'transparent',
|
|
}}
|
|
scrollAreaProps={{ viewportRef: ref }}
|
|
renderOption={(item: any) => renderItem(item)}
|
|
onBlur={() => {
|
|
setPlaceholderValue('');
|
|
setListIndex(-1);
|
|
}}
|
|
onFocus={() => {
|
|
if (searchValue !== '') {
|
|
openDropdown();
|
|
}
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Tab') {
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
onDoubleClick={() => {
|
|
dropdownOpened ? closeDropdown() : openDropdown();
|
|
}}
|
|
onInput={onInput}
|
|
onKeyUp={handleKeyUp}
|
|
/>
|
|
{dropdownOpened && (
|
|
<Card
|
|
w={'100%'}
|
|
mt={height > 0 ? `calc(${height}px + 1.5rem)` : '3.75rem'}
|
|
pos={'relative'}
|
|
style={{
|
|
zIndex: 1000,
|
|
opacity:
|
|
searchValue &&
|
|
dropdownOpened &&
|
|
(bookmarks.length > 0 || filteredApplications.length > 0)
|
|
? 1
|
|
: 0,
|
|
background: 'transparent',
|
|
padding: '0px',
|
|
transition: 'margin-top .5s ease-in-out, opacity .5s ease-in-out .5s',
|
|
}}
|
|
>
|
|
<Stack gap={8} w={'100%'}>
|
|
<Text
|
|
w={'100%'}
|
|
p={'1rem'}
|
|
c={'var(--mantine-color-primary-0)'}
|
|
fz={'1.5rem'}
|
|
style={{
|
|
backgroundColor: 'var(--mantine-color-search-0)',
|
|
backdropFilter: 'blur(15px) brightness(1.75)',
|
|
borderRadius: '4px',
|
|
}}
|
|
>
|
|
Recommended items:
|
|
</Text>
|
|
<Group align='start' justify='space-between'>
|
|
<Stack w={'49%'} gap={8}>
|
|
<RecommendedBookmarks
|
|
bookmarks={bookmarks}
|
|
searchValue={searchValue}
|
|
dropdownOpened={dropdownOpened}
|
|
/>
|
|
<RecommendedClients
|
|
filteredGuacamoleClients={filteredGuacamoleClients}
|
|
searchValue={searchValue}
|
|
dropdownOpened={dropdownOpened}
|
|
handleGuacamoleClientLaunchItem={handleGuacamoleClientLaunchItem}
|
|
/>
|
|
</Stack>
|
|
<RecommendedApplications
|
|
searchValue={searchValue}
|
|
dropdownOpened={dropdownOpened}
|
|
filteredApplications={filteredApplications}
|
|
/>
|
|
</Group>
|
|
</Stack>
|
|
</Card>
|
|
)}
|
|
</Stack>
|
|
<HelpModal
|
|
handleResetSearch={handleResetSearch}
|
|
applicationData={applications}
|
|
providerData={providers}
|
|
providerModalOpened={providerModalOpened}
|
|
closeProviderModal={closeProviderModal}
|
|
/>
|
|
<WeatherModal
|
|
current={current}
|
|
extendedForecast={extendedForecast}
|
|
weatherModalOpened={weatherModalOpened}
|
|
handleResetSearch={handleResetSearch}
|
|
closeWeatherModal={closeWeatherModal}
|
|
/>
|
|
</>
|
|
);
|
|
}
|