antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 18:13:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add clear buttons to search input

Browse source
This commit is contained in:
jeffvli 2023-05-21 21:01:23 -07:00
parent 611cbc6dd9
commit 0103a84358
2 changed files with 34 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/renderer/components/search-input/index.tsx
View file

@ -1,7 +1,7 @@
import { ChangeEvent, KeyboardEvent } from 'react';
import { TextInputProps } from '@mantine/core';
import { ActionIcon, TextInputProps } from '@mantine/core';
import { useFocusWithin, useHotkeys, useMergedRef } from '@mantine/hooks';
import { RiSearchLine } from 'react-icons/ri';
import { RiCloseFill, RiSearchLine } from 'react-icons/ri';
import { TextInput } from '/@/renderer/components/input';
import { useSettingsStore } from '/@/renderer/store';
import { shallow } from 'zustand/shallow';
@ -40,6 +40,18 @@ export const SearchInput = ({
ref={mergedRef}
{...props}
icon={showIcon && <RiSearchLine />}
rightSection={
isOpened ? (
<ActionIcon
onClick={() => {
ref.current.value = '';
ref.current.focus();
}}
>
<RiCloseFill />
</ActionIcon>
) : null
}
size="md"
styles={{
icon: { svg: { fill: 'var(--titlebar-fg)' } },