refactor(context): refactor context (#175)

* refactor(context): refactor context

* fix bug

* fix test

src/design-context/DesignContext.tsx

@@ -1,33 +1,13 @@
 import React from 'react';
-import type { DesignContextProps, DesignProviderProps, SizeType } from './interfaces';
+import type { DesignContextProps } from './interfaces';
 
-const defaultRootPrefixCls = 'gio';
+const DefaultPrefixCls = 'gio';
 
-export const getDesignPrefixCls = (subPrefixCls: string, customRootPrefixCls: string = defaultRootPrefixCls): string =>
-  [customRootPrefixCls, subPrefixCls].join('-');
-
-const defaultProps = {
-  getPrefixCls: getDesignPrefixCls,
-  rootPrefixCls: defaultRootPrefixCls,
-  size: 'middle' as SizeType,
+export const DefaultContextProps = {
+  prefixCls: DefaultPrefixCls,
   locale: { code: 'zh-CN' },
   theme: {},
 };
-const DesignContext = React.createContext<DesignContextProps>(defaultProps);
-
-export const DesignConsumer = DesignContext.Consumer;
-
-export const DesignProvider = ({
-  getPrefixCls = getDesignPrefixCls,
-  rootPrefixCls = defaultRootPrefixCls,
-  size = 'middle' as SizeType,
-  locale = { code: 'zh-CN' },
-  theme = {},
-  children,
-}: DesignProviderProps) => (
-  <DesignContext.Provider value={{ getPrefixCls, rootPrefixCls, size, locale, theme }}>
-    {children}
-  </DesignContext.Provider>
-);
+const DesignContext = React.createContext<DesignContextProps>(DefaultContextProps);
 
 export default DesignContext;

src/design-context/__test__/DesignContext.test.tsx

@@ -1,45 +1,36 @@
 import React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
-import DesignContext, { DesignProvider, getDesignPrefixCls } from '../DesignContext';
-import { DesignContextProps, SizeType } from '../interfaces';
+import DesignContext, { DefaultContextProps } from '../DesignContext';
+import { DesignContextProps } from '../interfaces';
 
 function useDesignContext() {
   return React.useContext(DesignContext);
 }
 
 const wrapper = ({ children, props }: { children?: React.ReactNode; props: Partial<DesignContextProps> }) => (
-  <DesignProvider {...props}>{children}</DesignProvider>
+  <DesignContext.Provider value={{ ...DefaultContextProps, ...props }}>{children}</DesignContext.Provider>
 );
 
 describe('DesignContext', () => {
   const defaultLocale = { code: 'zh-CN' };
-  const defaultProps = { getPrefixCls: getDesignPrefixCls };
-
-  it('has default getPrefixCls function', () => {
-    expect(getDesignPrefixCls('design')).toBe('gio-design');
-    expect(getDesignPrefixCls('design', 'growing')).toBe('growing-design');
-  });
 
   it('has default props', () => {
     const { result } = renderHook(() => useDesignContext());
-    expect(result.current?.rootPrefixCls).toEqual('gio');
-    expect(result.current?.getPrefixCls).toBe(getDesignPrefixCls);
+    expect(result.current?.prefixCls).toEqual('gio');
     expect(result.current?.locale).toEqual(defaultLocale);
   });
 
   it('can change props', () => {
-    const currentProps = { ...defaultProps, size: 'middle' as SizeType };
     const { result, rerender } = renderHook(() => useDesignContext(), {
       wrapper,
       initialProps: { props: {} },
     });
-    expect(result.current.size).toEqual(currentProps.size);
+
     expect(result.current.locale).toEqual(defaultLocale);
 
-    const newProps = { ...defaultProps, rootPrefixCls: 'custom', size: 'small' as SizeType, locale: { code: 'zh' } };
+    const newProps = { prefixCls: 'custom', locale: { code: 'zh' } };
     rerender({ props: newProps });
-    expect(result.current.rootPrefixCls).toEqual(newProps.rootPrefixCls);
-    expect(result.current.size).toEqual(newProps.size);
+    expect(result.current.prefixCls).toEqual(newProps.prefixCls);
     expect(result.current.locale).toEqual(newProps.locale);
   });
 });

src/design-context/demos/DesignContext.stories.tsx

@@ -1,11 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React from 'react';
-import { DesignContextProps, IntlShape } from '../interfaces';
+import { DesignContextProps } from '../interfaces';
 
-export function DesignContextPropsComponent(_: DesignContextProps) {
-  return <></>;
-}
-
-export function IntlShapeComponent(_: IntlShape) {
+export default function DesignContextPropsComponent(_: DesignContextProps) {
   return <></>;
 }

src/design-context/index.ts

@@ -1,2 +1,2 @@
-export { default as DesignContext, DesignConsumer, DesignProvider, getDesignPrefixCls } from './DesignContext';
-export type { DesignContextProps, DesignProviderProps, Locale, SizeType } from './interfaces';
+export { default as DesignContext, DefaultContextProps } from './DesignContext';
+export type { DesignContextProps, Locale } from './interfaces';

src/design-context/interfaces.ts

@@ -1,19 +1,12 @@
-import React from 'react';
-
-export type SizeType = 'small' | 'middle' | 'large' | undefined;
 export interface Locale {
   code: string;
   [key: string]: any;
 }
-export interface DesignContextProps {
-  getPrefixCls?: (subPrefixCls: string, customRootPrefixCls?: string) => string;
-  locale?: Locale;
-  rootPrefixCls?: string;
-  size?: SizeType;
-  theme?: Record<string, any>;
-  [key: string]: any;
-}
 
-export interface DesignProviderProps extends Partial<DesignContextProps> {
-  children: React.ReactNode;
+interface DesignContextInteral {
+  locale: Locale;
+  prefixCls: string;
+  theme: Record<string, any>;
 }
+
+export type DesignContextProps<T = Record<string, any>> = DesignContextInteral & T;

src/hooks/index.ts

@@ -2,4 +2,3 @@ export { default as useControlledState } from './useControlledState';
 export { default as useLocale } from './useLocale';
 export { default as useLocalStorage } from './useLocalStorage';
 export { default as usePrefixCls } from './usePrefixCls';
-export { default as useSize } from './useSize';

src/hooks/useLocale.ts

@@ -1,10 +1,10 @@
 import { useContext } from 'react';
 import { get } from 'lodash';
-import { DesignContext } from '../design-context';
+import { DesignContext, Locale } from '../design-context';
 
-const useLocale = (componentName: string) => {
+const useLocale = <T = Record<string, any>>(componentName: string) => {
   const { locale } = useContext(DesignContext);
-  return get(locale, componentName);
+  return get(locale, componentName) as Locale & T;
 };
 
 export default useLocale;

src/hooks/usePrefixCls.ts

@@ -1,9 +1,11 @@
 import { useContext } from 'react';
 import { DesignContext } from '../design-context';
 
-const usePrefixCls = (subPrefixCls: string, customRootPrefixCls?: string) => {
-  const { rootPrefixCls, getPrefixCls } = useContext(DesignContext);
-  return getPrefixCls?.(subPrefixCls, customRootPrefixCls ?? rootPrefixCls);
+const getPrefixCls = (prefix: string, rootPrefix: string) => [prefix, rootPrefix].join('-');
+
+const usePrefixCls = (prefixCls: string, customRootPrefixCls?: string) => {
+  const { prefixCls: rootPrefixCls } = useContext(DesignContext);
+  return getPrefixCls(customRootPrefixCls ?? rootPrefixCls, prefixCls);
 };
 
 export default usePrefixCls;

src/index.ts

@@ -1,11 +1,11 @@
 /* eslint-disable import/prefer-default-export */
-export { DesignContext, DesignProvider, DesignConsumer } from './design-context';
-export type { DesignContextProps, DesignProviderProps, Locale, SizeType } from './design-context';
+export { DesignContext, DefaultContextProps } from './design-context';
+export type { DesignContextProps, Locale } from './design-context';
 
 export { injectPinyinWith } from './pinyin';
 
 export { formatTimeRange, humanizeTimeRange } from './format/formatTimeRange';
 
-export { useControlledState, useLocale, useLocalStorage, usePrefixCls, useSize } from './hooks';
+export { useControlledState, useLocale, useLocalStorage, usePrefixCls } from './hooks';
 
 export type { BaseProps, CommonProps, OverridableComponent } from './interfaces';