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 resetting search field

Browse Source
This commit is contained in:
Kévin Cocchi
2022-02-06 12:17:29 +01:00
parent 99ced8878a
commit 41f0432e8d
4 changed files with 39 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,12 +15,19 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import { html } from "../lib/htm/preact.js"
export const SearchBox = ({ onKeyUp, placeholder = 'Find stickers' }) => {
const component = html`
export const SearchBox = ({ onKeyUp, resetSearch, value }) => {
const className = `icon-display ${value ? 'reset-click-zone' : null}`
const title = value ? 'Click to reset' : null
const onClick = value ? resetSearch : null
const iconToDisplay = `icon-${!value ? 'search' : 'reset'}`
return html`
<div class="search-box">
<input type="text" placeholder=${placeholder} onKeyUp=${onKeyUp} />
<span class="icon icon-search" />
<input value=${value} placeholder="Find stickers" onKeyUp=${onKeyUp} />
<div class=${className} title=${title} onClick=${onClick}>
<span class="icon ${iconToDisplay}" />
</div>
</div>
`
return component
}