-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
90 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import type { SpeakLocale } from './types'; | ||
import { useSpeakLocale } from './use-functions'; | ||
|
||
/** | ||
* Return the translation of language, region, script or currency display names | ||
* @param code ISO code of language, region, script or currency | ||
* @param options Intl DisplayNamesOptions object | ||
* @param locale Optional Speak locale to be provided outside the component$ | ||
* @param lang Optional language if different from the current one | ||
* @returns The translated code | ||
*/ | ||
export const displayName = ( | ||
code: string, | ||
options: Intl.DisplayNamesOptions, | ||
locale?: SpeakLocale, | ||
lang?: string | ||
): string => { | ||
locale = locale ?? useSpeakLocale(); | ||
|
||
lang = lang ?? locale.extension ?? locale.lang; | ||
|
||
return new Intl.DisplayNames(lang, options).of(code) || code; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { test, describe, expect } from 'vitest'; | ||
|
||
import { displayName as dn } from '../display-name'; | ||
import { ctx } from './config'; | ||
|
||
describe('displayName function', () => { | ||
test('display', () => { | ||
const locale = ctx.locale; | ||
expect(dn('en-US', { type: 'language' }, locale)).toBe('American English'); | ||
expect(dn('USD', { type: 'currency' }, locale)).toBe('US Dollar'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import { $, component$, useStyles$ } from '@builder.io/qwik'; | ||
import { useLocation } from '@builder.io/qwik-city'; | ||
import type { SpeakLocale } from 'qwik-speak'; | ||
import { $translate as t, useSpeakLocale, useSpeakConfig } from 'qwik-speak'; | ||
|
||
import styles from './change-locale.css?inline'; | ||
|
||
export const ChangeLocale = component$(() => { | ||
useStyles$(styles); | ||
|
||
const loc = useLocation(); | ||
|
||
const locale = useSpeakLocale(); | ||
const config = useSpeakConfig(); | ||
|
||
// Replace the locale and navigate to the new URL | ||
const navigateByLocale$ = $((newLocale: SpeakLocale) => { | ||
const url = new URL(location.href); | ||
if (loc.params.lang) { | ||
if (newLocale.lang !== config.defaultLocale.lang) { | ||
url.pathname = url.pathname.replace(loc.params.lang, newLocale.lang); | ||
} else { | ||
url.pathname = url.pathname.replace(new RegExp(`(/${loc.params.lang}/)|(/${loc.params.lang}$)`), '/'); | ||
} | ||
} else if (newLocale.lang !== config.defaultLocale.lang) { | ||
url.pathname = `/${newLocale.lang}${url.pathname}`; | ||
} | ||
|
||
location.href = url.toString(); | ||
}); | ||
|
||
return ( | ||
<div class="change-locale"> | ||
<h2>{t('app.changeLocale')}</h2> | ||
{config.supportedLocales.map(value => ( | ||
<div class={{ active: value.lang == locale.lang, button: true }} | ||
onClick$={async () => await navigateByLocale$(value)}> | ||
{value.lang} | ||
</div> | ||
))} | ||
</div> | ||
); | ||
}); |