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 album list search

Browse source
This commit is contained in:
jeffvli 2022-12-21 01:27:19 -08:00
parent b742b814c0
commit 19f55b4a2e
8 changed files with 275 additions and 181 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/renderer/components/index.ts
View file

@ -27,3 +27,4 @@ export * from './grid-carousel';
export * from './card';
export * from './feature-carousel';
export * from './badge';
export * from './search-input';

12
src/renderer/components/input/index.tsx
View file

@ -82,6 +82,8 @@ const StyledTextInput = styled(MantineTextInput)<TextInputProps>`
& .mantine-TextInput-disabled {
opacity: 0.6;
}
transition: width 0.3s ease-in-out;
`;
const StyledNumberInput = styled(MantineNumberInput)<NumberInputProps>`
@ -125,6 +127,8 @@ const StyledNumberInput = styled(MantineNumberInput)<NumberInputProps>`
& .mantine-NumberInput-disabled {
opacity: 0.6;
}
transition: width 0.3s ease-in-out;
`;
const StyledPasswordInput = styled(MantinePasswordInput)<PasswordInputProps>`
@ -152,6 +156,8 @@ const StyledPasswordInput = styled(MantinePasswordInput)<PasswordInputProps>`
& .mantine-PasswordInput-disabled {
opacity: 0.6;
}
transition: width 0.3s ease-in-out;
`;
const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
@ -179,6 +185,8 @@ const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
& .mantine-FileInput-disabled {
opacity: 0.6;
}
transition: width 0.3s ease-in-out;
`;
const StyledJsonInput = styled(MantineJsonInput)<JsonInputProps>`
@ -206,6 +214,8 @@ const StyledJsonInput = styled(MantineJsonInput)<JsonInputProps>`
& .mantine-JsonInput-disabled {
opacity: 0.6;
}
transition: width 0.3s ease-in-out;
`;
const StyledTextarea = styled(MantineTextarea)<TextareaProps>`
@ -233,6 +243,8 @@ const StyledTextarea = styled(MantineTextarea)<TextareaProps>`
& .mantine-Textarea-disabled {
opacity: 0.6;
}
transition: width 0.3s ease-in-out;
`;
export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(

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

@ -0,0 +1,50 @@
import { ChangeEvent } from 'react';
import { TextInputProps } from '@mantine/core';
import { useFocusWithin, useHotkeys, useMergedRef } from '@mantine/hooks';
import { RiSearchLine } from 'react-icons/ri';
import { TextInput } from '/@/renderer/components/input';
interface SearchInputProps extends TextInputProps {
initialWidth?: number;
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
openedWidth?: number;
value?: string;
}
export const SearchInput = ({
initialWidth,
onChange,
openedWidth,
...props
}: SearchInputProps) => {
const { ref, focused } = useFocusWithin();
const mergedRef = useMergedRef<HTMLInputElement>(ref);
const isOpened = focused || ref.current?.value;
useHotkeys([
[
'ctrl+F',
() => {
ref.current.select();
},
],
]);
return (
<TextInput
ref={mergedRef}
{...props}
icon={<RiSearchLine size={15} />}
styles={{
input: {
backgroundColor: isOpened ? 'inherit' : 'transparent !important',
border: 'none !important',
padding: isOpened ? '10px' : 0,
},
}}
width={isOpened ? openedWidth || 200 : initialWidth || 50}
onChange={onChange}
/>
);
};