Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 61x 112x 112x 112x 112x 4x 4x 4x 4x 112x 112x 4x | import React, { useRef, useState } from "react";
import ExpandMoreOutlinedIcon from '@material-ui/icons/ExpandMoreOutlined';
import { makeStyles } from '@material-ui/core/styles';
export const DropdownArrow = ({ setOpenFunction }) => {
const arrow = useRef(null);
const [colorStyle, setColor] = useState(false);
const useStyles = makeStyles(theme => ({
chevron: {
cursor: "pointer",
margin: "auto 0 auto auto",
paddingTop: '10px',
width: '53px',
height: '45px',
color: '#004364',
marginTop: '-10px',
},
clickDropDown: {
margin: "auto 0 auto auto",
paddingTop: '10px',
width: '53px',
height: '45px',
color: '#FEFEFE',
},
}));
const handleClick = (setOpenFunction) => {
setColor(!colorStyle);
Eif (!arrow.current.style.transform) {
arrow.current.style.transform = "rotate(180deg)";
} else {
arrow.current.style.transform = "";
}
setOpenFunction((c) => !c);
};
const classes = useStyles();
return (
<>
<ExpandMoreOutlinedIcon id = "dropdownChevron" ref={arrow}
className={colorStyle ? `${classes.clickDropDown} ` : `${classes.chevron}`}
onClick={()=>handleClick(setOpenFunction)}
alt="/images/Chevron.png" />
</>
);
};
|