mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 08:59:15 +08:00
cbcfd38ca7
* build: try to use dumi as doc tool
* docs: migrate demo structure to dumi way
* refactor: use type export & import
* docs: migrate demo previewer to dumi
* docs: create empty layout & components
* docs: apply custom rehype plugin
* docs: create empty extra pages
* docs: Add Banner component
* chore: move theme tsconfig.json
* docs: home page init
* docs: migrate header (#37896)
* docs: header
* docs: update
* docs: home init
* clean up
* test: fix site lint
* chore: tsc ignore demo
* chore: dumi demo migrate script
* chore: cards
* docs: home layout
* docs: Update locale logic
* docs: fix getLink logic
* chore: fix ci (#37899)
* chore: fix ci
* ci: remove check-ts-demo
* ci: preview build
* test: ignore demo.tsx
* chore: update script
* test: update snapshot
* test: update node and image test
* chore: add .surgeignore
* docs: layout providers (#37908)
* docs: add components sidebar (#37923)
* docs: sidebar
* docs: update docs title
* docs: update design doc
* chore: code clean
* docs: handle changelog page
* docs: add title
* docs: add subtitle
* docs: active header nav
* chore: code clean
* docs: overview
* chore: code clean
* docs: update intl (#37918)
* docs: update intl
* chore: code clean
* docs: update favicons
* chore: update testPathIgnorePatterns
* chore: code clean
* chore: code clean
* chore: copy 404.html (#37996)
* docs: Home page theme picker
* chore: Update migrate script
* docs: home page update
* docs: theme editor style
* docs: theme lang
* chore: update migrate.js
* docs: fix demo (#38094)
* chore: update migrate.js
* docs: update md
* docs: update demo
* test: fix snapshot
* chore: move debug to code attr in migrate script
* chore: update md
Co-authored-by: PeachScript <scdzwyxst@gmail.com>
* feat: overview page
* feat: Migrate `404` page (#38118)
* feat: migrate IconSearch component (#37916)
* feat<site/IconSearch>: copy IconDisplay from site to .dumi
* feat<site/IconSearch>: change docs of icon
* feat<site/IconSearch>: tweak
* feat<site/IconSearch>: use useIntl instead of injectIntl
* feat<site/IconSearch>: fix ts type error
* feat<site/IconSearch>: use intl.formatMessage to render text
* docs: Adjust home btn sizw
* docs: Update doc
* feat: v5 site overview page (#38131)
* feat: site
* fix: fix
* feat: v5 site overview page
* fix: fix path
* fix: fix
* fix: fix
* docs: fix margin logic
* feat: v5 site change-log page (#38137)
* feat: v5 site change-log page (#38162)
* docs: site redirect to home pag
* docs: theme picker
* docs: use react-intl from dumi (#38183)
* docs: Theme Picker
* docs: update dumi config
* docs: home back fix
* docs: picker colorful
* docs: locale of it
* docs: update components desc
* docs: site of links
* docs: update components list
* docs: update desc
* feat: Migrate `DemoWrapper` component (#38166)
* feat: Migrate `DemoWrapper` component
* feat: remove invalid comments and add comment for `key` prop
* docs: FloatButton pure panel
* chore: update demo
* chore: update dumi config
* Revert "chore: update demo"
This reverts commit 028265d3ba
.
* chore: test logic adjust to support cnpm modules
* chore: add locale alias
* docs: /index to /
* docs: add locale redirect head script
* chore: adjust compact
* docs: fix missing token
* feat: compact switch
* chore: code clean
* docs: update home
* docs: fix radius token
* docs: hash of it
* chore: adjust home page
* docs: Add background map
* docs: site theme bac logic
* docs: avatar
* docs: update logo color
* docs: home banner
* docs: adjust tour size
* docs: purepanl update
* docs: transfooter
* docs: update banner gif
* docs: content (#38361)
* docs: title & EditButton
* docs: content
* chore: fix toc
* docs: resource page
* docs: transform resource data from hast
* docs: filename & Resource Card
* chore: enable prerender
* chore: remove less
* docs: toc style
* chore: fix lint
* docs: fix Layout page
* docs: fix CP page
* chore: update demos
* docs: workaround for export dynamic html
* chore: enable demo eslint
* docs: table style
* fix: header shadow
* chore: update snapshot
* fix: toc style
* docs: add title
* docs: Adjust site
* feat: helmet
* docs: site css
* fix: description
* feat: toc debug
* docs: update config-provider
* feat: use colorPanel
* fix: colorPanel value
* feat: anchor ink ball style
* feat: apply theme editor
* fix: code block style
* chore: update demo
* chore: fix lint
* chore: code clean
* chore: update snapshot
* feat: ts2js
* chore: description
* docs: site ready for ssr
includes:
- move client render logic to useEffect in site theme
- extract antd cssinjs to a single css file like bisheng
- workaround to support react@18 pipeableStream for emotion
* chore: bump testing lib
* docs: font size of title
* chore: remove react-sortable-hoc
* chore: update snapshot
* chore: update script
Co-authored-by: PeachScript <scdzwyxst@gmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: zqran <uuxnet@gmail.com>
Co-authored-by: TrickyPi <530257315@qq.com>
Co-authored-by: lijianan <574980606@qq.com>
312 lines
8.5 KiB
TypeScript
312 lines
8.5 KiB
TypeScript
import { createTheme } from '@ant-design/cssinjs';
|
|
import IconContext from '@ant-design/icons/lib/components/Context';
|
|
import { FormProvider as RcFormProvider } from 'rc-field-form';
|
|
import type { ValidateMessages } from 'rc-field-form/lib/interface';
|
|
import useMemo from 'rc-util/lib/hooks/useMemo';
|
|
import * as React from 'react';
|
|
import type { RequiredMark } from '../form/Form';
|
|
import type { Locale } from '../locale-provider';
|
|
import LocaleProvider, { ANT_MARK } from '../locale-provider';
|
|
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
|
import defaultLocale from '../locale/en_US';
|
|
import { DesignTokenContext } from '../theme';
|
|
import defaultSeedToken from '../theme/themes/seed';
|
|
import type { ConfigConsumerProps, CSPConfig, DirectionType, Theme, ThemeConfig } from './context';
|
|
import { ConfigConsumer, ConfigContext, defaultIconPrefixCls } from './context';
|
|
import { registerTheme } from './cssVariables';
|
|
import type { RenderEmptyHandler } from './defaultRenderEmpty';
|
|
import { DisabledContextProvider } from './DisabledContext';
|
|
import useTheme from './hooks/useTheme';
|
|
import type { SizeType } from './SizeContext';
|
|
import SizeContext, { SizeContextProvider } from './SizeContext';
|
|
|
|
export {
|
|
type RenderEmptyHandler,
|
|
ConfigContext,
|
|
ConfigConsumer,
|
|
type CSPConfig,
|
|
type DirectionType,
|
|
type ConfigConsumerProps,
|
|
};
|
|
export { defaultIconPrefixCls };
|
|
|
|
export const configConsumerProps = [
|
|
'getTargetContainer',
|
|
'getPopupContainer',
|
|
'rootPrefixCls',
|
|
'getPrefixCls',
|
|
'renderEmpty',
|
|
'csp',
|
|
'autoInsertSpaceInButton',
|
|
'locale',
|
|
'pageHeader',
|
|
];
|
|
|
|
// These props is used by `useContext` directly in sub component
|
|
const PASSED_PROPS: Exclude<keyof ConfigConsumerProps, 'rootPrefixCls' | 'getPrefixCls'>[] = [
|
|
'getTargetContainer',
|
|
'getPopupContainer',
|
|
'renderEmpty',
|
|
'pageHeader',
|
|
'input',
|
|
'pagination',
|
|
'form',
|
|
];
|
|
|
|
export interface ConfigProviderProps {
|
|
getTargetContainer?: () => HTMLElement | Window;
|
|
getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
|
|
prefixCls?: string;
|
|
iconPrefixCls?: string;
|
|
children?: React.ReactNode;
|
|
renderEmpty?: RenderEmptyHandler;
|
|
csp?: CSPConfig;
|
|
autoInsertSpaceInButton?: boolean;
|
|
form?: {
|
|
validateMessages?: ValidateMessages;
|
|
requiredMark?: RequiredMark;
|
|
colon?: boolean;
|
|
};
|
|
input?: {
|
|
autoComplete?: string;
|
|
};
|
|
pagination?: {
|
|
showSizeChanger?: boolean;
|
|
};
|
|
locale?: Locale;
|
|
pageHeader?: {
|
|
ghost: boolean;
|
|
};
|
|
componentSize?: SizeType;
|
|
componentDisabled?: boolean;
|
|
direction?: DirectionType;
|
|
space?: {
|
|
size?: SizeType | number;
|
|
};
|
|
virtual?: boolean;
|
|
dropdownMatchSelectWidth?: boolean;
|
|
theme?: ThemeConfig;
|
|
}
|
|
|
|
interface ProviderChildrenProps extends ConfigProviderProps {
|
|
parentContext: ConfigConsumerProps;
|
|
legacyLocale: Locale;
|
|
}
|
|
|
|
export const defaultPrefixCls = 'ant';
|
|
let globalPrefixCls: string;
|
|
let globalIconPrefixCls: string;
|
|
|
|
function getGlobalPrefixCls() {
|
|
return globalPrefixCls || defaultPrefixCls;
|
|
}
|
|
|
|
function getGlobalIconPrefixCls() {
|
|
return globalIconPrefixCls || defaultIconPrefixCls;
|
|
}
|
|
|
|
const setGlobalConfig = ({
|
|
prefixCls,
|
|
iconPrefixCls,
|
|
theme,
|
|
}: Pick<ConfigProviderProps, 'prefixCls' | 'iconPrefixCls'> & { theme?: Theme }) => {
|
|
if (prefixCls !== undefined) {
|
|
globalPrefixCls = prefixCls;
|
|
}
|
|
if (iconPrefixCls !== undefined) {
|
|
globalIconPrefixCls = iconPrefixCls;
|
|
}
|
|
|
|
if (theme) {
|
|
registerTheme(getGlobalPrefixCls(), theme);
|
|
}
|
|
};
|
|
|
|
export const globalConfig = () => ({
|
|
getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
|
|
if (customizePrefixCls) return customizePrefixCls;
|
|
return suffixCls ? `${getGlobalPrefixCls()}-${suffixCls}` : getGlobalPrefixCls();
|
|
},
|
|
getIconPrefixCls: getGlobalIconPrefixCls,
|
|
getRootPrefixCls: () => {
|
|
// If Global prefixCls provided, use this
|
|
if (globalPrefixCls) {
|
|
return globalPrefixCls;
|
|
}
|
|
|
|
// Fallback to default prefixCls
|
|
return getGlobalPrefixCls();
|
|
},
|
|
});
|
|
|
|
const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
|
|
const {
|
|
children,
|
|
csp: customCsp,
|
|
autoInsertSpaceInButton,
|
|
form,
|
|
locale,
|
|
componentSize,
|
|
direction,
|
|
space,
|
|
virtual,
|
|
dropdownMatchSelectWidth,
|
|
legacyLocale,
|
|
parentContext,
|
|
iconPrefixCls: customIconPrefixCls,
|
|
theme,
|
|
componentDisabled,
|
|
} = props;
|
|
|
|
const getPrefixCls = React.useCallback(
|
|
(suffixCls: string, customizePrefixCls?: string) => {
|
|
const { prefixCls } = props;
|
|
|
|
if (customizePrefixCls) return customizePrefixCls;
|
|
|
|
const mergedPrefixCls = prefixCls || parentContext.getPrefixCls('');
|
|
|
|
return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls;
|
|
},
|
|
[parentContext.getPrefixCls, props.prefixCls],
|
|
);
|
|
|
|
const iconPrefixCls = customIconPrefixCls || parentContext.iconPrefixCls || defaultIconPrefixCls;
|
|
const csp = customCsp || parentContext.csp;
|
|
|
|
const mergedTheme = useTheme(theme, parentContext.theme);
|
|
|
|
const config = {
|
|
...parentContext,
|
|
csp,
|
|
autoInsertSpaceInButton,
|
|
locale: locale || legacyLocale,
|
|
direction,
|
|
space,
|
|
virtual,
|
|
dropdownMatchSelectWidth,
|
|
getPrefixCls,
|
|
iconPrefixCls,
|
|
theme: mergedTheme,
|
|
};
|
|
|
|
// Pass the props used by `useContext` directly with child component.
|
|
// These props should merged into `config`.
|
|
PASSED_PROPS.forEach(propName => {
|
|
const propValue = props[propName];
|
|
if (propValue) {
|
|
(config as any)[propName] = propValue;
|
|
}
|
|
});
|
|
|
|
// https://github.com/ant-design/ant-design/issues/27617
|
|
const memoedConfig = useMemo(
|
|
() => config,
|
|
config,
|
|
(prevConfig, currentConfig) => {
|
|
const prevKeys = Object.keys(prevConfig) as Array<keyof typeof config>;
|
|
const currentKeys = Object.keys(currentConfig) as Array<keyof typeof config>;
|
|
return (
|
|
prevKeys.length !== currentKeys.length ||
|
|
prevKeys.some(key => prevConfig[key] !== currentConfig[key])
|
|
);
|
|
},
|
|
);
|
|
|
|
const memoIconContextValue = React.useMemo(
|
|
() => ({ prefixCls: iconPrefixCls, csp }),
|
|
[iconPrefixCls, csp],
|
|
);
|
|
|
|
let childNode = children;
|
|
// Additional Form provider
|
|
let validateMessages: ValidateMessages = {};
|
|
|
|
if (locale) {
|
|
validateMessages =
|
|
locale.Form?.defaultValidateMessages || defaultLocale.Form?.defaultValidateMessages || {};
|
|
}
|
|
if (form && form.validateMessages) {
|
|
validateMessages = { ...validateMessages, ...form.validateMessages };
|
|
}
|
|
|
|
if (Object.keys(validateMessages).length > 0) {
|
|
childNode = <RcFormProvider validateMessages={validateMessages}>{children}</RcFormProvider>;
|
|
}
|
|
|
|
if (locale) {
|
|
childNode = (
|
|
<LocaleProvider locale={locale} _ANT_MARK__={ANT_MARK}>
|
|
{childNode}
|
|
</LocaleProvider>
|
|
);
|
|
}
|
|
|
|
if (iconPrefixCls || csp) {
|
|
childNode = (
|
|
<IconContext.Provider value={memoIconContextValue}>{childNode}</IconContext.Provider>
|
|
);
|
|
}
|
|
|
|
if (componentSize) {
|
|
childNode = <SizeContextProvider size={componentSize}>{childNode}</SizeContextProvider>;
|
|
}
|
|
|
|
// ================================ Dynamic theme ================================
|
|
const memoTheme = React.useMemo(() => {
|
|
const { algorithm, token, ...rest } = mergedTheme || {};
|
|
const themeObj =
|
|
algorithm && (!Array.isArray(algorithm) || algorithm.length > 0)
|
|
? createTheme(algorithm)
|
|
: undefined;
|
|
|
|
return {
|
|
...rest,
|
|
theme: themeObj,
|
|
|
|
token: {
|
|
...defaultSeedToken,
|
|
...token,
|
|
},
|
|
};
|
|
}, [mergedTheme]);
|
|
|
|
if (theme) {
|
|
childNode = (
|
|
<DesignTokenContext.Provider value={memoTheme}>{childNode}</DesignTokenContext.Provider>
|
|
);
|
|
}
|
|
|
|
// =================================== Render ===================================
|
|
if (componentDisabled !== undefined) {
|
|
childNode = (
|
|
<DisabledContextProvider disabled={componentDisabled}>{childNode}</DisabledContextProvider>
|
|
);
|
|
}
|
|
|
|
return <ConfigContext.Provider value={memoedConfig}>{childNode}</ConfigContext.Provider>;
|
|
};
|
|
|
|
const ConfigProvider: React.FC<ConfigProviderProps> & {
|
|
/** @private internal Usage. do not use in your production */
|
|
ConfigContext: typeof ConfigContext;
|
|
SizeContext: typeof SizeContext;
|
|
config: typeof setGlobalConfig;
|
|
} = props => (
|
|
<LocaleReceiver>
|
|
{(_, __, legacyLocale) => (
|
|
<ConfigConsumer>
|
|
{context => (
|
|
<ProviderChildren parentContext={context} legacyLocale={legacyLocale} {...props} />
|
|
)}
|
|
</ConfigConsumer>
|
|
)}
|
|
</LocaleReceiver>
|
|
);
|
|
|
|
ConfigProvider.ConfigContext = ConfigContext;
|
|
ConfigProvider.SizeContext = SizeContext;
|
|
ConfigProvider.config = setGlobalConfig;
|
|
|
|
export default ConfigProvider;
|