71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
/**
|
|
* Core
|
|
* ============================================
|
|
*/
|
|
import { useEffect } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { Grid } from '@mui/material';
|
|
|
|
/**
|
|
* Components
|
|
* ============================================
|
|
*/
|
|
// - Global -
|
|
import { FormProvider, RHFTextField } from '@/components/hook-form';
|
|
// - Local -
|
|
|
|
/**
|
|
* Icon, Utils, Types, Functions
|
|
* ============================================
|
|
*/
|
|
import { Search } from '@mui/icons-material';
|
|
import { SearchType } from '../Model/Types';
|
|
|
|
type Props = {
|
|
onSubmit: (keyword: string) => void,
|
|
onEmpty: () => void,
|
|
};
|
|
|
|
const FormCreateSearch = ({ onSubmit, onEmpty }: Props) => {
|
|
const defaultValuesSearchForm = {
|
|
keyword: ''
|
|
};
|
|
|
|
const methodsSearchForm = useForm<SearchType>({
|
|
defaultValues: defaultValuesSearchForm
|
|
});
|
|
|
|
const { handleSubmit, formState: { isDirty } } = methodsSearchForm;
|
|
|
|
// search on submit
|
|
const onSubmitSearch = (data: SearchType ) => {
|
|
onSubmit(data.keyword);
|
|
}
|
|
|
|
// search on empty
|
|
useEffect(() => {
|
|
if (isDirty === false) {
|
|
onEmpty()
|
|
}
|
|
},[isDirty])
|
|
|
|
return (
|
|
<FormProvider methods={methodsSearchForm} onSubmit={handleSubmit(onSubmitSearch)}>
|
|
<Grid container direction={"row"}>
|
|
<Grid item xs={12}>
|
|
<RHFTextField
|
|
name="keyword"
|
|
placeholder="Search..."
|
|
autoComplete='off'
|
|
fullWidth
|
|
InputProps={{ startAdornment: <Search /> }}
|
|
sx={{ input: { paddingLeft: '14px' } }}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</FormProvider>
|
|
)
|
|
}
|
|
|
|
export default FormCreateSearch
|