alex/nova-betterchat
1
0
Fork 0
mirror of https://github.com/NovaOSS/nova-betterchat.git synced 2024-11-29 09:53:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

api selector hide on outside click

Browse source
This commit is contained in:
Jing Hua 2023-04-29 23:09:29 +08:00
parent b419255beb
commit b7b3c0ec75
1 changed files with 6 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/ApiMenu/ApiMenu.tsx
View file

@ -2,8 +2,12 @@ import React, { useEffect, useState } from 'react';
import { useTranslation, Trans } from 'react-i18next'; import { useTranslation, Trans } from 'react-i18next';
import useStore from '@store/store'; import useStore from '@store/store';
import useHideOnOutsideClick from '@hooks/useHideOnOutsideClick';
import PopupModal from '@components/PopupModal'; import PopupModal from '@components/PopupModal';
import { availableEndpoints, defaultAPIEndpoint } from '@constants/auth'; import { availableEndpoints, defaultAPIEndpoint } from '@constants/auth';
import DownChevronArrow from '@icon/DownChevronArrow'; import DownChevronArrow from '@icon/DownChevronArrow';
const ApiMenu = ({ const ApiMenu = ({
@ -121,7 +125,7 @@ const ApiEndpointSelector = ({
_apiEndpoint: string; _apiEndpoint: string;
_setApiEndpoint: React.Dispatch<React.SetStateAction<string>>; _setApiEndpoint: React.Dispatch<React.SetStateAction<string>>;
}) => { }) => {
const [dropDown, setDropDown] = useState<boolean>(false); const [dropDown, setDropDown, dropDownRef] = useHideOnOutsideClick();
return ( return (
<div className='w-[40vw] relative flex-1'> <div className='w-[40vw] relative flex-1'>
@ -135,6 +139,7 @@ const ApiEndpointSelector = ({
</button> </button>
<div <div
id='dropdown' id='dropdown'
ref={dropDownRef}
className={`${ className={`${
dropDown ? '' : 'hidden' dropDown ? '' : 'hidden'
} absolute top-100 bottom-100 z-10 bg-white rounded-lg shadow-xl border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800 opacity-90 w-32 w-full`} } absolute top-100 bottom-100 z-10 bg-white rounded-lg shadow-xl border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800 opacity-90 w-32 w-full`}