From b419255beb3ec247859f13019ccacb905e655d8b Mon Sep 17 00:00:00 2001 From: Jing Hua Date: Fri, 28 Apr 2023 17:28:27 +0800 Subject: [PATCH 1/8] fix style: api endpoint selector --- src/components/ApiMenu/ApiMenu.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/ApiMenu/ApiMenu.tsx b/src/components/ApiMenu/ApiMenu.tsx index 5c290dbb8..0f7d1c8e0 100644 --- a/src/components/ApiMenu/ApiMenu.tsx +++ b/src/components/ApiMenu/ApiMenu.tsx @@ -53,7 +53,7 @@ const ApiMenu = ({ {t('customEndpoint', { ns: 'api' })} -
+
{t('apiEndpoint.inputLabel', { ns: 'api' })}
@@ -124,13 +124,13 @@ const ApiEndpointSelector = ({ const [dropDown, setDropDown] = useState(false); return ( -
+
{availableEndpoints.map((endpoint) => (
  • { _setApiEndpoint(endpoint); setDropDown(false); From b7b3c0ec75728812a8ff86baccb3d916b49450ad Mon Sep 17 00:00:00 2001 From: Jing Hua Date: Sat, 29 Apr 2023 23:09:29 +0800 Subject: [PATCH 2/8] api selector hide on outside click --- src/components/ApiMenu/ApiMenu.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/ApiMenu/ApiMenu.tsx b/src/components/ApiMenu/ApiMenu.tsx index 0f7d1c8e0..12a3b5dcd 100644 --- a/src/components/ApiMenu/ApiMenu.tsx +++ b/src/components/ApiMenu/ApiMenu.tsx @@ -2,8 +2,12 @@ import React, { useEffect, useState } from 'react'; import { useTranslation, Trans } from 'react-i18next'; import useStore from '@store/store'; +import useHideOnOutsideClick from '@hooks/useHideOnOutsideClick'; + import PopupModal from '@components/PopupModal'; + import { availableEndpoints, defaultAPIEndpoint } from '@constants/auth'; + import DownChevronArrow from '@icon/DownChevronArrow'; const ApiMenu = ({ @@ -121,7 +125,7 @@ const ApiEndpointSelector = ({ _apiEndpoint: string; _setApiEndpoint: React.Dispatch>; }) => { - const [dropDown, setDropDown] = useState(false); + const [dropDown, setDropDown, dropDownRef] = useHideOnOutsideClick(); return (
    @@ -135,6 +139,7 @@ const ApiEndpointSelector = ({