From 144b4ea0617a9041a9b52845aae0fc1c0fc8f687 Mon Sep 17 00:00:00 2001
From: Adrian Hurtado <adrianhurt@gmail.com>
Date: Sat, 26 Aug 2017 11:54:14 +0200
Subject: [PATCH] Styling for Container & Column, and verticalSeparatorWith
 support

Added support for styling the wrapper container and columns with wrapperStyle and columnWrapperStyle props.
Also added support for verticalSeparatorWidth.
---
 src/MasonryList.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/MasonryList.js b/src/MasonryList.js
index 5c7622e..bd70c77 100644
--- a/src/MasonryList.js
+++ b/src/MasonryList.js
@@ -75,6 +75,9 @@ export type Props = {
    * sure to also set the `refreshing` prop correctly.
    */
   onRefresh?: ?Function,
+  wrapperStyle?: Object,
+  columnWrapperStyle?: any,
+  verticalSeparatorWidth?: number,
 };
 type State = {
   columns: Array<Column>,
@@ -113,6 +116,9 @@ export default class MasonryList extends React.Component<Props, State> {
       }
       return <ScrollView {...props} />;
     },
+    verticalSeparatorWidth: 0,
+    wrapperStyle: {},
+    columnWrapperStyle: {},
   };
 
   state = _stateFromProps(this.props);
@@ -205,7 +211,18 @@ export default class MasonryList extends React.Component<Props, State> {
     return { length: column.heights[rowIndex], offset, index: rowIndex };
   };
 
-  _renderScrollComponent = () => <FakeScrollView style={styles.column} />;
+  _renderScrollComponent = columnIndex => {
+    const { verticalSeparatorWidth, columnWrapperStyle } = this.props;
+    return (
+      <FakeScrollView
+        style={[
+          styles.column,
+          { marginLeft: (columnIndex > 0) ? verticalSeparatorWidth : 0 },
+          (typeof columnWrapperStyle === 'function') ? columnWrapperStyle(columnIndex) : columnWrapperStyle
+        ]}
+      />
+    );
+  };
 
   _getItemCount = data => data.length;
 
@@ -219,6 +236,7 @@ export default class MasonryList extends React.Component<Props, State> {
       ListHeaderComponent,
       keyExtractor,
       onEndReached,
+      wrapperStyle,
       ...props
     } = this.props;
     let headerElement;
@@ -240,7 +258,7 @@ export default class MasonryList extends React.Component<Props, State> {
               this._getItemLayout(col.index, index)}
             renderItem={({ item, index }) =>
               renderItem({ item, index, column: col.index })}
-            renderScrollComponent={this._renderScrollComponent}
+            renderScrollComponent={() => this._renderScrollComponent(col.index)}
             keyExtractor={keyExtractor}
             onEndReached={onEndReached}
             onEndReachedThreshold={this.props.onEndReachedThreshold}