mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

useLocale(): refactor to return direction

environments/review-rtl-improv-6v9ofw/deployments/1828
Alex Gleason 2022-12-23 11:12:48 -06:00
rodzic 87728876d3
commit 058a75deec
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
2 zmienionych plików z 31 dodań i 10 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

8
app/soapbox/containers/soapbox.tsx
Wyświetl plik

@ -53,8 +53,6 @@ import ErrorBoundary from '../components/error-boundary';
import UI from '../features/ui';
import { store } from '../store';
const RTL_LOCALES = ['ar', 'ckb', 'fa', 'he'];
// Configure global functions for developers
createGlobals(store);
@ -211,7 +209,7 @@ const SoapboxLoad: React.FC<ISoapboxLoad> = ({ children }) => {
const me = useAppSelector(state => state.me);
const account = useOwnAccount();
const swUpdating = useAppSelector(state => state.meta.swUpdating);
const locale = useLocale();
const { locale } = useLocale();
const [messages, setMessages] = useState<Record<string, string>>({});
const [localeLoading, setLocaleLoading] = useState(true);
@ -262,7 +260,7 @@ interface ISoapboxHead {
/** Injects metadata into site head with Helmet. */
const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
const locale = useLocale();
const { locale, direction } = useLocale();
const settings = useSettings();
const soapboxConfig = useSoapboxConfig();
@ -281,7 +279,7 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
<>
<Helmet>
<html lang={locale} className={classNames('h-full', { dark: darkMode })} />
<body className={bodyClass} dir={RTL_LOCALES.includes(locale) ? 'rtl' : undefined} />
<body className={bodyClass} dir={direction} />
{themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
{darkMode && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
<meta name='theme-color' content={soapboxConfig.brandColor} />

33
app/soapbox/hooks/useLocale.ts
Wyświetl plik

@ -2,15 +2,38 @@ import MESSAGES from 'soapbox/locales/messages';
import { useSettings } from './useSettings';
import type { CSSProperties } from 'react';
/** Locales which should be presented in right-to-left. */
const RTL_LOCALES = ['ar', 'ckb', 'fa', 'he'];
/** Ensure the given locale exists in our codebase */
const validLocale = (locale: string): boolean => Object.keys(MESSAGES).includes(locale);
/** Get valid locale from settings. */
const useLocale = (fallback = 'en') => {
const settings = useSettings();
const locale = settings.get('locale');
interface UseLocaleResult {
locale: string
direction: CSSProperties['direction']
}
return validLocale(locale) ? locale : fallback;
/** Get valid locale from settings. */
const useLocale = (fallback = 'en'): UseLocaleResult => {
const settings = useSettings();
const userLocale = settings.get('locale') as unknown;
const locale =
(typeof userLocale === 'string' && validLocale(userLocale))
? userLocale
: fallback;
const direction: CSSProperties['direction'] =
RTL_LOCALES.includes(locale)
? 'rtl'
: undefined;
return {
locale,
direction,
};
};
export { useLocale };