From b875a9817cc128a8aadb2ec898272f6009cba895 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim.daubenschuetz@gmail.com>
Date: Tue, 26 May 2015 20:20:17 +0200
Subject: [PATCH] Refactor table_item logic

---
 js/components/ascribe_table/table_item.js     | 26 ++++----------
 .../ascribe_table/table_item_subtable.js      | 26 +++-----------
 .../ascribe_table/table_item_wrapper.js       | 34 +++++++++++++++++++
 3 files changed, 46 insertions(+), 40 deletions(-)
 create mode 100644 js/components/ascribe_table/table_item_wrapper.js

diff --git a/js/components/ascribe_table/table_item.js b/js/components/ascribe_table/table_item.js
index 6b7b62f8..1827253f 100644
--- a/js/components/ascribe_table/table_item.js
+++ b/js/components/ascribe_table/table_item.js
@@ -1,12 +1,11 @@
 import React from 'react';
 
-import TableColumnMixin from '../../mixins/table_column_mixin';
-
 import TableColumnContentModel from '../../models/table_column_content_model';
 
+import TableItemWrapper from './table_item_wrapper';
+
 
 let TableItem = React.createClass({
-    mixins: [TableColumnMixin],
 
     propTypes: {
         columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
@@ -16,27 +15,16 @@ let TableItem = React.createClass({
     },
 
     render() {
-        let calcColumnElementContent = () => {
-            return this.props.columnList.map((column, i) => {
-
-                let TypeElement = column.displayType;
-                let columnClass = this.calcColumnClasses(this.props.columnList, i, 12);
-
-                return (
-                    <div className={columnClass + ' ascribe-table-item-column'} key={i}>
-                        <TypeElement content={this.props.columnContent[column.columnName]} width="50" />
-                    </div>
-                );
-
-            });
-        };
-
         return (
             <div 
                 className={this.props.classNames + ' col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item'}
                 onClick={this.props.onClick}>
                 <div className="row">
-                    {calcColumnElementContent()}
+                    <TableItemWrapper
+                        columnList={this.props.columnList}
+                        columnContent={this.props.columnContent}
+                        columnWidth={12}>
+                    </TableItemWrapper>
                 </div>
             </div> 
         );
diff --git a/js/components/ascribe_table/table_item_subtable.js b/js/components/ascribe_table/table_item_subtable.js
index 85e361fe..00c456ce 100644
--- a/js/components/ascribe_table/table_item_subtable.js
+++ b/js/components/ascribe_table/table_item_subtable.js
@@ -1,15 +1,13 @@
 import React from 'react';
 
 import TableColumnContentModel from '../../models/table_column_content_model';
-import TableColumnMixin from '../../mixins/table_column_mixin';
 
 import EditionListStore from '../../stores/edition_list_store';
 import EditionListActions from '../../actions/edition_list_actions';
 
-// ToDo: Create Table-specific Utils to not lock it to projects utilities
-import GeneralUtils from '../../utils/general_utils';
 
 import Table from './table';
+import TableItemWrapper from './table_item_wrapper';
 import TableItemText from './table_item_text';
 import TableItemAcl from './table_item_acl';
 import TableItemSelectable from './table_item_selectable';
@@ -17,7 +15,6 @@ import TableItemSubtableButton from './table_item_subtable_button';
 
 
 let TableItemSubtable = React.createClass({
-    mixins: [TableColumnMixin],
     propTypes: {
         columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
         columnContent: React.PropTypes.object
@@ -61,22 +58,6 @@ let TableItemSubtable = React.createClass({
 
     render() {
 
-        let calcColumnElementContent = () => {
-            return this.props.columnList.map((column, i) => {
-
-                let TypeElement = column.displayType;
-                let columnClass = this.calcColumnClasses(this.props.columnList, i, 12);
-
-                return (
-                    <div className={columnClass + ' ascribe-table-item-column'} key={i}>
-                        <TypeElement content={this.props.columnContent[column.columnName]} width="50" />
-                    </div>
-                );
-
-            });
-        };
-
-
         let renderEditionListTable = () => {
 
             let columnList = [
@@ -109,7 +90,10 @@ let TableItemSubtable = React.createClass({
         return (
             <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item">
                 <div className="row">
-                    {calcColumnElementContent()}
+                    <TableItemWrapper
+                        columnList={this.props.columnList}
+                        columnContent={this.props.columnContent}
+                        columnWidth={10}></TableItemWrapper>
                     <div className="col-xs-2 col-sm-2 col-md-2 col-lg-2 ascribe-table-item-column">
                         <TableItemSubtableButton content="Editions" onClick={this.loadEditionList}>
                         </TableItemSubtableButton>
diff --git a/js/components/ascribe_table/table_item_wrapper.js b/js/components/ascribe_table/table_item_wrapper.js
new file mode 100644
index 00000000..2f9f4c7e
--- /dev/null
+++ b/js/components/ascribe_table/table_item_wrapper.js
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import TableColumnContentModel from '../../models/table_column_content_model';
+import TableColumnMixin from '../../mixins/table_column_mixin';
+
+let TableItemWrapper = React.createClass({
+    mixins: [TableColumnMixin],
+    propTypes: {
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        columnContent: React.PropTypes.object,
+        columnWidth: React.PropTypes.number.isRequired
+    },
+
+    render() {
+        return (
+            <div>
+                {this.props.columnList.map((column, i) => {
+
+                    let TypeElement = column.displayType;
+                    let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth);
+
+                    return (
+                        <div className={columnClass + ' ascribe-table-item-column'} key={i}>
+                            <TypeElement content={this.props.columnContent[column.columnName]} width="50" />
+                        </div>
+                    );
+
+                })}
+            </div>
+        );
+    }
+});
+
+export default TableItemWrapper;
\ No newline at end of file