From 6a82d808ec194542855ac83122661da767fd8170 Mon Sep 17 00:00:00 2001
From: Henry <50559854+Henry8192@users.noreply.github.com>
Date: Thu, 5 Sep 2024 12:24:42 -0400
Subject: [PATCH] Move ConfigForm & theme to new separate files; Create
SmallIconNavButton and SmallIconButton to avoid code duplication
---
new-log-viewer/src/App.tsx | 82 +------
new-log-viewer/src/components/ConfigForm.tsx | 134 ++++++++++++
new-log-viewer/src/components/Layout.tsx | 215 ++++---------------
new-log-viewer/src/utils/theme.tsx | 75 +++++++
4 files changed, 258 insertions(+), 248 deletions(-)
create mode 100644 new-log-viewer/src/components/ConfigForm.tsx
create mode 100644 new-log-viewer/src/utils/theme.tsx
diff --git a/new-log-viewer/src/App.tsx b/new-log-viewer/src/App.tsx
index a59b9a85..b01f4ef2 100644
--- a/new-log-viewer/src/App.tsx
+++ b/new-log-viewer/src/App.tsx
@@ -1,91 +1,13 @@
-import {
- CssVarsProvider,
- extendTheme,
-} from "@mui/joy/styles";
-
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import {CssVarsProvider} from "@mui/joy/styles";
import Layout from "./components/Layout";
import StateContextProvider from "./contexts/StateContextProvider";
import UrlContextProvider from "./contexts/UrlContextProvider";
import {CONFIG_KEY} from "./typings/config";
import {CONFIG_DEFAULT} from "./utils/config";
+import monacoTheme from "./utils/theme";
-const monacoTheme = extendTheme({
- colorSchemes: {
- light: {
- palette: {
- success: {
- solidBg: "#007acc",
- solidHoverBg: "#0062a3",
- solidActiveBg: "#0062a3",
- },
- neutral: {
- solidBg: "#5f6a79",
- solidHoverBg: "#4c5561",
- solidActiveBg: "#4c5561",
- },
- focusVisible: "#0090f1",
- },
- },
- dark: {
- palette: {
- success: {
- solidBg: "#0e639c",
- solidHoverBg: "#1177bb",
- solidActiveBg: "#1177bb",
- },
- neutral: {
- solidBg: "#313131",
- solidHoverBg: "#45494e",
- solidActiveBg: "#45494e",
- },
- focusVisible: "#007fd4",
- },
- },
- },
- focus: {
- default: {
- outlineWidth: "3px",
- },
- },
- fontFamily: {
- body: "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
- },
- components: {
- JoyButton: {
- styleOverrides: {
- root: ({ownerState}) => ({
- borderRadius: "2px",
- ...("md" === ownerState.size && {
- "fontWeight": 600,
- "fontSize": "14px",
- "--Button-paddingInline": "1rem",
- }),
- }),
- },
- },
- JoySelect: {
- defaultProps: {
- indicator: ,
- },
- styleOverrides: {
- root: {
- borderRadius: "2px",
- },
- },
- },
- JoyInput: {
- styleOverrides: {
- root: {
- borderRadius: "2px",
- },
- },
- },
- },
-});
-
/**
* Renders the main application.
*
diff --git a/new-log-viewer/src/components/ConfigForm.tsx b/new-log-viewer/src/components/ConfigForm.tsx
new file mode 100644
index 00000000..3e72aba8
--- /dev/null
+++ b/new-log-viewer/src/components/ConfigForm.tsx
@@ -0,0 +1,134 @@
+import React from "react";
+
+import {
+ Button,
+ Input,
+} from "@mui/joy";
+
+import {
+ CONFIG_KEY,
+ LOCAL_STORAGE_KEY,
+} from "../typings/config";
+import {
+ getConfig,
+ setConfig,
+} from "../utils/config";
+
+
+const formFields = [
+ {
+ initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).formatString,
+ label: LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING,
+ name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING,
+ type: "text",
+ },
+ {
+ initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).logLevelKey,
+ label: LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY,
+ name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY,
+ type: "text",
+ },
+ {
+ initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).timestampKey,
+ label: LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY,
+ name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY,
+ type: "text",
+ },
+ {
+ initialValue: getConfig(CONFIG_KEY.PAGE_SIZE),
+ label: LOCAL_STORAGE_KEY.PAGE_SIZE,
+ name: LOCAL_STORAGE_KEY.PAGE_SIZE,
+ type: "number",
+ },
+];
+
+/**
+ * Renders a form for testing config utilities.
+ *
+ * @return
+ */
+const ConfigForm = () => {
+ const handleConfigFormReset = (ev: React.FormEvent) => {
+ ev.preventDefault();
+ window.localStorage.clear();
+ window.location.reload();
+ };
+
+ const handleConfigFormSubmit = (ev: React.FormEvent) => {
+ ev.preventDefault();
+ const formData = new FormData(ev.target as HTMLFormElement);
+
+ const formatString = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING);
+ const logLevelKey = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY);
+ const timestampKey = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY);
+ const pageSize = formData.get(LOCAL_STORAGE_KEY.PAGE_SIZE);
+ let error = null;
+ if (
+ "string" === typeof formatString &&
+ "string" === typeof logLevelKey &&
+ "string" === typeof timestampKey
+ ) {
+ error ||= setConfig({
+ key: CONFIG_KEY.DECODER_OPTIONS,
+ value: {formatString, logLevelKey, timestampKey},
+ });
+ }
+ if ("string" === typeof pageSize) {
+ error ||= setConfig({
+ key: CONFIG_KEY.PAGE_SIZE,
+ value: Number(pageSize),
+ });
+ }
+ if (null !== error) {
+ // eslint-disable-next-line no-alert
+ window.alert(error);
+ } else {
+ window.location.reload();
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default ConfigForm;
diff --git a/new-log-viewer/src/components/Layout.tsx b/new-log-viewer/src/components/Layout.tsx
index 3a8ce179..3ddecc84 100644
--- a/new-log-viewer/src/components/Layout.tsx
+++ b/new-log-viewer/src/components/Layout.tsx
@@ -13,7 +13,6 @@ import {
DialogContent,
DialogTitle,
IconButton,
- Input,
Modal,
ModalDialog,
Sheet,
@@ -32,6 +31,7 @@ import {
Settings,
SkipNext,
SkipPrevious,
+ SvgIconComponent,
TipsAndUpdates,
} from "@mui/icons-material";
import FileOpenIcon from "@mui/icons-material/FileOpen";
@@ -46,143 +46,22 @@ import {
import {Nullable} from "../typings/common";
import {
CONFIG_KEY,
- LOCAL_STORAGE_KEY,
THEME_NAME,
} from "../typings/config";
import {CURSOR_CODE} from "../typings/worker";
import {ACTION_NAME} from "../utils/actions";
-import {
- getConfig,
- setConfig,
-} from "../utils/config";
+import {getConfig} from "../utils/config";
import {openFile} from "../utils/file";
import {
getFirstItemNumInNextChunk,
getLastItemNumInPrevChunk,
} from "../utils/math";
+import ConfigForm from "./ConfigForm";
import DropFileContainer from "./DropFileContainer";
import Editor from "./Editor";
import {goToPositionAndCenter} from "./Editor/MonacoInstance/utils";
-const formFields = [
- {
- initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).formatString,
- label: LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING,
- name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING,
- type: "text",
- },
- {
- initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).logLevelKey,
- label: LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY,
- name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY,
- type: "text",
- },
- {
- initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).timestampKey,
- label: LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY,
- name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY,
- type: "text",
- },
- {
- initialValue: getConfig(CONFIG_KEY.PAGE_SIZE),
- label: LOCAL_STORAGE_KEY.PAGE_SIZE,
- name: LOCAL_STORAGE_KEY.PAGE_SIZE,
- type: "number",
- },
-];
-
-/**
- * Renders a form for testing config utilities.
- *
- * @return
- */
-const ConfigForm = () => {
- const handleConfigFormReset = (ev: React.FormEvent) => {
- ev.preventDefault();
- window.localStorage.clear();
- window.location.reload();
- };
-
- const handleConfigFormSubmit = (ev: React.FormEvent) => {
- ev.preventDefault();
- const formData = new FormData(ev.target as HTMLFormElement);
-
- const formatString = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING);
- const logLevelKey = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY);
- const timestampKey = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY);
- const pageSize = formData.get(LOCAL_STORAGE_KEY.PAGE_SIZE);
- let error = null;
- if (
- "string" === typeof formatString &&
- "string" === typeof logLevelKey &&
- "string" === typeof timestampKey
- ) {
- error ||= setConfig({
- key: CONFIG_KEY.DECODER_OPTIONS,
- value: {formatString, logLevelKey, timestampKey},
- });
- }
- if ("string" === typeof pageSize) {
- error ||= setConfig({
- key: CONFIG_KEY.PAGE_SIZE,
- value: Number(pageSize),
- });
- }
- if (null !== error) {
- // eslint-disable-next-line no-alert
- window.alert(error);
- } else {
- window.location.reload();
- }
- };
-
- return (
-
- );
-};
-
-
/**
*
* @param actionName
@@ -240,7 +119,29 @@ const MenuBar = () => {
});
};
- const iconCommonProps: { size: "sm" | "md" | "lg" } = {size: "sm"};
+ const SmallNavIconButton = ({actionName, Icon}: {
+ actionName: string,
+ Icon: SvgIconComponent,
+ }) => (
+
+
+
+ );
+ const SmallIconButton = ({onClick, Icon}: {
+ onClick: (event: React.MouseEvent) => void,
+ Icon: SvgIconComponent,
+ }) => (
+
+
+
+ );
return (
{
{fileName}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ {
setSettingsModelOpen(true);
- }}
- >
-
-
+ }}/>
@@ -322,11 +201,11 @@ const MenuBar = () => {
Settings
{
setMode(newValue as Mode);
}}
- {...iconCommonProps}
- value={mode as string}
>