ProfessionalUwU/stickerpicker
1
0
Fork 1
mirror of https://github.com/maunium/stickerpicker.git synced 2025-07-16 22:13:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

handle autofocus search + setting on/off

Browse Source
This commit is contained in:
Kévin Cocchi
2022-02-06 12:18:11 +01:00
parent 41f0432e8d
commit fed4f08218
2 changed files with 29 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/search-box.js
View File

@ -15,7 +15,13 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import { html } from "../lib/htm/preact.js"
export function shouldAutofocusSearchBar() {
return localStorage.mauAutofocusSearchBar === 'true'
}
export const SearchBox = ({ onKeyUp, resetSearch, value }) => {
const autofocus = shouldAutofocusSearchBar()
const className = `icon-display ${value ? 'reset-click-zone' : null}`
const title = value ? 'Click to reset' : null
const onClick = value ? resetSearch : null
@ -24,7 +30,7 @@ export const SearchBox = ({ onKeyUp, resetSearch, value }) => {
return html`
<div class="search-box">
<input value=${value} placeholder="Find stickers" onKeyUp=${onKeyUp} />
<input value=${value} placeholder="Find stickers" onKeyUp=${onKeyUp} autoFocus=${autofocus} />
<div class=${className} title=${title} onClick=${onClick}>
<span class="icon ${iconToDisplay}" />
</div>