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 | 12x 12x 12x | import React from 'react'; import * as R from 'ramda'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import ArrowUp from '@material-ui/icons/KeyboardArrowUp'; import ArrowDown from '@material-ui/icons/KeyboardArrowDown'; const StyledButton = withStyles(theme => ({ root: { minHeight: '43px', borderRadius: theme.shape.borderRadius, padding: theme.spacing(0.75, 2, 0.5, 2), color: theme.palette.common.white, backgroundColor: R.path(['palette', 'button', 'mainOpacity'], theme) || theme.palette.primary.main, display: 'flex', justifyContent: 'space-between', '&:hover': { backgroundColor: R.path(['palette', 'highlight', 'hl1'], theme) || theme.palette.primary.dark, }, }, label: { textTransform: 'uppercase', textAlign: 'left', fontSize: '0.9375rem', lineHeight: '1.0', }, }))(Button); const ToggleButton = ({ isOpen, label, toggle }) => ( <StyledButton fullWidth variant="text" onClick={R.is(Function)(toggle) ? toggle : null}> {label} {isOpen ? <ArrowUp /> : <ArrowDown />} </StyledButton> ); ToggleButton.propTypes = { isOpen: PropTypes.bool, label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), toggle: PropTypes.func, }; export default ToggleButton; |