import React from 'react'

import notificationActions from '../flux/notificationActions'
import CloseNotificationButton from './closeNotificationButton'

let Notification = React.createClass({
	propTypes: {
		id: React.PropTypes.any.isRequired,
		message: React.PropTypes.string.isRequired,
		value: React.PropTypes.number,
		max: React.PropTypes.number,
		type: React.PropTypes.string.isRequired,
		key: React.PropTypes.string,
		hideButton: React.PropTypes.bool,
	},
	remove() {
		notificationActions.removeNotification(this.props.id)
	},
	render() {
		let message = React.createElement('h1',
			{className: 'notification-message'},
			this.props.message)
		let closeButton = React.createElement(CloseNotificationButton)

		let progressBar = null
		if (this.props.type === 'progress') {
			let progressValue = Math.round(100 * (this.props.value / this.props.max))
			progressBar = React.createElement('div', {className: 'progress-container'},
				React.createElement('progress',
					{value: this.props.value, max: this.props.max}),
				React.createElement('output', null, `${progressValue}%`))
		}

		return React.createElement('li',
			{
				key: this.props.key || this.props.id,
				className: `notification-capsule  notification-type--${this.props.type}`,
				onClick: this.remove,
			},
			React.createElement('div',
				{className: 'notification-content'},
				message, progressBar),
			this.props.hideButton ? null : closeButton)
	},
})

export default Notification

@@ -147,19 +147,21 @@
 utton'%0A%0A
-let
+class
  Notific
@@ -170,305 +170,33 @@
 ion 
-= React.createClass(%7B%0A%09propTypes: %7B%0A%09%09id: React.PropTypes.any.isRequired,%0A%09%09message: React.PropTypes.string.isRequired,%0A%09%09value: React.PropTypes.number,%0A%09%09max: React.PropTypes.number,%0A%09%09type: React.PropTypes.string.isRequired,%0A%09%09key: React.PropTypes.string,%0A%09%09hideButton: React.PropTypes.bool,%0A%09%7D,
+extends React.Component %7B
 %0A%09re
@@ -262,17 +262,17 @@
 s.id)%0A%09%7D
-,
+%0A
 %0A%09render
@@ -296,38 +296,12 @@
 e = 
-React.createElement('h1',%0A%09%09%09%7B
+%3Ch1 
 clas
@@ -297,34 +297,33 @@
  = %3Ch1 className
-: 
+=
 'notification-me
@@ -328,22 +328,18 @@
 message'
-%7D,%0A%09%09%09
+%3E%7B
 this.pro
@@ -348,17 +348,22 @@
 .message
-)
+%7D%3C/h1%3E
 %0A%09%09let c
@@ -375,36 +375,17 @@
 utton = 
-React.createElement(
+%3C
 CloseNot
@@ -399,17 +399,19 @@
 onButton
-)
+ /%3E
 %0A%0A%09%09let 
@@ -567,36 +567,13 @@
 r = 
-React.createElement('div', %7B
+%3Cdiv 
 clas
@@ -577,18 +577,17 @@
 lassName
-: 
+=
 'progres
@@ -602,60 +602,31 @@
 ner'
-%7D,
+%3E
 %0A%09%09%09%09
-React.createElement('progress',%0A%09%09%09%09%09%7B
+%3Cprogress 
 value
-: 
+=%7B
 this
@@ -641,15 +641,15 @@
 alue
-,
+%7D
  max
-: 
+=%7B
 this
@@ -663,127 +663,83 @@
 max%7D
-),
+ /%3E
 %0A%09%09%09%09
-React.createElement('output', null, %60$%7BprogressValue%7D%25%60))%0A%09%09%7D%0A%0A%09%09return React.createElement('li',%0A%09%09%09%7B%0A%09%09%09%09key: 
+%3Coutput%3E%7BprogressValue%7D%25%3C/output%3E%0A%09%09%09%3C/div%3E%0A%09%09%7D%0A%0A%09%09return %3Cli key=%7B
 this
@@ -765,19 +765,18 @@
 props.id
-,%0A%09
+%7D%0A
 %09%09%09class
@@ -779,18 +779,18 @@
 lassName
-: 
+=%7B
 %60notific
@@ -803,17 +803,16 @@
 capsule 
- 
 notifica
@@ -841,19 +841,18 @@
 s.type%7D%60
-,%0A%09
+%7D%0A
 %09%09%09onCli
@@ -853,18 +853,18 @@
 %09onClick
-: 
+=%7B
 this.rem
@@ -870,51 +870,19 @@
 move
-,%0A%09%09%09%7D,%0A%09%09%09React.createElement('div',%0A%09%09%09%09%7B
+%7D%3E%0A%09%09%09%3Cdiv 
 clas
@@ -886,18 +886,17 @@
 lassName
-: 
+=
 'notific
@@ -913,24 +913,29 @@
 ent'
-%7D,
+%3E
 %0A%09%09%09%09
+%7B
 message
-, 
+%7D%0A%09%09%09%09%7B
 prog
@@ -945,14 +945,24 @@
 sBar
-),
+%7D%0A%09%09%09%3C/div%3E
 %0A%09%09%09
+%7B
 this
@@ -1003,16 +1003,303 @@
 tton
-)%0A%09%7D
+%7D%0A%09%09%3C/li%3E%0A%09%7D%0A%7D%0A%0ANotification.propTypes = %7B%0A%09id: React.PropTypes.any.isRequired,%0A%09message: React.PropTypes.string.isRequired,%0A%09value: React.PropTypes.number,%0A%09max: React.PropTypes.number,%0A%09type: React.PropTypes.string.isRequired,%0A%09key: React.PropTypes.string,%0A%09hideButton: React.PropTypes.bool
 ,%0A%7D
-)
 %0A%0Aex

Migrate Notification to ES6 class