✨ feat: 实现 setupStyled

ant-design · Feb 18, 2023 · d66d50d · d66d50d
1 parent fdfd295
commit d66d50d
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 130 deletions.
diff --git a/src/factories/createThemeProvider/index.tsx b/src/factories/createThemeProvider/index.tsx
@@ -1,17 +1,18 @@
 import { memo, ReactElement } from 'react';
 
 import { createUseTheme } from '@/factories/createUseTheme';
-import { UseTheme } from '@/types';
+import { DEFAULT_THEME_PROVIDER, DEFAULT_USE_THEME } from '@/functions/setupStyled';
+import { StyledConfig } from '@/types';
+
 import AntdProvider from './AntdProvider';
 import ThemeSwitcher from './ThemeSwitcher';
 import TokenContainer from './TokenContainer';
-import { StyledThemeProvider, ThemeProviderProps } from './type';
+import { ThemeProviderProps } from './type';
 
 export * from './type';
 
 export const createThemeProvider = (
-  defaultStyledThemeProvider: StyledThemeProvider,
-  defaultUseTheme: UseTheme,
+  styledConfig?: StyledConfig,
 ): (<T = any, S = any>(props: ThemeProviderProps<T, S>) => ReactElement | null) =>
   memo(
     ({
@@ -36,7 +37,7 @@ export const createThemeProvider = (
         defaultAppearance={defaultAppearance}
         appearance={appearance}
         onAppearanceChange={onAppearanceChange}
-        useTheme={createUseTheme(styled?.useTheme || defaultUseTheme)}
+        useTheme={createUseTheme(styled?.useTheme || styledConfig?.useTheme || DEFAULT_USE_THEME)}
       >
         <AntdProvider
           prefixCls={prefixCls}
@@ -48,7 +49,9 @@ export const createThemeProvider = (
             prefixCls={prefixCls}
             customToken={customToken}
             customStylish={customStylish}
-            StyledThemeProvider={styled?.ThemeProvider || defaultStyledThemeProvider}
+            StyledThemeProvider={
+              styled?.ThemeProvider || styledConfig?.ThemeProvider || DEFAULT_THEME_PROVIDER
+            }
           >
             {children}
           </TokenContainer>

diff --git a/src/factories/createThemeProvider/type.ts b/src/factories/createThemeProvider/type.ts
@@ -2,17 +2,15 @@ import {
   GetAntdTheme,
   GetCustomStylish,
   GetCustomToken,
-  Theme,
+  StyledConfig,
   ThemeAppearance,
   ThemeMode,
 } from '@/types';
 import { ThemeConfig } from 'antd/es/config-provider/context';
 import { ConfigOptions as MessageConfig, MessageInstance } from 'antd/es/message/interface';
 import { ModalStaticFunctions } from 'antd/es/modal/confirm';
 import { NotificationConfig, NotificationInstance } from 'antd/es/notification/interface';
-import { FC, ReactNode } from 'react';
-
-export type StyledThemeProvider = FC<{ theme: Theme; children: ReactNode }>;
+import { ReactNode } from 'react';
 
 export interface ThemeProviderProps<T, S = Record<string, string>> {
   children: ReactNode;
@@ -25,10 +23,7 @@ export interface ThemeProviderProps<T, S = Record<string, string>> {
    * 自定义 Stylish
    */
   customStylish?: GetCustomStylish<S>;
-  styled?: {
-    ThemeProvider?: StyledThemeProvider;
-    useTheme?: () => any;
-  };
+  styled?: StyledConfig;
 
   // --------------------- antd 主题 --------------------- //
   prefixCls?: string;

diff --git a/src/functions/createInstance.ts b/src/functions/createInstance.ts
@@ -1,23 +1,18 @@
-import { FC, useContext } from 'react';
-
-import {
-  createClassNameGenerator,
-  createCX,
-  createEmotion,
-  PedestalProvider,
-  serializeCSS,
-  useTheme as defaultUseTheme,
-} from '@/core';
+import { useContext } from 'react';
+
+import { createClassNameGenerator, createCX, createEmotion, serializeCSS } from '@/core';
+
 import { createEmotionContext } from '@/factories/createEmotionContext';
 import { createGlobalStyleFactory } from '@/factories/createGlobalStyle';
 import { createStylishFactory } from '@/factories/createStyish';
 import { createStyleProvider } from '@/factories/createStyleProvider';
 import { createStylesFactory } from '@/factories/createStyles';
-import { createThemeProvider, StyledThemeProvider } from '@/factories/createThemeProvider';
+import { createThemeProvider } from '@/factories/createThemeProvider';
 import { createUseTheme } from '@/factories/createUseTheme';
-import { HashPriority, Theme } from '@/types';
 
-interface CreateOptions<T = any> {
+import { HashPriority, StyledConfig, Theme } from '@/types';
+
+export interface CreateOptions {
   /**
    * 生成的 css 关键词
    * @default ant-css
@@ -32,23 +27,17 @@ interface CreateOptions<T = any> {
   hashPriority?: HashPriority;
 
   ThemeProvider?: any;
-  styled?: {
-    ThemeProvider?: FC<{ theme: T }>;
-    useTheme?: () => T;
-  };
+  styled?: StyledConfig;
 }
 
 /**
  * Creates a new instance of antd-style
  * 创建一个新的 antd-style 实例
  */
-export const createInstance = <T = any>(options: CreateOptions<T>) => {
+export const createInstance = (options: CreateOptions) => {
   const defaultKey = options.key || 'ant-css';
 
-  const styledUseTheme = (options.styled?.useTheme || defaultUseTheme) as () => Theme;
-
-  const defaultThemeProvider = (options.styled?.ThemeProvider ||
-    PedestalProvider) as StyledThemeProvider;
+  const styledUseTheme = options.styled?.useTheme as () => Theme;
 
   const emotion = createEmotion({
     key: defaultKey,
@@ -82,7 +71,7 @@ export const createInstance = <T = any>(options: CreateOptions<T>) => {
     prefix: defaultKey,
   });
 
-  const ThemeProvider = createThemeProvider(defaultThemeProvider, useTheme);
+  const ThemeProvider = createThemeProvider(options.styled);
 
   const useEmotion = () => useContext(EmotionContext);
   return {

diff --git a/src/functions/index.ts b/src/functions/index.ts
@@ -1,5 +1,6 @@
 import { createInstance } from './createInstance';
 
+export { setupStyled } from './setupStyled';
 export { createInstance };
 
 const styleInstance = createInstance({ key: 'ant-css', speedy: false });

diff --git a/src/functions/setupStyled.ts b/src/functions/setupStyled.ts
@@ -0,0 +1,15 @@
+import { PedestalProvider as defaultThemeProvider, useTheme as defaultUseTheme } from '@/core';
+
+import { StyledConfig, StyledThemeProvider } from '@/types';
+
+export let DEFAULT_THEME_PROVIDER = defaultThemeProvider as StyledThemeProvider;
+export let DEFAULT_USE_THEME = defaultUseTheme;
+
+export const setupStyled = (config: StyledConfig) => {
+  if (config?.ThemeProvider) {
+    DEFAULT_THEME_PROVIDER = config.ThemeProvider;
+  }
+  if (config.useTheme) {
+    DEFAULT_USE_THEME = config.useTheme;
+  }
+};
diff --git a/src/types/styled.ts b/src/types/styled.ts
@@ -1,96 +1,9 @@
-import { PropsOf } from '@emotion/react';
-import { CreateStyledComponent } from '@emotion/styled';
-import {
-  CreateStyled as BaseCreateStyled,
-  FilteringStyledOptions,
-  StyledOptions,
-} from '@emotion/styled/base';
-import * as React from 'react';
+import { Theme } from 'antd-style/src';
+import { FC, ReactNode } from 'react';
 
-import { Theme } from './theme';
-
-export type StyledTags = {
-  [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<
-    {
-      theme?: Theme;
-      as?: React.ElementType;
-    },
-    JSX.IntrinsicElements[Tag]
-  >;
-};
-
-export interface CreateStyled {
-  <
-    C extends React.ComponentClass<React.ComponentProps<C>>,
-    ForwardedProps extends keyof React.ComponentProps<C> & string = keyof React.ComponentProps<C> &
-      string,
-  >(
-    component: C,
-    options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>,
-  ): CreateStyledComponent<
-    Pick<PropsOf<C>, ForwardedProps> & {
-      theme?: Theme;
-    },
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    {},
-    {
-      ref?: React.Ref<InstanceType<C>>;
-    }
-  >;
-
-  <C extends React.ComponentClass<React.ComponentProps<C>>>(
-    component: C,
-    options?: StyledOptions<React.ComponentProps<C>>,
-  ): CreateStyledComponent<
-    PropsOf<C> & {
-      theme?: Theme;
-    },
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    {},
-    {
-      ref?: React.Ref<InstanceType<C>>;
-    }
-  >;
-
-  <
-    C extends React.ComponentType<React.ComponentProps<C>>,
-    ForwardedProps extends keyof React.ComponentProps<C> & string = keyof React.ComponentProps<C> &
-      string,
-  >(
-    component: C,
-    options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>,
-  ): CreateStyledComponent<
-    Pick<PropsOf<C>, ForwardedProps> & {
-      theme?: Theme;
-    }
-  >;
-
-  <C extends React.ComponentType<React.ComponentProps<C>>>(
-    component: C,
-    options?: StyledOptions<React.ComponentProps<C>>,
-  ): CreateStyledComponent<
-    PropsOf<C> & {
-      theme?: Theme;
-    }
-  >;
-
-  <
-    Tag extends keyof JSX.IntrinsicElements,
-    ForwardedProps extends keyof JSX.IntrinsicElements[Tag] &
-      string = keyof JSX.IntrinsicElements[Tag] & string,
-  >(
-    tag: Tag,
-    options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>,
-  ): CreateStyledComponent<
-    { theme?: Theme; as?: React.ElementType },
-    Pick<JSX.IntrinsicElements[Tag], ForwardedProps>
-  >;
-
-  <Tag extends keyof JSX.IntrinsicElements>(
-    tag: Tag,
-    options?: StyledOptions<JSX.IntrinsicElements[Tag]>,
-  ): CreateStyledComponent<{ theme?: Theme; as?: React.ElementType }, JSX.IntrinsicElements[Tag]>;
+export interface StyledConfig {
+  ThemeProvider?: StyledThemeProvider;
+  useTheme?: () => any;
 }
 
-export type { BaseCreateStyled };
-export interface CreateStyled extends BaseCreateStyled, StyledTags {}
+export type StyledThemeProvider = FC<{ theme: Theme; children: ReactNode }>;