refactor: add theme condition for monaco

gravity-ui · Jun 21, 2024 · 2addc2c · 2addc2c
1 parent 6bef3d9
commit 2addc2c
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 20 deletions.
diff --git a/src/stories/components/Editor/Editor.tsx b/src/stories/components/Editor/Editor.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {RadioButton, Switch, Text} from '@gravity-ui/uikit';
+import {RadioButton, Switch, Text, useTheme} from '@gravity-ui/uikit';
 import noop from 'lodash/noop';
 import {Form} from 'react-final-form';
 import MonacoEditor from 'react-monaco-editor';
@@ -32,6 +32,7 @@ export const Editor: React.FC<EditorProps> = ({spec: externalSpec, value, viewMo
     const [ready, setReady] = React.useState(true);
     const [toggler, setToggler] = React.useState<'form' | 'view' | 'json'>('form');
     const [parseJson, setParseJson] = React.useState(false);
+    const theme = useTheme();
 
     const togglerItems = React.useMemo(
         () => [
@@ -70,11 +71,16 @@ export const Editor: React.FC<EditorProps> = ({spec: externalSpec, value, viewMo
                 },
                 spec: {viewSpec: {monacoParams: {language: 'json', fontSize: 11}}},
                 MonacoComponent: (props: MonacoEditorProps) => (
-                    <MonacoEditor {...props} width="640px" height="calc(100% - 49px)" />
+                    <MonacoEditor
+                        {...props}
+                        width="640px"
+                        height="calc(100% - 49px)"
+                        theme={`vs-${theme.includes('dark') ? 'dark' : 'light'}`}
+                    />
                 ),
                 withoutDialog: true,
             }) as MonacoInputBaseProps,
-        [],
+        [theme],
     );
 
     const getValuesEditorProps = React.useCallback(
@@ -86,11 +92,16 @@ export const Editor: React.FC<EditorProps> = ({spec: externalSpec, value, viewMo
                 },
                 spec: {viewSpec: {monacoParams: {language: 'json', fontSize: 11}, disabled: true}},
                 MonacoComponent: (props: MonacoEditorProps) => (
-                    <MonacoEditor {...props} width="640px" height="calc(100% - 49px)" />
+                    <MonacoEditor
+                        {...props}
+                        width="640px"
+                        height="calc(100% - 49px)"
+                        theme={`vs-${theme.includes('dark') ? 'dark' : 'light'}`}
+                    />
                 ),
                 withoutDialog: true,
             }) as MonacoInputBaseProps,
-        [],
+        [theme],
     );
 
     const getViewProps = React.useCallback(

diff --git a/src/stories/components/InputPreview/InputPreview.tsx b/src/stories/components/InputPreview/InputPreview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {RadioButton, TextInput} from '@gravity-ui/uikit';
+import {RadioButton, TextInput, useTheme} from '@gravity-ui/uikit';
 import noop from 'lodash/noop';
 import {Form} from 'react-final-form';
 import MonacoEditor from 'react-monaco-editor';
@@ -33,6 +33,7 @@ export const InputPreview: React.FC<InputPreviewProps> = ({
     const [searchInput, setSearchInput] = React.useState('');
     const [toggler, setToggler] = React.useState<'form' | 'json'>('form');
     const [togglerInput, setTogglerInput] = React.useState<'form' | 'view' | 'json'>('form');
+    const theme = useTheme();
 
     const togglerItems = React.useMemo(
         () => [
@@ -61,21 +62,33 @@ export const InputPreview: React.FC<InputPreviewProps> = ({
         [setTogglerInput],
     );
 
-    const renderMonaco = React.useCallback((value: FormValue) => {
-        const monacoProps = {
-            input: {
-                value: JSON.stringify(value, (_, value) => (value === undefined ? null : value), 2),
-                onChange: noop,
-            },
-            spec: {viewSpec: {monacoParams: {language: 'json', fontSize: 11}, disabled: true}},
-            MonacoComponent: (props: MonacoEditorProps) => (
-                <MonacoEditor {...props} width="640px" height="calc(100% - 49px)" />
-            ),
-            withoutDialog: true,
-        } as MonacoInputBaseProps;
+    const renderMonaco = React.useCallback(
+        (value: FormValue) => {
+            const monacoProps = {
+                input: {
+                    value: JSON.stringify(
+                        value,
+                        (_, value) => (value === undefined ? null : value),
+                        2,
+                    ),
+                    onChange: noop,
+                },
+                spec: {viewSpec: {monacoParams: {language: 'json', fontSize: 11}, disabled: true}},
+                MonacoComponent: (props: MonacoEditorProps) => (
+                    <MonacoEditor
+                        {...props}
+                        width="640px"
+                        height="calc(100% - 49px)"
+                        theme={`vs-${theme.includes('dark') ? 'dark' : 'light'}`}
+                    />
+                ),
+                withoutDialog: true,
+            } as MonacoInputBaseProps;
 
-        return <MonacoInput {...monacoProps} />;
-    }, []);
+            return <MonacoInput {...monacoProps} />;
+        },
+        [theme],
+    );
 
     const initialValues = React.useMemo(
         () => ({