Archives/Athou_commafeed
1
0
Fork 1
mirror of https://github.com/Athou/commafeed.git synced 2026-03-21 21:37:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

add clear button for search

Browse Source
This commit is contained in:
Athou
2022-10-28 10:29:39 +02:00
parent 60e37deae8
commit 02628b5886
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
commafeed-client/src/components/header/Header.tsx
View File

@@ -1,5 +1,5 @@
import { t } from "@lingui/macro" import { t } from "@lingui/macro"
import { Center, Divider, Group, Indicator, Popover, TextInput } from "@mantine/core" import { ActionIcon, Center, Divider, Group, Indicator, Popover, TextInput } from "@mantine/core"
import { useForm } from "@mantine/form" import { useForm } from "@mantine/form"
import { reloadEntries, search } from "app/slices/entries" import { reloadEntries, search } from "app/slices/entries"
import { changeReadingMode, changeReadingOrder } from "app/slices/user" import { changeReadingMode, changeReadingOrder } from "app/slices/user"
@@ -7,7 +7,7 @@ import { useAppDispatch, useAppSelector } from "app/store"
import { ActionButton } from "components/ActionButtton" import { ActionButton } from "components/ActionButtton"
import { Loader } from "components/Loader" import { Loader } from "components/Loader"
import { useEffect } from "react" import { useEffect } from "react"
import { TbArrowDown, TbArrowUp, TbEye, TbEyeOff, TbRefresh, TbSearch, TbUser } from "react-icons/tb" import { TbArrowDown, TbArrowUp, TbEye, TbEyeOff, TbRefresh, TbSearch, TbUser, TbX } from "react-icons/tb"
import { MarkAllAsReadButton } from "./MarkAllAsReadButton" import { MarkAllAsReadButton } from "./MarkAllAsReadButton"
import { ProfileMenu } from "./ProfileMenu" import { ProfileMenu } from "./ProfileMenu"
@@ -67,6 +67,11 @@ export function Header() {
placeholder={t`Search`} placeholder={t`Search`}
{...searchForm.getInputProps("search")} {...searchForm.getInputProps("search")}
icon={<TbSearch size={iconSize} />} icon={<TbSearch size={iconSize} />}
rightSection={
<ActionIcon onClick={() => searchFromStore && dispatch(search(""))}>
<TbX />
</ActionIcon>
}
autoFocus autoFocus
/> />
</form> </form>