Add renderHeader which acts the same as renderFooter but at the top (#91)

* Add renderHeader which acts the same as renderFooter but at the top

* Keep trailing comma

* Revert undefined check fix for separate PR

Author: jcurtis

README.md

@@ -41,6 +41,9 @@ A RefreshControl that works the same way as a ScrollView's refreshControl.
 - **renderRow** (function)<br />
 `({key, index, data, disabled, active}) => renderable`<br />
 Takes a row key, row index, data entry from the data source and its statuses disabled, active and should return a renderable component to be rendered as the row. The child component will receive a method called `toggleRowActive` (only if `manuallyActivateRows={true}`) to manually activate the row. Useful if you have multiple touch responders in your view.<br />
+- **renderHeader?** (function)<br />
+`() => renderable`<br />
+Renders returned component at the top of the list.
 - **renderFooter?** (function)<br />
 `() => renderable`<br />
 Renders returned component at the bottom of the list.

src/SortableList.js

@@ -29,6 +29,7 @@ export default class SortableList extends Component {
     manuallyActivateRows: PropTypes.bool,
 
     renderRow: PropTypes.func.isRequired,
+    renderHeader: PropTypes.func,
     renderFooter: PropTypes.func,
 
     onChangeOrder: PropTypes.func,
@@ -76,6 +77,11 @@ export default class SortableList extends Component {
       });
     });
 
+    if (this.props.renderHeader && !this.props.horizontal) {
+      this._headerLayout = new Promise((resolve) => {
+        this._resolveHeaderLayout = resolve;
+      });
+    }
     if (this.props.renderFooter && !this.props.horizontal) {
       this._footerLayout = new Promise((resolve) => {
         this._resolveFooterLayout = resolve;
@@ -200,6 +206,7 @@ export default class SortableList extends Component {
           scrollEventThrottle={2}
           scrollEnabled={scrollEnabled}
           onScroll={this._onScroll}>
+          {this._renderHeader()}
           <View style={innerContainerStyle}>
             {this._renderRows()}
           </View>
@@ -266,6 +273,20 @@ export default class SortableList extends Component {
     });
   }
 
+  _renderHeader() {
+    if (!this.props.renderHeader || this.props.horizontal) {
+      return null;
+    }
+
+    const {headerLayout} = this.state;
+
+    return (
+      <View onLayout={!headerLayout ? this._onLayoutHeader : null}>
+        {this.props.renderHeader()}
+      </View>
+    );
+  }
+
   _renderFooter() {
     if (!this.props.renderFooter || this.props.horizontal) {
       return null;
@@ -281,8 +302,8 @@ export default class SortableList extends Component {
   }
 
   _onUpdateLayouts() {
-    Promise.all([this._footerLayout, ...Object.values(this._rowsLayouts)])
-      .then(([footerLayout, ...rowsLayouts]) => {
+    Promise.all([this._headerLayout, this._footerLayout, ...Object.values(this._rowsLayouts)])
+      .then(([headerLayout, footerLayout, ...rowsLayouts]) => {
         // Can get correct container’s layout only after rows’s layouts.
         this._container.measure((x, y, width, height, pageX, pageY) => {
           const rowsLayoutsByKey = {};
@@ -298,6 +319,7 @@ export default class SortableList extends Component {
           this.setState({
             containerLayout: {x, y, width, height, pageX, pageY},
             rowsLayouts: rowsLayoutsByKey,
+            headerLayout,
             footerLayout,
             contentHeight,
             contentWidth,
@@ -524,6 +546,10 @@ export default class SortableList extends Component {
     this._resolveRowLayout[rowKey]({rowKey, layout});
   }
 
+  _onLayoutHeader = ({nativeEvent: {layout}}) => {
+    this._resolveHeaderLayout(layout);
+  };
+
   _onLayoutFooter = ({nativeEvent: {layout}}) => {
     this._resolveFooterLayout(layout);
   };