react-native-popover-view - npm Package Compare versions

Comparing version 0.6.9 to 0.7.0

package.json

 {
   "name": "react-native-popover-view",
-  "version": "0.6.9",
+  "version": "0.7.0",
   "description": "A <Popover /> component for react-native",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -91,4 +91,4 @@ ## react-native-popover-view
 showInModal       | bool     | Yes      | true        | Whether the popover should be encapsulated in the [Modal view from RN](https://facebook.github.io/react-native/docs/modal.html), which allows it to show above all other content, or just be present in the view hierarchy like a normal view.
-showArrow         | bool     | Yes      | true        | Whether the arrow that points to the rect (passed in as `fromView` or `fromRect`) is shown.  If `fromView` and `fromRect` are null, the arrow will never be shown.
-arrowSize         | size     | Yes      | 16 x 8      | The size of the arrow that points to the rect.
+arrowStyle        | object   | Yes      | {}          | The style of the arrow that points to the rect. Supported options are `width`, `height`, and `backgroundColor`. You can use `{backgroundColor: 'transparent'}` to hid the arrow completely.
+popoverStyle      | object   | Yes      | {}          | The style of the popover itself. You can override the `borderRadius`, `backgroundColor`, or any other [`style` prop for a `View`](https://facebook.github.io/react-native/docs/view-style-props.html).
 showBackground    | bool     | Yes      | true        | Whether the background behind the popover darkens when the popover is shown.
@@ -185,5 +185,5 @@
 `showInModal`   | boolean       | true                   | Passed through to `Popover`. If you want to stack multiple `Popover`'s, only the bottom one can be shown in a `Modal` on iOS.
-`showArrow` | boolean           | true                   | Passed through to `Popover`
 `showBackground` | boolean      | true                   | Passed through to `Popover`
-`arrowSize` | Size           | true                   | Passed through to `Popover`
+`arrowStyle` | object           | {}                     | Passed through to `Popover`
+`popoverStyle` | object           | {}                     | Passed through to `Popover`
 
@@ -212,3 +212,3 @@ Note: If you pass a value through the `StackNavigatorConfig`, and pass the same option for an individual screen, the value passed for the screen overrides.
       placement: Popover.PLACEMENT_OPTIONS.BOTTOM,
-      showArrow: true // Remember: this overrides the global popoverOptions passed in below
+      showBackground: true // Remember: this overrides the global popoverOptions passed in below
     }
@@ -220,3 +220,3 @@ }
   popoverOptions: {
-    showArrow: false,
+    showBackground: false,
     contentContainerStyle: {
@@ -223,0 +223,0 @@ width: 500,

src/Popover.js

@@ -8,8 +8,9 @@ 'use strict';
 
-var flattenStyle = require('react-native/Libraries/StyleSheet/flattenStyle');
-var noop = () => {};
+const flattenStyle = require('react-native/Libraries/StyleSheet/flattenStyle');
+const noop = () => {};
 
-var {height: SCREEN_HEIGHT, width: SCREEN_WIDTH} = Dimensions.get('window');
-var DEFAULT_ARROW_SIZE = new Size(16, 8);
-var FIX_SHIFT = SCREEN_WIDTH * 2;
+const {height: SCREEN_HEIGHT, width: SCREEN_WIDTH} = Dimensions.get('window');
+const DEFAULT_ARROW_SIZE = new Size(16, 8);
+const DEFAULT_BORDER_RADIUS = 3;
+const FIX_SHIFT = SCREEN_WIDTH * 2;
 
@@ -24,3 +25,2 @@ const PLACEMENT_OPTIONS = Object.freeze({
 
-
 class Popover extends React.Component {
@@ -162,2 +162,3 @@
     computeTopGeometry({displayArea, fromRect, requestedContentSize}) {
+        const { popoverStyle } = this.props;
         let minY = displayArea.y;
@@ -186,4 +187,4 @@ const arrowSize = this.getArrowSize(PLACEMENT_OPTIONS.TOP);
         // Make sure the arrow isn't cut off
-        anchorPoint.x = Math.max(anchorPoint.x, arrowSize.width / 2 + 3);
-        anchorPoint.x = Math.min(anchorPoint.x, displayArea.x + displayArea.width - (arrowSize.width / 2) - 3);
+        anchorPoint.x = Math.max(anchorPoint.x, arrowSize.width / 2 + this.getBorderRadius());
+        anchorPoint.x = Math.min(anchorPoint.x, displayArea.x + displayArea.width - (arrowSize.width / 2) - this.getBorderRadius());
 
@@ -199,2 +200,3 @@ return {
     computeBottomGeometry({displayArea, fromRect, requestedContentSize}) {
+        const { popoverStyle } = this.props;
         const arrowSize = this.getArrowSize(PLACEMENT_OPTIONS.BOTTOM);
@@ -222,4 +224,4 @@ let preferedY = fromRect.y + fromRect.height + arrowSize.height;
         // Make sure the arrow isn't cut off
-        anchorPoint.x = Math.max(anchorPoint.x, arrowSize.width / 2 + 3);
-        anchorPoint.x = Math.min(anchorPoint.x, displayArea.x + displayArea.width - (arrowSize.width / 2) - 3);
+        anchorPoint.x = Math.max(anchorPoint.x, arrowSize.width / 2 + this.getBorderRadius());
+        anchorPoint.x = Math.min(anchorPoint.x, displayArea.x + displayArea.width - (arrowSize.width / 2) - this.getBorderRadius());
 
@@ -239,6 +241,7 @@ return {
     computeLeftGeometry({displayArea, fromRect, requestedContentSize}) {
+        const { popoverStyle } = this.props;
         const arrowSize = this.getArrowSize(PLACEMENT_OPTIONS.LEFT);
         let forcedContentSize = {
           height: requestedContentSize.height >= displayArea.height ? displayArea.height : null,
-          width: requestedContentSize.width >= fromRect.x - displayArea.x - arrowSize.width ? fromRect.x - displayArea.x - arrowSize.width : null 
+          width: requestedContentSize.width >= fromRect.x - displayArea.x - arrowSize.width ? fromRect.x - displayArea.x - arrowSize.width : null
         }
@@ -263,4 +266,4 @@
         // Make sure the arrow isn't cut off
-        anchorPoint.y = Math.max(anchorPoint.y, arrowSize.height / 2 + 3);
-        anchorPoint.y = Math.min(anchorPoint.y, displayArea.y + displayArea.height - (arrowSize.height / 2) - 3);
+        anchorPoint.y = Math.max(anchorPoint.y, arrowSize.height / 2 + this.getBorderRadius());
+        anchorPoint.y = Math.min(anchorPoint.y, displayArea.y + displayArea.height - (arrowSize.height / 2) - this.getBorderRadius());
 
@@ -276,2 +279,3 @@ return {
     computeRightGeometry({displayArea, fromRect, requestedContentSize}) {
+        const { popoverStyle } = this.props;
         const arrowSize = this.getArrowSize(PLACEMENT_OPTIONS.RIGHT);
@@ -300,4 +304,4 @@ let horizontalSpace = displayArea.x + displayArea.width - (fromRect.x + fromRect.width) - arrowSize.width;
         // Make sure the arrow isn't cut off
-        anchorPoint.y = Math.max(anchorPoint.y, arrowSize.height / 2 + 3);
-        anchorPoint.y = Math.min(anchorPoint.y, displayArea.y + displayArea.height - (arrowSize.height / 2) - 3);
+        anchorPoint.y = Math.max(anchorPoint.y, arrowSize.height / 2 + this.getBorderRadius());
+        anchorPoint.y = Math.min(anchorPoint.y, displayArea.y + displayArea.height - (arrowSize.height / 2) - this.getBorderRadius());
 
@@ -343,3 +347,3 @@ return {
     getArrowSize(placement) {
-        var size = this.props.arrowSize;
+        var size = new Size(this.props.arrowStyle.width || DEFAULT_ARROW_SIZE.width, this.props.arrowStyle.height || DEFAULT_ARROW_SIZE.height);
         switch(placement) {
@@ -354,6 +358,2 @@ case PLACEMENT_OPTIONS.LEFT:
 
-    getArrowColorStyle(color) {
-        return { borderTopColor: color };
-    }
-
     getArrowRotation(placement) {
@@ -374,3 +374,3 @@ switch (placement) {
         const { anchorPoint, popoverOrigin, placement } = this.state;
-        const { arrowSize } = this.props;
+        const { arrowWidth: width, arrowHeight: height } = this.getCalculatedArrowDims();
 
@@ -381,5 +381,2 @@ // Create the arrow from a rectangle with the appropriate borderXWidth set
         // to fix a visual artifact when the popover is animated with a scale
-        var width = arrowSize.width + 2;
-        var height = arrowSize.height * 2 + 2;
-
         return {
@@ -395,11 +392,21 @@ width: width,
 
+    getCalculatedArrowDims() {
+      const { arrowStyle } = this.props;
+      const arrowWidth = (arrowStyle.width || DEFAULT_ARROW_SIZE.width) + 2;
+      const arrowHeight = (arrowStyle.height || DEFAULT_ARROW_SIZE.height) * 2 + 2;
+      return {arrowWidth, arrowHeight};
+    }
+
+    getBorderRadius() {
+      if (this.props.popoverStyle.borderRadius === 0) return 0;
+      return this.props.popoverStyle.borderRadius || DEFAULT_BORDER_RADIUS;
+    }
+
     getArrowTranslateLocation(translatePoint = null) {
       const { anchorPoint, placement, forcedContentSize, requestedContentSize } = this.state;
-      const { arrowSize } = this.props;
-      const arrowWidth = arrowSize.width + 2;
-      const arrowHeight = arrowSize.height * 2 + 2;
+      const { arrowWidth, arrowHeight } = this.getCalculatedArrowDims();
+      const { popoverStyle } = this.props;
       const viewWidth = forcedContentSize.width || requestedContentSize.width || 0;
       const viewHeight = forcedContentSize.height || requestedContentSize.height || 0;
 
-
       let arrowX = anchorPoint.x - arrowWidth / 2;
@@ -411,11 +418,11 @@ let arrowY = anchorPoint.y - arrowHeight / 2;
         if (placement === PLACEMENT_OPTIONS.LEFT || placement === PLACEMENT_OPTIONS.RIGHT) {
-          if (translatePoint.y > (arrowY - 3))
-            arrowY = translatePoint.y + 3
+          if (translatePoint.y > (arrowY - this.getBorderRadius()))
+            arrowY = translatePoint.y + this.getBorderRadius()
           else if (viewHeight && translatePoint.y + viewHeight < arrowY + arrowHeight)
-            arrowY = translatePoint.y + viewHeight - arrowHeight - 3
+            arrowY = translatePoint.y + viewHeight - arrowHeight - this.getBorderRadius()
         } else if (placement === PLACEMENT_OPTIONS.TOP || placement === PLACEMENT_OPTIONS.BOTTOM) {
-          if (translatePoint.x > arrowX - 3)
-            arrowX = translatePoint.x + 3
+          if (translatePoint.x > arrowX - this.getBorderRadius())
+            arrowX = translatePoint.x + this.getBorderRadius()
           else if (viewWidth && translatePoint.x + viewWidth < arrowX + arrowWidth)
-            arrowX = translatePoint.x + viewWidth - arrowWidth - 3
+            arrowX = translatePoint.x + viewWidth - arrowWidth - this.getBorderRadius()
         }
@@ -582,3 +589,5 @@ }
     render() {
-        var {popoverOrigin, placement, forcedHeight, animatedValues, anchorPoint, forcedContentSize} = this.state;
+        var { popoverOrigin, placement, forcedHeight, animatedValues, anchorPoint, forcedContentSize } = this.state;
+        const { popoverStyle, arrowStyle } = this.props;
+        const { arrowWidth, arrowHeight } = this.getCalculatedArrowDims();
 
@@ -591,7 +600,3 @@ let arrowScale = animatedValues.scale.interpolate({
 
-        var arrowSize = this.props.arrowSize;
-        var arrowWidth = arrowSize.width + 2;
-        var arrowHeight = arrowSize.height * 2 + 2;
-
-        var arrowStyle = {
+        var arrowViewStyle = {
           position: 'absolute',
@@ -613,3 +618,3 @@ top: 0,
           {
-            borderTopColor: styles.popoverContent.backgroundColor,
+            borderTopColor: arrowStyle.backgroundColor || popoverStyle.backgroundColor || styles.popoverContent.backgroundColor,
             transform: [
@@ -641,3 +646,7 @@ {rotate: this.getArrowRotation(placement)}
 
-        let popoverViewStyle = {
+        let popoverViewStyle = Object.assign({
+          maxWidth: forcedContentSize.width,
+          maxHeight: forcedContentSize.height,
+          position: 'absolute',
+        }, styles.dropShadow, styles.popoverContent, popoverStyle, {
           transform: [
@@ -649,8 +658,3 @@ {translateX: animatedValues.translate.x},
           ],
-          maxWidth: forcedContentSize.width,
-          maxHeight: forcedContentSize.height,
-          position: 'absolute',
-          ...styles.dropShadow,
-          ...styles.popoverContent
-        };
+        });
 
@@ -675,3 +679,3 @@ let contentView = (
                   {this.props.showArrow && (this.props.fromRect || this.state.fromRect) &&
-                    <Animated.View style={arrowStyle}>
+                    <Animated.View style={arrowViewStyle}>
                       <View style={arrowInnerStyle}/>
@@ -721,4 +725,4 @@ </Animated.View>
         backgroundColor: 'white',
-        borderRadius: 3,
         borderBottomColor: '#333438',
+        borderRadius: DEFAULT_BORDER_RADIUS,
         overflow: 'hidden'
@@ -748,8 +752,9 @@ },
 Popover.defaultProps = {
-	isVisible: false,
-	arrowSize: DEFAULT_ARROW_SIZE,
-	placement: PLACEMENT_OPTIONS.AUTO,
-	onClose: noop,
-	doneClosingCallback: noop,
-	showInModal: true,
+  isVisible: false,
+  arrowStyle: {},
+  popoverStyle: {},
+  placement: PLACEMENT_OPTIONS.AUTO,
+  onClose: noop,
+  doneClosingCallback: noop,
+  showInModal: true,
   layoutRtl: false,
@@ -763,3 +768,2 @@ showArrow: true,
   displayArea: PropTypes.objectOf(PropTypes.number),
-  arrowSize: PropTypes.objectOf(PropTypes.number),
   placement: PropTypes.oneOf([PLACEMENT_OPTIONS.LEFT, PLACEMENT_OPTIONS.RIGHT, PLACEMENT_OPTIONS.TOP, PLACEMENT_OPTIONS.BOTTOM, PLACEMENT_OPTIONS.AUTO]),
@@ -775,4 +779,6 @@ onClose: PropTypes.func,
   showBackground: PropTypes.bool,
+  popoverStyle: PropTypes.object,
+  arrowStyle: PropTypes.object
 }
 
 export default Popover;

src/PopoverNavigation.js

@@ -44,3 +44,3 @@ import Popover from './Popover'
     const child = React.cloneElement(this.props.children, {goBack: () => this.goBack()});
-    const { contentContainerStyle, arrowSize, placement, showInModal, layoutRtl, showArrow, showBackground, getRegisteredView, displayArea, showInPopover, backgroundColor } = this.props;
+    const { contentContainerStyle, popoverStyle, arrowStyle, placement, showInModal, layoutRtl, showBackground, getRegisteredView, displayArea, showInPopover, backgroundColor } = this.props;
 
@@ -50,3 +50,4 @@ if (showInPopover()) {
         <Popover
-          arrowSize={arrowSize}
+          arrowStyle={arrowStyle}
+          popoverStyle={popoverStyle}
           placement={placement}
@@ -53,0 +54,0 @@ showInModal={showInModal}

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

Total package byte prevSize

2827448

increased by0.05%

Lines of code

2180

increased by0.46%

No dependency changes