aboutsummaryrefslogtreecommitdiff
path: root/src/console
diff options
context:
space:
mode:
Diffstat (limited to 'src/console')
-rw-r--r--src/console/actions/console.ts22
-rw-r--r--src/console/colorscheme/contexts.tsx10
-rw-r--r--src/console/colorscheme/hooks.ts15
-rw-r--r--src/console/colorscheme/providers.tsx31
-rw-r--r--src/console/colorscheme/styled.tsx6
-rw-r--r--src/console/colorscheme/theme.ts (renamed from src/console/components/ColorSchemeProvider.tsx)31
-rw-r--r--src/console/components/Console.tsx40
-rw-r--r--src/console/components/ErrorMessage.tsx2
-rw-r--r--src/console/components/InfoMessage.tsx2
-rw-r--r--src/console/components/console/CompletionItem.tsx2
-rw-r--r--src/console/components/console/CompletionTitle.tsx2
-rw-r--r--src/console/components/console/Input.tsx2
-rw-r--r--src/console/index.tsx5
-rw-r--r--src/console/reducers/console.ts9
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;
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 18:54:58 +0000