Rewrite dialog in ES6

components/dialog/index.cjsx

@@ -1,43 +0,0 @@
-localCSS    = require './style'
-Button      = require '../button'
-Navigation  = require '../navigation'
-
-module.exports = React.createClass
-  displayName   : 'Dialog'
-
-  # -- States & Properties
-  propTypes:
-    actions     : React.PropTypes.array
-    active      : React.PropTypes.bool
-    className   : React.PropTypes.string
-    title       : React.PropTypes.string
-    type        : React.PropTypes.string
-
-  getDefaultProps: ->
-    actions     : []
-    className   : 'normal'
-
-  getInitialState: ->
-    active      : @props.active
-
-  # -- Render
-  render: ->
-    rootClass       = localCSS.root
-    rootClass      += ' active' if @state.active
-    containerClass  = "#{localCSS.container} #{@props.className}"
-    containerClass += " #{@props.type}" if @props.type
-
-    <div data-react-toolbox='dialog' data-flex='vertical center' className={rootClass}>
-      <div className={containerClass}>
-        {<h1>{@props.title}</h1> if @props.title}
-        {@props.children}
-        {<Navigation actions={@props.actions}/> if @props.actions.length > 0}
-      </div>
-    </div>
-
-  # -- Extends
-  show: ->
-    @setState active: true
-
-  hide: ->
-    @setState active: false

components/dialog/index.jsx

@@ -0,0 +1,52 @@
+/* global React */
+
+import style from './style';
+import Navigation from '../navigation';
+
+export default React.createClass({
+  displayName: 'Dialog',
+
+  propTypes: {
+    actions: React.PropTypes.array,
+    active: React.PropTypes.bool,
+    className: React.PropTypes.string,
+    title: React.PropTypes.string,
+    type: React.PropTypes.string
+  },
+
+  getDefaultProps () {
+    return {
+      actions: [],
+      className: 'normal'
+    };
+  },
+
+  getInitialState () {
+    return { active: this.props.active };
+  },
+
+  render () {
+    let rootClass = style.root;
+    let containerClass = `${style.container} ${this.props.className}`;
+    if (this.state.active) rootClass += ' active';
+    if (this.props.type) containerClass += ` ${this.props.type}`;
+
+    return (
+      <div data-react-toolbox='dialog' data-flex='vertical center' className={rootClass}>
+        <div className={containerClass}>
+          { this.props.title ? <h1>{this.props.title}</h1> : null }
+          { this.props.children }
+          { this.props.actions.length > 0 ? <Navigation actions={this.props.actions}/> : null }
+        </div>
+      </div>
+    );
+  },
+
+  show () {
+    this.setState({active: true});
+  },
+
+  hide () {
+    this.setState({active: false});
+  }
+});

spec/components/dialog.cjsx

@@ -10,7 +10,7 @@ module.exports = React.createClass
   # -- States & Properties
   getInitialState: ->
     actions: [
-      caption: "Cancel", style: "transparent", onClick: @onClose
+      label: "Cancel", style: "transparent", onClick: @onClose
     ]
 
   # -- Events
@@ -26,7 +26,7 @@ module.exports = React.createClass
       <h2>Dialog</h2>
       <p>lorem ipsum...</p>
 
-      <Button caption="Show Dialog" onClick={@onShow} />
+      <Button type="raised" label="Show Dialog" onClick={@onShow} />
 
       <Dialog ref="dialog" type="profile" title="Your profile" className="small"
               actions={@state.actions}>