fastcomments-react-native-sdk/src/components/modal-menu.js

React Native FastComments Components. Add live commenting to any React Native application.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { ActivityIndicator, Image, Modal, Text, TouchableOpacity, View } from "react-native";
export const CAN_CLOSE = true;
export const CAN_NOT_CLOSE = false;
export function ModalMenu({ closeIcon, isOpen, items, openButton, onClose, styles, }) {
    const [activeModalId, setModalIdVisible] = useState(isOpen ? 'menu' : null);
    const [isLoading, setLoading] = useState(false);
    async function close(isSafe) {
        if (!isSafe
            && activeModalId
            && activeModalId !== 'menu'
            && items) {
            const currentItem = items.find((item) => item.id === activeModalId);
            if (currentItem && currentItem.requestClose) {
                const requestResult = await currentItem.requestClose(); // will return false cancel
                if (requestResult === CAN_NOT_CLOSE) {
                    return;
                }
            }
        }
        setModalIdVisible(null);
        onClose && onClose();
    }
    return _jsxs(View, { style: styles.modalMenu?.rootView, children: [activeModalId && _jsxs(View, { children: [_jsx(Modal, { animationType: "slide", transparent: true, visible: activeModalId === 'menu', onRequestClose: () => close(false), children: _jsx(View, { style: styles.modalMenu?.centeredView, children: _jsxs(View, { style: styles.modalMenu?.modalView, children: [items.map((item) => _jsxs(TouchableOpacity, { style: styles.modalMenu?.menuOptionButton, onPress: async () => {
                                            setLoading(true);
                                            await item.handler((newModalId) => {
                                                if (newModalId === null) {
                                                    close(false);
                                                }
                                                else {
                                                    setModalIdVisible(newModalId);
                                                }
                                            });
                                            setLoading(false);
                                        }, children: [item.icon, _jsx(Text, { style: styles.modalMenu?.menuOptionText, children: item.label })] }, item.id)), _jsx(TouchableOpacity, { style: styles.modalMenu?.modalCancel, onPress: () => close(false), children: _jsx(Image, { source: closeIcon, style: styles.modalMenu?.menuCancelIcon }) }), isLoading && _jsx(View, { style: styles.modalMenu?.loadingView, children: _jsx(ActivityIndicator, { size: "large" }) })] }) }) }), _jsx(Modal, { animationType: "slide", transparent: true, visible: !!activeModalId && activeModalId !== 'menu', onRequestClose: () => {
                            setModalIdVisible(null);
                            onClose && onClose();
                        }, children: !!activeModalId && activeModalId !== 'menu' && items && items.find((item) => item.subModalContent && item.id === activeModalId)?.subModalContent((isSafe) => {
                            // noinspection JSIgnoredPromiseFromCall
                            close(isSafe);
                        }) })] }), openButton && _jsx(TouchableOpacity, { onPress: () => setModalIdVisible('menu'), children: openButton })] });
}