From 330205b1aa86702b5d419b9345b36903b2ecf8f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Mangeonjean?= <loic@coderpad.io>
Date: Tue, 21 Feb 2023 17:50:17 +0100
Subject: [PATCH] fix!: make the hook only return 1 color

so the parameter is not an array that changes every render
---
 src/MonacoEditor.tsx |  6 ++++--
 src/hooks.ts         | 12 ++++++------
 src/index.ts         |  4 ++--
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/MonacoEditor.tsx b/src/MonacoEditor.tsx
index a3cdd0c..50ecde1 100644
--- a/src/MonacoEditor.tsx
+++ b/src/MonacoEditor.tsx
@@ -2,7 +2,7 @@ import React, { ForwardedRef, forwardRef, ReactElement, useEffect, useMemo, useR
 import debounce from 'lodash.debounce'
 import { monaco, createEditor, getMonacoLanguage, updateEditorKeybindingsMode, registerEditorOpenHandler } from '@codingame/monaco-editor-wrapper'
 import { IEditorOptions } from 'vscode/service-override/modelEditor'
-import { useDeepMemo, useLastValueRef, useLastVersion, useThemeColors } from './hooks'
+import { useDeepMemo, useLastValueRef, useLastVersion, useThemeColor } from './hooks'
 import './style'
 
 const STATUS_BAR_HEIGHT = 20
@@ -123,7 +123,9 @@ function MonacoEditor ({
   const preventTriggerChangeEventRef = useRef<boolean>(false)
 
   const [height, setHeight] = useState<number | string>(requestedHeight !== 'auto' ? requestedHeight : 50)
-  const [statusBarBackground, statusBarForeground, statusBarBorder] = useThemeColors(['statusBar.background', 'statusBar.foreground', 'statusBar.border'])
+  const statusBarBackground = useThemeColor('statusBar.background')
+  const statusBarForeground = useThemeColor('statusBar.foreground')
+  const statusBarBorder = useThemeColor('statusBar.border')
 
   const containerRef = useRef<HTMLDivElement>(null)
   const statusBarRef = useRef<HTMLDivElement>(null)
diff --git a/src/hooks.ts b/src/hooks.ts
index 6866811..162f22c 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -8,21 +8,21 @@ function getCurrentThemeColor (color: string): string | undefined {
   return themeService.getColorTheme().getColor(color)?.toString()
 }
 
-export function useThemeColors (colors: string[]): (string | undefined)[] {
-  const [colorValues, setColorValues] = useState(colors.map(getCurrentThemeColor))
+export function useThemeColor (color: string): string | undefined {
+  const [colorValue, setColorValue] = useState(getCurrentThemeColor(color))
   useEffect(() => {
     const disposable = StandaloneServices.get(IThemeService).onDidColorThemeChange(() => {
-      setColorValues(colors.map(getCurrentThemeColor))
+      setColorValue(getCurrentThemeColor(color))
     })
     // Since useEffect is asynchronous, the theme may have changed between the initialization of state and now
     // Let's update the state just in case
-    setColorValues(colors.map(getCurrentThemeColor))
+    setColorValue(getCurrentThemeColor(color))
     return () => {
       disposable.dispose()
     }
-  }, [colors])
+  }, [color])
 
-  return colorValues
+  return colorValue
 }
 
 export function useUserConfiguration (programmingLanguageId?: string): Partial<monaco.editor.IEditorOptions> {
diff --git a/src/index.ts b/src/index.ts
index a2b9e06..87fe32b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,11 +1,11 @@
 import { loadLanguage, monaco, updateKeybindings, updateUserConfiguration } from '@codingame/monaco-editor-wrapper'
-import { useThemeColors, useUserConfiguration } from './hooks'
+import { useThemeColor, useUserConfiguration } from './hooks'
 import MonacoEditor, { MonacoEditorProps } from './MonacoEditor'
 
 export default MonacoEditor
 export {
   monaco,
-  useThemeColors,
+  useThemeColor,
   useUserConfiguration,
   updateKeybindings,
   updateUserConfiguration,