react-native-modal-popover/lib/usePopover.js

Pure JS popover component for react-native

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.usePopover = void 0;
const react_1 = require("react");
const react_native_1 = require("react-native");
function usePopover(calculateStatusBar = false) {
    const touchableRef = (0, react_1.useRef)(null);
    const [{ showPopover, popoverAnchor }, setState] = (0, react_1.useState)({
        showPopover: false,
        popoverAnchor: { x: 0, y: 0, width: 0, height: 0 },
    });
    const result = (0, react_1.useMemo)(() => {
        const openPopover = () => {
            const handle = (0, react_native_1.findNodeHandle)(touchableRef.current);
            if (handle) {
                react_native_1.NativeModules.UIManager.measure(handle, onTouchableMeasured);
            }
        };
        const onTouchableMeasured = (_x0, _y0, width, height, x, y) => {
            var _a;
            const dimensions = react_native_1.Dimensions.get('window');
            setState({
                showPopover: true,
                popoverAnchor: {
                    x: react_native_1.I18nManager.isRTL ? dimensions.width - x : x,
                    y: y - (calculateStatusBar ? (_a = react_native_1.StatusBar.currentHeight) !== null && _a !== void 0 ? _a : 0 : 0),
                    width,
                    height,
                },
            });
        };
        const closePopover = () => setState((s) => (Object.assign(Object.assign({}, s), { showPopover: false })));
        return {
            openPopover,
            closePopover,
            touchableRef,
            popoverVisible: showPopover,
            popoverAnchorRect: popoverAnchor,
        };
    }, [calculateStatusBar, touchableRef, showPopover, popoverAnchor, setState]);
    const { openPopover } = result;
    (0, react_1.useEffect)(() => {
        const onOrientationChange = () => {
            if (showPopover) {
                requestAnimationFrame(openPopover);
            }
        };
        const listener = react_native_1.Dimensions.addEventListener('change', onOrientationChange);
        return () => {
            listener.remove();
        };
    }, [showPopover, openPopover]);
    return result;
}
exports.usePopover = usePopover;
//# sourceMappingURL=usePopover.js.map