feat(notification): added detail callback; added Clearall callback

src/components/Notification/Notification.examples.md

@@ -2,33 +2,77 @@
 
 ```js
 const Flexbox = require('flexbox-react').default;
-
-const notificationCount = 8;
-
 const notifications1 = [];
 
 const notifications = [
-    {id:1, type:'error', title:'First Notification', description:'Tets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ', timeStamp:'Just now', isMsgRead:false},
-    {id:2, type:'success', title:'Second Notification', description:'Tetsetetsd hgfasdgfasjfgsdfjgfh', timeStamp:'Just now', isMsgRead:false},
-    {id:3, type:'info', title:'Third Notification', description:'Tetsetetsdhgfasdgfasjfgs dfjgfh', timeStamp:'Just now', isMsgRead:false},
-    {id:4, type:'warning', title:'Fourth Notification', description:'Tetsetetsdhgfa sdgfasjfgsdfjgfh', timeStamp:'Just now', isMsgRead:true},
-    {id:5, type:'error', title:'Fifth Notification', description:'Tets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ', timeStamp:'Just now', isMsgRead:false},
-    {id:6, type:'error', title:'Six Notification', description:'Tetsetetsd hgfasdgfasjfgsdfjgfh', timeStamp:'Just now', isMsgRead:false},
-    {id:7, type:'info', title:'Seven Notification', description:'Tetsetetsdhgfasdgfasjfgs dfjgfh', timeStamp:'Just now', isMsgRead:false},
-    {id:8, type:'warning', title:'First Notification', description:'Tetsetetsdhgfa sdgfasjfgsdfjgfh', timeStamp:'Just now', isMsgRead:true}
+    {id:1, type:'error',
+    title:'First Notification',
+    description:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nulla arcu, elementum in nibh eu, volutpat interdum lorem. Suspendisse congue consequat congue. Vestibulum iaculis, ipsum sed semper semper, leo velit varius quam, eget tincidunt augue nunc at turpis.',
+    timeStamp:'Just now',
+    isMsgRead:false},
+    {id:2,
+    type:'success',
+    title:'Second Notification',
+    description:'Curabitur congue ligula sit amet lacus gravida lacinia. Curabitur id orci vel ligula ultricies sollicitudin. Nullam vel neque commodo, rutrum diam sed, cursus ex.',
+    timeStamp:'Just now',
+    isMsgRead:false},
+    {id:3,
+    type:'info',
+    title:'Third Notification',
+    description:'Nulla accumsan, augue sit amet maximus hendrerit, nisl erat pharetra erat, vitae lacinia quam velit tincidunt turpis. Phasellus sagittis, libero vel ullamcorper laoreet, lorem libero scelerisque nisl, nec suscipit metus lacus sit amet justo.',
+    timeStamp:'Just now',
+    isMsgRead:false},
+    {id:4,
+    type:'warning',
+    title:'Fourth Notification',
+    description:'Pellentesque eget posuere turpis.',
+    timeStamp:'Just now',
+    isMsgRead:true},
+    {id:5,
+    type:'error',
+    title:'Fifth Notification',
+    description:'Integer enim tellus, molestie quis magna scelerisque, commodo malesuada erat. Cras sodales dolor enim.',
+    timeStamp:'Just now',
+    isMsgRead:false},
+    {id:6,
+    type:'error',
+    title:'Six Notification',
+    description:'Fusce ac ornare nulla, ut faucibus nunc.',
+    timeStamp:'Just now',
+    isMsgRead:false},
+    {id:7,
+    type:'info',
+    title:'Seven Notification',
+    description:'Curabitur semper tincidunt augue non faucibus. Nullam in dui pellentesque, tempor urna non, tincidunt arcu.',
+    timeStamp:'Just now',
+    isMsgRead:false},
+    {id:8,
+    type:'warning',
+    title:'Eighth Notification',
+    description:'Quisque sagittis metus ac mattis maximus. Curabitur quis lorem et diam sodales cursus.',
+    timeStamp:'Just now',
+    isMsgRead:true}
 ];
-
-<div >
-    <Notification>
-        <Notification.Badge key={'badge'}  size='large' notificationCount={notificationCount} />
-        <Notification.Tray key={'tray'}>        
-            <Notification.Header title={'Notification'} notificationCount={notificationCount} />
-            <Notification.Body notifications={notifications} removeItem={null}>
-            </Notification.Body>           
-            <Notification.Footer>
-              <div>Clear All</div>          
-            </Notification.Footer>
-        </Notification.Tray>    
-    </Notification>
+
+initialState = {
+  detail: undefined,
+  notifications: notifications
+};
+
+<div>
+  <Notification
+    notifications={state.notifications}
+    detail={state.detail}
+    onNotificationClicked={id => {
+        console.log('clicked: '+id)
+        setState({ detail: id}) 
+      }
+    }
+    onClearAll={() => {
+        console.log('Clear All')
+      }
+    }
+
+  />
 </div>
-```
+```

src/components/Notification/Notification.jsx

@@ -9,18 +9,45 @@ import NotificationFooter from './NotificationFooter'
 import NotificationEmpty from './NotificationEmpty'
 
 const Notification = props => {
-  const { children, ...rest } = props
-  let visible = true
-  let childrenNodes = {}
-  children.forEach(ele => {
-    childrenNodes[ele.key] = ele
-  })
+  const {
+    children,
+    notifications,
+    onNotificationClicked,
+    onClearAll,
+    ...rest
+  } = props
+
+  const notificationCount = notifications.length
+
+  const badge = (
+    <Notification.Badge
+      key={'badge'}
+      size='large'
+      notificationCount={notificationCount}
+    />
+  )
+  const tray = (
+    <Notification.Tray key={'tray'}>
+      <Notification.Header
+        title={'Notification'}
+        detail={props.detail}
+        notificationCount={notificationCount}
+        onNotificationClicked={onNotificationClicked}
+      />
+      <Notification.Body
+        detail={props.detail}
+        notifications={notifications}
+        removeItem={3}
+        onNotificationClicked={onNotificationClicked}
+      />
+      <Notification.Footer onClearAll={onClearAll} />
+    </Notification.Tray>
+  )
 
   return (
     <Popup
-      visible={visible}
-      trigger={childrenNodes.badge}
-      content={childrenNodes.tray}
+      trigger={badge}
+      content={tray}
       on='click'
       position='bottom center'
       className={'notificationPopup'}

src/components/Notification/NotificationBody.jsx

@@ -4,15 +4,34 @@ import NotificationMessage from './NotificationMessage'
 import NotificationEmpty from './NotificationEmpty'
 
 const NotificationBody = props => {
-  const { children, notifications, removeItem, ...rest } = props
-  let componentToRender = (
-    <div>
-      <NotificationEmpty />
-    </div>
-  )
+  const {
+    children,
+    notifications,
+    removeItem,
+    onNotificationClicked,
+    ...rest
+  } = props
+  const notificationsLength = notifications.length
+  console.log('NotificationBody')
+  if (props.detail) {
+    const selectedNotification = (function () {
+      for (let i = 0; i < notificationsLength; i++) {
+        console.log(notifications[i].id + ' =? ' + props.detail)
+        if (notifications[i].id === props.detail) return notifications[i]
+      }
+      return {}
+    })()
+    selectedNotification.icon = getAlertIconClassName(selectedNotification.type)
+    return (
+      <NotificationMessage
+        key={selectedNotification.id}
+        options={selectedNotification}
+      />
+    )
+  }
 
-  if (notifications.length > 0) {
-    componentToRender = (
+  if (notificationsLength > 0) {
+    return (
       <div className='notificationBody' {...rest}>
         {notifications.map(
           ({ id, type, title, description, timeStamp, isMsgRead }) => {
@@ -23,17 +42,19 @@ const NotificationBody = props => {
               title,
               description,
               icon: icon,
-              removeItem: removeItem
+              timeStamp: timeStamp,
+              removeItem: removeItem,
+              onNotificationClicked: onNotificationClicked
             }
             return <NotificationMessage key={id} options={options} />
           }
         )}
         {children}
       </div>
     )
+  } else {
+    return <NotificationEmpty />
   }
-
-  return componentToRender
 }
 
 NotificationBody.defaultProps = {}

src/components/Notification/NotificationFooter.jsx

@@ -1,10 +1,13 @@
 import React from 'react'
 
 const NotificationFooter = props => {
-  const { children, ...rest } = props
+  const { children, onClearAll, ...rest } = props
+  function handleClearAllClicked () {
+    onClearAll()
+  }
   return (
     <div className={'notificationFooter clearfix'} {...rest}>
-      {children}
+      <div onClick={() => handleClearAllClicked()}>Clear All</div>
     </div>
   )
 }

src/components/Notification/NotificationHeader.jsx

@@ -1,14 +1,33 @@
 import React from 'react'
 
 const NotificationHeader = props => {
-  const { title, notificationCount, children, ...rest } = props
-  return (
+  const {
+    title,
+    notificationCount,
+    detail,
+    children,
+    onNotificationClicked,
+    ...rest
+  } = props
+
+  function handlelistViewClicked () {
+    onNotificationClicked(undefined)
+  }
+
+  const detailView = (
+    <div className={'notificationHeader clearfix'} {...rest}>
+      <a onClick={() => handlelistViewClicked()}>back</a>
+    </div>
+  )
+  const listView = (
     <div className={'notificationHeader clearfix'} {...rest}>
-      <span className='notificationTitle'>{title} </span>
+      <span className='notificationTitle'>{title}</span>
       <span className='notificationCount'>{notificationCount}</span>
       {children}
     </div>
   )
+
+  return detail ? detailView : listView
 }
 
 NotificationHeader.defaultProps = {}

src/components/Notification/NotificationMessage.jsx

@@ -5,11 +5,28 @@ import { Icon } from 'semantic-ui-react'
 
 const NotificationMessage = props => {
   const { options, ...rest } = props
-  const { id, type, title, description, timeStamp, isMsgRead, icon } = options
+  const {
+    id,
+    type,
+    title,
+    description,
+    timeStamp,
+    icon,
+    onNotificationClicked
+  } = options
+
+  function handleNotificationClicked (id) {
+    onNotificationClicked(id)
+  }
+
+  function handleClearClicked (id) {
+    console.log('clear: ' + id)
+  }
+
   return (
     <Flexbox
       id={id}
-      isMsgRead={isMsgRead}
+      onClick={e => handleNotificationClicked(id)}
       flexDirection='column'
       flexGrow={1}
       className={'column singleNotification'}
@@ -21,7 +38,12 @@ const NotificationMessage = props => {
           <div className='notificationTitle'>{title}</div>
           <div className='notificationDesc '>{description}</div>
           <div className='notificationActions'>
-            <span className='notificationClear'>Clear</span>
+            <a
+              className='notificationClear'
+              onClick={e => handleClearClicked(id)}
+            >
+              Clear
+            </a>
           </div>
         </Flexbox>
         <div className='notificationTime'>{timeStamp}</div>
@@ -33,7 +55,6 @@ const NotificationMessage = props => {
 NotificationMessage.defaultProps = {
   title: '',
   description: '',
-  timeStamp: '',
   icon: ''
 }
 

src/util/getAlertIconClassName.jsx

@@ -1,7 +1,7 @@
 export function getAlertIconClassName (status) {
-  console.log(status)
   if (status === 'success') return 'icon_check_alt2'
   if (status === 'information' || status === 'info') return 'ei icon_info_alt'
   if (status === 'warning') return 'ei icon_error-triangle_alt'
   if (status === 'error') return 'ei icon_error-circle_alt'
+  return ''
 }