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

Comparing version 5.1.8 to 5.1.9

dist/AdaptivePopover.d.ts

@@ -50,4 +50,5 @@ import { Component, ReactNode, RefObject } from 'react';
     calculateRectFromRef(): Promise<void>;
+    static hasRetrievedSatisfyingRect: (rect: Rect, initialRect: Rect) => boolean;
     render(): ReactNode;
 }
 export {};

dist/AdaptivePopover.js

@@ -282,2 +282,5 @@ var __extends = (this && this.__extends) || (function () {
                         rect = new Rect(rect.x + horizontalOffset, rect.y + verticalOffset, rect.width, rect.height);
+                        if (count === 0 && AdaptivePopover.hasRetrievedSatisfyingRect(rect, initialRect)) {
+                            return [3 /*break*/, 8];
+                        }
                         return [4 /*yield*/, new Promise(function (resolve) {
@@ -293,3 +296,3 @@ setTimeout(resolve, 100);
                     case 7:
-                        if (rect.equals(initialRect) || rect.y < -1000 || rect.x < -1000) return [3 /*break*/, 4];
+                        if (!AdaptivePopover.hasRetrievedSatisfyingRect(rect, initialRect)) return [3 /*break*/, 4];
                         _c.label = 8;
@@ -338,2 +341,9 @@ case 8:
     };
+    AdaptivePopover.hasRetrievedSatisfyingRect = function (rect, initialRect) {
+        /*
+         * Checking if x and y is less than -1000 because of a strange issue on Android related
+         * to the "Toggle from" feature, where the rect.y is a large negative number at first
+         */
+        return !(rect.equals(initialRect) || rect.y < -1000 || rect.x < -1000);
+    };
     return AdaptivePopover;
@@ -340,0 +350,0 @@ }(Component));

dist/Popover.d.ts

@@ -57,2 +57,3 @@ import { Component, PropsWithChildren, RefObject, ReactNode } from 'react';
     };
+    requestClose(): void;
     private sourceRef;
@@ -59,0 +60,0 @@ render(): ReactNode;

dist/Popover.js

@@ -55,2 +55,9 @@ var __extends = (this && this.__extends) || (function () {
     }
+    Popover.prototype.requestClose = function () {
+        if (this.props.onRequestClose)
+            this.props.onRequestClose();
+        this.setState({
+            isVisible: false
+        });
+    };
     Popover.prototype.render = function () {
@@ -57,0 +64,0 @@ var _this = this;

package.json

 {
   "name": "react-native-popover-view",
-  "version": "5.1.8",
+  "version": "5.1.9",
   "description": "A <Popover /> component for react-native iOS, Android, and Web",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "author": "Peter Steffey (https://steffey.dev)",
+  "author": "Peter Steffey <[e-mail]> (https://github.com/steffeydev)",
   "keywords": [
@@ -9,0 +9,0 @@ "react-component",

README.md

@@ -126,2 +126,29 @@ ## react-native-popover-view
 
+### Showing popover from an element (alternative approach)
+
+If you prefer to let the `Popover` handle opening from an element but need to close it programmatically, you can also use the exposed method `requestClose` to close it manually.
+
+```jsx
+import React, { useRef } from 'react';
+import Popover from 'react-native-popover-view';
+
+function App() {
+  const popoverRef = useRef();
+
+  return (
+    <Popover
+      ref={popoverRef}
+      from={(
+        <TouchableOpacity>
+          <Text>Press here to open popover!</Text>
+        </TouchableOpacity>
+      )}>
+      <TouchableOpacity onPress={() => popoverRef.current.requestClose()}>
+        <Text>Tap to close me</Text>
+      </TouchableOpacity>
+    </Popover>
+  );
+}
+```
+
 ### Showing popover from a reference to an element
@@ -128,0 +155,0 @@

No alert changes

Improved metrics

Total package byte prevSize

281716

0.92%

Number of package files

60

1.69%

Lines of code

4403

0.69%

Number of lines in readme file

495

5.77%

No dependency changes