mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
fix(console): add language button should be hidden on click (#2565)
This commit is contained in:
parent
31814ad351
commit
c7c98aa179
2 changed files with 22 additions and 25 deletions
|
@ -49,9 +49,5 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import type { LanguageTag } from '@logto/language-kit';
|
||||
import { languages as uiLanguageNameMapping } from '@logto/language-kit';
|
||||
import classNames from 'classnames';
|
||||
import type { ChangeEvent } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
@ -66,26 +65,28 @@ const AddLanguageSelector = ({ options, onSelect }: Props) => {
|
|||
return (
|
||||
<div ref={selectorRef} className={style.languageSelector}>
|
||||
<div className={style.input}>
|
||||
<Button
|
||||
className={classNames(style.addLanguageButton, isDropDownOpen && style.hidden)}
|
||||
icon={<Plus className={style.buttonIcon} />}
|
||||
title="sign_in_exp.others.manage_language.add_language"
|
||||
type="default"
|
||||
size="medium"
|
||||
onClick={() => {
|
||||
setIsDropDownOpen(true);
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
ref={searchInputRef}
|
||||
icon={<SearchIcon className={style.buttonIcon} />}
|
||||
className={classNames(!isDropDownOpen && style.hidden)}
|
||||
placeholder={t('general.type_to_search')}
|
||||
value={searchInputValue}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchInputValue(event.target.value);
|
||||
}}
|
||||
/>
|
||||
{isDropDownOpen ? (
|
||||
<TextInput
|
||||
ref={searchInputRef}
|
||||
icon={<SearchIcon className={style.buttonIcon} />}
|
||||
placeholder={t('general.type_to_search')}
|
||||
value={searchInputValue}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchInputValue(event.target.value);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Button
|
||||
className={style.addLanguageButton}
|
||||
icon={<Plus className={style.buttonIcon} />}
|
||||
title="sign_in_exp.others.manage_language.add_language"
|
||||
type="default"
|
||||
size="medium"
|
||||
onClick={() => {
|
||||
setIsDropDownOpen(true);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{isDropDownOpen && filteredOptions.length > 0 && (
|
||||
<ul className={style.dropDown}>
|
||||
|
|
Loading…
Reference in a new issue