Merge pull request #7 from nikandlv/development

Action and variant update
nikandlv · Aug 9, 2019 · 733654a · 733654a
2 parents 6272fcb + 762fc93
commit 733654a
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 26 deletions.
diff --git a/examples/src/index.js b/examples/src/index.js
@@ -16,6 +16,7 @@ const items = [
     {
         title: "Simple Notification",
         props: {
+            buttons:() => {},
         },
         body: "this is a basic notification without any props and actions"
     },
@@ -24,7 +25,14 @@ const items = [
         props: {
             title:"Awesome Notification",
             body:"this is an awesome notification !",
-            timeStamp:"Nov 6"
+            date:"Nov 6",
+            buttons:() => (
+                <React.Fragment>
+                    <Button>Replay</Button>
+                    <Button>Mark as read</Button>
+                    <IconButton><Add/></IconButton>
+                </React.Fragment>
+            ),
         },
         body: "this is a basic notification with custom title and body with no actions "
     },
@@ -33,7 +41,14 @@ const items = [
         props: {
             name:"Awesome Notification",
             title:"Awesome Notification",
-            body:"this is an awesome notification !"
+            body:"this is an awesome notification !",
+            buttons:() => (
+                <React.Fragment>
+                    <Button>Replay</Button>
+                    <Button>Mark as read</Button>
+                    <IconButton><Add/></IconButton>
+                </React.Fragment>
+            ),
         },
         body: "this is a basic notification with custom name, title and and body"
     }
@@ -45,7 +60,13 @@ const items = [
             title:"Luv",
             body:"Sorry but i dont love you back ...",
             icon:<Message />,
-            buttons:[<Button>Replay</Button>,<Button>Mark as read</Button>,<IconButton><Add/></IconButton>],
+            buttons:() => (
+                <React.Fragment>
+                    <Button>Replay</Button>
+                    <Button>Mark as read</Button>
+                    <IconButton><Add/></IconButton>
+                </React.Fragment>
+            ),
         },
         propsString: {
             buttons:'[<Button>Replay</Button>,<Button>Mark as read</Button>]',
@@ -61,7 +82,13 @@ const items = [
             body:"Sorry but i dont love you back ...",
             icon:<Message />,
             v2:true,
-            buttons:[<Button>Replay</Button>,<Button>Mark as read</Button>,<IconButton><Add/></IconButton>],
+            buttons:() => (
+                <React.Fragment>
+                    <Button>Replay</Button>
+                    <Button>Mark as read</Button>
+                    <IconButton><Add/></IconButton>
+                </React.Fragment>
+            ),
         },
         propsString: {
             buttons:'[<Button>Replay</Button>,<Button>Mark as read</Button>]',
@@ -83,7 +110,13 @@ const items = [
                 alert("body clicked!");
             },
             icon:<Message />,
-            buttons:[<Button>Replay</Button>,<Button>Mark as read</Button>,<IconButton><Add/></IconButton>],
+            buttons:() => (
+                <React.Fragment>
+                    <Button>Replay</Button>
+                    <Button>Mark as read</Button>
+                    <IconButton><Add/></IconButton>
+                </React.Fragment>
+            ),
         },
         propsString: {
             buttons:'[<Button>Replay</Button>,<Button>Mark as read</Button>]',
@@ -143,11 +176,14 @@ class App extends React.Component {
             <AndroidNotification
                 name="AndroidNotification"
                 title="My Notification"
-                timeStamp="Nov 6"
+                date="Nov 6"
                 body="This is an awesome Notification!!!"
-                buttons={[<Button>Reply</Button>, <Button>Archive</Button>,<IconButton><Add/></IconButton>]}
                 expand={this.state.expanded}
-            />
+            >
+                <Button>Reply</Button>
+                <Button>Archive</Button>
+                <IconButton><Add/></IconButton>
+                </AndroidNotification>
             </div>
             <br />
             <Typography variant="display1">Usage</Typography>
@@ -168,7 +204,7 @@ class App extends React.Component {
                 +"\title:{Notification Title : string}\n"
                 +"\tbody:{Notification Body : string}\n"
                 +"\ticon:{Notification Icon : react SvgIcon Component, default: whatshot}\n"
-                +"\ttimeStamp:{Notification time : string, default : now}\n"
+                +"\tdate:{Notification time : string, default : now}\n"
                 +"\taccent:{Notification Accent : string, default : theme.palette.primary.main}\n"
                 +"\texpand:{Notification Expand state : bool, default : false}\n"
                 +"\trounded:{Notification Round state : bool, default : false}\n"
@@ -190,7 +226,9 @@ class App extends React.Component {
                             <Typography variant="title">{item.title}</Typography>
                             <br />
                             <div className="notification">
-                                <AndroidNotification {...item.props} />
+                                <AndroidNotification {...item.props}>
+                                    {item.props.buttons()}
+                                </AndroidNotification>
                             </div>
                             <Highlight className='xml html js javascript'>
                                 {

diff --git a/src/NotificationActions.jsx b/src/NotificationActions.jsx
@@ -1,8 +1,29 @@
 import React from 'react'
-export default function NotificationActions() {
+import Collapse from '@material-ui/core/Collapse';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+      display: 'flex',
+      alignItems: 'center',
+      padding: '.4rem .6rem .4rem .6rem',
+      background: '#eeeeee',
+      maxHeight: 36,
+      "&.pie": {
+        borderBottomLeftRadius: '1rem',
+        borderBottomRightRadius: '1rem'
+    }
+  },
+}));
+//#eeeeee
+export default function NotificationActions(props) {
+    const classes = useStyles();
+    const expanded = props.expanded
     return (
-        <div>
-
-        </div>
+        <Collapse in={expanded}>
+            <div className={`${classes.root} ${props.variant}`}>
+                {props.children}
+            </div>
+        </Collapse>
     )
 }
diff --git a/src/NotificationWrapper.jsx b/src/NotificationWrapper.jsx
@@ -1,8 +1,19 @@
 import React from 'react'
-import { Paper } from '@material-ui/core';
+import Paper from '@material-ui/core/Paper';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+      "&.pie": {
+          borderRadius: '1rem'
+      }
+  },
+}));
+
 export default function NotificationWrapper(props) {
+    const classes = useStyles()
     return (
-        <Paper {...props}>
+        <Paper className={`${classes.root} ${props.variant}`} square={!props.rounded}>
             {props.children}
         </Paper>
     )

diff --git a/src/index.jsx b/src/index.jsx
@@ -10,35 +10,45 @@ import { makeStyles } from '@material-ui/styles';
 const useStyles = makeStyles(theme => ({
     root: {
         width: '100%',
-        textAlign: 'unset'
+        textAlign: 'unset',
+        flexDirection: 'column',
+        alignItems: 'unset',
+        "&.pie": {
+          borderRadius: '1rem'
+        },
     },
   }));
 
 export default function AndroidNotification(props) {
   const classes = useStyles()
   const [expanded, setExpanded] = React.useState(false)
-
+  const variant = props.variant || 'oreo'
   const defaultProps = {
     name: 'Android Notification',
     icon: <Whatshot />,
     date: 'Nov 6',
     accent: 'rgb(63, 81, 181)',
     title: 'Awesome Notification',
-    body: 'this is an awesome notification !'
+    body: 'this is an awesome notification !',
+    rounded: false,
+    variant: 'oreo'
   }
 
   function toggleExpandMode() {
+    if(typeof props.children === 'undefined') {
+      return
+    }
     setExpanded(!expanded)
   }
-
   return (
-      <ButtonBase className={classes.root} onClick={toggleExpandMode}>
-        <NotificationWrapper className={classes.root}>
+    <NotificationWrapper {...defaultProps} {...props}>
+        <ButtonBase className={`${classes.root} ${variant}`} onClick={toggleExpandMode}>
             <NotificationHeader expanded={expanded} {...defaultProps} {...props}/>
             <NotificationBody {...defaultProps} {...props}/>
-          <NotificationActions {...defaultProps} {...props}>
-          </NotificationActions>
-        </NotificationWrapper>
-      </ButtonBase>
+        </ButtonBase>
+        <NotificationActions expanded={expanded} {...defaultProps} {...props}>
+            {props.children}
+        </NotificationActions>
+    </NotificationWrapper>
   )
 }