react-native-lightbox - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

Lightbox.js

@@ -25,7 +25,13 @@ /**
     renderHeader:   PropTypes.func,
+    renderContent:  PropTypes.func,
     underlayColor:  PropTypes.string,
     onOpen:         PropTypes.func,
     onClose:        PropTypes.func,
+    springConfig:   PropTypes.shape({
+      tension:      PropTypes.number,
+      friction:     PropTypes.number,
+    }),
     swipeToDismiss: PropTypes.bool,
   },
+
   getDefaultProps: function() {
@@ -42,13 +48,7 @@ return {
       isOpen: false,
-      width: 0,
-      height: 0,
-      target: {
-        x: 0,
-        y: 0,
-        opacity: 1,
-      },
       origin: {
         x: 0,
         y: 0,
-        opacity: 0,
+        width: 0,
+        height: 0,
       },
@@ -59,18 +59,22 @@ layoutOpacity: new Animated.Value(1),
 
-  getOverlayProps: function() {
-    var overlayContent = this.props.children;
-    if(this.props.activeProps) {
-      overlayContent = cloneElement(
-        Children.only(overlayContent),
+  getContent: function() {
+    if(this.props.renderContent) {
+      return this.props.renderContent();
+    } else if(this.props.activeProps) {
+      return cloneElement(
+        Children.only(this.props.children),
         this.props.activeProps
       );
     }
+    return this.props.children;
+  },
+
+  getOverlayProps: function() {
     return {
       isOpen: this.state.isOpen,
-      width: this.state.width,
-      height: this.state.height,
       origin: this.state.origin,
       renderHeader: this.props.renderHeader,
       swipeToDismiss: this.props.swipeToDismiss,
-      children: overlayContent,
+      springConfig: this.props.springConfig,
+      children: this.getContent(),
       onClose: this.onClose,
@@ -87,23 +91,10 @@ };
         isAnimating: true,
-        width,
-        height,
-        target: {
-          x: 0,
-          y: 0,
-          opacity: 1,
-        },
         origin: {
+          width,
+          height,
           x: px,
           y: py,
-          opacity: 0,
         },
       }, () => {
         if(this.props.navigator) {
-          var overlayContent = this.props.children;
-          if(this.props.activeProps) {
-            overlayContent = cloneElement(
-              Children.only(overlayContent),
-              this.props.activeProps
-            );
-          }
           var route = {
@@ -145,13 +136,2 @@ component: LightboxOverlay,
   render: function() {
-    var layoutOpacityStyle = {
-      opacity: this.state.layoutOpacity,
-    };
-    var overlay;
-    if(!this.props.navigator) {
-      var props = this.getOverlayProps();
-      overlay = (
-        <LightboxOverlay {...props} />
-      );
-    }
-
     // measure will not return anything useful if we dont attach a onLayout handler on android
@@ -164,3 +144,3 @@ return (
       >
-        <Animated.View style={layoutOpacityStyle}>
+        <Animated.View style={{opacity: this.state.layoutOpacity}}>
           <TouchableHighlight
@@ -173,3 +153,3 @@ underlayColor={this.props.underlayColor}
         </Animated.View>
-        {overlay}
+        {this.props.navigator ? false : <LightboxOverlay {...this.getOverlayProps()} />}
       </View>
@@ -176,0 +156,0 @@ );

LightboxOverlay.js

@@ -23,3 +23,2 @@ /**
 var WINDOW_WIDTH = Dimensions.get('window').width;
-var SPRING_CONFIG = { tension: 30, friction: 7 };
 var DRAG_DISMISS_THRESHOLD = 150;
@@ -29,2 +28,20 @@ var STATUS_BAR_OFFSET = (Platform.OS === 'android' ? -25 : 0);
 var LightboxOverlay = React.createClass({
+  propTypes: {
+    origin: PropTypes.shape({
+      x:        PropTypes.number,
+      y:        PropTypes.number,
+      width:    PropTypes.number,
+      height:   PropTypes.number,
+    }),
+    springConfig: PropTypes.shape({
+      tension:  PropTypes.number,
+      friction: PropTypes.number,
+    }),
+    isOpen:         PropTypes.bool,
+    renderHeader:   PropTypes.func,
+    onOpen:         PropTypes.func,
+    onClose:        PropTypes.func,
+    swipeToDismiss: PropTypes.bool,
+  },
+
   getInitialState: function() {
@@ -41,6 +58,11 @@ return {
       openVal: new Animated.Value(0),
-      layoutOpacity: new Animated.Value(1),
     };
   },
 
+  getDefaultProps: function() {
+    return {
+      springConfig: { tension: 30, friction: 7 },
+    };
+  },
+
   componentWillMount: function() {
@@ -77,3 +99,3 @@ this._panResponder = PanResponder.create({
             this.state.pan,
-            {toValue: 0, ...SPRING_CONFIG}
+            {toValue: 0, ...this.props.springConfig}
           ).start(() => { this.setState({ isPanning: false }); });
@@ -83,2 +105,5 @@ }
     });
+  },
+
+  componentDidMount: function() {
     if(this.props.isOpen) {
@@ -105,3 +130,3 @@ this.open();
       this.state.openVal,
-      { toValue: 1, ...SPRING_CONFIG }
+      { toValue: 1, ...this.props.springConfig }
     ).start(() => this.setState({ isAnimating: false }));
@@ -119,10 +144,7 @@ },
       this.state.openVal,
-      { toValue: 0, ...SPRING_CONFIG }
+      { toValue: 0, ...this.props.springConfig }
     ).start(() => {
       this.props.onClose();
-      // Delay isOpen until next tick to avoid flicker.
-      setTimeout(() => {
-        this.setState({
-          isAnimating: false,
-        });
+      this.setState({
+        isAnimating: false,
       });
@@ -133,6 +155,4 @@ });
   componentWillReceiveProps: function(props) {
-    if(this.props.isOpen != props.isOpen) {
-      if(props.isOpen) {
-        this.open();
-      }
+    if(this.props.isOpen != props.isOpen && props.isOpen) {
+      this.open();
     }
@@ -147,4 +167,2 @@ },
       origin,
-      width,
-      height,
     } = this.props;
@@ -161,3 +179,3 @@
     var lightboxOpacityStyle = {
-      opacity: openVal.interpolate({inputRange: [0, 1], outputRange: [origin.opacity, target.opacity]})
+      opacity: openVal.interpolate({inputRange: [0, 1], outputRange: [0, target.opacity]})
     };
@@ -181,4 +199,4 @@
       top:    openVal.interpolate({inputRange: [0, 1], outputRange: [origin.y + STATUS_BAR_OFFSET, target.y + STATUS_BAR_OFFSET]}),
-      width:  openVal.interpolate({inputRange: [0, 1], outputRange: [width, WINDOW_WIDTH]}),
-      height: openVal.interpolate({inputRange: [0, 1], outputRange: [height, WINDOW_HEIGHT]}),
+      width:  openVal.interpolate({inputRange: [0, 1], outputRange: [origin.width, WINDOW_WIDTH]}),
+      height: openVal.interpolate({inputRange: [0, 1], outputRange: [origin.height, WINDOW_HEIGHT]}),
     }];
@@ -185,0 +203,0 @@

package.json

 {
   "name": "react-native-lightbox",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Images etc in Full Screen Lightbox Popovers for React Native",
@@ -33,3 +33,3 @@ "main": "Lightbox.js",
   "peerDependencies": {
-    "react-native": ">=0.11.0 || 0.11.0-rc || 0.12.0-rc"
+    "react-native": ">=0.11.0 || 0.11.0-rc || 0.12.0-rc || 0.13.0-rc"
   },
@@ -36,0 +36,0 @@ "dependencies": {

README.md

@@ -66,3 +66,4 @@ # react-native-lightbox
 |**`activeProps`**|`object`|Optional set of props applied to the content component when in lightbox mode. Usable for applying custom styles or higher resolution image source.|
-|**`renderHeader(close)`**|`element`|Custom header instead of default with X button|
+|**`renderHeader(close)`**|`function`|Custom header instead of default with X button|
+|**`renderContent`**|`function`|Custom lightbox content instead of default child content|
 |**`onClose`**|`function`|Triggered when lightbox is closed|
@@ -72,2 +73,3 @@ |**`onOpen`**|`function`|Triggered when lightbox is opened|
 |**`swipeToDismiss`**|`bool`|Enables gestures to dismiss the fullscreen mode by swiping up or down, defaults to `true`.|
+|**`springConfig`**|`object`|[`Animated.spring`](https://facebook.github.io/react-native/docs/animations.html) configuration, defaults to `{ tension: 30, friction: 7 }`.|
 
@@ -74,0 +76,0 @@ ## Demo

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

86

increased by2.38%

Worsened metrics

Total package byte prevSize

15043

decreased by-6.26%

Number of package files

7

decreased by-12.5%

Lines of code

382

decreased by-1.55%

No dependency changes