antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 19:01:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

[enhancement]: support serach on settings page

Browse source
This commit is contained in:
Kendall Garner 2024-05-05 13:25:05 -07:00
parent 683bb0222c
commit 645697367d
No known key found for this signature in database
GPG key ID: 18D2767419676C87
21 changed files with 439 additions and 385 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/renderer/features/settings/components/settings-header.tsx
View file

@ -2,13 +2,23 @@ import { Flex, Group } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals';
import { useTranslation } from 'react-i18next';
import { RiSettings2Fill } from 'react-icons/ri';
import { Button, ConfirmModal, PageHeader } from '/@/renderer/components';
import { Button, ConfirmModal, PageHeader, SearchInput } from '/@/renderer/components';
import { LibraryHeaderBar } from '/@/renderer/features/shared';
import { useSettingsStoreActions } from '../../../store/settings.store';
import { useSettingSearchContext } from '/@/renderer/features/settings/context/search-context';
import { useContainerQuery } from '/@/renderer/hooks';
export const SettingsHeader = () => {
export type SettingsHeaderProps = {
setSearch: (search: string) => void;
};
export const SettingsHeader = ({ setSearch }: SettingsHeaderProps) => {
const { t } = useTranslation();
const { reset } = useSettingsStoreActions();
const search = useSettingSearchContext();
const cq = useContainerQuery();
console.log(cq);
const handleResetToDefault = () => {
reset();
@ -27,7 +37,7 @@ export const SettingsHeader = () => {
};
return (
<Flex>
<Flex ref={cq.ref}>
<PageHeader>
<LibraryHeaderBar>
<Flex
@ -41,13 +51,22 @@ export const SettingsHeader = () => {
{t('common.setting', { count: 2, postProcess: 'titleCase' })}
</LibraryHeaderBar.Title>
</Group>
<Button
compact
variant="default"
onClick={openResetConfirmModal}
>
{t('common.resetToDefault', { postProcess: 'sentenceCase' })}
</Button>
<Group>
<SearchInput
defaultValue={search}
openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
onChange={(event) =>
setSearch(event.target.value.toLocaleLowerCase())
}
/>
<Button
compact
variant="default"
onClick={openResetConfirmModal}
>
{t('common.resetToDefault', { postProcess: 'sentenceCase' })}
</Button>
</Group>
</Flex>
</LibraryHeaderBar>
</PageHeader>