From 687ce4bd108b483c8930226c21dc861414588947 Mon Sep 17 00:00:00 2001 From: sliptype Date: Wed, 17 Jul 2024 11:27:09 -0500 Subject: [PATCH 1/4] Clear search on web --- .../search-bar/ConnectedSearchBar.jsx | 30 +++++++++++++++++++ .../web/src/components/search/SearchBarV2.jsx | 10 ++++++- 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/packages/web/src/components/search-bar/ConnectedSearchBar.jsx b/packages/web/src/components/search-bar/ConnectedSearchBar.jsx index 2e559c4d2ba..3432eac948b 100644 --- a/packages/web/src/components/search-bar/ConnectedSearchBar.jsx +++ b/packages/web/src/components/search-bar/ConnectedSearchBar.jsx @@ -173,6 +173,35 @@ class ConnectedSearchBar extends Component { }) } + onClear = () => { + this.props.clearSearch() + this.setState({ value: '' }) + + const locationSearchParams = new URLSearchParams( + this.props.history.location.search + ) + + locationSearchParams.delete('query') + + let newPath = '/search' + + const searchMatch = matchPath(getPathname(this.props.history.location), { + path: SEARCH_PAGE + }) + + if (searchMatch) { + newPath = generatePath(SEARCH_PAGE, { + ...searchMatch.params + }) + } + + this.props.history.push({ + pathname: newPath, + search: locationSearchParams.toString(), + state: {} + }) + } + render() { if (!this.props.search.tracks) { this.props.search.tracks = [] @@ -307,6 +336,7 @@ class ConnectedSearchBar extends Component { onSubmit={this.onSubmit} goToRoute={this.props.goToRoute} addRecentSearch={this.props.addRecentSearch} + onClear={this.onClear} /> ) diff --git a/packages/web/src/components/search/SearchBarV2.jsx b/packages/web/src/components/search/SearchBarV2.jsx index 0909290d49c..0abc75c36d5 100644 --- a/packages/web/src/components/search/SearchBarV2.jsx +++ b/packages/web/src/components/search/SearchBarV2.jsx @@ -5,7 +5,8 @@ import { IconArrowRight as IconArrow, IconSearch, setupHotkeys, - removeHotkeys + removeHotkeys, + IconCloseAlt } from '@audius/harmony' import AutoComplete from 'antd/lib/auto-complete' import Input from 'antd/lib/input' @@ -433,6 +434,13 @@ class SearchBar extends Component { onClick={() => this.props.onSubmit('')} /> } + suffix={ + this.props.onClear()} + /> + } onKeyDown={this.onKeyDown} spellCheck={false} /> From b6c68875c5835f7102d8489322c04d5dc1d73ac8 Mon Sep 17 00:00:00 2001 From: sliptype Date: Wed, 17 Jul 2024 12:21:30 -0500 Subject: [PATCH 2/4] Add clear on mobile --- .../screens/search-screen-v2/SearchBarV2.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/mobile/src/screens/search-screen-v2/SearchBarV2.tsx b/packages/mobile/src/screens/search-screen-v2/SearchBarV2.tsx index a9027a9fabf..15ad3e4c437 100644 --- a/packages/mobile/src/screens/search-screen-v2/SearchBarV2.tsx +++ b/packages/mobile/src/screens/search-screen-v2/SearchBarV2.tsx @@ -1,6 +1,11 @@ -import { Dimensions } from 'react-native' +import { Dimensions, Pressable } from 'react-native' -import { IconSearch, TextInput, TextInputSize } from '@audius/harmony-native' +import { + IconCloseAlt, + IconSearch, + TextInput, + TextInputSize +} from '@audius/harmony-native' import { useSearchQuery } from './searchState' @@ -12,9 +17,19 @@ const messages = { export const SearchBarV2 = () => { const [query, setQuery] = useSearchQuery() + + const clearQuery = () => { + setQuery('') + } + return ( ( + + + + )} size={TextInputSize.SMALL} label={messages.label} placeholder={messages.label} From 6494070463c9404fc24a6f3465a6ee96ef0d19f7 Mon Sep 17 00:00:00 2001 From: sliptype Date: Wed, 17 Jul 2024 12:23:46 -0500 Subject: [PATCH 3/4] Improve hitbox --- packages/web/src/components/search/SearchBarV2.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/web/src/components/search/SearchBarV2.jsx b/packages/web/src/components/search/SearchBarV2.jsx index 0abc75c36d5..8898c7565cb 100644 --- a/packages/web/src/components/search/SearchBarV2.jsx +++ b/packages/web/src/components/search/SearchBarV2.jsx @@ -6,7 +6,8 @@ import { IconSearch, setupHotkeys, removeHotkeys, - IconCloseAlt + IconCloseAlt, + Flex } from '@audius/harmony' import AutoComplete from 'antd/lib/auto-complete' import Input from 'antd/lib/input' @@ -435,11 +436,9 @@ class SearchBar extends Component { /> } suffix={ - this.props.onClear()} - /> + this.props.onClear()}> + + } onKeyDown={this.onKeyDown} spellCheck={false} From c1433ce1a0a7b3a8a2b2b60185a10c25af970294 Mon Sep 17 00:00:00 2001 From: sliptype Date: Wed, 17 Jul 2024 12:25:32 -0500 Subject: [PATCH 4/4] Only show when query exists --- .../src/screens/search-screen-v2/SearchBarV2.tsx | 12 +++++++----- packages/web/src/components/search/SearchBarV2.jsx | 8 +++++--- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/mobile/src/screens/search-screen-v2/SearchBarV2.tsx b/packages/mobile/src/screens/search-screen-v2/SearchBarV2.tsx index 15ad3e4c437..94fa18d8b37 100644 --- a/packages/mobile/src/screens/search-screen-v2/SearchBarV2.tsx +++ b/packages/mobile/src/screens/search-screen-v2/SearchBarV2.tsx @@ -25,11 +25,13 @@ export const SearchBarV2 = () => { return ( ( - - - - )} + endIcon={() => + query ? ( + + + + ) : null + } size={TextInputSize.SMALL} label={messages.label} placeholder={messages.label} diff --git a/packages/web/src/components/search/SearchBarV2.jsx b/packages/web/src/components/search/SearchBarV2.jsx index 8898c7565cb..cb1d0ff9855 100644 --- a/packages/web/src/components/search/SearchBarV2.jsx +++ b/packages/web/src/components/search/SearchBarV2.jsx @@ -436,9 +436,11 @@ class SearchBar extends Component { /> } suffix={ - this.props.onClear()}> - - + this.state.value ? ( + this.props.onClear()}> + + + ) : null } onKeyDown={this.onKeyDown} spellCheck={false}