introduce generic table types

js/components/piece_list.js

@@ -4,7 +4,10 @@ import AltContainer from 'alt/AltContainer';
 
 import PieceListStore from '../stores/piece_list_store';
 import PieceListActions from '../actions/piece_list_actions';
+
 import Table from './table';
+import TableItemImg from './table_item_img';
+import TableItemText from './table_item_text';
 
 let Link = Router.Link;
 
@@ -17,9 +20,18 @@ let PieceList = React.createClass({
     render() {
 
         let columnMap = {
-            'thumbnail': 'Thumbnail',
+            'thumbnail': {
-            'artist_name': 'Artist',
+                'display_name': 'thumbnail',
-            'title': 'Title'
+                'display_type': TableItemImg
+            },
+            'artist_name': {
+                'display_name': 'Artist',
+                'display_type': TableItemText
+            },
+            'title': {
+                'display_name': 'Title',
+                'display_type': TableItemText
+            }
         };
 
         return (

js/components/table_header.js

@@ -20,7 +20,7 @@ let TableHeader = React.createClass({
                     {columnMapValuesList.map((val, i) => {
                         return (
                             <div className={columnClasses} key={i}>
-                                {val}
+                                {val.display_name}
                             </div>
                         );
                     })}

js/components/table_item.js

@@ -1,6 +1,8 @@
 import React from 'react';
 
 import TableColumnMixin from '../mixins/table_column_mixin';
+import TableItemImg from './table_item_img';
+import TableItemText from './table_item_text';
 
 let TableItem = React.createClass({
     mixins: [TableColumnMixin],
@@ -14,16 +16,33 @@ let TableItem = React.createClass({
         let columnClasses = this.calcColumnClasses(this.props.columnMap);
         let columnMapKeysList = Object.keys(this.props.columnMap);
 
+        /**
+         * An element in the Table can have a certain display_type.
+         * For example it can be an Image or a text, or a button.
+         * This method is recognizing different types and injecting them into the DOM.
+         */
+        let calcColumnElementContent = () => {
+            return columnMapKeysList.map((key, i) => {
+                if(this.props.columnMap[key].display_type === TableItemImg) {
+                    return (
+                        <div className={columnClasses}>
+                            <TableItemImg src={this.props.columnContent[key]} width="50" key={i} />
+                        </div>
+                    );
+                } else if(this.props.columnMap[key].display_type === TableItemText) {
+                    return (
+                        <div className={columnClasses}>
+                            <TableItemText text={this.props.columnContent[key]} key={i} />
+                        </div>
+                    );
+                }
+            });
+        };
+
         return (
             <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                 <div className="row">
-                    {columnMapKeysList.map((key, i) => {
+                    {calcColumnElementContent()}
-                        return (
-                            <div className={columnClasses} key={i}>
-                                {columnContent[key]}
-                            </div>
-                        );
-                    })}
                 </div>
             </div> 
         );

js/components/table_item_img.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+/**
+ * This could be enhanced further by specifying an optional description for example
+ */
+let TableItemImg = React.createClass({
+    propTypes: {
+        src: React.PropTypes.string.isRequired,
+        width: React.PropTypes.number,
+        height: React.PropTypes.number
+    },
+
+    render() {
+        return (
+            <img src={this.props.src} width={this.props.width} height={this.props.height} />
+        );
+    }
+});
+
+export default TableItemImg;

js/components/table_item_text.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+let TableItemText = React.createClass({
+    propTypes: {
+        text: React.PropTypes.string.isRequired
+    },
+
+    render() {
+        return (
+            <span>
+                {this.props.text}
+            </span>
+        );
+    }
+});
+
+export default TableItemText;