Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-19 03:58:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

SearchBar static placeholder rendered on non search routes

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-05-16 19:29:08 +03:00
parent aaf7b50e31
commit f6e8099bc2
2 changed files with 33 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/common/NavBar/SearchBar/SearchBar.js
View file

@ -18,11 +18,9 @@ const SearchBar = React.memo(({ className }) => {
const query = (active && queryParams.has('q')) ? queryParams.get('q') : '';
return [active, query];
}, [locationHash]);
const onQueryInputFocus = React.useCallback(() => {
if (!active) {
window.location = '#/search';
}
}, [active]);
const navigateToSearch = React.useCallback(() => {
window.location = '#/search';
}, []);
const onQueryInputSubmit = React.useCallback(() => {
window.location.replace(`#/search?q=${searchInputRef.current.value}`);
}, []);
@ -32,23 +30,29 @@ const SearchBar = React.memo(({ className }) => {
}
}, [active, focusable]);
return (
<label className={classnames(className, styles['search-label'], { 'active': active })}>
<Input
key={query}
ref={searchInputRef}
className={styles['search-input']}
defaultValue={query}
tabIndex={-1}
size={1}
type={'text'}
placeholder={'Search'}
autoCorrect={'off'}
autoCapitalize={'off'}
spellCheck={false}
onFocus={onQueryInputFocus}
onSubmit={onQueryInputSubmit}
/>
<Input className={styles['submit-button']} type={'button'} tabIndex={-1} onClick={onQueryInputSubmit}>
<label className={classnames(className, styles['search-label'], { 'active': active })} onClick={!active ? navigateToSearch : null}>
{
active ?
<Input
key={query}
ref={searchInputRef}
className={styles['search-input']}
defaultValue={query}
tabIndex={-1}
size={1}
type={'text'}
placeholder={'Search'}
autoCorrect={'off'}
autoCapitalize={'off'}
spellCheck={false}
onSubmit={onQueryInputSubmit}
/>
:
<div className={styles['search-input']}>
<div className={styles['placeholder']}>Search</div>
</div>
}
<Input className={styles['submit-button']} type={'button'} tabIndex={-1} onClick={active ? onQueryInputSubmit : null}>
<Icon className={styles['submit-icon']} icon={'ic_search'} />
</Input>
</label>

9
src/common/NavBar/SearchBar/styles.less
View file

@ -22,11 +22,16 @@
.search-input {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 0.8em;
color: var(--color-surfacelighter);
cursor: text;
&::placeholder {
color: var(--color-surfacelighter);
&::placeholder, .placeholder {
opacity: 1;
color: var(--color-surfacelight);
}
}