ProfessionalUwU/stickerpicker
1
0
Fork 1
mirror of https://github.com/maunium/stickerpicker.git synced 2025-07-17 22:43:33 +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

40
web/src/index.js
View File

@ -41,10 +41,7 @@ const supportedThemes = ["light", "dark", "black"]
const defaultState = {
packs: [],
filtering: {
searchTerm: "",
packs: [],
},
searchTerm: null,
}
class App extends Component {
@ -52,7 +49,7 @@ class App extends Component {
super(props)
this.defaultTheme = params.get("theme")
this.state = {
packs: defaultState.packs,
...defaultState,
loading: true,
error: null,
stickersPerRow: parseInt(localStorage.mauStickersPerRow || "4"),
@ -63,7 +60,6 @@ class App extends Component {
stickerIDs: frequent.get(),
stickers: [],
},
filtering: defaultState.filtering,
}
if (!supportedThemes.includes(this.state.theme)) {
this.state.theme = "light"
@ -77,6 +73,7 @@ class App extends Component {
this.packListRef = null
this.navRef = null
this.searchStickers = this.searchStickers.bind(this)
this.resetSearch = this.resetSearch.bind(this)
this.sendSticker = this.sendSticker.bind(this)
this.navScroll = this.navScroll.bind(this)
this.reloadPacks = this.reloadPacks.bind(this)
@ -101,7 +98,18 @@ class App extends Component {
localStorage.mauFrequentlyUsedStickerCache = JSON.stringify(stickers.map(sticker => [sticker.id, sticker]))
}
// Search
resetSearch() {
this.setState({ searchTerm: defaultState.searchTerm })
}
searchStickers(e) {
if (e.key === "Escape") {
this.resetSearch()
return
}
const sanitizeString = s => s.toLowerCase().trim()
const searchTerm = sanitizeString(e.target.value)
@ -115,11 +123,8 @@ class App extends Component {
}))
this.setState({
filtering: {
...this.state.filtering,
searchTerm,
packs: packsWithFilteredStickers.filter(({ stickers }) => !!stickers.length),
},
filteredPacks: packsWithFilteredStickers.filter(({ stickers }) => !!stickers.length),
searchTerm,
})
}
@ -145,10 +150,8 @@ class App extends Component {
reloadPacks() {
this.imageObserver.disconnect()
this.sectionObserver.disconnect()
this.setState({
packs: defaultState.packs,
filtering: defaultState.filtering,
})
this.setState({ packs: defaultState.packs })
this.resetSearch()
this._loadPacks(true)
}
@ -258,6 +261,7 @@ class App extends Component {
const sticker = this.stickersByID.get(id)
frequent.add(id)
this.updateFrequentlyUsed()
this.resetSearch()
widgetAPI.sendSticker(sticker)
}
@ -267,8 +271,8 @@ class App extends Component {
render() {
const theme = `theme-${this.state.theme}`
const filterActive = !!this.state.filtering.searchTerm
const packs = filterActive ? this.state.filtering.packs : [this.state.frequentlyUsed, ...this.state.packs]
const filterActive = !!this.state.searchTerm
const packs = filterActive ? this.state.filteredPacks : [this.state.frequentlyUsed, ...this.state.packs]
if (this.state.loading) {
return html`<main class="spinner ${theme}"><${Spinner} size=${80} green /></main>`
@ -287,7 +291,7 @@ class App extends Component {
${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)}
<${NavBarItem} pack=${{ id: "settings", title: "Settings" }} iconOverride="settings" />
</nav>
<${SearchBox} onKeyUp=${this.searchStickers} />
<${SearchBox} onKeyUp=${this.searchStickers} resetSearch=${this.resetSearch} value=${this.state.searchTerm} />
<div class="pack-list ${isMobileSafari ? "ios-safari-hack" : ""}" ref=${elem => this.packListRef = elem}>
${filterActive && packs.length === 0 ? html`<div class="search-empty"><h1>No stickers match your search</h1></div>` : null}
${packs.map(pack => html`<${Pack} id=${pack.id} pack=${pack} send=${this.sendSticker} />`)}