pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

27
src/renderer/features/search/components/command-palette.tsx
View file

@ -1,12 +1,13 @@
/* eslint-disable react/no-unknown-property */ /* eslint-disable react/no-unknown-property */
import { useCallback, useState, Fragment } from 'react'; import { useCallback, useState, Fragment, useRef } from 'react';
import { Group, Kbd, ScrollArea } from '@mantine/core'; import { ActionIcon, Group, Kbd, ScrollArea } from '@mantine/core';
import { useDisclosure, useDebouncedValue } from '@mantine/hooks'; import { useDisclosure, useDebouncedValue } from '@mantine/hooks';
import { RiSearchLine, RiCloseFill } from 'react-icons/ri';
import { generatePath, useNavigate } from 'react-router'; import { generatePath, useNavigate } from 'react-router';
import styled from 'styled-components'; import styled from 'styled-components';
import { GoToCommands } from './go-to-commands'; import { GoToCommands } from './go-to-commands';
import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command'; import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
import { Button, Modal, Paper, Spinner } from '/@/renderer/components'; import { Button, Modal, Paper, Spinner, TextInput } from '/@/renderer/components';
import { HomeCommands } from './home-commands'; import { HomeCommands } from './home-commands';
import { ServerCommands } from '/@/renderer/features/search/components/server-commands'; import { ServerCommands } from '/@/renderer/features/search/components/server-commands';
import { useSearch } from '/@/renderer/features/search/queries/search-query'; import { useSearch } from '/@/renderer/features/search/queries/search-query';
@ -35,6 +36,7 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
const [pages, setPages] = useState<CommandPalettePages[]>([CommandPalettePages.HOME]); const [pages, setPages] = useState<CommandPalettePages[]>([CommandPalettePages.HOME]);
const activePage = pages[pages.length - 1]; const activePage = pages[pages.length - 1];
const isHome = activePage === CommandPalettePages.HOME; const isHome = activePage === CommandPalettePages.HOME;
const searchInputRef = useRef<HTMLInputElement>(null);
const popPage = useCallback(() => { const popPage = useCallback(() => {
setPages((pages) => { setPages((pages) => {
@ -117,11 +119,22 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
value={value} value={value}
onValueChange={setValue} onValueChange={setValue}
> >
<Command.Input <TextInput
autoFocus ref={searchInputRef}
placeholder="Enter search..." icon={<RiSearchLine />}
rightSection={
<ActionIcon
onClick={() => {
setQuery('');
searchInputRef.current?.focus();
}}
>
<RiCloseFill />
</ActionIcon>
}
size="lg"
value={query} value={query}
onValueChange={setQuery} onChange={(e) => setQuery(e.currentTarget.value)}
/> />
<Command.Separator /> <Command.Separator />
<Command.List> <Command.List>