diff --git a/src/NotificationHeader.jsx b/src/NotificationHeader.jsx index 805e28e..29803f0 100644 --- a/src/NotificationHeader.jsx +++ b/src/NotificationHeader.jsx @@ -27,7 +27,11 @@ const useStyles = makeStyles(theme => ({ color: '#7e7e7e' }, chevron: { - fontSize: '1.1rem' + fontSize: '1.1rem', + transition: 'transform 300ms', + '&.expanded': { + transform: 'rotate(180deg)' + } } })); export default function NotificationHeader(props) { @@ -36,6 +40,7 @@ export default function NotificationHeader(props) { const icon = props.icon const date = props.date const accent = props.accent + const expanded = props.expanded return (
@@ -44,7 +49,7 @@ export default function NotificationHeader(props) { {name} {date} - +
) } \ No newline at end of file diff --git a/src/index.jsx b/src/index.jsx index b5511a5..d3c8e05 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -16,6 +16,8 @@ const useStyles = makeStyles(theme => ({ export default function AndroidNotification(props) { const classes = useStyles() + const [expanded, setExpanded] = React.useState(false) + const defaultProps = { name: 'Android Notification', icon: , @@ -24,10 +26,15 @@ export default function AndroidNotification(props) { title: 'Awesome Notification', body: 'this is an awesome notification !' } + + function toggleExpandMode() { + setExpanded(!expanded) + } + return ( - + - +