shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): add clear-field-icon to search field (#498)

Browse Source 
* feat(frontend): add button to clear search field

Clear input field button was not visible on all devices, this replaces native ones with an svg

* refactor(search): use tailwind css for button and change svg

* refactor(search): larger click area on reset button

Co-authored-by: Jakob Ankarhem <jakob.ankarhem@jetshop.se>
This commit is contained in:
Jakob Ankarhem
2020-12-26 15:43:22 +01:00
committed by GitHub
parent 46af705014
commit 7434a26f76
3 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Layout/SearchInput/index.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import useSearchInput from '../../../hooks/useSearchInput';
import { defineMessages, useIntl } from 'react-intl';
import ClearButton from '../../../assets/xcircle.svg';
const messages = defineMessages({
searchPlaceholder: 'Search Movies & TV',
@@ -8,7 +9,7 @@ const messages = defineMessages({
const SearchInput: React.FC = () => {
const intl = useIntl();
const { searchValue, setSearchValue, setIsOpen } = useSearchInput();
const { searchValue, setSearchValue, setIsOpen, clear } = useSearchInput();
return (
<div className="flex-1 flex">
<div className="w-full flex md:ml-0">
@@ -27,7 +28,8 @@ const SearchInput: React.FC = () => {
</div>
<input
id="search_field"
className="block w-full h-full pl-8 pr-1 py-2 rounded-md border-transparent focus:border-transparent bg-gray-600 text-white placeholder-gray-300 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }}
className="block w-full h-full pl-8 py-2 rounded-md border-transparent focus:border-transparent bg-gray-600 text-white placeholder-gray-300 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
placeholder={intl.formatMessage(messages.searchPlaceholder)}
type="search"
value={searchValue}
@@ -35,6 +37,14 @@ const SearchInput: React.FC = () => {
onFocus={() => setIsOpen(true)}
onBlur={() => setIsOpen(false)}
/>
{searchValue.length > 0 && (
<button
className="absolute inset-y-0 right-0 h-7 w-7 m-auto p-1 outline-none border-none focus:outline-none focus:border-none"
onClick={clear}
>
<ClearButton />
</button>
)}
</div>
</div>
</div>