diff options
author | Shin'ya Ueoka <ueokande@i-beam.org> | 2021-04-05 23:05:23 +0900 |
---|---|---|
committer | Shin'ya Ueoka <ueokande@i-beam.org> | 2021-04-06 21:47:04 +0900 |
commit | 21f863d76fbb5ed752ad529f8fbe33e75460027e (patch) | |
tree | 9e90a22ec44fbbf33c14bddfd6d7ea22e464581b | |
parent | 9041bae89f54efce14239768e642f99d1f0b35d1 (diff) |
Replace colorscheme state with React Hooks
-rw-r--r-- | src/console/actions/console.ts | 22 | ||||
-rw-r--r-- | src/console/colorscheme/contexts.tsx | 10 | ||||
-rw-r--r-- | src/console/colorscheme/hooks.ts | 15 | ||||
-rw-r--r-- | src/console/colorscheme/providers.tsx | 31 | ||||
-rw-r--r-- | src/console/colorscheme/styled.tsx | 6 | ||||
-rw-r--r-- | src/console/colorscheme/theme.ts (renamed from src/console/components/ColorSchemeProvider.tsx) | 31 | ||||
-rw-r--r-- | src/console/components/Console.tsx | 40 | ||||
-rw-r--r-- | src/console/components/ErrorMessage.tsx | 2 | ||||
-rw-r--r-- | src/console/components/InfoMessage.tsx | 2 | ||||
-rw-r--r-- | src/console/components/console/CompletionItem.tsx | 2 | ||||
-rw-r--r-- | src/console/components/console/CompletionTitle.tsx | 2 | ||||
-rw-r--r-- | src/console/components/console/Input.tsx | 2 | ||||
-rw-r--r-- | src/console/index.tsx | 5 | ||||
-rw-r--r-- | src/console/reducers/console.ts | 9 |
14 files changed, 89 insertions, 90 deletions
diff --git a/src/console/actions/console.ts b/src/console/actions/console.ts index 646cc31..bce2c67 100644 --- a/src/console/actions/console.ts +++ b/src/console/actions/console.ts @@ -1,8 +1,4 @@ import * as messages from "../../shared/messages"; -import SettingClient from "../clients/SettingClient"; -import ColorScheme from "../../shared/ColorScheme"; - -const settingClient = new SettingClient(); export const CONSOLE_SHOW_COMMAND = "console.show.command"; export const CONSOLE_SHOW_ERROR = "console.show.error"; @@ -10,7 +6,6 @@ export const CONSOLE_SHOW_INFO = "console.show.info"; export const CONSOLE_HIDE_COMMAND = "console.hide.command"; export const CONSOLE_SET_CONSOLE_TEXT = "console.set.command"; export const CONSOLE_SHOW_FIND = "console.show.find"; -export const CONSOLE_SET_COLORSCHEME = "completion.set.colorscheme"; export const CONSOLE_HIDE = "console.hide"; export interface HideAction { @@ -45,11 +40,6 @@ export interface SetConsoleTextAction { consoleText: string; } -export interface SetColorSchemeAction { - type: typeof CONSOLE_SET_COLORSCHEME; - colorscheme: ColorScheme; -} - export type ConsoleAction = | HideAction | ShowCommand @@ -57,8 +47,7 @@ export type ConsoleAction = | ShowErrorAction | ShowInfoAction | HideCommandAction - | SetConsoleTextAction - | SetColorSchemeAction; + | SetConsoleTextAction; const hide = (): ConsoleAction => { return { @@ -131,14 +120,6 @@ const setConsoleText = (consoleText: string): SetConsoleTextAction => { }; }; -const setColorScheme = async (): Promise<SetColorSchemeAction> => { - const scheme = await settingClient.getColorScheme(); - return { - type: CONSOLE_SET_COLORSCHEME, - colorscheme: scheme, - }; -}; - export { hide, showCommand, @@ -149,5 +130,4 @@ export { setConsoleText, enterCommand, enterFind, - setColorScheme, }; diff --git a/src/console/colorscheme/contexts.tsx b/src/console/colorscheme/contexts.tsx new file mode 100644 index 0000000..e94454b --- /dev/null +++ b/src/console/colorscheme/contexts.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import ColorScheme from "../../shared/ColorScheme"; + +export const ColorSchemeContext = React.createContext<ColorScheme>( + ColorScheme.System +); + +export const ColorSchemeUpdateContext = React.createContext< + (colorscheme: ColorScheme) => void +>(() => {}); diff --git a/src/console/colorscheme/hooks.ts b/src/console/colorscheme/hooks.ts new file mode 100644 index 0000000..c9de754 --- /dev/null +++ b/src/console/colorscheme/hooks.ts @@ -0,0 +1,15 @@ +import React from "react"; +import { ColorSchemeUpdateContext } from "./contexts"; +import SettingClient from "../clients/SettingClient"; + +export const useColorSchemeRefresh = () => { + const update = React.useContext(ColorSchemeUpdateContext); + const settingClient = new SettingClient(); + const refresh = React.useCallback(() => { + settingClient.getColorScheme().then((newScheme) => { + update(newScheme); + }); + }, []); + + return refresh; +}; diff --git a/src/console/colorscheme/providers.tsx b/src/console/colorscheme/providers.tsx new file mode 100644 index 0000000..810c8e0 --- /dev/null +++ b/src/console/colorscheme/providers.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import ColorScheme from "../../shared/ColorScheme"; +import { DarkTheme, LightTheme } from "./theme"; +import { ColorSchemeContext, ColorSchemeUpdateContext } from "./contexts"; +import { ThemeProvider } from "styled-components"; + +export const ColorSchemeProvider: React.FC = ({ children }) => { + const [colorscheme, setColorScheme] = React.useState(ColorScheme.System); + const theme = React.useMemo(() => { + if (colorscheme === ColorScheme.System) { + if ( + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches + ) { + return DarkTheme; + } + } else if (colorscheme === ColorScheme.Dark) { + return DarkTheme; + } + return LightTheme; + }, [colorscheme]); + + return ( + <ColorSchemeContext.Provider value={colorscheme}> + <ColorSchemeUpdateContext.Provider value={setColorScheme}> + <ThemeProvider theme={theme}>{children}</ThemeProvider> + </ColorSchemeUpdateContext.Provider> + </ColorSchemeContext.Provider> + ); +}; +export default ColorSchemeProvider; diff --git a/src/console/colorscheme/styled.tsx b/src/console/colorscheme/styled.tsx new file mode 100644 index 0000000..12e10ec --- /dev/null +++ b/src/console/colorscheme/styled.tsx @@ -0,0 +1,6 @@ +import baseStyled, { ThemedStyledInterface } from "styled-components"; +import { ThemeProperties } from "./theme"; + +const styled = baseStyled as ThemedStyledInterface<ThemeProperties>; + +export default styled; diff --git a/src/console/components/ColorSchemeProvider.tsx b/src/console/colorscheme/theme.ts index bd63571..5c17190 100644 --- a/src/console/components/ColorSchemeProvider.tsx +++ b/src/console/colorscheme/theme.ts @@ -1,9 +1,4 @@ -import React from "react"; -import ColorScheme from "../../shared/ColorScheme"; -import { ThemeProvider } from "styled-components"; -import baseStyled, { ThemedStyledInterface } from "styled-components"; - -type ThemeProperties = { +export type ThemeProperties = { completionTitleBackground: string; completionTitleForeground: string; completionItemBackground: string; @@ -50,27 +45,3 @@ export const DarkTheme: ThemeProperties = { consoleInfoBackground: "#052027", consoleInfoForeground: "#ffffff", }; - -interface Props extends React.HTMLAttributes<HTMLElement> { - colorscheme: ColorScheme; -} - -const ColorSchemeProvider: React.FC<Props> = ({ colorscheme, children }) => { - let theme = LightTheme; - if (colorscheme === ColorScheme.System) { - if ( - window.matchMedia && - window.matchMedia("(prefers-color-scheme: dark)").matches - ) { - theme = DarkTheme; - } - } else if (colorscheme === ColorScheme.Dark) { - theme = DarkTheme; - } - - return <ThemeProvider theme={theme}>{children}</ThemeProvider>; -}; - -export const styled = baseStyled as ThemedStyledInterface<ThemeProperties>; - -export default ColorSchemeProvider; diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx index b97ed62..f6f4234 100644 --- a/src/console/components/Console.tsx +++ b/src/console/components/Console.tsx @@ -3,37 +3,29 @@ import FindPrompt from "./FindPrompt"; import CommandPrompt from "./CommandPrompt"; import InfoMessage from "./InfoMessage"; import ErrorMessage from "./ErrorMessage"; -import * as consoleActions from "../../console/actions/console"; -import ColorSchemeProvider from "./ColorSchemeProvider"; import AppContext from "./AppContext"; +import { useColorSchemeRefresh } from "../colorscheme/hooks"; const Console: React.FC = () => { - const { state, dispatch } = React.useContext(AppContext); + const { state } = React.useContext(AppContext); + const refreshColorScheme = useColorSchemeRefresh(); React.useEffect(() => { - dispatch(consoleActions.setColorScheme()); + refreshColorScheme(); }, []); - const ele = (() => { - switch (state.mode) { - case "command": - return <CommandPrompt />; - case "find": - return <FindPrompt />; - case "info": - return <InfoMessage>{state.messageText}</InfoMessage>; - case "error": - return <ErrorMessage>{state.messageText}</ErrorMessage>; - default: - return null; - } - })(); - - return ( - <ColorSchemeProvider colorscheme={state.colorscheme}> - {ele} - </ColorSchemeProvider> - ); + switch (state.mode) { + case "command": + return <CommandPrompt />; + case "find": + return <FindPrompt />; + case "info": + return <InfoMessage>{state.messageText}</InfoMessage>; + case "error": + return <ErrorMessage>{state.messageText}</ErrorMessage>; + default: + return null; + } }; export default Console; diff --git a/src/console/components/ErrorMessage.tsx b/src/console/components/ErrorMessage.tsx index 93b049b..f8d5ae7 100644 --- a/src/console/components/ErrorMessage.tsx +++ b/src/console/components/ErrorMessage.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { styled } from "./ColorSchemeProvider"; +import styled from "../colorscheme/styled"; const Wrapper = styled.p` border-top: 1px solid gray; diff --git a/src/console/components/InfoMessage.tsx b/src/console/components/InfoMessage.tsx index 02ad27d..ccd9bcf 100644 --- a/src/console/components/InfoMessage.tsx +++ b/src/console/components/InfoMessage.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { styled } from "./ColorSchemeProvider"; +import styled from "../colorscheme/styled"; const Wrapper = styled.p` border-top: 1px solid gray; diff --git a/src/console/components/console/CompletionItem.tsx b/src/console/components/console/CompletionItem.tsx index 7313491..2de1375 100644 --- a/src/console/components/console/CompletionItem.tsx +++ b/src/console/components/console/CompletionItem.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { styled } from "../ColorSchemeProvider"; +import styled from "../../colorscheme/styled"; const Container = styled.li<{ shown: boolean; diff --git a/src/console/components/console/CompletionTitle.tsx b/src/console/components/console/CompletionTitle.tsx index a8e8a54..4018b3f 100644 --- a/src/console/components/console/CompletionTitle.tsx +++ b/src/console/components/console/CompletionTitle.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { styled } from "../ColorSchemeProvider"; +import styled from "../../colorscheme/styled"; const Li = styled.li<{ shown: boolean }>` display: ${({ shown }) => (shown ? "display" : "none")}; diff --git a/src/console/components/console/Input.tsx b/src/console/components/console/Input.tsx index 7850f43..442bd30 100644 --- a/src/console/components/console/Input.tsx +++ b/src/console/components/console/Input.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { styled } from "../ColorSchemeProvider"; +import styled from "../../colorscheme/styled"; const Container = styled.div` background-color: ${({ theme }) => theme.commandBackground}; diff --git a/src/console/index.tsx b/src/console/index.tsx index 4a5368b..71f2a27 100644 --- a/src/console/index.tsx +++ b/src/console/index.tsx @@ -6,6 +6,7 @@ import AppContext from "./components/AppContext"; import "./index.css"; import React from "react"; import ReactDOM from "react-dom"; +import ColorSchemeProvider from "./colorscheme/providers"; const wrapAsync = <T extends unknown>( dispatch: React.Dispatch<T> @@ -48,7 +49,9 @@ const RootComponent: React.FC = () => { return ( <AppContext.Provider value={{ state, dispatch: wrapAsync(dispatch) }}> - <Console /> + <ColorSchemeProvider> + <Console /> + </ColorSchemeProvider> </AppContext.Provider> ); }; diff --git a/src/console/reducers/console.ts b/src/console/reducers/console.ts index 3acd0e9..37f1efc 100644 --- a/src/console/reducers/console.ts +++ b/src/console/reducers/console.ts @@ -1,8 +1,6 @@ -import ColorScheme from "../../shared/ColorScheme"; import { CONSOLE_HIDE, CONSOLE_HIDE_COMMAND, - CONSOLE_SET_COLORSCHEME, CONSOLE_SET_CONSOLE_TEXT, CONSOLE_SHOW_COMMAND, CONSOLE_SHOW_ERROR, @@ -15,14 +13,12 @@ export interface State { mode: string; messageText: string; consoleText: string; - colorscheme: ColorScheme; } export const defaultState = { mode: "", messageText: "", consoleText: "", - colorscheme: ColorScheme.System, }; // eslint-disable-next-line max-lines-per-function @@ -53,11 +49,6 @@ export default function reducer( }; case CONSOLE_SET_CONSOLE_TEXT: return { ...state, consoleText: action.consoleText }; - case CONSOLE_SET_COLORSCHEME: - return { - ...state, - colorscheme: action.colorscheme, - }; default: return state; } |