Merge pull request #7 from johncmckim/issue-6

Merge Columns and Row components

lib/components/LayoutRenderer.js

@@ -1,6 +1,5 @@
 import React, { PropTypes } from 'react';
 import Row from './Row';
-import Columns from './Columns';
 
 /**
  * Renders the row, column layout based on the layout provided to the dashboard.
@@ -23,8 +22,9 @@ const LayoutRenderer = (props) => {
 
   let rows = layout.rows.map((row, rowIndex) => {
     return (
-      <Row key={rowIndex} rowClass={rowClass}>
-      <Columns
+      <Row
+        key={rowIndex}
+        rowClass={rowClass}
         columns={row.columns}
         widgets={widgets}
         onRemove={onRemove}
@@ -39,7 +39,6 @@ const LayoutRenderer = (props) => {
         addWidgetComponentText={addWidgetComponentText}
         addWidgetComponent={addWidgetComponent}
         />
-      </Row>
     );
   });
 

lib/components/Row.js

@@ -1,15 +1,66 @@
 import React, { PropTypes } from 'react';
+import Column from './Column';
+import Widgets from './Widgets';
 
 /**
- * Represents a row in the grid system.
+ * Returns a set of columns that belongs to a row.
  */
-const Row = ({ rowClass, children }) => {
+function Row(props) {
+  const {
+    rowClass,
+    columns,
+    widgets,
+    onRemove,
+    layout,
+    rowIndex,
+    editable,
+    frameComponent,
+    editableColumnClass,
+    droppableColumnClass,
+    addWidgetComponentText,
+    addWidgetComponent,
+    onAdd,
+    onMove,
+  } = props;
+
+  const items = columns.map((column, index) => {
+    return (
+      <Column
+        key={index}
+        className={column.className}
+        onAdd={onAdd}
+        layout={layout}
+        rowIndex={rowIndex}
+        columnIndex={index}
+        editable={editable}
+        onMove={onMove}
+        editableColumnClass={editableColumnClass}
+        droppableColumnClass={droppableColumnClass}
+        addWidgetComponent={addWidgetComponent}
+        addWidgetComponentText={addWidgetComponentText}
+      >
+        <Widgets
+          key={index}
+          widgets={column.widgets}
+          widgetTypes={widgets}
+          onRemove={onRemove}
+          layout={layout}
+          rowIndex={rowIndex}
+          columnIndex={index}
+          editable= {editable}
+          frameComponent = {frameComponent}
+          onMove={onMove}
+        />
+      </Column>
+    );
+  });
+
   return (
     <div className={rowClass}>
-      {children}
+      {items}
     </div>
   );
-};
+}
 
 Row.propTypes = {
   /**
@@ -18,9 +69,69 @@ Row.propTypes = {
   rowClass: PropTypes.string,
 
   /**
-   * Children of the row component.
+   * Columns of the layout.
+   */
+  columns: PropTypes.array,
+
+  /**
+   * Widgets that should be used in the dashboard.
+   */
+  widgets: PropTypes.object,
+
+  /**
+   * Layout of the dashboard.
+   */
+  layout: PropTypes.object,
+
+  /**
+   * Index of the row where this column is in.
+   */
+  rowIndex: PropTypes.number,
+
+  /**
+   * Indicates weather the dashboard is in editable mode or not.
+   */
+  editable: PropTypes.bool,
+
+  /**
+   * Custom frame that should be used with the widget.
+   */
+  frameComponent: PropTypes.func,
+
+  /**
+   * Class to be used for columns in editable mode.
+   */
+  editableColumnClass: PropTypes.string,
+
+  /**
+   * CSS class to be used for columns when a widget is droppable.
+   */
+  droppableColumnClass: PropTypes.string,
+
+  /**
+   * Custom AddWidget component.
+   */
+  addWidgetComponent: PropTypes.func,
+
+  /**
+   * Text that should be displyed in the AddWidget component.
+   */
+  addWidgetComponentText: PropTypes.string,
+
+  /**
+   * Method that should be called when a component is added.
+   */
+  onAdd: PropTypes.func,
+
+  /**
+   * Method that should be called when a component is removed.
+   */
+  onRemove: PropTypes.func,
+
+  /**
+   * Method that should be called when a widget is moved.
    */
-  children: PropTypes.node,
+  onMove: PropTypes.func,
 };
 
 Row.defaultProps = {