Feature/add blur opportunity

lib/ParallaxView.js

@@ -1,68 +1,47 @@
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
+import React, { Component } from 'react';
+import ReactNative from 'react-native';
+const {
     Dimensions,
     StyleSheet,
     View,
     ScrollView,
     Animated,
     } = ReactNative;
-/**
- * BlurView temporarily removed until semver stuff is set up properly
- */
-//var BlurView /* = require('react-native-blur').BlurView */;
-var ScrollableMixin = require('react-native-scrollable-mixin');
-var screen = Dimensions.get('window');
-var ScrollViewPropTypes = ScrollView.propTypes;
 
-var ParallaxView = React.createClass({
-    mixins: [ScrollableMixin],
+const BlurView = require('react-native-blur').BlurView;
+const ScrollableMixin = require('react-native-scrollable-mixin');
+const screen = Dimensions.get('window');
+const ScrollViewPropTypes = ScrollView.propTypes;
 
-    propTypes: {
-        ...ScrollViewPropTypes,
-        windowHeight: React.PropTypes.number,
-        backgroundSource: React.PropTypes.oneOfType([
-          React.PropTypes.shape({
-            uri: React.PropTypes.string,
-          }),
-          // Opaque type returned by require('./image.jpg')
-          React.PropTypes.number,
-        ]),
-        header: React.PropTypes.node,
-        blur: React.PropTypes.string,
-        contentInset: React.PropTypes.object,
-    },
-
-    getDefaultProps: function () {
-        return {
-            windowHeight: 300,
-            contentInset: {
-                top: screen.scale
-            }
-        };
-    },
+export default class ParallaxView extends Component {
+    mixins: [ScrollableMixin]
 
-    getInitialState: function () {
-        return {
-            scrollY: new Animated.Value(0)
+    constructor(props) {
+        super(props)
+        const scrollY = new Animated.Value(0);
+        this.state = {
+            scrollY,
+            onScroll: Animated.event(
+                [{ nativeEvent: { contentOffset: { y: scrollY } } }]
+            )
         };
-    },
+    }
 
     /**
      * IMPORTANT: You must return the scroll responder of the underlying
      * scrollable component from getScrollResponder() when using ScrollableMixin.
      */
     getScrollResponder() {
-      return this._scrollView.getScrollResponder();
-    },
+        return this._scrollView.getScrollResponder();
+    }
 
     setNativeProps(props) {
-      this._scrollView.setNativeProps(props);
-    },
+        this._scrollView.setNativeProps(props);
+    }
 
-    renderBackground: function () {
+    renderBackground() {
         var { windowHeight, backgroundSource, blur } = this.props;
         var { scrollY } = this.state;
         if (!windowHeight || !backgroundSource) {
@@ -74,26 +53,26 @@ var ParallaxView = React.createClass({
                     height: windowHeight,
                     transform: [{
                         translateY: scrollY.interpolate({
-                            inputRange: [ -windowHeight, 0, windowHeight],
-                            outputRange: [windowHeight/2, 0, -windowHeight/3]
+                            inputRange: [-windowHeight, 0, windowHeight],
+                            outputRange: [windowHeight / 2, 0, -windowHeight / 3]
                         })
-                    },{
+                    }, {
                         scale: scrollY.interpolate({
-                            inputRange: [ -windowHeight, 0, windowHeight],
+                            inputRange: [-windowHeight, 0, windowHeight],
                             outputRange: [2, 1, 1]
                         })
                     }]
                 }]}
                 source={backgroundSource}>
-                {/*
+                {
                     !!blur && (BlurView || (BlurView = require('react-native-blur').BlurView)) &&
                     <BlurView blurType={blur} style={styles.blur} />
-                */}
+                }
             </Animated.Image>
         );
-    },
+    }
 
-    renderHeader: function () {
+    renderHeader() {
         var { windowHeight, backgroundSource } = this.props;
         var { scrollY } = this.state;
         if (!windowHeight || !backgroundSource) {
@@ -111,32 +90,53 @@ var ParallaxView = React.createClass({
                 {this.props.header}
             </Animated.View>
         );
-    },
+    }
 
-    render: function () {
-        var { style, ...props } = this.props;
+    render() {
+        var { style } = this.props;
+        var onScroll = this.props.onScroll ? e => {
+            this.props.onScroll(e);
+            this.state.onScroll(e);
+        } : this.state.onScroll;
         return (
             <View style={[styles.container, style]}>
                 {this.renderBackground()}
                 <ScrollView
                     ref={component => { this._scrollView = component; }}
-                    {...props}
+                    {...this.props}
                     style={styles.scrollView}
-                    onScroll={Animated.event(
-                      [{ nativeEvent: { contentOffset: { y: this.state.scrollY }}}]
-                    )}
+                    onScroll={onScroll}
                     scrollEventThrottle={16}>
                     {this.renderHeader()}
-                    <View style={[styles.content, props.scrollableViewStyle]}>
+                    <View style={[styles.content, this.props.scrollableViewStyle]}>
                         {this.props.children}
                     </View>
                 </ScrollView>
             </View>
         );
     }
-});
+}
+
+ParallaxView.propTypes = {
+    ...ScrollViewPropTypes,
+    windowHeight: React.PropTypes.number,
+    backgroundSource: React.PropTypes.oneOfType([
+        React.PropTypes.shape({
+            uri: React.PropTypes.string,
+        }),
+        React.PropTypes.number,
+    ]),
+    header: React.PropTypes.node,
+    blur: React.PropTypes.string,
+    contentInset: React.PropTypes.object
+}
 
-var styles = StyleSheet.create({
+ParallaxView.defaultProps = {
+    windowHeight: 300,
+    contentInset: { top: screen.scale }
+}
+
+const styles = StyleSheet.create({
     container: {
         flex: 1,
         borderColor: 'transparent',
@@ -167,5 +167,3 @@ var styles = StyleSheet.create({
         flexDirection: 'column'
     }
 });
-
-module.exports = ParallaxView;