123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- import IconButton from '@mui/material/IconButton'
- import MenuIcon from '@mui/icons-material/Menu';
- import SearchIcon from '@mui/icons-material/Search';
- import InputBase from '@mui/material/InputBase';
- import ArrowBackIcon from '@mui/icons-material/ArrowBack';
- import Switch from '@mui/material/Switch';
- import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
- import StaticDatePicker from "./StaticDatePicker";
- import { styled } from '@mui/material/styles';
- import { makeStyles } from '@material-ui/core'
- import { useDispatch } from 'react-redux';
- import { updateUser } from '../../../../api-data';
- import { TLeftIsOpen } from '../../../../typescript/redux/control/types';
- import { asyncCurrentUser } from '../../../../redux/authorization/operations';
- const Search = styled('div')(({ theme }:any) => ({
- position: 'relative',
- borderRadius: '20px',
- backgroundColor: '#f1f0f0',
- width: '100%',
- margin:'0 5% 0 5%'
- }));
- const SearchIconWrapper = styled('div')(({ theme }) => ({
- padding: theme.spacing(0, 2),
- height: '100%',
- position: 'absolute',
- pointerEvents: 'none',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- }));
- const StyledInputBase = styled(InputBase)(({ theme }) => ({
- color: 'inherit',
- '& .MuiInputBase-input': {
- fontWeight: 500,
- borderRadius: '20px',
- padding: theme.spacing(1, 1, 1, 0),
- paddingLeft: `calc(1em + ${theme.spacing(4)})`,
- transition: theme.transitions.create('width'),
- width: '100%',
- },
- }));
- const useStyles = makeStyles({
- toolBar: {
- display: 'flex',
- alignContent: 'center',
- alignItems:'center',
- color: '#b1aeae',
- height: '7vh',
- padding: 0,
- margin:0,
- },
- activeSearch: {
- outline: '2px solid #2184f7',
- color: '#2184f7'
- },
- iconBtn: {
- '&:hover': {
- transform: 'rotate(180deg)',
- transition: 'all 250ms ease-out ',
- }
- },
- iconArrow: {
- '&:hover': {
- transform: 'rotate(360deg)',
- transition: 'all 250ms ease-out ',
- }
- },
- })
- const label = { inputProps: { 'aria-label': 'Switch demo' } };
- interface ISearchBar {
- handleClick:() => void,
- handleOpenIsSearch:(e: any) => void,
- handleSearch:(e: React.ChangeEvent<HTMLInputElement>) => void,
- leftIsOpen: TLeftIsOpen,
- value: string,
- sort: boolean,
- setDate: React.Dispatch<any>,
- date:any,
- disabled: boolean,
- }
- const SearchBar = ({ handleClick, handleOpenIsSearch, handleSearch, leftIsOpen,
- value, sort, setDate, date, disabled }: ISearchBar) => {
- const dispatch = useDispatch()
- const handleSort = () => {
- updateUser({ sort: !sort })
- setTimeout(() => {
- dispatch(asyncCurrentUser())
- }, 1000);
- }
- const handleOnOpen = () => setDate('')
-
- const classes = useStyles()
- return (
- <div className={classes.toolBar}>
- <IconButton onClick={handleClick}>
- {leftIsOpen ? <ArrowBackIcon className={classes.iconArrow} /> : <MenuIcon className={classes.iconBtn} />}
- </IconButton>
- <div onFocus={handleOpenIsSearch} style={{display:'flex',width:'100%'}}>
- <Search id='search' className={value?classes.activeSearch:undefined}>
- <SearchIconWrapper id='search'>
- <SearchIcon id='search'/>
- </SearchIconWrapper>
- <StyledInputBase
- id='search'
- value={value}
- onChange={handleSearch}
- placeholder={disabled?'Disabled':'Search'}
- inputProps={{ 'aria-label': 'search' }}
- disabled={disabled}/>
- </Search>
- <IconButton aria-label="delete" size="medium" disabled={disabled}>
- <StaticDatePicker date={date} disabled={disabled}
- changeDate={setDate} handleOnOpen={handleOnOpen} />
- <CalendarTodayIcon fontSize='medium'
- style={{color:date?'#2184f7':'#b1aeae'}}/>
- </IconButton>
- <Switch id='sort' onClick={handleSort} checked={sort} {...label} disabled={disabled} />
- </div>
- </div>
- )
- }
- export default SearchBar
|