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

frontend-rw #1

Merged
marcin merged 347 commits from frontend-rw into develop 2024-12-05 15:32:18 -08:00
Conversation 0 Commits 347 Files changed 608 +21 -17
1 changed files with 21 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 65772abf87 - Show all commits

26
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,13 +25,17 @@ const Search = () => {
setValue(value); setValue(value);
}; };
const handleClear = (event: React.MouseEvent<HTMLDivElement>) => { const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
event.preventDefault(); event.preventDefault();
if (params.get('q') === value) {
if (value.length > 0) { if (value.length > 0) {
setValue(''); setValue('');
setQuery(''); setQuery('');
} }
} else {
setQuery(value);
}
}; };
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => { const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
@ -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')}
className={clsx('size-4 text-gray-600', { hidden: hasValue })}
/>
<SvgIcon <SvgIcon
src={require('@tabler/icons/outline/x.svg')} src={require('@tabler/icons/outline/x.svg')}
className={clsx('size-4 text-gray-600', { hidden: !hasValue })} className='size-4 text-gray-600'
aria-label={intl.formatMessage(messages.placeholder)} aria-label={intl.formatMessage(messages.placeholder)}
/> />
) : (
<SvgIcon
src={require('@tabler/icons/outline/search.svg')}
className='size-4 text-gray-600'
/>
)}
</div> </div>
</div> </div>
</div> </div>