feat: update theme

GraphScope · Oct 8, 2024 · 3fd120f · 3fd120f
1 parent b7b5faa
commit 3fd120f
Show file tree

Hide file tree

Showing 20 changed files with 183 additions and 101 deletions.
diff --git a/packages/studio-components/src/IntlProvider/index.tsx b/packages/studio-components/src/IntlProvider/index.tsx
@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { IntlProvider } from 'react-intl';
+import { storage } from '../Utils';
+import { IntlContainerProvider } from './useIntlConfigProvider';
+
+type IThemeProvider = {
+  locales: {
+    'zh-CN': Record<string, string>;
+    'en-US': Record<string, string>;
+  };
+  children: React.ReactNode;
+  locale?: 'zh-CN' | 'en-US';
+};
+
+const Provider: React.FC<IThemeProvider> = props => {
+  const { children, locales } = props;
+  const [state, setState] = useState<{ locale?: 'zh-CN' | 'en-US' }>(() => {
+    let { locale = storage.get('locale') } = props;
+    if (!locale) {
+      locale = 'en-US';
+    }
+    storage.set('locale', locale);
+    return {
+      locale,
+    };
+  });
+
+  const { locale } = state;
+
+  const messages = locales[locale || 'en-US'];
+
+  const handleLocale = themeConfig => {
+    const { locale } = themeConfig;
+    storage.set('locale', locale);
+    setState(preState => {
+      return {
+        ...preState,
+        locale,
+      };
+    });
+  };
+  console.log('locale111', locale);
+
+  return (
+    <IntlContainerProvider value={{ handleLocale }}>
+      <IntlProvider messages={messages} locale={locale as 'zh-CN' | 'en-US'}>
+        {children}
+      </IntlProvider>
+    </IntlContainerProvider>
+  );
+};
+
+export default Provider;
diff --git a/packages/studio-components/src/IntlProvider/useIntlConfigProvider.tsx b/packages/studio-components/src/IntlProvider/useIntlConfigProvider.tsx
@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react';
+
+export interface ThemeProviderType {
+  locale?: 'zh-CN' | 'en-US';
+}
+export interface IContainerContext extends ThemeProviderType {
+  handleLocale: (value: ThemeProviderType) => void;
+}
+export const IntlContainerContext = createContext<IContainerContext>({
+  handleLocale: ({}) => {},
+  locale: 'en-US',
+});
+
+export const IntlContainerProvider = IntlContainerContext.Provider;
+
+export const useIntlContainer = () => {
+  const context = useContext(IntlContainerContext);
+
+  if (context === undefined || Object.keys(context).length === 0) {
+    throw new Error(`useContext must be used within a ContainerProvider`);
+  }
+  return context;
+};
diff --git a/...udio-components/src/Provider/useStore.tsx → ...omponents/src/Provider/getThemeConfig.tsx b/...udio-components/src/Provider/useStore.tsx → ...omponents/src/Provider/getThemeConfig.tsx
@@ -10,7 +10,7 @@ export interface IColorStore {
   editorForeground?: string;
 }
 
-export const useStore = (algorithm: ThemeProviderType['algorithm']) => {
+export const getThemeConfig = (algorithm: ThemeProviderType['algorithm']) => {
   const isLight = algorithm === 'defaultAlgorithm';
   /** components 基础配置 */
   const componentsConfig = {
@@ -47,16 +47,5 @@ export const useStore = (algorithm: ThemeProviderType['algorithm']) => {
     colorBgBase: isLight ? '#fff' : 'rgba(12,12,12,1)',
     colorBgLayout: isLight ? '#f5f7f9' : 'rgba(43,43,43,1)',
   };
-  /** 特殊颜色配置 */
-  const colorConfig = {
-    sectionBackground: isLight ? '#fff' : '#0D0D0D',
-    containerBackground: isLight ? '#f5f7f9' : '#020202',
-    instanceBackground: isLight ? '#FCFCFC' : '',
-    jobDetailBorder: isLight ? '#efefef' : '#323232',
-    jobDetailColor: isLight ? '#1F1F1F' : '#808080',
-    pluginBorder: isLight ? '#efefef' : '#323232',
-    editorBackground: isLight ? '#fff' : '#151515',
-    editorForeground: isLight ? '#212121' : '#FFF',
-  };
-  return { componentsConfig, tokenConfig, colorConfig };
+  return { componentsConfig, tokenConfig };
 };
diff --git a/packages/studio-components/src/Provider/index.tsx b/packages/studio-components/src/Provider/index.tsx
@@ -1,32 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { ConfigProvider, theme } from 'antd';
-import { IntlProvider } from 'react-intl';
 import { ContainerProvider } from './useThemeConfigProvider';
 import type { ThemeProviderType } from './useThemeConfigProvider';
 import { storage } from '../Utils';
-import { useStore } from './useStore';
+import { getThemeConfig } from './getThemeConfig';
 
 type IThemeProvider = {
-  locales: {
-    'zh-CN': Record<string, string>;
-    'en-US': Record<string, string>;
-  };
   children: React.ReactNode;
-  locale?: 'zh-CN' | 'en-US';
   algorithm?: 'defaultAlgorithm' | 'darkAlgorithm';
 };
 
 const Provider: React.FC<IThemeProvider> = props => {
-  const { children, locales } = props;
+  const { children } = props;
   const [state, setState] = useState<ThemeProviderType>(() => {
-    let { algorithm, locale } = props;
-    if (!locale) {
-      locale = storage.get('locale');
-      if (!locale) {
-        locale = 'en-US';
-        storage.set('locale', locale);
-      }
-    }
+    let { algorithm } = props;
+
     if (!algorithm) {
       algorithm = storage.get('algorithm');
       if (!algorithm) {
@@ -38,12 +26,11 @@ const Provider: React.FC<IThemeProvider> = props => {
       components: storage.get('components'),
       token: storage.get('token'),
       algorithm,
-      locale,
     };
   });
 
-  const { components, token, algorithm, locale } = state;
-  const { componentsConfig, tokenConfig, colorConfig } = useStore(algorithm);
+  const { components, token, algorithm } = state;
+  const { componentsConfig, tokenConfig } = getThemeConfig(algorithm);
 
   const isLight = algorithm === 'defaultAlgorithm';
 
@@ -59,41 +46,34 @@ const Provider: React.FC<IThemeProvider> = props => {
         components: { ...preState.components, ...components },
         token: { ...preState.token, ...token },
         algorithm: themeConfig.algorithm || preState.algorithm,
-        locale: themeConfig.locale,
       };
     });
   };
-  const messages = locales[locale || 'en-US'];
 
   return (
     <ContainerProvider
       value={{
         token: { ...tokenConfig, ...token },
-        components: { ...componentsConfig, ...components },
         handleTheme,
         algorithm,
-        locale: locale,
-        ...colorConfig,
       }}
     >
-      <IntlProvider messages={messages} locale={locale as 'zh-CN' | 'en-US'}>
-        <ConfigProvider
-          theme={{
-            // 1. 单独使用暗色算法
-            algorithm: isLight ? theme.defaultAlgorithm : theme.darkAlgorithm,
-            components: {
-              ...componentsConfig,
-              ...components,
-            },
-            token: {
-              ...tokenConfig,
-              ...token,
-            },
-          }}
-        >
-          {children}
-        </ConfigProvider>
-      </IntlProvider>
+      <ConfigProvider
+        theme={{
+          // 1. 单独使用暗色算法
+          algorithm: isLight ? theme.defaultAlgorithm : theme.darkAlgorithm,
+          components: {
+            ...componentsConfig,
+            ...components,
+          },
+          token: {
+            ...tokenConfig,
+            ...token,
+          },
+        }}
+      >
+        {children}
+      </ConfigProvider>
     </ContainerProvider>
   );
 };

diff --git a/packages/studio-components/src/Provider/useCustomTheme.tsx b/packages/studio-components/src/Provider/useCustomTheme.tsx
@@ -0,0 +1,29 @@
+import { ThemeProviderType } from './useThemeConfigProvider';
+import { useThemeContainer } from './useThemeConfigProvider';
+export interface IColorStore {
+  sectionBackground?: string;
+  containerBackground?: string;
+  instanceBackground?: string;
+  jobDetailBorder?: string;
+  jobDetailColor?: string;
+  pluginBorder?: string;
+  editorBackground?: string;
+  editorForeground?: string;
+}
+
+export const useCustomTheme = () => {
+  const { algorithm } = useThemeContainer();
+  const isLight = algorithm === 'defaultAlgorithm';
+  /** 特殊颜色配置 */
+  const colorConfig = {
+    sectionBackground: isLight ? '#fff' : '#0D0D0D',
+    containerBackground: isLight ? '#f5f7f9' : '#020202',
+    instanceBackground: isLight ? '#FCFCFC' : '',
+    jobDetailBorder: isLight ? '#efefef' : '#323232',
+    jobDetailColor: isLight ? '#1F1F1F' : '#808080',
+    pluginBorder: isLight ? '#efefef' : '#323232',
+    editorBackground: isLight ? '#fff' : '#151515',
+    editorForeground: isLight ? '#212121' : '#FFF',
+  };
+  return colorConfig;
+};
diff --git a/packages/studio-components/src/Provider/useThemeConfigProvider.tsx b/packages/studio-components/src/Provider/useThemeConfigProvider.tsx
@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-import { IColorStore } from './useStore';
+import type { IColorStore } from './getThemeConfig';
 export interface ThemeProviderType extends IColorStore {
   algorithm?: 'defaultAlgorithm' | 'darkAlgorithm';
   components?: { [key: string]: { [key: string]: string | number } };

diff --git a/packages/studio-components/src/index.tsx b/packages/studio-components/src/index.tsx
@@ -12,6 +12,7 @@ export { default as MultipleInstance } from './MultipleInstance';
 export { default as SplitSection } from './SplitSection';
 export { default as ResultConfig } from './ResultConfig';
 export { default as ThemeProvider } from './Provider';
+export { default as IntlProvider } from './IntlProvider';
 export { default as ImportFiles } from './ImportFiles';
 export { default as SideTabs } from './SideTabs';
 export { default as ResizablePanels } from './ResizablePanel';
@@ -28,6 +29,8 @@ export { useContainer } from './Container/useContainer';
 export { useSection } from './Section/useSection';
 export { useMultipleInstance } from './MultipleInstance/useMultipleInstance';
 export { useThemeContainer } from './Provider/useThemeConfigProvider';
+export { useIntlContainer } from './IntlProvider/useIntlConfigProvider';
+export { useCustomTheme } from './Provider/useCustomTheme';
 /** export typing */
 export type { SegmentedTabsProps } from './SegmentedTabs';
 export type { Property } from './PropertiesList/typing';

diff --git a/packages/studio-importor/src/app/index.tsx b/packages/studio-importor/src/app/index.tsx
@@ -4,7 +4,7 @@ import PropertiesEditor from './properties-editor';
 import ImportSchema from './import-schema';
 
 import { ReactFlowProvider } from 'reactflow';
-import { ThemeProvider, Section } from '@graphscope/studio-components';
+import { IntlProvider, Section } from '@graphscope/studio-components';
 import 'reactflow/dist/style.css';
 import { transformGraphNodes, transformEdges } from './elements/index';
 import { IdContext } from './useContext';
@@ -86,7 +86,7 @@ const ImportApp: React.FunctionComponent<ImportorProps> = props => {
   const IS_PURE = appMode === 'PURE';
 
   return (
-    <ThemeProvider locales={locales}>
+    <IntlProvider locales={locales}>
       <Section
         // leftSide={leftSide || <ImportSchema displayType="model" />}
         rightSide={
@@ -115,7 +115,7 @@ const ImportApp: React.FunctionComponent<ImportorProps> = props => {
           {children}
         </ReactFlowProvider>
       </Section>
-    </ThemeProvider>
+    </IntlProvider>
   );
 };
 

diff --git a/packages/studio-query/src/app/index.tsx b/packages/studio-query/src/app/index.tsx
@@ -14,7 +14,7 @@ import { FormattedMessage } from 'react-intl';
 import type { IStudioQueryProps } from './context';
 import { v4 as uuidv4 } from 'uuid';
 import { formatCypherStatement } from './utils';
-import { Utils, ThemeProvider, Section } from '@graphscope/studio-components';
+import { Utils, IntlProvider, Section } from '@graphscope/studio-components';
 const { getSearchParams, setSearchParams } = Utils;
 
 import Container from './container';
@@ -156,7 +156,7 @@ const StudioQuery: React.FunctionComponent<IStudioQueryProps> = props => {
           };
 
     return (
-      <ThemeProvider locales={locales}>
+      <IntlProvider locales={locales}>
         <Section
           style={{ height: 'calc(100vh - 50px)' }}
           {...side}
@@ -177,7 +177,7 @@ const StudioQuery: React.FunctionComponent<IStudioQueryProps> = props => {
             enableImmediateQuery={enableImmediateQuery}
           />
         </Section>
-      </ThemeProvider>
+      </IntlProvider>
     );
   }
   return null;

diff --git a/packages/studio-query/src/sdk/query-statement/index.tsx b/packages/studio-query/src/sdk/query-statement/index.tsx
@@ -3,7 +3,7 @@ import { Statement } from '../..';
 import type { IStatement } from '../..';
 import { CypherDriver, GremlinDriver } from '@graphscope/studio-driver';
 import ConnectEndpoint, { IConnectEndpointProps } from './connect-endpoint';
-import { ThemeProvider } from '@graphscope/studio-components';
+import { IntlProvider } from '@graphscope/studio-components';
 import locales from '../../locales';
 
 const driver_config: Record<string, any> = {};
@@ -63,14 +63,14 @@ const QueryStatement = props => {
   };
   if (!endpoint || !language) {
     return (
-      <ThemeProvider locales={locales}>
+      <IntlProvider locales={locales}>
         <ConnectEndpoint onConnect={onConnect} />
-      </ThemeProvider>
+      </IntlProvider>
     );
   }
 
   return (
-    <ThemeProvider locales={locales}>
+    <IntlProvider locales={locales}>
       <Statement
         language={language}
         enableImmediateQuery={enableImmediateQuery}
@@ -84,7 +84,7 @@ const QueryStatement = props => {
         onQuery={onQuery}
         onCancel={onCancel}
       />
-    </ThemeProvider>
+    </IntlProvider>
   );
 };
 

diff --git a/packages/studio-website/src/components/section/index.tsx b/packages/studio-website/src/components/section/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Divider, Typography, Tabs, Space } from 'antd';
 import { FormattedMessage } from 'react-intl';
 import type { TabsProps } from 'antd';
-import { Utils, useThemeContainer } from '@graphscope/studio-components';
+import { Utils, useThemeContainer, useCustomTheme } from '@graphscope/studio-components';
 interface IFormattedMessage {
   id: string;
   values?: { [key: string]: string };
@@ -18,7 +18,7 @@ interface ISectionProps {
 const { useEffect } = React;
 const Section: React.FunctionComponent<ISectionProps> = props => {
   const { title, desc, breadcrumb, children, items, style } = props;
-  const { sectionBackground } = useThemeContainer();
+  const { sectionBackground } = useCustomTheme();
   useEffect(() => {
     if (items) {
       const nav = Utils.getSearchParams('nav') || '';

diff --git a/packages/studio-website/src/layouts/container.tsx b/packages/studio-website/src/layouts/container.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useContext } from './useContext';
 import useWidth from './useWidth';
-import { useThemeContainer } from '@graphscope/studio-components';
+import { useCustomTheme } from '@graphscope/studio-components';
 import { DeploymentApiFactory } from '@graphscope/studio-server';
 import { Skeleton } from 'antd';
 
@@ -20,7 +20,7 @@ const Container: React.FunctionComponent<ContainerProps> = props => {
   const { store } = useContext();
   const { collapse } = store;
   const ContainerWidth = useWidth();
-  const { containerBackground } = useThemeContainer();
+  const { containerBackground } = useCustomTheme();
   const [state, setState] = useState({
     isReady: false,
     engineType: 'interactive',