Sort all language dropdowns, not just in the Settings Page.
This commit is contained in:
parent
bd8172693c
commit
3abaed0f17
5 changed files with 38 additions and 37 deletions
|
@ -21,6 +21,7 @@ import LbcSymbol from 'component/common/lbc-symbol';
|
||||||
import SUPPORTED_LANGUAGES from 'constants/supported_languages';
|
import SUPPORTED_LANGUAGES from 'constants/supported_languages';
|
||||||
import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
|
import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
|
||||||
import { SIMPLE_SITE } from 'config';
|
import { SIMPLE_SITE } from 'config';
|
||||||
|
import { sortLanguageMap } from 'util/default-languages';
|
||||||
|
|
||||||
const LANG_NONE = 'none';
|
const LANG_NONE = 'none';
|
||||||
|
|
||||||
|
@ -416,9 +417,9 @@ function ChannelForm(props: Props) {
|
||||||
<option key={'pri-langNone'} value={LANG_NONE}>
|
<option key={'pri-langNone'} value={LANG_NONE}>
|
||||||
{__('None selected')}
|
{__('None selected')}
|
||||||
</option>
|
</option>
|
||||||
{Object.keys(SUPPORTED_LANGUAGES).map((language) => (
|
{sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
|
||||||
<option key={language} value={language}>
|
<option key={langKey} value={langKey}>
|
||||||
{SUPPORTED_LANGUAGES[language]}
|
{langName}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</FormField>
|
</FormField>
|
||||||
|
@ -434,13 +435,11 @@ function ChannelForm(props: Props) {
|
||||||
<option key={'sec-langNone'} value={LANG_NONE}>
|
<option key={'sec-langNone'} value={LANG_NONE}>
|
||||||
{__('None selected')}
|
{__('None selected')}
|
||||||
</option>
|
</option>
|
||||||
{Object.keys(SUPPORTED_LANGUAGES)
|
{sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
|
||||||
.filter((lang) => lang !== languageParam[0])
|
<option key={langKey} value={langKey} disabled={langKey === languageParam[0]}>
|
||||||
.map((language) => (
|
{langName}
|
||||||
<option key={language} value={language}>
|
</option>
|
||||||
{SUPPORTED_LANGUAGES[language]}
|
))}
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</FormField>
|
</FormField>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,6 +8,7 @@ import PublishReleaseDate from 'component/publishReleaseDate';
|
||||||
import LicenseType from './license-type';
|
import LicenseType from './license-type';
|
||||||
import Card from 'component/common/card';
|
import Card from 'component/common/card';
|
||||||
import SUPPORTED_LANGUAGES from 'constants/supported_languages';
|
import SUPPORTED_LANGUAGES from 'constants/supported_languages';
|
||||||
|
import { sortLanguageMap } from 'util/default-languages';
|
||||||
|
|
||||||
// @if TARGET='app'
|
// @if TARGET='app'
|
||||||
// import ErrorText from 'component/common/error-text';
|
// import ErrorText from 'component/common/error-text';
|
||||||
|
@ -162,9 +163,8 @@ function PublishAdditionalOptions(props: Props) {
|
||||||
value={language}
|
value={language}
|
||||||
onChange={(event) => updatePublishForm({ language: event.target.value })}
|
onChange={(event) => updatePublishForm({ language: event.target.value })}
|
||||||
>
|
>
|
||||||
{Object.entries(SUPPORTED_LANGUAGES).map(([langkey, langName]) => (
|
{sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
|
||||||
// $FlowFixMe
|
<option key={langKey} value={langKey}>
|
||||||
<option key={langkey} value={langkey}>
|
|
||||||
{langName}
|
{langName}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -4,7 +4,7 @@ import React, { useState } from 'react';
|
||||||
import { FormField } from 'component/common/form';
|
import { FormField } from 'component/common/form';
|
||||||
import Spinner from 'component/spinner';
|
import Spinner from 'component/spinner';
|
||||||
import SUPPORTED_LANGUAGES from 'constants/supported_languages';
|
import SUPPORTED_LANGUAGES from 'constants/supported_languages';
|
||||||
import { getDefaultLanguage } from 'util/default-languages';
|
import { getDefaultLanguage, sortLanguageMap } from 'util/default-languages';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
language: string,
|
language: string,
|
||||||
|
@ -15,9 +15,7 @@ type Props = {
|
||||||
|
|
||||||
function SettingLanguage(props: Props) {
|
function SettingLanguage(props: Props) {
|
||||||
const { language, setLanguage, searchInLanguage, setSearchInLanguage } = props;
|
const { language, setLanguage, searchInLanguage, setSearchInLanguage } = props;
|
||||||
|
|
||||||
const [previousLanguage, setPreviousLanguage] = useState(null);
|
const [previousLanguage, setPreviousLanguage] = useState(null);
|
||||||
const languages = SUPPORTED_LANGUAGES;
|
|
||||||
|
|
||||||
if (previousLanguage && language !== previousLanguage) {
|
if (previousLanguage && language !== previousLanguage) {
|
||||||
setPreviousLanguage(null);
|
setPreviousLanguage(null);
|
||||||
|
@ -41,23 +39,11 @@ function SettingLanguage(props: Props) {
|
||||||
'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.'
|
'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{Object.entries(languages)
|
{sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
|
||||||
.sort((a, b) => {
|
<option key={langKey} value={langKey}>
|
||||||
const lhs = String(a[1]);
|
{langName}
|
||||||
const rhs = String(b[1]);
|
</option>
|
||||||
if (lhs < rhs) return -1;
|
))}
|
||||||
if (lhs > rhs) return 1;
|
|
||||||
return 0;
|
|
||||||
})
|
|
||||||
.map((language) => {
|
|
||||||
const langKey = language[0];
|
|
||||||
const langName = String(language[1]);
|
|
||||||
return (
|
|
||||||
<option key={langKey} value={langKey}>
|
|
||||||
{langName}
|
|
||||||
</option>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</FormField>
|
</FormField>
|
||||||
{previousLanguage && <Spinner type="small" />}
|
{previousLanguage && <Spinner type="small" />}
|
||||||
<FormField
|
<FormField
|
||||||
|
|
|
@ -14,7 +14,7 @@ import { Lbryio } from 'lbryinc';
|
||||||
import { useHistory } from 'react-router';
|
import { useHistory } from 'react-router';
|
||||||
import YoutubeTransferStatus from 'component/youtubeTransferStatus';
|
import YoutubeTransferStatus from 'component/youtubeTransferStatus';
|
||||||
import Nag from 'component/common/nag';
|
import Nag from 'component/common/nag';
|
||||||
import { getDefaultLanguage } from 'util/default-languages';
|
import { getDefaultLanguage, sortLanguageMap } from 'util/default-languages';
|
||||||
|
|
||||||
const STATUS_TOKEN_PARAM = 'status_token';
|
const STATUS_TOKEN_PARAM = 'status_token';
|
||||||
const ERROR_MESSAGE_PARAM = 'error_message';
|
const ERROR_MESSAGE_PARAM = 'error_message';
|
||||||
|
@ -147,9 +147,9 @@ export default function YoutubeSync(props: Props) {
|
||||||
onChange={(event) => setLanguage(event.target.value)}
|
onChange={(event) => setLanguage(event.target.value)}
|
||||||
value={language}
|
value={language}
|
||||||
>
|
>
|
||||||
{Object.keys(SUPPORTED_LANGUAGES).map((language) => (
|
{sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
|
||||||
<option key={language} value={language}>
|
<option key={langKey} value={langKey}>
|
||||||
{SUPPORTED_LANGUAGES[language]}
|
{langName}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</FormField>
|
</FormField>
|
||||||
|
|
|
@ -12,3 +12,19 @@ export const getDefaultHomepageKey = () => {
|
||||||
const language = getDefaultLanguage();
|
const language = getDefaultLanguage();
|
||||||
return (homepages[language] && language) || (homepages[language.slice(0, 2)] && language.slice(0, 2)) || DEFAULT_LANG;
|
return (homepages[language] && language) || (homepages[language.slice(0, 2)] && language.slice(0, 2)) || DEFAULT_LANG;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sorts the language map by their native representation (not by language code).
|
||||||
|
*
|
||||||
|
* @param languages The language map to sort, e.g. "{ 'ja': '日本語', ... }"
|
||||||
|
* @returns {[string, string][]}
|
||||||
|
*/
|
||||||
|
export function sortLanguageMap(languages) {
|
||||||
|
return Object.entries(languages).sort((a, b) => {
|
||||||
|
const lhs = String(a[1]);
|
||||||
|
const rhs = String(b[1]);
|
||||||
|
if (lhs < rhs) return -1;
|
||||||
|
if (lhs > rhs) return 1;
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue