forked from tangly1024/NotionNext
-
Notifications
You must be signed in to change notification settings - Fork 0
/
global.js
76 lines (67 loc) · 2.36 KB
/
global.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import { generateLocaleDict, initLocale } from './lang'
import { createContext, useContext, useEffect, useState } from 'react'
import Router, { useRouter } from 'next/router'
import BLOG from '@/blog.config'
import { initDarkMode, initTheme, saveThemeToCookies } from '@/lib/theme'
import { ALL_THEME } from '@/themes'
import NProgress from 'nprogress'
const GlobalContext = createContext()
/**
* 全局变量Provider,包括语言本地化、样式主题、搜索词
* @param children
* @returns {JSX.Element}
* @constructor
*/
export function GlobalContextProvider({ children }) {
const [lang, updateLang] = useState(BLOG.LANG)
const [locale, updateLocale] = useState(generateLocaleDict(BLOG.LANG))
const [theme, setTheme] = useState(BLOG.THEME)
const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark')
const [onLoading, changeLoadingState] = useState(false)
const router = useRouter()
useEffect(() => {
initLocale(lang, locale, updateLang, updateLocale)
initDarkMode(isDarkMode, updateDarkMode)
initTheme(theme, changeTheme)
}, [])
useEffect(() => {
const handleStart = (url) => {
NProgress.start()
changeLoadingState(true)
}
const handleStop = () => {
NProgress.done()
changeLoadingState(false)
}
router.events.on('routeChangeStart', handleStart)
router.events.on('routeChangeError', handleStop)
router.events.on('routeChangeComplete', handleStop)
return () => {
router.events.off('routeChangeStart', handleStart)
router.events.off('routeChangeComplete', handleStop)
router.events.off('routeChangeError', handleStop)
}
}, [router])
function switchTheme() {
const currentIndex = ALL_THEME.indexOf(theme)
const newIndex = currentIndex < ALL_THEME.length - 1 ? currentIndex + 1 : 0
const newTheme = ALL_THEME[newIndex]
changeTheme(newTheme)
return newTheme
}
function changeTheme(theme) {
Router.query.theme = ''
if (ALL_THEME.indexOf(theme) > -1) {
setTheme(theme)
} else {
setTheme(BLOG.THEME)
}
saveThemeToCookies(theme)
}
return (
<GlobalContext.Provider value={{ onLoading, changeLoadingState, locale, updateLocale, isDarkMode, updateDarkMode, theme, setTheme, switchTheme, changeTheme }}>
{children}
</GlobalContext.Provider>
)
}
export const useGlobal = () => useContext(GlobalContext)