From 9c88110711aabe4527c041ff2cfc113be3e40dbf Mon Sep 17 00:00:00 2001 From: "aton.xia" Date: Tue, 12 Jul 2022 11:28:30 +0800 Subject: [PATCH] feat: complete set lang BUN-88 --- apps/storefront/src/App.tsx | 4 ++- apps/storefront/src/main.tsx | 5 +++- apps/storefront/src/theme.tsx | 41 +++++++++++++++++++++++++++++++ packages/lang/LangProvider.tsx | 14 +++-------- packages/lang/index.ts | 2 ++ packages/lang/theme.ts | 24 ------------------ packages/lang/useB3CurrentLang.ts | 37 ++++++++++++++++++++++++++++ packages/lang/withB3Lang.tsx | 13 ++++++++++ 8 files changed, 104 insertions(+), 36 deletions(-) create mode 100644 apps/storefront/src/theme.tsx delete mode 100644 packages/lang/theme.ts create mode 100644 packages/lang/useB3CurrentLang.ts create mode 100644 packages/lang/withB3Lang.tsx diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx index 12620d31..d164c229 100644 --- a/apps/storefront/src/App.tsx +++ b/apps/storefront/src/App.tsx @@ -1,6 +1,6 @@ import { HashRouter, Route, Routes } from 'react-router-dom' import { useB3AppOpen } from '@b3/hooks' -import { useB3Lang } from '@b3/lang' +import { useB3Lang, useB3CurrentLang } from '@b3/lang' import { ThemeFrame } from './ThemeFrame' import { Home, Form } from './pages' @@ -17,11 +17,13 @@ body { export default function App() { const [isOpen, setIsOpen] = useB3AppOpen(false) const b3Lang = useB3Lang() + const [lang, setLang] = useB3CurrentLang() return (
{b3Lang('intl.users.register')}
+ - + + + , ) diff --git a/apps/storefront/src/theme.tsx b/apps/storefront/src/theme.tsx new file mode 100644 index 00000000..2b5e5c92 --- /dev/null +++ b/apps/storefront/src/theme.tsx @@ -0,0 +1,41 @@ +import { createTheme, ThemeProvider } from '@mui/material/styles' +import * as materialMultiLanguages from '@mui/material/locale' +import React from 'react' + +import { useB3CurrentLang } from '@b3/lang' + +type LangMapType = { + [index: string]: string +} + +const MUI_LANG_MAP: LangMapType = { + en: 'enUS', + zh: 'zhCN', + fr: 'frFR', + nl: 'nlNL', + de: 'deDE', + it: 'itIT', + es: 'esES', +} + +type MaterialMultiLanguagesType = { + [K: string]: materialMultiLanguages.Localization +} + +type Props = { + children?: React.ReactNode; +} + +const theme = (lang: string) => createTheme({}, (materialMultiLanguages as MaterialMultiLanguagesType)[MUI_LANG_MAP[lang] || 'enUS']) + +function B3ThemeProvider({ children }: Props) { + const [lang] = useB3CurrentLang() + + return ( + + { children } + + ) +} + +export default B3ThemeProvider diff --git a/packages/lang/LangProvider.tsx b/packages/lang/LangProvider.tsx index 65fa2294..ad0b70cd 100644 --- a/packages/lang/LangProvider.tsx +++ b/packages/lang/LangProvider.tsx @@ -1,28 +1,22 @@ import { IntlProvider, MessageFormatElement } from 'react-intl' import React from 'react' -import { ThemeProvider, Theme } from '@mui/material/styles' - -import { BrowserLanguage } from '@b3/utils' +import { useB3CurrentLang } from './useB3CurrentLang' import * as defaultLocales from './locales' -import defaultTheme from './theme' type Props = { children?: React.ReactNode; - theme?: (lang: string) => Theme; locales?: { [k: string]: Record | Record }; }; -export function LangProvider({ children, theme = defaultTheme, locales = defaultLocales }: Props) { - const lang = BrowserLanguage() +export function LangProvider({ children, locales = defaultLocales }: Props) { + const [lang] = useB3CurrentLang() return ( - - {children} - + {children} ) } diff --git a/packages/lang/index.ts b/packages/lang/index.ts index 0bec2425..870a64e3 100644 --- a/packages/lang/index.ts +++ b/packages/lang/index.ts @@ -1,2 +1,4 @@ export { LangProvider } from './LangProvider' export { useB3Lang } from './useB3Lang' +export { useB3CurrentLang } from './useB3CurrentLang' +export { withB3Lang } from './withB3Lang' diff --git a/packages/lang/theme.ts b/packages/lang/theme.ts deleted file mode 100644 index 6c393f8e..00000000 --- a/packages/lang/theme.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { createTheme } from '@mui/material/styles' -import * as materialMultiLanguages from '@mui/material/locale' - -type LangMapType = { - [index: string]: string -} - -const MUI_LANG_MAP: LangMapType = { - en: 'enUS', - zh: 'zhCN', - fr: 'frFR', - nl: 'nlNL', - de: 'deDE', - it: 'itIT', - es: 'esES', -} - -type MaterialMultiLanguagesType = { - [index: string]: materialMultiLanguages.Localization -} - -const theme = (lang: string) => createTheme({}, (materialMultiLanguages as MaterialMultiLanguagesType)[MUI_LANG_MAP[lang] || 'enUS']) - -export default theme diff --git a/packages/lang/useB3CurrentLang.ts b/packages/lang/useB3CurrentLang.ts new file mode 100644 index 00000000..32abdd2b --- /dev/null +++ b/packages/lang/useB3CurrentLang.ts @@ -0,0 +1,37 @@ +import { + useState, + useEffect, + Dispatch, + SetStateAction, +} from 'react' + +import { BrowserLanguage } from '@b3/utils' + +const defaultLang = (() => { + const lang = BrowserLanguage() + const safeValue = ['en', 'zh', 'fr', 'nl', 'de', 'it', 'es'] + + return safeValue.indexOf(lang) !== -1 ? lang : 'en' +})() + +const subscriptions: Dispatch>[] = [] +let lang = defaultLang + +const setLang = (newLang: string) => { + lang = newLang + subscriptions.forEach((subscription) => { + subscription(lang) + }) +} + +type UseB3CurrentLang = { + (): [string, (newLang: string) => void] +} + +export const useB3CurrentLang: UseB3CurrentLang = () => { + const [_, newSubscription] = useState(defaultLang) + useEffect(() => { + subscriptions.push(newSubscription) + }, []) + return [lang, setLang] +} diff --git a/packages/lang/withB3Lang.tsx b/packages/lang/withB3Lang.tsx new file mode 100644 index 00000000..eb74ac0a --- /dev/null +++ b/packages/lang/withB3Lang.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import { useB3Lang } from './useB3Lang' + +export const withB3Lang = (WrappedComponent: typeof React.Component) => function (props: any) { + const b3lang = useB3Lang() + + return ( + + ) +}