88 lines
2.4 KiB
JavaScript
88 lines
2.4 KiB
JavaScript
import InputBase from '@material-ui/core/InputBase'
|
|
import Paper from '@material-ui/core/Paper'
|
|
import { makeStyles } from '@material-ui/core/styles'
|
|
import MAutocomplete from '@material-ui/lab/Autocomplete'
|
|
import classnames from 'classnames'
|
|
import React, { memo, useState } from 'react'
|
|
import SearchIcon from 'src/styling/icons/circle buttons/search/zodiac.svg?react'
|
|
|
|
import { P } from 'src/components/typography'
|
|
|
|
import styles from './SearchBox.styles'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const SearchBox = memo(
|
|
({
|
|
loading = false,
|
|
filters = [],
|
|
options = [],
|
|
inputPlaceholder = '',
|
|
size,
|
|
onChange,
|
|
...props
|
|
}) => {
|
|
const classes = useStyles({ size })
|
|
|
|
const [popupOpen, setPopupOpen] = useState(false)
|
|
|
|
const inputClasses = {
|
|
[classes.input]: true,
|
|
[classes.inputWithPopup]: popupOpen
|
|
}
|
|
|
|
const innerOnChange = filters => onChange(filters)
|
|
|
|
return (
|
|
<MAutocomplete
|
|
loading={loading}
|
|
classes={{ option: classes.autocomplete }}
|
|
value={filters}
|
|
options={options}
|
|
getOptionLabel={it => it.value}
|
|
renderOption={it => (
|
|
<div className={classes.item}>
|
|
<P className={classes.itemLabel}>{it.value}</P>
|
|
<P className={classes.itemType}>{it.type}</P>
|
|
</div>
|
|
)}
|
|
autoHighlight
|
|
disableClearable
|
|
clearOnEscape
|
|
multiple
|
|
filterSelectedOptions
|
|
getOptionSelected={(option, value) => option.type === value.type}
|
|
PaperComponent={({ children }) => (
|
|
<Paper elevation={0} className={classes.popup}>
|
|
<div className={classes.separator} />
|
|
{children}
|
|
</Paper>
|
|
)}
|
|
renderInput={params => {
|
|
return (
|
|
<InputBase
|
|
ref={params.InputProps.ref}
|
|
{...params}
|
|
className={classnames(inputClasses)}
|
|
startAdornment={<SearchIcon className={classes.iconButton} />}
|
|
placeholder={inputPlaceholder}
|
|
inputProps={{
|
|
className: classes.bold,
|
|
classes: {
|
|
root: classes.size
|
|
},
|
|
...params.inputProps
|
|
}}
|
|
/>
|
|
)
|
|
}}
|
|
onOpen={() => setPopupOpen(true)}
|
|
onClose={() => setPopupOpen(false)}
|
|
onChange={(_, filters) => innerOnChange(filters)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
)
|
|
|
|
export default SearchBox
|