0
Fork 0
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:
Charles Zhao 2022-12-01 20:56:40 +08:00 committed by GitHub
parent 31814ad351
commit c7c98aa179
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 25 deletions

View file

@ -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}>