|
1 | | -import type {FC} from 'react'; |
2 | | -import type {AppOptions} from '$/types'; |
3 | | -import type {StatusResult} from '@technote-space/worker-controller'; |
4 | | -import React, {memo, useMemo, useEffect} from 'react'; |
5 | | -import {Helmet} from 'react-helmet'; |
6 | | -import styled from 'styled-components'; |
7 | | -import LayoutBuilder, { |
| 1 | +import type { FC } from 'react'; |
| 2 | +import type { AppOptions } from '$/types'; |
| 3 | +import type { StatusResult } from '@technote-space/worker-controller'; |
| 4 | +import React, { memo, useMemo, useEffect } from 'react'; |
| 5 | +import { Helmet } from 'react-helmet'; |
| 6 | +import { |
8 | 7 | Root, |
9 | | - getHeader, |
10 | | - getDrawerSidebar, |
11 | | - getSidebarContent, |
12 | | - getContent, |
13 | | - getSidebarTrigger, |
| 8 | + Header, |
| 9 | + SidebarContent, |
| 10 | + Content, |
| 11 | + EdgeTrigger, |
| 12 | + EdgeSidebar, |
| 13 | + EdgeTriggerProps, |
14 | 14 | } from '@mui-treasury/layout'; |
15 | 15 | import { |
16 | 16 | Toolbar, |
17 | 17 | CssBaseline, |
18 | | -} from '@material-ui/core'; |
19 | | -import {createTheme, responsiveFontSizes, makeStyles, createStyles} from '@material-ui/core/styles'; |
20 | | -import {useTheme} from './hooks'; |
| 18 | +} from '@mui/material'; |
| 19 | +import { ThemeProvider, createTheme, responsiveFontSizes } from '@mui/material/styles'; |
| 20 | +import { useTheme } from './hooks'; |
21 | 21 | import { |
22 | 22 | ContentEx, |
23 | 23 | HeaderEx, |
24 | 24 | NavContentEx, |
25 | 25 | } from './templates'; |
26 | | -import {useDispatchContext, useStoreContext} from './Store'; |
27 | | -import {Controller} from '@technote-space/worker-controller'; |
28 | | -import {getProcessContext, getTitle, updateStatus} from './common'; |
29 | | - |
30 | | -const useStyles = makeStyles(() => createStyles({ |
31 | | - content: { |
32 | | - height: '100%', |
33 | | - }, |
34 | | -})); |
35 | | - |
36 | | -const scheme = LayoutBuilder(); |
37 | | -scheme.configureHeader(builder => { |
38 | | - builder |
39 | | - .registerConfig('xs', { |
40 | | - position: 'sticky', |
41 | | - initialHeight: 56, |
42 | | - }) |
43 | | - .registerConfig('md', { |
44 | | - position: 'sticky', |
45 | | - initialHeight: 64, |
46 | | - clipped: true, |
47 | | - }); |
48 | | -}); |
49 | | -scheme.configureEdgeSidebar(builder => { |
50 | | - builder |
51 | | - .create('primarySidebar', { |
52 | | - anchor: 'left', |
53 | | - }) |
54 | | - .registerTemporaryConfig('xs', { |
55 | | - width: 275, |
56 | | - }) |
57 | | - .registerPermanentConfig('md', { |
58 | | - width: 275, |
59 | | - collapsible: false, |
60 | | - }) |
61 | | - .registerPermanentConfig('lg', { |
62 | | - width: 275, |
63 | | - collapsible: false, |
64 | | - }); |
65 | | -}); |
66 | | -const Header = getHeader(styled); |
67 | | -const DrawerSidebar = getDrawerSidebar(styled); |
68 | | -const SidebarContent = getSidebarContent(styled); |
69 | | -const SidebarTrigger = getSidebarTrigger(styled); |
70 | | -const Content = getContent(styled); |
| 26 | +import { useDispatchContext, useStoreContext } from './Store'; |
| 27 | +import { Controller } from '@technote-space/worker-controller'; |
| 28 | +import { getProcessContext, getTitle, updateStatus } from './common'; |
71 | 29 |
|
72 | 30 | const App: FC<{ |
73 | 31 | options: AppOptions; |
74 | | -}> = memo(({options}: { options: AppOptions }) => { |
75 | | - const {store: {themeColor, reloadWorker}, store} = useStoreContext(); |
76 | | - const {dispatch} = useDispatchContext(); |
77 | | - const themeObject = useTheme(themeColor); |
78 | | - const theme = responsiveFontSizes(createTheme(themeObject)); |
79 | | - const classes = useStyles({theme}); |
| 32 | +}> = memo(({ options }: { options: AppOptions }) => { |
| 33 | + const { store: { themeColor, reloadWorker }, store } = useStoreContext(); |
| 34 | + const { dispatch } = useDispatchContext(); |
| 35 | + const themeObject = useTheme(themeColor); |
| 36 | + const theme = responsiveFontSizes(createTheme(themeObject)); |
80 | 37 |
|
81 | 38 | const title = useMemo(() => getTitle(options, store), [store]); |
82 | 39 | const cssBaseline = useMemo(() => <CssBaseline/>, []); |
83 | 40 | const header = useMemo(() => <Header> |
84 | 41 | <Toolbar> |
85 | | - <SidebarTrigger sidebarId="primarySidebar"/> |
| 42 | + <EdgeTrigger target={{ anchor: 'left', field: 'open' }}> |
| 43 | + {((open, setOpen) => ( |
| 44 | + <button onClick={() => setOpen(!open)}>{open ? 'Close' : 'Open'}</button> |
| 45 | + )) as EdgeTriggerProps['children']} |
| 46 | + </EdgeTrigger> |
86 | 47 | <HeaderEx options={options}/> |
87 | 48 | </Toolbar> |
88 | 49 | </Header>, []); |
89 | | - const sidebar = useMemo(() => <DrawerSidebar sidebarId="primarySidebar"> |
90 | | - <SidebarContent> |
91 | | - <NavContentEx options={options}/> |
92 | | - </SidebarContent> |
93 | | - </DrawerSidebar>, []); |
94 | | - const content = useMemo(() => <Content className={classes.content}> |
| 50 | + const sidebar = useMemo(() => <EdgeSidebar anchor="left"> |
| 51 | + {({ setOpen }) => ( |
| 52 | + <SidebarContent> |
| 53 | + <NavContentEx options={options} setOpen={setOpen}/> |
| 54 | + </SidebarContent> |
| 55 | + )} |
| 56 | + </EdgeSidebar>, []); |
| 57 | + const content = useMemo(() => <Content sx={{ height: '100%' }}> |
95 | 58 | <ContentEx options={options}/> |
96 | | - </Content>, [classes]); |
| 59 | + </Content>, []); |
97 | 60 |
|
98 | 61 | useEffect(() => { |
99 | 62 | (async(): Promise<void> => { |
100 | | - dispatch({type: 'INITIALIZE'}); |
| 63 | + dispatch({ type: 'INITIALIZE' }); |
101 | 64 | // eslint-disable-next-line @typescript-eslint/no-explicit-any |
102 | 65 | const worker = new Controller((result: any | StatusResult) => { |
103 | 66 | if ('status' in result) { |
104 | 67 | updateStatus(result.status, dispatch); |
105 | 68 | } else { |
106 | | - dispatch({type: 'RESULT', result}); |
| 69 | + dispatch({ type: 'RESULT', result }); |
107 | 70 | } |
108 | 71 | }, { |
109 | 72 | context: await getProcessContext(options, store), |
110 | 73 | }); |
111 | | - dispatch({type: 'WORKER', worker}); |
112 | | - dispatch({type: 'INITIALIZED'}); |
| 74 | + dispatch({ type: 'WORKER', worker }); |
| 75 | + dispatch({ type: 'INITIALIZED' }); |
113 | 76 | })().then(); |
114 | 77 | }, [reloadWorker]); |
115 | 78 |
|
116 | 79 | return useMemo(() => ( |
117 | | - <Root scheme={scheme} theme={theme}> |
118 | | - <Helmet title={title}/> |
119 | | - {cssBaseline} |
120 | | - {header} |
121 | | - {sidebar} |
122 | | - {content} |
123 | | - </Root> |
124 | | - ), [title, classes, theme]); |
| 80 | + <ThemeProvider theme={theme}> |
| 81 | + <Root scheme={{ |
| 82 | + header: { |
| 83 | + config: { |
| 84 | + xs: { |
| 85 | + position: 'sticky', |
| 86 | + height: 56, |
| 87 | + }, |
| 88 | + md: { |
| 89 | + position: 'relative', |
| 90 | + height: 64, |
| 91 | + clipped: true, |
| 92 | + }, |
| 93 | + }, |
| 94 | + }, |
| 95 | + leftEdgeSidebar: { |
| 96 | + autoCollapse: 'sm', |
| 97 | + config: { |
| 98 | + xs: { |
| 99 | + variant: 'temporary', |
| 100 | + width: 275, |
| 101 | + }, |
| 102 | + md: { |
| 103 | + variant: 'permanent', |
| 104 | + width: 275, |
| 105 | + collapsible: false, |
| 106 | + }, |
| 107 | + lg: { |
| 108 | + variant: 'permanent', |
| 109 | + width: 275, |
| 110 | + collapsible: false, |
| 111 | + }, |
| 112 | + }, |
| 113 | + }, |
| 114 | + }}> |
| 115 | + <Helmet title={title}/> |
| 116 | + {cssBaseline} |
| 117 | + {header} |
| 118 | + {sidebar} |
| 119 | + {content} |
| 120 | + </Root> |
| 121 | + </ThemeProvider> |
| 122 | + ), [title, theme]); |
125 | 123 | }); |
126 | 124 |
|
127 | 125 | App.displayName = 'App'; |
|
0 commit comments