130 lines
3.6 KiB
TypeScript
130 lines
3.6 KiB
TypeScript
import { Stack, TextInput } from '@mantine/core';
|
|
import { useDisclosure } from '@mantine/hooks';
|
|
import { HelpModal, WeatherModal } from 'components';
|
|
import { useCommonHooks } from 'hooks';
|
|
import { textInputClasses } from 'styles';
|
|
|
|
export default function Search({
|
|
current,
|
|
outlook,
|
|
weatherModalOpened,
|
|
closeWeatherModal,
|
|
openWeatherModal,
|
|
}: any) {
|
|
const {
|
|
providerLabel,
|
|
setProviderLabel,
|
|
providerURL,
|
|
setProviderURL,
|
|
searchValue,
|
|
setSearchValue,
|
|
providers,
|
|
} = useCommonHooks();
|
|
|
|
const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
|
|
useDisclosure(false);
|
|
|
|
const handleKeyPress = (item: any) => {
|
|
let option = '';
|
|
let subtext = '';
|
|
const urlPattern = new RegExp(
|
|
'^(https?:\\/\\/)?' + // protocol
|
|
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
|
|
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
|
|
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
|
|
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
|
|
'(\\#[-a-z\\d_]*)?$',
|
|
'i',
|
|
); // fragment locator
|
|
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 if (item.target.value.startsWith('!')) {
|
|
if (item.target.value.startsWith('!w')) {
|
|
subtext = item.target.value.substr(2);
|
|
}
|
|
} else {
|
|
subtext = item.target.value;
|
|
}
|
|
if (item.key === 'Enter') {
|
|
if (providerLabel === 'Show help') {
|
|
openProviderModal();
|
|
} else if (item.target.value.startsWith('/')) {
|
|
open(`${providerURL}${subtext}`, '_self');
|
|
} else if (providerLabel === 'Show weather') {
|
|
openWeatherModal();
|
|
} else if (urlPattern.test(item.target.value)) {
|
|
if (/^(https?:\/\/).*/i.test(item.target.value))
|
|
window.location = item.target.value;
|
|
else open(`https://${item.target.value}`, '_self');
|
|
} else {
|
|
open(`${providerURL}${subtext}`, '_self');
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Stack
|
|
style={{
|
|
height: '100px',
|
|
backgroundColor: 'transparent',
|
|
textAlign: 'center',
|
|
position: 'relative',
|
|
padding: '.3em',
|
|
display: 'inline-block',
|
|
gap: 0,
|
|
}}
|
|
>
|
|
<TextInput
|
|
autoFocus
|
|
className={textInputClasses.search}
|
|
classNames={textInputClasses}
|
|
spellCheck='true'
|
|
leftSection={providerLabel}
|
|
value={searchValue}
|
|
data-active={searchValue !== ''}
|
|
onChange={(item: any) => {
|
|
setSearchValue(item.currentTarget.value);
|
|
if (
|
|
item.target.value === '/?' ||
|
|
item.target.value === '!help' ||
|
|
item.target.value === '!h'
|
|
) {
|
|
setProviderLabel('Show help');
|
|
} else if (item.target.value.startsWith('/')) {
|
|
const provider = providers?.find(
|
|
(p: any) => p.prefix === item.target.value.split(' ')[0],
|
|
);
|
|
setProviderLabel(provider?.name || 'Invalid Search');
|
|
setProviderURL(provider?.url);
|
|
} else if (item.target.value.startsWith('!')) {
|
|
if (item.target.value === '!w' || item.target.value === '!weather') {
|
|
setProviderLabel('Show weather');
|
|
}
|
|
} else {
|
|
setProviderLabel('Google Search');
|
|
setProviderURL('https://www.google.com/search?q=');
|
|
}
|
|
}}
|
|
onKeyUp={(item: any) => {
|
|
if (providerLabel !== 'Invalid Search') {
|
|
handleKeyPress(item);
|
|
}
|
|
}}
|
|
/>
|
|
<HelpModal
|
|
providerModalOpened={providerModalOpened}
|
|
closeProviderModal={closeProviderModal}
|
|
/>
|
|
<WeatherModal
|
|
current={current}
|
|
outlook={outlook}
|
|
closeWeatherModal={closeWeatherModal}
|
|
weatherModalOpened={weatherModalOpened}
|
|
/>
|
|
</Stack>
|
|
);
|
|
}
|