preparing for v2 release

.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["es2015", "react"],
+  "presets": ["es2015", "react", "stage-0"],
   "plugins": [
     "transform-es2015-duplicate-keys",
     "transform-class-properties"

CHANGELOG.md

@@ -4,3 +4,9 @@
 
 ## v0.0.2
 **What's New?**
+* Docs updated with useful information
+* Updated some modules to the latest version
+* personalised notification enabled
+* breaking change avatar is now passed as url image instead of element
+* overflowText is now string
+* minWidth of the container changed to 325px as default

README.md

@@ -6,6 +6,10 @@ Spec compliant notifications for react and material ui users
 * Use the latest github release
 * or Install via `npm i react-materialui-notifications`
 
+# Demo
+
+For a demo see the docs site (below), for usage example see `src/app/Main.js`
+
 # Documentation
 
 Consult the website [https://puranjayjain.github.io/react-materialui-notifications](https://puranjayjain.github.io/react-materialui-notifications)
@@ -24,7 +28,10 @@ but we'll adhere to those rules whenever possible.
 
 # TODO
 - [x] a lot of core functionality
-- [ ] finish up props of the notification class
+- [x] finish up props of the notification class
+- [ ] implement expanding notifications
+- [x] show the priority notifications on top
+- [ ] implement custom notification element which the user can pass (PR required)
 - [x] styles for position
 - [ ] swipe to dismiss
 - [ ] i18n

gulp run.bat

@@ -1,2 +1,2 @@
-set  NODE_ENV=development
+set NODE_ENV=development
 gulp default

gulp/tasks/build.js

@@ -1,3 +1,3 @@
 var gulp = require('gulp');
 
-gulp.task('build', ['browserify', 'markup']);
+gulp.task('build', ['browserify', 'copyImages', 'markup']);

gulp/tasks/copyImages.js

@@ -0,0 +1,7 @@
+// copy relevant images to the destination folder
+var gulp = require('gulp');
+
+gulp.task('copyImages', function() {
+  return gulp.src('assets/**/*.png')
+    .pipe(gulp.dest('build'));
+});

gulp/tasks/release.js

@@ -2,4 +2,4 @@
 
 var gulp = require('gulp');
 
-gulp.task('release', ['browserify', 'markup', 'minify', 'minifyApp']);
+gulp.task('release', ['browserify', 'copyImages', 'markup', 'minify', 'minifyApp']);

package.json

@@ -23,6 +23,7 @@
     "babel-plugin-transform-es2015-duplicate-keys": "^6.8.0",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-0": "^6.5.0",
     "babelify": "^7.3.0",
     "browser-sync": "^2.13.0",
     "browserify": "^13.0.1",

src/app/Main.js

@@ -1,7 +1,3 @@
-/**
-* In this file, we create a React component
-* which incorporates components providedby material-ui.
-*/
 import React, {Component} from 'react'
 import Paper from 'material-ui/Paper'
 import RaisedButton from 'material-ui/RaisedButton'
@@ -11,7 +7,9 @@ import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColu
 import getMuiTheme from 'material-ui/styles/getMuiTheme'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 import AppBar from 'material-ui/AppBar'
+import FlatButton from 'material-ui/FlatButton'
 
+import Close from 'material-ui/svg-icons/navigation/close'
 import CommunicationCall from 'material-ui/svg-icons/communication/call'
 import Message from 'material-ui/svg-icons/communication/message'
 import Github from './Github'
@@ -26,9 +24,31 @@ const styles = {
     background: deepOrange500,
     textAlign: 'left'
   },
-  container: {
-    textAlign: 'center',
-    paddingBottom: 15
+  buttonContainer: {
+    display: 'flex',
+    justifyContent: 'space-around'
+  },
+  footer: {
+    marginTop: 15,
+    width: '100%',
+    fontSize: 16,
+    padding: '15px 0',
+    backgroundColor: '#fff'
+  },
+  logo: {
+    width: 48
+  },
+  paper: {
+    width: '100%',
+    textAlign: 'left',
+    marginBottom: 15,
+    padding: 15,
+    fontSize: 18
+  },
+  rightIcon: {
+    width: 36,
+    height: 36,
+    fill: '#fff'
   },
   table: {
     marginTop: 15
@@ -51,18 +71,6 @@ const styles = {
   },
   table2Col3: {
     width: 36
-  },
-  paper: {
-    width: '100%',
-    textAlign: 'left',
-    marginBottom: 15,
-    padding: 15,
-    fontSize: 18
-  },
-  rightIcon: {
-    width: 36,
-    height: 36,
-    fill: '#fff'
   }
 },
 muiTheme = getMuiTheme({
@@ -85,7 +93,7 @@ export default class Main extends Component {
         additionalText: `Some message to be displayed ${this.state.count}`,
         icon: <Message />,
         iconBadgeColor: deepOrange500,
-        overflowText: <div>joe</div>,
+        overflowText: "joe@gmail.com",
         timestamp: moment().format('h:mm A')
       }
     )
@@ -95,6 +103,26 @@ export default class Main extends Component {
     })
   }
 
+  showPersonalisedNotification = () => {
+    let tempNotifications = this.state.Notifications
+    tempNotifications.push(
+      {
+        title: 'Title',
+        additionalText: `Some message to be displayed ${this.state.count}`,
+        icon: <Message />,
+        iconBadgeColor: deepOrange500,
+        overflowText: "me@gmail.com",
+        timestamp: moment().format('h:mm A'),
+        personalised: true,
+        avatar: "demo.png"
+      }
+    )
+    this.setState({
+      Notifications: tempNotifications,
+      count: ++this.state.count
+    })
+  }
+
   showPriorityNotification = () => {
     let tempNotifications = this.state.Notifications
     tempNotifications.push(
@@ -103,8 +131,19 @@ export default class Main extends Component {
         additionalText: `Some message to be displayed ${this.state.count}`,
         icon: <CommunicationCall />,
         iconBadgeColor: deepOrange500,
-        overflowText: <div>joe</div>,
+        overflowContent: <div>
+          <FlatButton
+            label="dismiss"
+            icon={<Close />}
+          />
+          <FlatButton
+            label="answer"
+            icon={<CommunicationCall />}
+          />
+        </div>,
         timestamp: moment().format('h:mm A'),
+        personalised: true,
+        avatar: "demo.png",
         priority: true,
         zDepth: 4
       }
@@ -122,7 +161,12 @@ export default class Main extends Component {
           <AppBar
             title="React Material Ui Notifications"
             style={styles.appbar}
-            iconElementLeft={<span></span>}
+            iconElementLeft={
+              <img
+                style={styles.logo}
+                src="logo.png"
+              />
+            }
             iconElementRight={
               <a href="https://github.com/puranjayjain/react-materialui-notifications" target="_blank">
                 <IconButton iconStyle={styles.rightIcon}>
@@ -145,15 +189,21 @@ export default class Main extends Component {
               <code>npm i react-materialui-notifications</code>
             </p>
           </Paper>
-          <RaisedButton
-            label="Show Notification"
-            onTouchTap={this.showNotification}
-          />
-          <RaisedButton
-            label="Show Priority Notification"
-            secondary={true}
-            onTouchTap={this.showPriorityNotification}
-          />
+          <div style={styles.buttonContainer}>
+            <RaisedButton
+              label="Show Notification"
+              onTouchTap={this.showNotification}
+            />
+            <RaisedButton
+              label="Show Personalised Notification"
+              onTouchTap={this.showPersonalisedNotification}
+            />
+            <RaisedButton
+              label="Show Priority Notification"
+              secondary={true}
+              onTouchTap={this.showPriorityNotification}
+            />
+          </div>
           <div style={styles.table}>
             <Table
               style={styles.headerStyle}
@@ -221,6 +271,9 @@ export default class Main extends Component {
                 ))}
               </TableBody>
             </Table>
+            <footer style={styles.footer}>
+              Copyright &copy; 2016 Puranjay Jain and Contributors.
+            </footer>
           </div>
           <ReactMaterialUiNotifications
             desktop={true}