From 52b68d509c3f6b12e081c39922e861d9fe441b4f Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Mon, 9 Jan 2023 14:06:50 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20feat:=20=E4=B8=BA=20ThemeProvider?=
 =?UTF-8?q?=20=E8=A1=A5=E9=BD=90=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E7=9A=84=E8=83=BD=E5=8A=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/AppContainer/AppContainer.tsx  | 50 -------------------
 src/containers/AppContainer/index.ts          |  1 -
 src/containers/AppContainer/index.tsx         | 21 ++++++++
 .../ThemeProvider/ThemeProvider.tsx           | 32 +++++++++---
 .../ThemeSwitcher.tsx                         |  0
 src/containers/ThemeProvider/type.ts          | 20 +++++++-
 6 files changed, 65 insertions(+), 59 deletions(-)
 delete mode 100644 src/containers/AppContainer/AppContainer.tsx
 delete mode 100644 src/containers/AppContainer/index.ts
 create mode 100644 src/containers/AppContainer/index.tsx
 rename src/containers/{AppContainer => ThemeProvider}/ThemeSwitcher.tsx (100%)

diff --git a/src/containers/AppContainer/AppContainer.tsx b/src/containers/AppContainer/AppContainer.tsx
deleted file mode 100644
index 2ccc0dfb..00000000
--- a/src/containers/AppContainer/AppContainer.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { App } from 'antd';
-import { memo, ReactElement } from 'react';
-
-import { ThemeAppearance, ThemeMode } from '@/types';
-
-import { ThemeProvider, ThemeProviderProps } from '../ThemeProvider';
-import ThemeSwitcher from './ThemeSwitcher';
-
-export interface AppContainerProps<T, S = Record<string, string>> extends ThemeProviderProps<T, S> {
-  /**
-   * 应用的展示外观主题，只存在亮色和暗色两种
-   * @default light
-   */
-  appearance?: ThemeAppearance;
-  defaultAppearance?: ThemeAppearance;
-  onAppearanceChange?: (mode: ThemeAppearance) => void;
-  /**
-   * 主题的展示模式，有三种配置：跟随系统、亮色、暗色
-   * 默认不开启自动模式，需要手动进行配置
-   * @default light
-   */
-  themeMode?: ThemeMode;
-
-  className?: string;
-}
-
-export const AppContainer: <T, S>(props: AppContainerProps<T, S>) => ReactElement | null = memo(
-  ({
-    children,
-    appearance,
-    defaultAppearance,
-    onAppearanceChange,
-    themeMode,
-    customToken,
-    customStylish,
-    className,
-    ...props
-  }) => (
-    <ThemeSwitcher
-      themeMode={themeMode}
-      defaultAppearance={defaultAppearance}
-      appearance={appearance}
-      onAppearanceChange={onAppearanceChange}
-    >
-      <ThemeProvider customStylish={customStylish} customToken={customToken} {...props}>
-        <App className={className}>{children}</App>
-      </ThemeProvider>
-    </ThemeSwitcher>
-  ),
-);
diff --git a/src/containers/AppContainer/index.ts b/src/containers/AppContainer/index.ts
deleted file mode 100644
index 668f88ee..00000000
--- a/src/containers/AppContainer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { AppContainer } from './AppContainer';
diff --git a/src/containers/AppContainer/index.tsx b/src/containers/AppContainer/index.tsx
new file mode 100644
index 00000000..8a2f56c3
--- /dev/null
+++ b/src/containers/AppContainer/index.tsx
@@ -0,0 +1,21 @@
+import { App } from 'antd';
+import { memo, ReactElement } from 'react';
+
+import { ThemeProvider, ThemeProviderProps } from '../ThemeProvider';
+
+export interface AppContainerProps<T, S = Record<string, string>> extends ThemeProviderProps<T, S> {
+  className?: string;
+}
+
+export const AppContainer: <T, S>(props: AppContainerProps<T, S>) => ReactElement | null = memo(
+  ({
+    children,
+
+    className,
+    ...props
+  }) => (
+    <ThemeProvider {...props}>
+      <App className={className}>{children}</App>
+    </ThemeProvider>
+  ),
+);
diff --git a/src/containers/ThemeProvider/ThemeProvider.tsx b/src/containers/ThemeProvider/ThemeProvider.tsx
index 2a03cbde..663bd5fe 100644
--- a/src/containers/ThemeProvider/ThemeProvider.tsx
+++ b/src/containers/ThemeProvider/ThemeProvider.tsx
@@ -1,21 +1,39 @@
 import { ReactElement } from 'react';
 
 import AntdProvider from './AntdProvider';
+import ThemeSwitcher from './ThemeSwitcher';
 import TokenContainer from './TokenContainer';
 import { ThemeProviderProps } from './type';
 
-export const ThemeProvider: <T, S>(props: ThemeProviderProps<T, S>) => ReactElement | null = ({
+export const ThemeProvider: <T = any, S = any>(
+  props: ThemeProviderProps<T, S>,
+) => ReactElement | null = ({
   children,
+
   customToken,
   customStylish,
-  theme: themeProp,
+
+  theme,
+  getStaticInstance,
   prefixCls,
+
+  appearance,
+  defaultAppearance,
+  onAppearanceChange,
+  themeMode,
 }) => {
   return (
-    <AntdProvider prefixCls={prefixCls} theme={themeProp}>
-      <TokenContainer customToken={customToken} customStylish={customStylish}>
-        {children}
-      </TokenContainer>
-    </AntdProvider>
+    <ThemeSwitcher
+      themeMode={themeMode}
+      defaultAppearance={defaultAppearance}
+      appearance={appearance}
+      onAppearanceChange={onAppearanceChange}
+    >
+      <AntdProvider prefixCls={prefixCls} theme={theme} getStaticInstance={getStaticInstance}>
+        <TokenContainer customToken={customToken} customStylish={customStylish}>
+          {children}
+        </TokenContainer>
+      </AntdProvider>
+    </ThemeSwitcher>
   );
 };
diff --git a/src/containers/AppContainer/ThemeSwitcher.tsx b/src/containers/ThemeProvider/ThemeSwitcher.tsx
similarity index 100%
rename from src/containers/AppContainer/ThemeSwitcher.tsx
rename to src/containers/ThemeProvider/ThemeSwitcher.tsx
diff --git a/src/containers/ThemeProvider/type.ts b/src/containers/ThemeProvider/type.ts
index 49662c0d..8125d298 100644
--- a/src/containers/ThemeProvider/type.ts
+++ b/src/containers/ThemeProvider/type.ts
@@ -1,4 +1,4 @@
-import { GetCustomStylish, GetCustomToken, ThemeAppearance } from '@/types';
+import { GetCustomStylish, GetCustomToken, ThemeAppearance, ThemeMode } from '@/types';
 import { ThemeConfig } from 'antd/es/config-provider/context';
 import { MessageInstance } from 'antd/es/message/interface';
 import { ModalStaticFunctions } from 'antd/es/modal/confirm';
@@ -11,6 +11,7 @@ export interface GetAntdTheme {
 
 export interface ThemeProviderProps<T, S = Record<string, string>> {
   children: ReactNode;
+  // --------------------- 自定义主题 --------------------- //
   /**
    * 自定义 Token
    */
@@ -19,16 +20,33 @@ export interface ThemeProviderProps<T, S = Record<string, string>> {
    * 自定义 Stylish
    */
   customStylish?: S | GetCustomStylish<S>;
+  // --------------------- antd 主题 --------------------- //
   /**
    * 直接传入 antd 主题，或者传入一个函数，根据当前的主题模式返回对应的主题
    */
   theme?: ThemeConfig | GetAntdTheme;
   prefixCls?: string;
+
   /**
    * 从 ThemeProvider 中获取静态方法的实例对象
    * @param instances
    */
   getStaticInstance?: (instances: StaticInstance) => void;
+
+  // --------------------- 主题切换 --------------------- //
+  /**
+   * 应用的展示外观主题，只存在亮色和暗色两种
+   * @default light
+   */
+  appearance?: ThemeAppearance;
+  defaultAppearance?: ThemeAppearance;
+  onAppearanceChange?: (mode: ThemeAppearance) => void;
+  /**
+   * 主题的展示模式，有三种配置：跟随系统、亮色、暗色
+   * 默认不开启自动模式，需要手动进行配置
+   * @default light
+   */
+  themeMode?: ThemeMode;
 }
 
 export interface StaticInstance {