Fix DropDownModal top padding and ListView renderHeader

Author: Definitely-Not-Vlad

components/DropDownMenu/DropDownModal.js

@@ -78,8 +78,10 @@ class DropDownModal extends PureComponent {
 
     this.close = this.close.bind(this);
     this.emitOnOptionSelectedEvent = this.emitOnOptionSelectedEvent.bind(this);
+    this.getKeyAreaHeights = this.getKeyAreaHeights.bind(this);
     this.renderGradient = this.renderGradient.bind(this);
     this.renderRow = this.renderRow.bind(this);
+    this.resolveModalStyle = this.resolveModalStyle.bind(this);
     this.selectOption = this.selectOption.bind(this);
     this.onOptionLayout = this.onOptionLayout.bind(this);
 
@@ -149,6 +151,17 @@ class DropDownModal extends PureComponent {
     return { flex: 0, maxHeight: listViewHeight };
   }
 
+  resolveModalStyle() {
+    const { style } = this.props;
+
+    const { bufferHeight } = this.getKeyAreaHeights();
+
+    return {
+      ...style.modal,
+      paddingTop: style.modal.paddingTop + bufferHeight,
+    };
+  }
+
   calculateListViewHeight() {
     const { optionHeight } = this.state;
     const { options } = this.props;
@@ -166,6 +179,24 @@ class DropDownModal extends PureComponent {
     );
   }
 
+  getKeyAreaHeights() {
+    const { optionHeight } = this.state;
+
+    const listViewHeight = this.calculateListViewHeight();
+    const screenHeight = window.height;
+    const gradientHeight = optionHeight;
+    const transparencyHeight = listViewHeight - optionHeight * 2;
+    const bufferHeight = (screenHeight - listViewHeight) / 2;
+
+    return {
+      listViewHeight,
+      screenHeight,
+      gradientHeight,
+      transparencyHeight,
+      bufferHeight,
+    };
+  }
+
   renderGradient() {
     const { style } = this.props;
     const { backgroundColor } = style.modal;
@@ -182,11 +213,13 @@ class DropDownModal extends PureComponent {
     // following fashion
     //  -> Buffer area -> Gradient area -> Transparency area -> Gradient Area -> Buffer Area
 
-    const listViewHeight = this.calculateListViewHeight();
-    const screenHeight = window.height;
-    const gradientHeight = optionHeight;
-    const transparencyHeight = listViewHeight - optionHeight * 2;
-    const bufferHeight = (screenHeight - listViewHeight) / 2;
+    const {
+      listViewHeight,
+      screenHeight,
+      gradientHeight,
+      transparencyHeight,
+      bufferHeight,
+    } = this.getKeyAreaHeights();
 
     const bufferColor = backgroundColor;
     const invertedColor = changeColorAlpha(backgroundColor, 0);
@@ -249,6 +282,7 @@ class DropDownModal extends PureComponent {
       return null;
     }
 
+    const modalStyle = this.resolveModalStyle();
     const listViewStyle = this.resolveListViewStyle();
     const data = options.filter((option) => option[titleProperty]);
 
@@ -260,7 +294,7 @@ class DropDownModal extends PureComponent {
       >
         <ZoomOut driver={this.timingDriver} maxFactor={1.1} style={{ flex: 1 }}>
           <FadeIn driver={this.timingDriver} style={{ flex: 1 }}>
-            <View style={style.modal} styleName="vertical">
+            <View style={modalStyle}>
               {modalContentVisible &&
                 <ListView
                   data={data}

components/ListView.js

@@ -7,7 +7,6 @@ import {
   RefreshControl,
   StatusBar,
   Platform,
-  ScrollView,
 } from 'react-native';
 import _ from 'lodash';
 
@@ -17,8 +16,6 @@ import { Caption } from './Text';
 import { Divider } from './Divider';
 import { Spinner } from './Spinner';
 
-const scrollViewProps = _.keys(ScrollView.propTypes);
-
 const Status = {
   LOADING: 'loading',
   LOADING_NEXT: 'loadingNext',
@@ -55,9 +52,8 @@ class ListView extends Component {
       }
 
       return { status: Status.LOADING };
-    } else {
-      return { status: Status.IDLE };
     }
+    return { status: Status.IDLE };
   }
 
   constructor(props, context) {
@@ -76,9 +72,9 @@ class ListView extends Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    return (nextProps.data !== this.props.data) ||
-      (nextProps.loading !== this.props.loading) ||
-      (nextState.status !== this.state.status);
+    return (nextProps.data !== this.props.data)
+      || (nextProps.loading !== this.props.loading)
+      || (nextState.status !== this.state.status);
   }
 
   componentWillUnmount() {
@@ -104,7 +100,7 @@ class ListView extends Component {
    * @returns {{}}
    */
   getPropsToPass() {
-    const props = this.props;
+    const { props } = this;
     const mappedProps = {
       ...props,
     };
@@ -118,22 +114,21 @@ class ListView extends Component {
     mappedProps.contentContainerStyle = props.style.listContent;
 
     // rendering
-    mappedProps.renderHeader = this.createRenderHeader(props.renderHeader, props.autoHideHeader);
-    mappedProps.renderItem = (data) => props.renderRow(data.item);
+    mappedProps.ListHeaderComponent = this.createListHeaderComponent(props.renderHeader, props.autoHideHeader);
+    mappedProps.renderItem = data => props.renderRow(data.item);
     mappedProps.ListFooterComponent = this.renderFooter;
 
     if (props.hasFeaturedItem && !props.sections) {
       mappedProps.sections = [
-        { data: [props.data[0]], renderItem: (data) => props.renderFeaturedItem(data.item) },
+        { data: [props.data[0]], renderItem: data => props.renderFeaturedItem(data.item) },
         { data: props.data.slice(1) },
-      ]
+      ];
     }
 
     if (props.renderSectionHeader) {
-      mappedProps.renderSectionHeader = ({section}) => props.renderSectionHeader(section);
-    }
-    else if (!props.hasFeaturedItem) {
-      mappedProps.renderSectionHeader = ({section}) => this.renderDefaultSectionHeader(section);
+      mappedProps.renderSectionHeader = ({ section }) => props.renderSectionHeader(section);
+    } else if (!props.hasFeaturedItem) {
+      mappedProps.renderSectionHeader = ({ section }) => this.renderDefaultSectionHeader(section);
     }
 
     // events
@@ -179,7 +174,7 @@ class ListView extends Component {
     this.scrollListView({ y: height, animated: false });
   }
 
-  createRenderHeader(renderHeader, autoHideHeader) {
+  createListHeaderComponent(renderHeader, autoHideHeader) {
     if (!renderHeader) {
       return;
     }
@@ -194,7 +189,7 @@ class ListView extends Component {
     }
 
     // eslint-disable-next-line consistent-return
-    return () => (
+    return (
       <View {...headerContainerProps}>{renderHeader()}</View>
     );
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Styleable set of components for React Native applications",
   "dependencies": {
     "@shoutem/animation": "~0.12.4",