41 lines
955 B
JavaScript
41 lines
955 B
JavaScript
import Grid from '@material-ui/core/Grid'
|
|
import { makeStyles } from '@material-ui/core/styles'
|
|
import classnames from 'classnames'
|
|
import PropTypes from 'prop-types'
|
|
import React from 'react'
|
|
|
|
import { white } from 'src/styling/variables'
|
|
|
|
const cardState = Object.freeze({
|
|
DEFAULT: 'default',
|
|
SHRUNK: 'shrunk',
|
|
EXPANDED: 'expanded'
|
|
})
|
|
|
|
const styles = {
|
|
card: {
|
|
wordWrap: 'break-word',
|
|
boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)',
|
|
borderRadius: 12,
|
|
padding: 24,
|
|
backgroundColor: white
|
|
}
|
|
}
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const CollapsibleCard = ({ className, state, shrunkComponent, children }) => {
|
|
const classes = useStyles()
|
|
return (
|
|
<Grid item className={classnames(className, classes.card)}>
|
|
{state === cardState.SHRUNK ? shrunkComponent : children}
|
|
</Grid>
|
|
)
|
|
}
|
|
|
|
CollapsibleCard.propTypes = {
|
|
shrunkComponent: PropTypes.node.isRequired
|
|
}
|
|
|
|
export default CollapsibleCard
|
|
export { cardState }
|