Version React iso-fonctionnelle

js/components/app-item.jsx

@@ -0,0 +1,28 @@
+var React = require('react');
+
+module.exports = React.createClass({
+
+  propTypes: {
+    item: React.PropTypes.object.isRequired,
+    itemPath: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.number)
+    ]).isRequired,
+    onItemClick: React.PropTypes.func.isRequired,
+  },
+
+  _onItemClick: function(evt) {
+    evt.preventDefault();
+    this.props.onItemClick(evt, this.props.itemPath, this.props.item);
+  },
+
+  render: function() {
+    return (
+      <li className="app-item" onClick={this._onItemClick}>
+        <img className="app-icon" src={this.props.item.icon} />
+        <span className="app-label">{this.props.item.label}</span>
+      </li>
+    );
+  }
+
+});

js/components/app-list.jsx

@@ -1,12 +1,33 @@
 var React = require('react');
+var AppItem = require('./app-item.jsx');
 
 module.exports = React.createClass({
 
+  propTypes: {
+    items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+    parentPath: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.number)
+    ]).isRequired,
+    onItemClick: React.PropTypes.func.isRequired,
+  },
+
   render: function() {
+
+    var parentPath = this.props.parentPath;
+    var items = (this.props.items).map(function(item, i) {
+      var path = parentPath+'.'+i;
+      return (
+        <AppItem key={path} itemPath={path} item={item} onItemClick={this.props.onItemClick} />
+      );
+    }.bind(this));
+
     return (
-      <ul className="apps-list">
+      <ul key={parentPath} className="apps-list">
+        {items}
       </ul>
     );
+
   }
 
 });

js/components/category-header.jsx

@@ -2,18 +2,29 @@ var React = require('react');
 
 module.exports = React.createClass({
 
+  propTypes: {
+    onBackClick: React.PropTypes.func.isRequired,
+    itemPath: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.number)
+    ]).isRequired,
+    item: React.PropTypes.object.isRequired,
+  },
+
   render: function() {
 
-    var classes = 'category-header' + (this.props.currentItem ? 'visible' : '');
-    var itemLabel = this.props.currentItem ? this.props.currentItem.label : '';
-
     return (
-      <div className={classes}>
-        <a href="#" className="goback">&#9668;</a>
-        <span className="category-label">{itemLabel}</span>
+      <div className="category-header">
+        <a href="#" onClick={this._onBackClick} className="goback" >&#9668;</a>
+        <span className="category-label">{this.props.item.label}</span>
       </div>
     );
 
+  },
+
+  _onBackClick: function(evt) {
+    evt.preventDefault();
+    this.props.onBackClick(this.props.itemPath, this.props.item);
   }
 
 });