diff options
Diffstat (limited to 'packages/renderer/src/components')
4 files changed, 51 insertions, 49 deletions
diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx index 11c09d6..8f055e7 100644 --- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx +++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx | |||
@@ -29,36 +29,37 @@ export default observer(() => { | |||
29 | const store = useStore(); | 29 | const store = useStore(); |
30 | 30 | ||
31 | // eslint-disable-next-line react-hooks/exhaustive-deps -- react-hooks doesn't support `throttle`. | 31 | // eslint-disable-next-line react-hooks/exhaustive-deps -- react-hooks doesn't support `throttle`. |
32 | const onResize = useCallback(throttle(([entry]: ResizeObserverEntry[]) => { | 32 | const onResize = useCallback( |
33 | if (entry) { | 33 | throttle(([entry]: ResizeObserverEntry[]) => { |
34 | const { | 34 | if (entry) { |
35 | x, | 35 | const { x, y, width, height } = entry.target.getBoundingClientRect(); |
36 | y, | 36 | store.setBrowserViewBounds({ |
37 | width, | 37 | x, |
38 | height, | 38 | y, |
39 | } = entry.target.getBoundingClientRect(); | 39 | width, |
40 | store.setBrowserViewBounds({ | 40 | height, |
41 | x, | 41 | }); |
42 | y, | 42 | } |
43 | width, | 43 | }, 100), |
44 | height, | 44 | [store], |
45 | }); | 45 | ); |
46 | } | ||
47 | }, 100), [store]); | ||
48 | 46 | ||
49 | const resizeObserverRef = useRef<ResizeObserver | null>(null); | 47 | const resizeObserverRef = useRef<ResizeObserver | null>(null); |
50 | 48 | ||
51 | const ref = useCallback((element: HTMLElement | null) => { | 49 | const ref = useCallback( |
52 | if (resizeObserverRef.current !== null) { | 50 | (element: HTMLElement | null) => { |
53 | resizeObserverRef.current.disconnect(); | 51 | if (resizeObserverRef.current !== null) { |
54 | } | 52 | resizeObserverRef.current.disconnect(); |
55 | if (element === null) { | 53 | } |
56 | resizeObserverRef.current = null; | 54 | if (element === null) { |
57 | return; | 55 | resizeObserverRef.current = null; |
58 | } | 56 | return; |
59 | resizeObserverRef.current = new ResizeObserver(onResize); | 57 | } |
60 | resizeObserverRef.current.observe(element); | 58 | resizeObserverRef.current = new ResizeObserver(onResize); |
61 | }, [onResize, resizeObserverRef]); | 59 | resizeObserverRef.current.observe(element); |
60 | }, | ||
61 | [onResize, resizeObserverRef], | ||
62 | ); | ||
62 | 63 | ||
63 | return ( | 64 | return ( |
64 | <Box | 65 | <Box |
diff --git a/packages/renderer/src/components/StoreProvider.tsx b/packages/renderer/src/components/StoreProvider.tsx index cde6a31..bb8495c 100644 --- a/packages/renderer/src/components/StoreProvider.tsx +++ b/packages/renderer/src/components/StoreProvider.tsx | |||
@@ -32,13 +32,14 @@ export function useStore(): RendererStore { | |||
32 | return store; | 32 | return store; |
33 | } | 33 | } |
34 | 34 | ||
35 | export default function StoreProvider({ children, store }: { | 35 | export default function StoreProvider({ |
36 | children: JSX.Element | JSX.Element[], | 36 | children, |
37 | store: RendererStore, | 37 | store, |
38 | }: { | ||
39 | children: JSX.Element | JSX.Element[]; | ||
40 | store: RendererStore; | ||
38 | }): JSX.Element { | 41 | }): JSX.Element { |
39 | return ( | 42 | return ( |
40 | <StoreContext.Provider value={store}> | 43 | <StoreContext.Provider value={store}>{children}</StoreContext.Provider> |
41 | {children} | ||
42 | </StoreContext.Provider> | ||
43 | ); | 44 | ); |
44 | } | 45 | } |
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx index eacaa52..3943371 100644 --- a/packages/renderer/src/components/ThemeProvider.tsx +++ b/packages/renderer/src/components/ThemeProvider.tsx | |||
@@ -27,20 +27,18 @@ import React from 'react'; | |||
27 | 27 | ||
28 | import { useStore } from './StoreProvider'; | 28 | import { useStore } from './StoreProvider'; |
29 | 29 | ||
30 | export default observer(({ children }: { | 30 | export default observer( |
31 | children: JSX.Element | JSX.Element[]; | 31 | ({ children }: { children: JSX.Element | JSX.Element[] }) => { |
32 | }) => { | 32 | const { |
33 | const { shared: { shouldUseDarkColors } } = useStore(); | 33 | shared: { shouldUseDarkColors }, |
34 | } = useStore(); | ||
34 | 35 | ||
35 | const theme = createTheme({ | 36 | const theme = createTheme({ |
36 | palette: { | 37 | palette: { |
37 | mode: shouldUseDarkColors ? 'dark' : 'light', | 38 | mode: shouldUseDarkColors ? 'dark' : 'light', |
38 | }, | 39 | }, |
39 | }); | 40 | }); |
40 | 41 | ||
41 | return ( | 42 | return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>; |
42 | <MuiThemeProvider theme={theme}> | 43 | }, |
43 | {children} | 44 | ); |
44 | </MuiThemeProvider> | ||
45 | ); | ||
46 | }); | ||
diff --git a/packages/renderer/src/components/ToggleDarkModeButton.tsx b/packages/renderer/src/components/ToggleDarkModeButton.tsx index c8ffdf0..695756a 100644 --- a/packages/renderer/src/components/ToggleDarkModeButton.tsx +++ b/packages/renderer/src/components/ToggleDarkModeButton.tsx | |||
@@ -28,7 +28,9 @@ import { useStore } from './StoreProvider'; | |||
28 | 28 | ||
29 | export default observer(() => { | 29 | export default observer(() => { |
30 | const store = useStore(); | 30 | const store = useStore(); |
31 | const { shared: { shouldUseDarkColors } } = store; | 31 | const { |
32 | shared: { shouldUseDarkColors }, | ||
33 | } = store; | ||
32 | 34 | ||
33 | return ( | 35 | return ( |
34 | <IconButton | 36 | <IconButton |