123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- import Toolbar from '@mui/material/Toolbar'
- 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 { styled } from '@mui/material/styles';
- import { makeStyles } from '@material-ui/core'
- import { useDispatch } from 'react-redux';
- import { updateUser } from '../../../../api-data';
- import { asyncCurrentUser } from '../../../../redux/authorization/operations';
- import StaticDatePicker from "./StaticDatePicker";
- 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: {
- color: '#b1aeae',
- height: '7vh',
- },
- 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,
- handleFocus:() => void,
- handleSearch:(e: React.ChangeEvent<HTMLInputElement>) => void,
- isSearch: boolean,
- value: string,
- sort: boolean,
- setDate: React.Dispatch<any>,
- date:any,
- }
- const SearchBar = ({ handleClick, handleFocus, handleSearch, isSearch,
- value, sort,setDate,date }: ISearchBar) => {
- const dispatch = useDispatch()
- const handleSort = () => {
- updateUser({ sort: !sort })
- dispatch(asyncCurrentUser())
- }
- const handleOnOpen = () => setDate('')
-
- const classes = useStyles()
- return (
- <Toolbar className={classes.toolBar}>
- <IconButton onClick={handleClick}>
- {isSearch ? <ArrowBackIcon className={classes.iconArrow} /> : <MenuIcon className={classes.iconBtn} />}
- </IconButton>
- <Search className={value?classes.activeSearch:undefined}>
- <SearchIconWrapper>
- <SearchIcon />
- </SearchIconWrapper>
- <StyledInputBase
- value={value}
- onFocus={handleFocus}
- onChange={handleSearch}
- placeholder='Search'
- inputProps={{ 'aria-label': 'search' }}
- />
- </Search>
- <IconButton aria-label="delete" size="medium">
- <StaticDatePicker date={date}
- changeDate={setDate} handleOnOpen={handleOnOpen} />
- <CalendarTodayIcon fontSize='medium'
- style={{color:date?'#2184f7':'#b1aeae'}}/>
- </IconButton>
- <Switch onClick={handleSort} checked={sort} {...label} />
- </Toolbar>
- )
- }
- export default SearchBar
|