Chevron now reacts when being expanded

nikandlv · Aug 9, 2019 · 90afc36 · 90afc36
1 parent bed2987
commit 90afc36
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git 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 (
         <div className={classes.root}>
             <div className={classes.icon} style={{color: accent}}>
@@ -44,7 +49,7 @@ export default function NotificationHeader(props) {
             <Typography className={classes.name} style={{color: accent}} variant="caption">{name}</Typography>
             <span className={classes.dot}> •</span>
             <Typography className={classes.date} variant="caption">{date}</Typography>
-            <Chevron className={classes.chevron} />
+            <Chevron className={`${classes.chevron} ${(expanded) ? 'expanded' : ''}`} />
         </div>
     )
 }
diff --git 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: <Whatshot />,
@@ -24,10 +26,15 @@ export default function AndroidNotification(props) {
     title: 'Awesome Notification',
     body: 'this is an awesome notification !'
   }
+
+  function toggleExpandMode() {
+    setExpanded(!expanded)
+  }
+
   return (
-      <ButtonBase className={classes.root}>
+      <ButtonBase className={classes.root} onClick={toggleExpandMode}>
         <NotificationWrapper className={classes.root}>
-            <NotificationHeader {...defaultProps} {...props}/>
+            <NotificationHeader expanded={expanded} {...defaultProps} {...props}/>
             <NotificationBody {...defaultProps} {...props}/>
           <NotificationActions {...defaultProps} {...props}>
           </NotificationActions>