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 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | 61x 61x 146x 146x 146x 146x 1x 146x | /* eslint-disable sort-keys */
import React, { useState } from 'react';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import { ContributorThumbnail } from './ContributorThumbnail';
import { DropdownArrow } from './DropdownArrow';
import Grid from '@material-ui/core/Grid';
const useStyles = makeStyles(theme => ({
dropdown: {
margin: '0.75rem 0',
display: 'flex',
alignItems: 'center',
backgroundColor: theme.palette.background.default,
boxSizing: 'border-box',
border: '1px solid #BCBCBC',
borderRadius: '4px',
paddingRight: '26.5rem',
width:'928px',
height:'80px',
},
chevron: {
cursor: 'pointer',
fontSize: '1.3rem',
},
blueColor: {
backgroundColor: "#004364",
color:"theme.palette.text.secondary",
display: 'flex',
alignItems: 'center',
paddingRight: '26.5rem',
width:'928px',
},
afflDropdown: {
paddingLeft: '365px',
width: '18px',
height: '30px',
},
dropdownStyle : {
maxWidth: '32%',
paddingTop:'21px',
paddingLeft: '149px',
fontSize:'24px',
color:"#004364",
},
blueColorStyle : {
maxWidth: '32%',
paddingTop:'22px',
paddingLeft: '146px',
fontSize:'24px',
color:'#FEFEFE',
},
}));
export const Dropdown = ({
organization,
children,
dropdownLength,
isOpen,
}) => {
const [open, setOpen] = useState(false);
const [colorStyle, setColor] = useState(false);
const classes = useStyles();
const openColor = () => {
setColor(!colorStyle);
};
return (
<Grid onClick={openColor} className="containerDropdown">
{dropdownLength ? (
<Box className={colorStyle ? `${classes.blueColor} ` : `${classes.dropdown}`}>
<Grid container>
<Grid item xs={4}>
<ContributorThumbnail organization={organization} isOpen={colorStyle} />
</Grid>
<Grid item xs={4} className={colorStyle ? `${classes.blueColorStyle} ` : `${classes.dropdownStyle}`}>
({dropdownLength})
</Grid>
</Grid>
<Grid>
<Typography variant='body2' className={classes.afflDropdown}><DropdownArrow className={classes.thumbnailOpen} setOpenFunction={setOpen} /></Typography>
</Grid>
</Box>
) : null}
{open && children}
</Grid>
);
};
|