Port aside to ES6

components/aside/index.cjsx

@@ -1,40 +0,0 @@
-localCSS = require './style'
-
-module.exports = React.createClass
-
-  # -- States & Properties
-  propTypes:
-    active      : React.PropTypes.bool
-    className   : React.PropTypes.string
-    hideable    : React.PropTypes.bool
-    type        : React.PropTypes.string
-
-  getDefaultProps: ->
-    className   : ''
-    type        : 'left'
-
-  getInitialState: ->
-    active      : @props.active
-
-  # -- Events
-  onClick: (event) ->
-    @setState active: false if event.target is @getDOMNode()
-
-  # -- Render
-  render: ->
-    className  = "#{localCSS.root} #{@props.className}"
-    className += " #{@props.type}"  if @props.type
-    className += ' hideable'        if @props.hideable
-    className += ' active'          if @state.active
-    <div data-react-toolbox='aside' className={className} onClick={@onClick}>
-      <aside className={localCSS.container}>
-        { @props.children }
-      </aside>
-    </div>
-
-  # -- Extends
-  show: ->
-    @setState active: true
-
-  hide: ->
-    @setState active: false

components/aside/index.jsx

@@ -0,0 +1,55 @@
+/* global React */
+
+import css from './style';
+
+export default React.createClass({
+
+  displayName: 'Aside',
+
+  propTypes: {
+    active: React.PropTypes.bool,
+    className: React.PropTypes.string,
+    hideable: React.PropTypes.bool,
+    type: React.PropTypes.string
+  },
+
+  getDefaultProps () {
+    return {
+      className: '',
+      type: 'left'
+    };
+  },
+
+  getInitialState () {
+    return { active: this.props.active };
+  },
+
+  onClick (event) {
+    if (event.target === this.getDOMNode()) {
+      this.setState({active: false});
+    }
+  },
+
+  render () {
+    let className = `${css.root} ${this.props.className}`;
+    if (this.props.type) className += ` ${this.props.type}`;
+    if (this.props.hideable) className += ' hideable';
+    if (this.state.active) className += ' active';
+
+    return (
+      <div className={className} onClick={this.onClick}>
+        <aside className={css.container}>
+          { this.props.children }
+        </aside>
+      </div>
+    );
+  },
+
+  show () {
+    this.setState({active: true});
+  },
+
+  hide () {
+    this.setState({active: false});
+  }
+});