83 lines
2.4 KiB
JavaScript
83 lines
2.4 KiB
JavaScript
import InputBase from '@mui/material/InputBase'
|
|
import Paper from '@mui/material/Paper'
|
|
import MAutocomplete from '@mui/material/Autocomplete'
|
|
import classnames from 'classnames'
|
|
import React, { memo, useState } from 'react'
|
|
import { P } from './typography'
|
|
import SearchIcon from '../styling/icons/circle buttons/search/zodiac.svg?react'
|
|
|
|
const SearchBox = memo(
|
|
({
|
|
loading = false,
|
|
filters = [],
|
|
options = [],
|
|
inputPlaceholder = '',
|
|
onChange,
|
|
...props
|
|
}) => {
|
|
const [popupOpen, setPopupOpen] = useState(false)
|
|
|
|
const inputClasses = {
|
|
'flex flex-1 h-8 px-2 py-2 font-md items-center rounded-2xl bg-zircon text-comet': true,
|
|
'rounded-b-none': popupOpen,
|
|
}
|
|
|
|
const innerOnChange = filters => onChange(filters)
|
|
|
|
return (
|
|
<MAutocomplete
|
|
loading={loading}
|
|
value={filters}
|
|
options={options}
|
|
getOptionLabel={it => it.label || it.value}
|
|
renderOption={(props, it) => (
|
|
<li {...props}>
|
|
<div className="flex flex-row w-full h-8">
|
|
<P className="m-0 whitespace-nowrap overflow-hidden text-ellipsis">
|
|
{it.label || it.value}
|
|
</P>
|
|
<P className="m-0 ml-auto text-sm text-come">{it.type}</P>
|
|
</div>
|
|
</li>
|
|
)}
|
|
autoHighlight
|
|
disableClearable
|
|
clearOnEscape
|
|
multiple
|
|
filterSelectedOptions
|
|
isOptionEqualToValue={(option, value) => option.type === value.type}
|
|
renderInput={params => {
|
|
return (
|
|
<InputBase
|
|
ref={params.InputProps.ref}
|
|
{...params}
|
|
className={classnames(inputClasses)}
|
|
startAdornment={<SearchIcon className="mr-3" />}
|
|
placeholder={inputPlaceholder}
|
|
inputProps={{
|
|
className: 'font-bold',
|
|
...params.inputProps,
|
|
}}
|
|
/>
|
|
)
|
|
}}
|
|
onOpen={() => setPopupOpen(true)}
|
|
onClose={() => setPopupOpen(false)}
|
|
onChange={(_, filters) => innerOnChange(filters)}
|
|
{...props}
|
|
slots={{
|
|
paper: ({ children }) => (
|
|
<Paper
|
|
elevation={0}
|
|
className="flex flex-col rounded-b-xl bg-zircon shadow-2xl">
|
|
<div className="w-[88%] h-[1px] my-p mx-auto border-1 border-comet" />
|
|
{children}
|
|
</Paper>
|
|
),
|
|
}}
|
|
/>
|
|
)
|
|
},
|
|
)
|
|
|
|
export default SearchBox
|