2021-03-08 15:07:50 +03:00
|
|
|
import 'tailwindcss/tailwind.css'
|
2021-03-26 18:16:23 +03:00
|
|
|
import UIState from 'libs/web/state/ui'
|
2021-02-21 14:02:46 +03:00
|
|
|
import { AppProps } from 'next/app'
|
2021-02-15 12:59:00 +03:00
|
|
|
import Head from 'next/head'
|
2021-04-05 08:52:53 +03:00
|
|
|
import { ThemeProvider, useTheme } from 'next-themes'
|
2021-03-28 17:05:57 +03:00
|
|
|
import PortalState from 'libs/web/state/portal'
|
2021-03-27 16:06:58 +03:00
|
|
|
import Div100vh from 'react-div-100vh'
|
2021-04-26 04:59:40 +03:00
|
|
|
import {
|
|
|
|
|
createMuiTheme,
|
|
|
|
|
MuiThemeProvider,
|
|
|
|
|
StylesProvider,
|
|
|
|
|
} from '@material-ui/core'
|
|
|
|
|
import { useEffect, useMemo } from 'react'
|
2021-04-25 06:07:12 +03:00
|
|
|
import { zhCN, enUS, Localization } from '@material-ui/core/locale'
|
2021-04-25 15:06:38 +03:00
|
|
|
import { Locale, Settings } from 'libs/shared/settings'
|
|
|
|
|
import I18nProvider from 'libs/web/utils/i18n-provider'
|
2021-04-28 08:00:59 +03:00
|
|
|
import CsrfTokenState from 'libs/web/state/csrf-token'
|
2021-04-24 08:24:30 +03:00
|
|
|
|
2021-04-25 06:07:12 +03:00
|
|
|
const muiLocale: Record<Locale, Localization> = {
|
2021-04-24 08:24:30 +03:00
|
|
|
[Locale.ZH_CN]: zhCN,
|
2021-04-25 06:07:12 +03:00
|
|
|
[Locale.EN]: enUS,
|
2021-04-24 08:24:30 +03:00
|
|
|
}
|
2021-02-15 12:59:00 +03:00
|
|
|
|
2021-02-20 15:11:53 +03:00
|
|
|
const handleRejection = (event: any) => {
|
2021-03-08 15:07:50 +03:00
|
|
|
// react-beautiful-dnd 会捕获到 `ResizeObserver loop limit exceeded`
|
|
|
|
|
// 但实际这个错误对性能没有影响
|
|
|
|
|
// see https://github.com/atlassian/react-beautiful-dnd/issues/1548
|
2021-02-20 15:11:53 +03:00
|
|
|
if (/^ResizeObserver/.test(event.message)) {
|
|
|
|
|
// todo catch
|
|
|
|
|
event.stopImmediatePropagation()
|
|
|
|
|
}
|
|
|
|
|
if (event.reason === 'canceled') {
|
|
|
|
|
event.preventDefault()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (typeof window !== 'undefined') {
|
|
|
|
|
window.addEventListener('unhandledrejection', handleRejection)
|
|
|
|
|
window.addEventListener('error', handleRejection)
|
|
|
|
|
}
|
2021-02-17 09:07:35 +03:00
|
|
|
|
2021-03-25 17:32:51 +03:00
|
|
|
function DocumentHead() {
|
|
|
|
|
const { title } = UIState.useContainer()
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Head>
|
|
|
|
|
<title>{title.value}</title>
|
|
|
|
|
<meta charSet="utf-8" />
|
|
|
|
|
<meta
|
|
|
|
|
name="viewport"
|
|
|
|
|
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
|
|
|
|
|
/>
|
|
|
|
|
</Head>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2021-04-05 08:52:53 +03:00
|
|
|
const AppInner = ({ Component, pageProps }: AppProps) => {
|
2021-04-24 07:56:29 +03:00
|
|
|
const { resolvedTheme } = useTheme()
|
2021-04-24 08:24:30 +03:00
|
|
|
const settings = pageProps?.settings as Settings
|
2021-04-05 08:52:53 +03:00
|
|
|
const muiTheme = useMemo(
|
|
|
|
|
() =>
|
2021-04-24 07:56:29 +03:00
|
|
|
createMuiTheme(
|
|
|
|
|
{
|
|
|
|
|
palette: {
|
|
|
|
|
type: resolvedTheme === 'dark' ? 'dark' : 'light',
|
|
|
|
|
primary: {
|
|
|
|
|
/**
|
|
|
|
|
* colors https://tailwindcss.com/docs/customizing-colors
|
|
|
|
|
* primary.main: blue 500
|
|
|
|
|
* secondary.main: gray 500
|
|
|
|
|
*/
|
|
|
|
|
main: '#3B82F6',
|
|
|
|
|
},
|
|
|
|
|
secondary: {
|
|
|
|
|
main: '#6B7280',
|
|
|
|
|
},
|
2021-04-05 08:52:53 +03:00
|
|
|
},
|
|
|
|
|
},
|
2021-04-25 15:06:38 +03:00
|
|
|
muiLocale[settings?.locale]
|
2021-04-24 07:56:29 +03:00
|
|
|
),
|
2021-04-24 08:24:30 +03:00
|
|
|
[resolvedTheme, settings]
|
2021-04-05 08:52:53 +03:00
|
|
|
)
|
|
|
|
|
|
2021-04-26 04:59:40 +03:00
|
|
|
useEffect(() => {
|
|
|
|
|
// Remove the server-side injected CSS.
|
|
|
|
|
const jssStyles = document.querySelector('#jss-server-side')
|
|
|
|
|
|
|
|
|
|
if (jssStyles) {
|
|
|
|
|
jssStyles.parentElement?.removeChild(jssStyles)
|
|
|
|
|
}
|
|
|
|
|
}, [])
|
|
|
|
|
|
2021-02-15 12:59:00 +03:00
|
|
|
return (
|
2021-04-26 04:59:40 +03:00
|
|
|
<StylesProvider injectFirst>
|
|
|
|
|
<MuiThemeProvider theme={muiTheme}>
|
2021-04-28 08:00:59 +03:00
|
|
|
<CsrfTokenState.Provider initialState={pageProps.csrfToken}>
|
|
|
|
|
<I18nProvider locale={settings?.locale} lngDict={pageProps.lngDict}>
|
|
|
|
|
<UIState.Provider
|
|
|
|
|
initialState={{
|
|
|
|
|
ua: pageProps?.ua,
|
|
|
|
|
settings,
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<PortalState.Provider>
|
|
|
|
|
<Div100vh>
|
|
|
|
|
<DocumentHead />
|
|
|
|
|
<Component {...pageProps} />
|
|
|
|
|
</Div100vh>
|
|
|
|
|
</PortalState.Provider>
|
|
|
|
|
</UIState.Provider>
|
|
|
|
|
</I18nProvider>
|
|
|
|
|
</CsrfTokenState.Provider>
|
2021-04-26 04:59:40 +03:00
|
|
|
</MuiThemeProvider>
|
|
|
|
|
</StylesProvider>
|
2021-04-05 08:52:53 +03:00
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function MyApp(props: AppProps) {
|
|
|
|
|
return (
|
|
|
|
|
<ThemeProvider attribute="class" storageKey="nightwind-mode">
|
|
|
|
|
<AppInner {...props} />
|
2021-03-20 05:36:09 +03:00
|
|
|
</ThemeProvider>
|
2021-02-15 12:59:00 +03:00
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2021-03-20 05:36:09 +03:00
|
|
|
export default MyApp
|
