ant-design-vue/components/config-provider/index.tsx

import { reactive, provide, VNodeTypes, PropType, defineComponent, App } from 'vue';
import PropTypes from '../_util/vue-types';
import { getComponentFromSetup } from '../_util/props-util';
import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
import { CSPConfig } from './context';
import LocaleProvider, { Locale, ANT_MARK } from '../locale-provider';

import LocaleReceiver from '../locale-provider/LocaleReceiver';

export type SizeType = 'small' | 'middle' | 'large' | undefined;

export const configConsumerProps = [
  'getTargetContainer',
  'getPopupContainer',
  'rootPrefixCls',
  'getPrefixCls',
  'renderEmpty',
  'csp',
  'autoInsertSpaceInButton',
  'locale',
  'pageHeader',
];

export interface ConfigProviderProps {
  getTargetContainer?: () => HTMLElement;
  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  prefixCls?: string;
  children?: VNodeTypes;
  renderEmpty?: RenderEmptyHandler;
  csp?: CSPConfig;
  autoInsertSpaceInButton?: boolean;
  input?: {
    autoComplete?: string;
  };
  locale?: Locale;
  pageHeader?: {
    ghost: boolean;
  };
  componentSize?: SizeType;
  direction?: 'ltr' | 'rtl';
  space?: {
    size?: SizeType | number;
  };
  virtual?: boolean;
  dropdownMatchSelectWidth?: boolean;
}

const ConfigProvider = defineComponent({
  name: 'AConfigProvider',
  props: {
    getTargetContainer: {
      type: Function as PropType<() => HTMLElement>,
    },
    getPopupContainer: {
      type: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
    },
    prefixCls: PropTypes.string,
    getPrefixCls: {
      type: Function as PropType<(suffixCls?: string, customizePrefixCls?: string) => string>,
    },
    renderEmpty: {
      type: Function as PropType<RenderEmptyHandler>,
    },
    csp: {
      type: Object as PropType<CSPConfig>,
    },
    autoInsertSpaceInButton: PropTypes.bool,
    locale: {
      type: Object as PropType<Locale>,
    },
    pageHeader: {
      type: Object as PropType<{ ghost: boolean }>,
    },
    componentSize: {
      type: Object as PropType<SizeType>,
    },
    direction: {
      type: String as PropType<'ltr' | 'rtl'>,
    },
    space: {
      type: [String, Number] as PropType<SizeType | number>,
    },
    virtual: PropTypes.bool,
    dropdownMatchSelectWidth: PropTypes.bool,
  },
  setup(props, { slots }) {
    const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
      const { prefixCls = 'ant' } = props;
      if (customizePrefixCls) return customizePrefixCls;
      return suffixCls ? `${prefixCls}-${suffixCls}` : prefixCls;
    };

    const renderEmptyComponent = (name?: string) => {
      const renderEmpty = (getComponentFromSetup(props, slots, 'renderEmpty') ||
        defaultRenderEmpty) as RenderEmptyHandler;
      return renderEmpty(name);
    };

    const getPrefixClsWrapper = (suffixCls: string, customizePrefixCls?: string) => {
      const { prefixCls } = props;

      if (customizePrefixCls) return customizePrefixCls;

      const mergedPrefixCls = prefixCls || getPrefixCls('');

      return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls;
    };

    const configProvider = reactive({
      ...props,
      getPrefixCls: getPrefixClsWrapper,
      renderEmpty: renderEmptyComponent,
    });

    provide('configProvider', configProvider);

    const renderProvider = (legacyLocale: Locale) => {
      return (
        <LocaleProvider locale={props.locale || legacyLocale} _ANT_MARK__={ANT_MARK}>
          {slots.default?.()}
        </LocaleProvider>
      );
    };

    return () => (
      <LocaleReceiver children={(_, __, legacyLocale) => renderProvider(legacyLocale as Locale)} />
    );
  },
});

export const ConfigConsumerProps = {
  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => {
    if (customizePrefixCls) return customizePrefixCls;
    return `ant-${suffixCls}`;
  },
  renderEmpty: defaultRenderEmpty,
};

/* istanbul ignore next */
ConfigProvider.install = function(app: App) {
  app.component(ConfigProvider.name, ConfigProvider);
};

export default ConfigProvider;