@aioha/react-ui
Version:
Ready-made React modal for Aioha
28 lines (27 loc) • 2.71 kB
JavaScript
import React, { useState } from 'react';
import { useAioha } from '@aioha/providers/react';
import { LoginModal } from './LoginModal.js';
import { UserModal } from './UserModal.js';
import { SwitchUserModal } from './SwitchUserModal.js';
export const AiohaModal = ({ displayed = false, loginTitle, loginHelpUrl, loginOptions, discOptions, forceShowProviders = [], arrangement = 'list', imageServer, explorerUrl, onLogin, onClose }) => {
const { aioha, user, otherUsers } = useAioha();
const isInactive = Object.keys(otherUsers).length > 0 && !aioha.isLoggedIn();
const [switchingUser, setSwitchingUser] = useState(isInactive);
const [addingAcc, setAddingAcc] = useState(false);
return (React.createElement("div", { id: "aioha-modal", tabIndex: -1, className: `${displayed ? '' : 'hidden'} overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full md:inset-0 h-full bg-black/60`, onMouseDown: () => onClose(false) },
React.createElement("div", { className: `relative p-4 ${arrangement === 'grid' ? 'md:max-w-xl max-w-md' : 'max-w-md'} max-h-full` },
React.createElement("div", { className: "relative bg-white rounded-lg shadow-sm dark:bg-gray-700 min-w-sm", onMouseDown: (e) => e.stopPropagation() }, aioha.isLoggedIn() || Object.keys(otherUsers).length > 0 ? (switchingUser ? (!addingAcc ? (React.createElement(SwitchUserModal, { onClose: onClose, onSelect: (newUser) => {
if (newUser !== user)
aioha.switchUser(newUser);
setSwitchingUser(false);
}, onAddAcc: () => setAddingAcc(true) })) : (React.createElement(LoginModal, { loginTitle: 'Add Account', loginHelpUrl: loginHelpUrl, loginOptions: loginOptions, discOptions: discOptions, arrangement: arrangement, forceShowProviders: forceShowProviders, onLogin: (r) => {
setAddingAcc(false);
setSwitchingUser(false);
if (typeof onLogin === 'function')
onLogin(r);
}, onClose: onClose, onCancel: () => setAddingAcc(false) }))) : (React.createElement(UserModal, { imageServer: imageServer, explorerUrl: explorerUrl, onClose: onClose, onSwitchUser: () => setSwitchingUser(true) }))) : (React.createElement(LoginModal, { loginTitle: loginTitle, loginHelpUrl: loginHelpUrl, loginOptions: loginOptions, discOptions: discOptions, arrangement: arrangement, forceShowProviders: forceShowProviders, onLogin: (r) => {
setSwitchingUser(false);
if (typeof onLogin === 'function')
onLogin(r);
}, onClose: onClose }))))));
};