mirror of
https://github.com/pawelmalak/flame.git
synced 2024-12-24 10:42:40 +03:00
Search bar bug fixes
This commit is contained in:
parent
6f44200a3c
commit
e5cba605fa
@ -1,3 +1,7 @@
|
|||||||
|
### v1.7.1 (TBA)
|
||||||
|
- Fixed search action not being triggered by Numpad Enter
|
||||||
|
- Fixed search bar not redirecting to valid URL if it starts with capital letter ([#118](https://github.com/pawelmalak/flame/issues/118))
|
||||||
|
|
||||||
### v1.7.0 (2021-10-11)
|
### v1.7.0 (2021-10-11)
|
||||||
- Search bar will now redirect if valid URL or IP is provided ([#67](https://github.com/pawelmalak/flame/issues/67))
|
- Search bar will now redirect if valid URL or IP is provided ([#67](https://github.com/pawelmalak/flame/issues/67))
|
||||||
- Users can now add their custom search providers ([#71](https://github.com/pawelmalak/flame/issues/71))
|
- Users can now add their custom search providers ([#71](https://github.com/pawelmalak/flame/issues/71))
|
||||||
|
@ -27,6 +27,11 @@ const SearchBar = (props: ComponentProps): JSX.Element => {
|
|||||||
inputRef.current.focus();
|
inputRef.current.focus();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const clearSearch = () => {
|
||||||
|
inputRef.current.value = '';
|
||||||
|
setLocalSearch('');
|
||||||
|
};
|
||||||
|
|
||||||
const searchHandler = (e: KeyboardEvent<HTMLInputElement>) => {
|
const searchHandler = (e: KeyboardEvent<HTMLInputElement>) => {
|
||||||
const { isLocal, search, query, isURL, sameTab } = searchParser(
|
const { isLocal, search, query, isURL, sameTab } = searchParser(
|
||||||
inputRef.current.value
|
inputRef.current.value
|
||||||
@ -36,31 +41,39 @@ const SearchBar = (props: ComponentProps): JSX.Element => {
|
|||||||
setLocalSearch(search);
|
setLocalSearch(search);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (e.code === 'Enter') {
|
if (e.code === 'Enter' || e.code === 'NumpadEnter') {
|
||||||
if (!query.prefix) {
|
if (!query.prefix) {
|
||||||
|
// Prefix not found -> emit notification
|
||||||
createNotification({
|
createNotification({
|
||||||
title: 'Error',
|
title: 'Error',
|
||||||
message: 'Prefix not found',
|
message: 'Prefix not found',
|
||||||
});
|
});
|
||||||
} else if (isURL) {
|
} else if (isURL) {
|
||||||
|
// URL or IP passed -> redirect
|
||||||
const url = urlParser(inputRef.current.value)[1];
|
const url = urlParser(inputRef.current.value)[1];
|
||||||
redirectUrl(url, sameTab);
|
redirectUrl(url, sameTab);
|
||||||
} else if (isLocal) {
|
} else if (isLocal) {
|
||||||
|
// Local query -> filter apps and bookmarks
|
||||||
setLocalSearch(search);
|
setLocalSearch(search);
|
||||||
} else {
|
} else {
|
||||||
|
// Valid query -> redirect to search results
|
||||||
const url = `${query.template}${search}`;
|
const url = `${query.template}${search}`;
|
||||||
redirectUrl(url, sameTab);
|
redirectUrl(url, sameTab);
|
||||||
}
|
}
|
||||||
|
} else if (e.code === 'Escape') {
|
||||||
|
clearSearch();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<input
|
<div className={classes.SearchContainer}>
|
||||||
ref={inputRef}
|
<input
|
||||||
type="text"
|
ref={inputRef}
|
||||||
className={classes.SearchBar}
|
type="text"
|
||||||
onKeyUp={(e) => searchHandler(e)}
|
className={classes.SearchBar}
|
||||||
/>
|
onKeyUp={(e) => searchHandler(e)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -7,20 +7,22 @@ export interface State {
|
|||||||
|
|
||||||
const initialState: State = {
|
const initialState: State = {
|
||||||
theme: {
|
theme: {
|
||||||
name: 'blues',
|
name: 'tron',
|
||||||
colors: {
|
colors: {
|
||||||
background: '#2B2C56',
|
background: '#242B33',
|
||||||
primary: '#EFF1FC',
|
primary: '#EFFBFF',
|
||||||
accent: '#6677EB'
|
accent: '#6EE2FF',
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
|
|
||||||
const themeReducer = (state = initialState, action: Action) => {
|
const themeReducer = (state = initialState, action: Action) => {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case ActionTypes.setTheme: return { theme: action.payload };
|
case ActionTypes.setTheme:
|
||||||
default: return state;
|
return { theme: action.payload };
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
export default themeReducer;
|
export default themeReducer;
|
||||||
|
@ -20,7 +20,7 @@ export const searchParser = (searchQuery: string): SearchResult => {
|
|||||||
|
|
||||||
// Check if url or ip was passed
|
// Check if url or ip was passed
|
||||||
const urlRegex =
|
const urlRegex =
|
||||||
/^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;
|
/^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/i;
|
||||||
|
|
||||||
result.isURL = urlRegex.test(searchQuery);
|
result.isURL = urlRegex.test(searchQuery);
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user