bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

useLocale(): refactor to return direction

Browse source
This commit is contained in:
Alex Gleason 2022-12-23 11:12:48 -06:00
parent 87728876d3
commit 058a75deec
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 31 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/soapbox/containers/soapbox.tsx
View file

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

33
app/soapbox/hooks/useLocale.ts
View file

@ -2,15 +2,38 @@ import MESSAGES from 'soapbox/locales/messages';
import { useSettings } from './useSettings'; 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 */ /** Ensure the given locale exists in our codebase */
const validLocale = (locale: string): boolean => Object.keys(MESSAGES).includes(locale); const validLocale = (locale: string): boolean => Object.keys(MESSAGES).includes(locale);
/** Get valid locale from settings. */ interface UseLocaleResult {
const useLocale = (fallback = 'en') => { locale: string
const settings = useSettings(); direction: CSSProperties['direction']
const locale = settings.get('locale'); }
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 }; export { useLocale };