Skip to content

Commit

Permalink
πŸ’„ front: add clear button to header search <input> (#705) (#712)
Browse files Browse the repository at this point in the history
Provisional for #705

Actually unifying the input into one presents layout complexities
  • Loading branch information
ericlinagora authored Oct 25, 2024
2 parents 1af277d + a4d2f1c commit 414e0e1
Showing 1 changed file with 8 additions and 3 deletions.
11 changes: 8 additions & 3 deletions tdrive/frontend/src/app/views/client/common/search.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import { Button } from '@atoms/button/button';
import { Input } from '@atoms/input/input-text';
import { AdjustmentsIcon, SearchIcon } from '@heroicons/react/outline';
import { SearchIcon } from '@heroicons/react/outline';
import { InputDecorationIcon } from '@atoms/input/input-decoration-icon';
import Languages from '@features/global/services/languages-service';
import RouterServices from '@features/router/services/router-service';
import { useSearchModal } from '@features/search/hooks/use-search';
import { SearchInputState } from '@features/search/state/search-input';
import { useRecoilState } from 'recoil';
import { ToasterService } from 'app/features/global/services/toaster-service';
import { XIcon } from 'app/atoms/icons-agnostic';

export default (): JSX.Element => {
const { workspaceId, channelId } = RouterServices.getStateFromRoute();
Expand All @@ -31,6 +30,12 @@ export default (): JSX.Element => {
prefix={() => (
<SearchIcon className={'h-5 w-5 absolute m-auto top-0 bottom-0 left-3 text-blue-500'} />
)}
suffix={() =>
<XIcon
className={'h-4 w-4 absolute m-auto top-0 bottom-0 right-3 cursor-pointer text-zinc-500 ' + (searchState.query?.length ? '' : 'hidden')}
onClick={() => setSearchState({ ...searchState, query: '' }) }
/>
}
input={({ className }) => (
<Input
value={searchState.query}
Expand Down

0 comments on commit 414e0e1

Please sign in to comment.