67 lines
1.9 KiB
JavaScript
67 lines
1.9 KiB
JavaScript
import _ from '@lodash';
|
|
import Button from '@mui/material/Button';
|
|
// import Select from '@mui/material/Select';
|
|
import TextField from '@mui/material/TextField';
|
|
import clsx from 'clsx';
|
|
import { forwardRef, memo, useCallback } from 'react';
|
|
|
|
const SEARCH_INPUT_MODES = {
|
|
simple: 'simple',
|
|
manual: 'manual',
|
|
};
|
|
|
|
const StyledTextField = forwardRef((props, ref) => (
|
|
<TextField
|
|
InputProps={{
|
|
sx: {
|
|
background: (theme) => theme.palette.background.paper,
|
|
borderRadius: '15px',
|
|
borderColor: (theme) => theme.palette.secondary.light,
|
|
borderWidth: '1px',
|
|
boxShadow: '1px 1px 4px 0px rgba(0, 0, 0, 0.25)',
|
|
},
|
|
}}
|
|
{...props}
|
|
ref={ref}
|
|
/>
|
|
));
|
|
|
|
function SearchInput({ className, mode, placeholder, btnText, query, onType, onSearch }) {
|
|
const isSimpleMode = mode === SEARCH_INPUT_MODES.simple;
|
|
const isManualMode = mode === SEARCH_INPUT_MODES.manual;
|
|
const hasBtn = isSimpleMode || isManualMode;
|
|
|
|
const debouncedOnType = useCallback(_.debounce(onType, 250), [onType]);
|
|
|
|
return (
|
|
<form className={clsx('flex items-center gap-20', className)}>
|
|
<StyledTextField
|
|
type="text"
|
|
variant="outlined"
|
|
className="w-full bourder-0"
|
|
defaultValue={query}
|
|
placeholder={placeholder ?? ''}
|
|
onChange={debouncedOnType}
|
|
/>
|
|
|
|
{/* {isManualMode && <Select />} */}
|
|
|
|
{hasBtn && (
|
|
<Button
|
|
variant="contained"
|
|
color="inherit"
|
|
className="text-center text-base text-primary-light font-semibold tracking-widest uppercase rounded-2xl bg-secondary-light shadow hover:shadow-hover hover:shadow-secondary-light ease-in-out duration-300"
|
|
aria-label={btnText ?? ''}
|
|
type="button"
|
|
size="large"
|
|
onClick={onSearch}
|
|
>
|
|
{btnText}
|
|
</Button>
|
|
)}
|
|
</form>
|
|
);
|
|
}
|
|
|
|
export default memo(SearchInput);
|