bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pl-fe: Use icon to indicate that search field value has not been sent

Browse source 
Signed-off-by: mkljczk <git@mkljczk.pl>
This commit is contained in:
mkljczk 2024-11-29 20:26:50 +01:00
parent 7a4d6bed5c
commit 65772abf87
1 changed files with 21 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
packages/pl-fe/src/features/search/components/search.tsx
View file

@ -1,4 +1,3 @@
import clsx from 'clsx';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import { useSearchParams } from 'react-router-dom-v5-compat'; import { useSearchParams } from 'react-router-dom-v5-compat';
@ -26,12 +25,16 @@ const Search = () => {
setValue(value); setValue(value);
}; };
const handleClear = (event: React.MouseEvent<HTMLDivElement>) => { const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
event.preventDefault(); event.preventDefault();
if (value.length > 0) { if (params.get('q') === value) {
setValue(''); if (value.length > 0) {
setQuery(''); setValue('');
setQuery('');
}
} else {
setQuery(value);
} }
}; };
@ -45,8 +48,6 @@ const Search = () => {
} }
}; };
const hasValue = value.length > 0;
return ( return (
<div <div
className='sticky top-[76px] z-10 w-full bg-white/90 backdrop-blur black:bg-black/80 dark:bg-primary-900/90' className='sticky top-[76px] z-10 w-full bg-white/90 backdrop-blur black:bg-black/80 dark:bg-primary-900/90'
@ -70,18 +71,21 @@ const Search = () => {
role='button' role='button'
tabIndex={0} tabIndex={0}
className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto'
onClick={handleClear} onClick={handleClick}
> >
<SvgIcon {params.get('q') === value ? (
src={require('@tabler/icons/outline/search.svg')} <SvgIcon
className={clsx('size-4 text-gray-600', { hidden: hasValue })} src={require('@tabler/icons/outline/x.svg')}
/> className='size-4 text-gray-600'
aria-label={intl.formatMessage(messages.placeholder)}
/>
) : (
<SvgIcon
src={require('@tabler/icons/outline/search.svg')}
className='size-4 text-gray-600'
/>
)}
<SvgIcon
src={require('@tabler/icons/outline/x.svg')}
className={clsx('size-4 text-gray-600', { hidden: !hasValue })}
aria-label={intl.formatMessage(messages.placeholder)}
/>
</div> </div>
</div> </div>
</div> </div>