const {
    getPrefixCls, // 獲取css前綴
    loadingElement, // loading顯示的組件
    size: ctxSize, // size默認(rèn)值
    renderEmpty, // 空數(shù)據(jù)時(shí)Empty組件顯示的內(nèi)容
    componentConfig, // 全局component的config
  } = useContext(ConfigContext);

export const ConfigContext = createContext<ConfigProviderProps>({
  getPrefixCls: (componentName: string, customPrefix?: string) => `${customPrefix || defaultProps.prefixCls}-${componentName}`,
  ...defaultProps,
});
 <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>;

<Spin element={loadingElement} {...loading}>
        {renderTable()}
</Spin>

├── ConfigProvider 
│   ├── config // 配置文件
│   │   ├── constants.tsx // 常量
│   │   └── utils_fns // 工具函數(shù)文件夾
│   ├── index.tsx
│   └── interface.ts // ts定義文件
├── Empty
│   ├── config  // 配置文件
│   │   ├── constants.ts
│   │   └── utils_fns // 工具函數(shù)文件夾
│   │       ├── getDesDefault.ts
│   │       ├── xxx
│   │       └── index.ts
│   ├── index.tsx
│   ├── interface.ts  // ts定義文件
│   └── style // 樣式文件
│       ├── index.less
│       └── index.ts
├── Icon // Icon是單獨(dú)一個(gè)項(xiàng)目，自動(dòng)化生成Icon，還有點(diǎn)復(fù)雜度的，這個(gè)后面組件庫(kù)詳細(xì)講吧
│   ├── index.tsx
│   └── style
│       └── index.less
├── Spin
│   ├── config
│   │   ├── hooks // 自定義hook
│   │   └── utils_fns
│   ├── index.tsx
│   ├── interface.ts
│   └── style
│       ├── index.less
│       └── index.ts
├── Table
│   ├── config
│   │   └── util_fns
│   └── table.tsx
├── config // 公共配置文件
│   ├── index.ts
│   └── util_fns
│       ├── index.ts
│       └── pickDataAttributes.ts
├── index.ts
├── locale // 國(guó)際化文件夾
│   ├── default.tsx
│   ├── en-US.tsx
│   ├── interface.tsx
│   └── zh-CN.tsx
└── style // 樣式文件夾
    ├── base.less
    ├── common.less
    ├── index.less
    ├── normalize.less
    └── theme

import React, { createContext, useCallback, useMemo } from 'react';
// omit相當(dāng)于lodash里的omit，不過(guò)自己寫(xiě)的性能更好，因?yàn)闆](méi)有那么多兼容性，很簡(jiǎn)單
// useMergeProps是合并外界傳入的props，和默認(rèn)props還有組件全局props的hook
import { omit, useMergeProps } from '@mx-design/utils';
// 國(guó)際化文件，默認(rèn)是中文
import defaultLocale from '../locale/default';
// 接口
import type { ConfigProviderProps } from './interface';
// componentConfig是空對(duì)象
// PREFIX_CLS是你想自定義的css樣式前綴
import { componentConfig, PREFIX_CLS } from './config/constants';
// 渲染空數(shù)據(jù)的組件
import { renderEmpty } from './config/utils_fns';
// 默認(rèn)參數(shù)
const defaultProps: ConfigProviderProps = {
  locale: defaultLocale,
  prefixCls: PREFIX_CLS,
  getPopupContainer: () => document.body,
  size: 'default',
  renderEmpty,
};
// 默認(rèn)參數(shù)
export const ConfigContext = createContext<ConfigProviderProps>({
  ...defaultProps,
});
function ConfigProvider(baseProps: ConfigProviderProps) {
  // 合并props，baseProps也就是用戶傳入的props優(yōu)先級(jí)最高
  const props = useMergeProps<ConfigProviderProps>(baseProps, defaultProps, componentConfig);
  const { prefixCls, children } = props;
// 獲取css前綴名的函數(shù)
  const getPrefixCls = useCallback(
    (componentName: string, customPrefix?: string) => {
      return `${customPrefix || prefixCls || defaultProps.prefixCls}-${componentName}`;
    },
    [prefixCls]
  );
 // 傳遞給所有子組件的數(shù)據(jù)
  const config: ConfigProviderProps = useMemo(
    () => ({
      ...omit(props, ['children']),
      getPrefixCls,
    }),
    [getPrefixCls, props]
  );
// 使用context實(shí)現(xiàn)全局變量傳遞給子組件的目的
  return <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>;
}
ConfigProvider.displayName = 'ConfigProvider';
export default ConfigProvider;
export type { ConfigProviderProps };

export function renderEmpty() {
  return <Empty />;
}

import { ReactNode } from 'react';
import { Locale } from '../locale/interface';
import type { EmptyProps } from '../Empty/interface';
import type { SpinProps } from '../Spin/interface';
export type ComponentConfig = {
  Empty: EmptyProps;
  Spin: SpinProps;
};
/**
 * @title ConfigProvider
 */
export interface ConfigProviderProps {
  /**
   * @zh 用于全局配置所有組件的默認(rèn)參數(shù)
   * @en Default parameters for global configuration of all components
   * @version 2.23.0
   */
  componentConfig?: ComponentConfig;
  /**
   * @zh 設(shè)置語(yǔ)言包
   * @en Language package setting
   */
  locale?: Locale;
  /**
   * @zh 配置組件的默認(rèn)尺寸，只會(huì)對(duì)支持`size`屬性的組件生效。
   * @en Configure the default size of the component, which will only take effect for components that support the `size` property.
   * @defaultValue default
   */
  size?: 'mini' | 'small' | 'default' | 'large';
  /**
   * @zh 全局組件類名前綴
   * @en Global ClassName prefix
   * @defaultValue arco
   */
  prefixCls?: string;
  getPrefixCls?: (componentName: string, customPrefix?: string) => string;
  /**
   * @zh 全局彈出框掛載的父級(jí)節(jié)點(diǎn)。
   * @en The parent node of the global popup.
   * @defaultValue () => document.body
   */
  getPopupContainer?: (node: HTMLElement) => Element;
  /**
   * @zh 全局的加載中圖標(biāo)，作用于所有組件。
   * @en Global loading icon.
   */
  loadingElement?: ReactNode;
  /**
   * @zh 全局配置組件內(nèi)的空組件。
   * @en Empty component in component.
   * @version 2.10.0
   */
  renderEmpty?: (componentName?: string) => ReactNode;
  zIndex?: number;
  children?: ReactNode;
}

import React, { memo, useContext, forwardRef } from 'react';
import { useMergeProps } from '@mx-design/utils';
import { ConfigContext } from '../ConfigProvider';
import type { EmptyProps } from './interface';
import { emptyImage, getDesDefault } from './config/utils_fns';
import { useClassNames } from './config/hooks';
function Empty(baseProps: EmptyProps, ref) {
  // 獲取全局參數(shù)
  const { getPrefixCls, locale: globalLocale, componentConfig } = useContext(ConfigContext);
  // 合并props
  const props = useMergeProps<EmptyProps>({}, componentConfig?.Empty, baseProps);
  const { style, className, description, icon, imgSrc } = props;
  // 獲取國(guó)際化的 noData字符串
  const { noData } = globalLocale.Empty;
  // class樣式層
  const { containerCls, wrapperCls, imageCls, descriptionCls } = useClassNames({ getPrefixCls, className });
  // 獲取描述信息
  const alt = getDesDefault(description);
  return (
    <div ref={ref} className={containerCls} style={style}>
      <div className={wrapperCls}>
        <div className={imageCls}>{emptyImage({ imgSrc, alt, icon })}</div>
        <div className={descriptionCls}>{description || noData}</div>
      </div>
    </div>
  );
}
const EmptyComponent = forwardRef(Empty);
EmptyComponent.displayName = 'Empty';
export default memo(EmptyComponent);
export type { EmptyProps };

import { cs } from '@mx-design/utils';
import { useMemo } from 'react';
import { ConfigProviderProps } from '../../../ConfigProvider';
import { EmptyProps } from '../..';
interface getClassNamesProps {
  getPrefixCls: ConfigProviderProps['getPrefixCls'];
  className: EmptyProps['className'];
}
export function useClassNames(props: getClassNamesProps) {
  const { getPrefixCls, className } = props;
  const prefixCls = getPrefixCls('empty');
  const classNames = cs(prefixCls, className);
  return useMemo(
    () => ({
      containerCls: classNames,
      wrapperCls: `${prefixCls}-wrapper`,
      imageCls: `${prefixCls}-image`,
      descriptionCls: `${prefixCls}-description`,
    }),
    [classNames, prefixCls]
  );
}

import { DEFAULT_DES } from '../constants';
export function getDesDefault(description) {
  return typeof description === 'string' ? description : DEFAULT_DES;
}

import { IconEmpty } from '@mx-design/icon';
import React from 'react';
import { IEmptyImage } from '../../interface';
export const emptyImage: IEmptyImage = ({ imgSrc, alt, icon }) => {
  return imgSrc ? <img alt={alt} src={imgSrc} /> : icon || <IconEmpty />;
};

interface IDebounced<T extends (...args: any) => any> {
  cancel: () => void;
  (...args: any[]): ReturnType<T>;
}
export function debounce<T extends (...args: any) => any>(func: T, wait: number, immediate?: boolean): IDebounced<T> {
  let timeout: number | null;
  let result: any;
  const debounced: IDebounced<T> = function (...args) {
    const context = this;
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      let callNow = !timeout;
      timeout = window.setTimeout(function () {
        timeout = null;
      }, wait);
      if (callNow) result = func.apply(context, args);
    } else {
      timeout = window.setTimeout(function () {
        result = func.apply(context, args);
      }, wait);
    }
    // Only the first time you can get the result, that is, immediate is true
    // if not，result has little meaning
    return result;
  };
  debounced.cancel = function () {
    clearTimeout(timeout!);
    timeout = null;
  };
  return debounced;
}

import { debounce } from '@mx-design/utils';
import { useCallback, useEffect, useState } from 'react';
import type { SpinProps } from '../../interface';
interface debounceLoadingProps {
  delay: SpinProps['delay'];
  propLoading: SpinProps['loading'];
}
export const useDebounceLoading = function (props: debounceLoadingProps): [boolean] {
  const { delay, propLoading } = props;
  const [loading, setLoading] = useState<boolean>(delay ? false : propLoading);
  const debouncedSetLoading = useCallback(debounce(setLoading, delay), [delay]);
  const getLoading = delay ? loading : propLoading;
  useEffect(() => {
    delay && debouncedSetLoading(propLoading);
    return () => {
      debouncedSetLoading?.cancel();
    };
  }, [debouncedSetLoading, delay, propLoading]);
  return [getLoading];
};

import React, { useContext } from 'react';
import { useMergeProps } from '@mx-design/utils';
import { ConfigContext } from '../ConfigProvider';
import type { SpinProps } from './interface';
import InnerLoading from './InnerLoading';
import { useClassNames, useDebounceLoading } from './config/hooks';
function Spin(baseProps: SpinProps, ref) {
  const { getPrefixCls, componentConfig } = useContext(ConfigContext);
  const props = useMergeProps<SpinProps>(baseProps, {}, componentConfig?.Spin);
  const { style, className, children, loading: propLoading, size, icon, element, tip, delay, block = true } = props;
  const [loading] = useDebounceLoading({ delay, propLoading });
  const { prefixCls, wrapperCls, childrenWrapperCls, loadingLayerCls, loadingLayerInnerCls, tipCls } = useClassNames({
    getPrefixCls,
    block,
    loading,
    tip,
    children,
    className,
  });
  return (
    <div ref={ref} className={wrapperCls} style={style}>
      {children ? (
        <>
          <div className={childrenWrapperCls}>{children}</div>
          {loading && (
            <div className={loadingLayerCls} style={{ fontSize: size }}>
              <span className={loadingLayerInnerCls}>
                <InnerLoading prefixCls={prefixCls} icon={icon} size={size} element={element} tipCls={tipCls} tip={tip} />
              </span>
            </div>
          )}
        </>
      ) : (
        <InnerLoading prefixCls={prefixCls} icon={icon} size={size} element={element} tipCls={tipCls} tip={tip} />
      )}
    </div>
  );
}
const SpinComponent = React.forwardRef<unknown, SpinProps>(Spin);
SpinComponent.displayName = 'Spin';
export default SpinComponent;
export { SpinProps };

import { IconLoading } from '@mx-design/icon';
import { cs } from '@mx-design/utils';
import React, { FC, ReactElement } from 'react';
import { ConfigProviderProps } from '../../../ConfigProvider';
import type { SpinProps } from '../../interface';
interface loadingIconProps {
  prefixCls: ConfigProviderProps['prefixCls'];
  icon: SpinProps['icon'];
  size: SpinProps['size'];
  element: SpinProps['element'];
}
export const LoadingIcon: FC<loadingIconProps> = function (props) {
  const { prefixCls, icon, size, element } = props;
  return (
    <span className={`${prefixCls}-icon`}>
      {icon
        ? // 這里可以讓傳入的icon自動(dòng)旋轉(zhuǎn)
          React.cloneElement(icon as ReactElement, {
            className: `${prefixCls}-icon-loading`,
            style: {
              fontSize: size,
            },
          })
        : element || <IconLoading className={`${prefixCls}-icon-loading`} style={{ fontSize: size }} />}
    </span>
  );
};