feat(core): add useColor hooks

toeverything · Sep 5, 2024 · 92790c2 · 92790c2
1 parent dd80ac7
commit 92790c2
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 30 deletions.
diff --git a/...nd/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connector.tsx b/...nd/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connector.tsx
@@ -11,6 +11,7 @@ import { useI18n } from '@affine/i18n';
 import {
   ConnectorMode,
   LineColor,
+  LineColorMap,
   PointStyle,
   StrokeStyle,
 } from '@blocksuite/blocks';
@@ -19,6 +20,7 @@ import { useCallback, useMemo } from 'react';
 
 import { DropdownMenu } from '../menu';
 import { menuTrigger, settingWrapper } from '../style.css';
+import { useColor } from '../utils';
 import { Point } from './point';
 import { EdgelessSnapshot } from './snapshot';
 
@@ -32,6 +34,7 @@ export const ConnectorSettings = () => {
   const framework = useFramework();
   const { editorSetting } = framework.get(EditorSettingService);
   const settings = useLiveData(editorSetting.settings$);
+  const getColorFromMap = useColor();
 
   const connecterStyleItems = useMemo<RadioItem[]>(
     () => [
@@ -133,8 +136,8 @@ export const ConnectorSettings = () => {
 
   const currentColor = useMemo(() => {
     const color = settings.connector.stroke;
-    return Object.entries(LineColor).find(([, value]) => value === color);
-  }, [settings]);
+    return getColorFromMap(color, LineColorMap);
+  }, [getColorFromMap, settings.connector.stroke]);
 
   const colorItems = useMemo(() => {
     const { stroke } = settings.connector;
@@ -204,9 +207,9 @@ export const ConnectorSettings = () => {
             trigger={
               <MenuTrigger
                 className={menuTrigger}
-                prefix={<Point color={currentColor[1]} />}
+                prefix={<Point color={currentColor.value} />}
               >
-                {currentColor[0]}
+                {currentColor.key}
               </MenuTrigger>
             }
           />

diff --git a/...rontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/note.tsx b/...rontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/note.tsx
@@ -11,6 +11,7 @@ import { useI18n } from '@affine/i18n';
 import {
   createEnumMap,
   NoteBackgroundColor,
+  NoteBackgroundColorMap,
   NoteShadow,
   NoteShadowMap,
   StrokeStyle,
@@ -20,6 +21,7 @@ import { useCallback, useMemo } from 'react';
 
 import { DropdownMenu } from '../menu';
 import { menuTrigger, settingWrapper } from '../style.css';
+import { useColor } from '../utils';
 import { Point } from './point';
 import { EdgelessSnapshot } from './snapshot';
 
@@ -46,6 +48,7 @@ export const NoteSettings = () => {
   const framework = useFramework();
   const { editorSetting } = framework.get(EditorSettingService);
   const settings = useLiveData(editorSetting.settings$);
+  const getColorFromMap = useColor();
 
   const borderStyleItems = useMemo<RadioItem[]>(
     () => [
@@ -160,10 +163,8 @@ export const NoteSettings = () => {
 
   const currentColor = useMemo(() => {
     const { background } = settings['affine:note'];
-    return Object.entries(NoteBackgroundColor).find(
-      ([, value]) => value === background
-    );
-  }, [settings]);
+    return getColorFromMap(background, NoteBackgroundColorMap);
+  }, [getColorFromMap, settings]);
 
   return (
     <>
@@ -183,9 +184,9 @@ export const NoteSettings = () => {
             trigger={
               <MenuTrigger
                 className={menuTrigger}
-                prefix={<Point color={currentColor[1]} />}
+                prefix={<Point color={currentColor.value} />}
               >
-                {currentColor[0]}
+                {currentColor.key}
               </MenuTrigger>
             }
           />

diff --git a/...frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/pen.tsx b/...frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/pen.tsx
@@ -2,36 +2,29 @@ import { MenuItem, MenuTrigger, Slider } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import { useI18n } from '@affine/i18n';
-import { LineColor } from '@blocksuite/blocks';
+import { LineColor, LineColorMap } from '@blocksuite/blocks';
 import { useFramework, useLiveData } from '@toeverything/infra';
-import { useTheme } from 'next-themes';
 import { useCallback, useMemo } from 'react';
 
 import { DropdownMenu } from '../menu';
 import { menuTrigger } from '../style.css';
+import { useColor } from '../utils';
 import { Point } from './point';
 import { EdgelessSnapshot } from './snapshot';
 
 export const PenSettings = () => {
   const t = useI18n();
   const framework = useFramework();
   const { editorSetting } = framework.get(EditorSettingService);
-  const { resolvedTheme } = useTheme();
   const settings = useLiveData(editorSetting.settings$);
-
-  const color = useMemo(() => {
-    if (typeof settings.brush.color === 'string') {
-      return settings.brush.color;
-    } else {
-      return resolvedTheme === 'dark' ? LineColor.White : LineColor.Black;
-    }
-  }, [resolvedTheme, settings.brush.color]);
+  const getColorFromMap = useColor();
 
   const currentColor = useMemo(() => {
-    return Object.entries(LineColor).find(([, value]) => value === color);
-  }, [color]);
+    return getColorFromMap(settings.brush.color, LineColorMap);
+  }, [getColorFromMap, settings.brush.color]);
 
   const colorItems = useMemo(() => {
+    const { color } = settings.brush;
     return Object.entries(LineColor).map(([name, value]) => {
       const handler = () => {
         editorSetting.set('brush', { color: value });
@@ -48,7 +41,7 @@ export const PenSettings = () => {
         </MenuItem>
       );
     });
-  }, [color, editorSetting]);
+  }, [editorSetting, settings.brush]);
 
   const borderThickness = settings.brush.lineWidth;
   const setBorderThickness = useCallback(
@@ -75,9 +68,9 @@ export const PenSettings = () => {
             trigger={
               <MenuTrigger
                 className={menuTrigger}
-                prefix={<Point color={currentColor[1]} />}
+                prefix={<Point color={currentColor.value} />}
               >
-                {currentColor[0]}
+                {currentColor.key}
               </MenuTrigger>
             }
           />

diff --git a/...rontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/text.tsx b/...rontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/text.tsx
@@ -14,13 +14,15 @@ import {
   FontWeight,
   FontWeightMap,
   LineColor,
+  LineColorMap,
   TextAlign,
 } from '@blocksuite/blocks';
 import { useFramework, useLiveData } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
 import { DropdownMenu } from '../menu';
 import { menuTrigger, settingWrapper } from '../style.css';
+import { useColor } from '../utils';
 import { Point } from './point';
 import { EdgelessSnapshot } from './snapshot';
 
@@ -29,6 +31,7 @@ export const TextSettings = () => {
   const framework = useFramework();
   const { editorSetting } = framework.get(EditorSettingService);
   const settings = useLiveData(editorSetting.settings$);
+  const getColorFromMap = useColor();
 
   const alignItems = useMemo<RadioItem[]>(
     () => [
@@ -134,8 +137,8 @@ export const TextSettings = () => {
 
   const currentColor = useMemo(() => {
     const { color } = settings['affine:edgeless-text'];
-    return Object.entries(LineColor).find(([, value]) => value === color);
-  }, [settings]);
+    return getColorFromMap(color, LineColorMap);
+  }, [getColorFromMap, settings]);
   return (
     <>
       <EdgelessSnapshot
@@ -152,9 +155,9 @@ export const TextSettings = () => {
             trigger={
               <MenuTrigger
                 className={menuTrigger}
-                prefix={<Point color={currentColor[1]} />}
+                prefix={<Point color={currentColor.value} />}
               >
-                {currentColor[0]}
+                {currentColor.key}
               </MenuTrigger>
             }
           />

diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/utils.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/utils.ts
@@ -0,0 +1,45 @@
+import { useTheme } from 'next-themes';
+
+function getColorFromMap(
+  color: string | { normal: string } | { light: string; dark: string },
+  colorMap: { [key: string]: string },
+  theme: 'light' | 'dark' = 'light'
+):
+  | {
+      value: string;
+      key: string;
+    }
+  | undefined {
+  if (typeof color === 'string') {
+    return { value: color, key: colorMap[color] };
+  }
+
+  if ('normal' in color) {
+    return {
+      value: color.normal,
+      key: colorMap[color.normal],
+    };
+  }
+
+  if ('light' in color && 'dark' in color) {
+    return {
+      value: color[theme],
+      key: colorMap[color[theme]],
+    };
+  }
+
+  return undefined;
+}
+
+export const useColor = () => {
+  const { resolvedTheme } = useTheme();
+  return (
+    color: string | { normal: string } | { light: string; dark: string },
+    colorMap: { [key: string]: string }
+  ) =>
+    getColorFromMap(
+      color,
+      colorMap,
+      resolvedTheme as 'light' | 'dark' | undefined
+    );
+};