mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-23 18:50:06 +08:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

Merge branch 'master' into master

Browse Source
This commit is contained in:
afc163 2024-04-16 11:21:58 +08:00 committed by GitHub
commit b53205255e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1032 changed files with 14200 additions and 3460 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
.dumi/hooks/useLocale.ts
View File

@ -1,16 +1,22 @@
import { useLocale as useDumiLocale } from 'dumi';
export interface LocaleMap<Key extends string> {
cn: Record<Key, string>;
en: Record<Key, string>;
export interface LocaleMap<
K extends PropertyKey = PropertyKey,
V extends string | ((...params: any[]) => string) = string,
> {
cn: Record<K, V>;
en: Record<K, V>;
}
function useLocale<Key extends string>(
localeMap?: LocaleMap<Key>,
): [Record<Key, string>, 'cn' | 'en'] {
const useLocale = <
K extends PropertyKey = PropertyKey,
V extends string | ((...params: any[]) => string) = string,
>(
localeMap?: LocaleMap<K, V>,
): [Record<K, V>, 'cn' | 'en'] => {
const { id } = useDumiLocale();
const localeType = id === 'zh-CN' ? 'cn' : 'en';
return [localeMap?.[localeType]!, localeType];
}
return [localeMap?.[localeType]!, localeType] as const;
};
export default useLocale;

53
.dumi/hooks/useMenu.tsx
View File

@ -1,12 +1,35 @@
import React, { useMemo } from 'react';
import type { MenuProps } from 'antd';
import { Tag, version } from 'antd';
import { createStyles } from 'antd-style';
import classnames from 'classnames';
import { useFullSidebarData, useSidebarData } from 'dumi';
import Link from '../theme/common/Link';
import useLocation from './useLocation';
const MenuItemLabelWithTag: React.FC<{
function isVersionNumber(value?: string) {
return value && /^\d+\.\d+\.\d+$/.test(value);
}
const useStyle = createStyles(({ css, token }) => ({
link: css`
display: flex;
align-items: center;
justify-content: space-between;
`,
tag: css`
margin-inline-end: 0;
`,
subtitle: css`
margin-inline-start: ${token.marginXS}px;
font-weight: normal;
font-size: ${token.fontSizeSM}px;
opacity: 0.8;
`,
}));
interface MenuItemLabelProps {
before?: React.ReactNode;
after?: React.ReactNode;
link: string;
@ -15,27 +38,23 @@ const MenuItemLabelWithTag: React.FC<{
search?: string;
tag?: string;
className?: string;
}> = ({ before, after, link, title, subtitle, search, tag = '', className }) => {
}
const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
const { styles } = useStyle();
const { before, after, link, title, subtitle, search, tag, className } = props;
if (!before && !after) {
return (
<Link
to={`${link}${search}`}
style={
tag
? { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }
: undefined
}
className={className}
>
<Link to={`${link}${search}`} className={classnames(className, { [styles.link]: tag })}>
<span>
{title}
{subtitle && <span className="chinese">{subtitle}</span>}
{subtitle && <span className={styles.subtitle}>{subtitle}</span>}
</span>
{tag && (
<Tag
bordered={false}
color={tag === 'New' ? 'success' : 'processing'}
style={{ marginBlockEnd: 0 }}
className={classnames(styles.tag)}
color={isVersionNumber(tag) || tag === 'New' ? 'success' : 'processing'}
>
{tag.replace('VERSION', version)}
</Tag>
@ -47,7 +66,7 @@ const MenuItemLabelWithTag: React.FC<{
<Link to={`${link}${search}`} className={className}>
{before}
{title}
{subtitle && <span className="chinese">{subtitle}</span>}
{subtitle && <span className={styles.subtitle}>{subtitle}</span>}
{after}
</Link>
);
@ -58,7 +77,7 @@ export interface UseMenuOptions {
after?: React.ReactNode;
}
const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] => {
const useMenu = (options: UseMenuOptions = {}): readonly [MenuProps['items'], string] => {
const fullData = useFullSidebarData();
const { pathname, search } = useLocation();
const sidebarData = useSidebarData();
@ -192,7 +211,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
);
}, [sidebarData, fullData, pathname, search, options]);
return [menuItems, pathname];
return [menuItems, pathname] as const;
};
export default useMenu;

5
.dumi/mirror-modal.js
View File

@ -51,8 +51,7 @@
top: 120px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
width: 420px;
display: flex;
align-items: center;
@ -117,7 +116,7 @@
.mirror-modal-cancel-btn {
border: 1px solid #eee;
color: #000;
margin-right: 8px;
margin-inline-end: 8px;
}
.mirror-modal-cancel-btn:hover {

108
.dumi/pages/index/components/Banner.tsx
View File

@ -7,7 +7,7 @@ import { Link, useLocation } from 'dumi';
import useLocale from '../../../hooks/useLocale';
import SiteContext from '../../../theme/slots/SiteContext';
import * as utils from '../../../theme/utils';
import { GroupMask } from './Group';
import GroupMaskLayer from './GroupMaskLayer';
const locales = {
cn: {
@ -50,6 +50,47 @@ const useStyle = () => {
btnWrap: css`
margin-bottom: ${token.marginXL}px;
`,
layer: css`
text-align: center;
padding-top: ${token.marginFar - 16}px;
padding-bottom: ${token.marginFarSM}px;
`,
mobileBg: css`
width: 100%;
`,
videoWrap: css`
height: 320px;
background-color: #77c6ff;
display: flex;
flex-wrap: nowrap;
justify-content: center;
`,
video: css`
height: 100%;
object-fit: contain;
`,
bg: css`
flex: auto;
background-repeat: repeat-x;
background-size: auto 100%;
`,
bg1: css`
background-image: url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6d50SboraPIAAAAAAAAAAAAAARQnAQ);
background-position: 100% 0;
`,
bg2: css`
background-image: url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8ILtRrQlVDMAAAAAAAAAAAAAARQnAQ);
background-position: 0 0;
margin-inline-start: -1px;
`,
logoWrap: css`
position: relative;
background-color: #fff;
`,
bgImg: css`
position: absolute;
width: 240px;
`,
}))();
};
@ -65,83 +106,50 @@ const Banner: React.FC<React.PropsWithChildren> = ({ children }) => {
{/* Banner Placeholder Motion */}
{isMobile ? (
<img
className={styles.mobileBg}
src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JmlaR5oQn3MAAAAAAAAAAAAADrJ8AQ/original"
style={{ width: '100%' }}
alt=""
/>
) : (
<div
style={{
height: 320,
background: '#77C6FF',
display: 'flex',
flexWrap: 'nowrap',
justifyContent: 'center',
}}
>
<div
style={{
backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6d50SboraPIAAAAAAAAAAAAAARQnAQ)`,
flex: 'auto',
backgroundRepeat: 'repeat-x',
backgroundPosition: '100% 0',
backgroundSize: 'auto 100%',
}}
/>
<video style={{ height: '100%', objectFit: 'contain' }} autoPlay muted loop>
<div className={classNames(styles.videoWrap)}>
<div className={classNames(styles.bg, styles.bg1)} />
<video className={styles.video} autoPlay muted loop>
<source
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
type="video/webm"
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
/>
<source
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/file/A*XYYNQJ3NbmMAAAAAAAAAAAAAARQnAQ"
type="video/mp4"
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/file/A*XYYNQJ3NbmMAAAAAAAAAAAAAARQnAQ"
/>
</video>
<div
style={{
backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8ILtRrQlVDMAAAAAAAAAAAAAARQnAQ)`,
flex: 'auto',
backgroundRepeat: 'repeat-x',
backgroundPosition: '0 0',
backgroundSize: 'auto 100%',
marginLeft: -1,
}}
/>
<div className={classNames(styles.bg, styles.bg2)} />
</div>
)}
{/* Logo */}
<div style={{ position: 'relative', background: '#fff' }}>
<div className={styles.logoWrap}>
{/* Image Bottom Right */}
<img
style={{ position: 'absolute', right: 0, top: 240, width: 240 }}
className={classNames(styles.bgImg)}
style={{ right: 0, top: 240 }}
src="https://gw.alipayobjects.com/zos/bmw-prod/b3b8dc41-dce8-471f-9d81-9a0204f27d03.svg"
alt="Ant Design"
/>
<GroupMask
style={{
textAlign: 'center',
paddingTop: token.marginFar - 16,
paddingBottom: token.marginFarSM,
}}
>
<GroupMaskLayer className={styles.layer}>
{/* Image Left Top */}
<img
style={{ position: 'absolute', left: isMobile ? -120 : 0, top: 0, width: 240 }}
className={classNames(styles.bgImg)}
style={{ left: isMobile ? -120 : 0, top: 0 }}
src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
alt="bg"
/>
{/* Image Right Top */}
<img
style={{ position: 'absolute', right: isMobile ? 0 : 120, top: 0, width: 240 }}
className={classNames(styles.bgImg)}
style={{ right: isMobile ? 0 : 120, top: 0 }}
src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
alt="bg"
/>
<Typography.Title level={1} className={classNames(styles.titleBase, styles.title)}>
Ant Design 5.0
</Typography.Title>
@ -166,7 +174,7 @@ const Banner: React.FC<React.PropsWithChildren> = ({ children }) => {
</Link>
</Flex>
{children}
</GroupMask>
</GroupMaskLayer>
</div>
</>
);

56
.dumi/pages/index/components/BannerRecommends.tsx
View File

@ -1,6 +1,4 @@
import * as React from 'react';
import type { FC } from 'react';
import { useContext } from 'react';
import React, { useContext } from 'react';
import { Badge, Carousel, Skeleton, Typography } from 'antd';
import { createStyles, useTheme } from 'antd-style';
import classNames from 'classnames';
@ -46,10 +44,10 @@ const useStyle = createStyles(({ token, css, cx }) => {
`,
container: css`
display: flex;
max-width: 1208px;
width: 100%;
max-width: 100%;
margin-inline: auto;
box-sizing: border-box;
padding-inline: ${token.marginXXL}px;
column-gap: ${token.paddingMD * 2}px;
align-items: stretch;
text-align: start;
@ -107,7 +105,7 @@ const RecommendItem: React.FC<RecommendItemProps> = ({ extra, index, icons, clas
return card;
};
export const BannerRecommendsFallback: FC = () => {
export const BannerRecommendsFallback: React.FC = () => {
const { isMobile } = useContext(SiteContext);
const { styles } = useStyle();
@ -145,34 +143,34 @@ const BannerRecommends: React.FC = () => {
return <BannerRecommendsFallback />;
}
return (
<div>
{isMobile ? (
<Carousel className={styles.carousel}>
{first3.map((extra, index) => (
<div key={index}>
<RecommendItem
extra={extra}
index={index}
icons={icons}
className={styles.sliderItem}
/>
</div>
))}
</Carousel>
) : (
<div className={styles.container}>
{first3.map((extra, index) => (
if (isMobile) {
return (
<Carousel className={styles.carousel}>
{first3.map((extra, index) => (
<div key={index}>
<RecommendItem
extra={extra}
index={index}
icons={icons}
className={styles.cardItem}
key={index}
className={styles.sliderItem}
/>
))}
</div>
)}
</div>
))}
</Carousel>
);
}
return (
<div className={styles.container}>
{first3.map((extra, index) => (
<RecommendItem
extra={extra}
index={index}
icons={icons}
className={styles.cardItem}
key={index}
/>
))}
</div>
);
};

22
.dumi/pages/index/components/ComponentsList.tsx
View File

@ -96,6 +96,13 @@ const useStyle = () => {
mobileCard: css`
height: 395px;
`,
nodeWrap: css`
margin-top: ${token.paddingLG}px;
flex: auto;
display: flex;
align-items: center;
justify-content: center;
`,
carousel,
};
})();
@ -107,8 +114,6 @@ const ComponentItem: React.FC<ComponentItemProps> = ({ title, node, type, index
const tagText = type === 'new' ? locale.new : locale.update;
const { styles } = useStyle();
const { isMobile } = useContext(SiteContext);
const token = useTheme();
return (
<div className={classNames(styles.card, isMobile && styles.mobileCard)}>
{/* Decorator */}
@ -124,18 +129,7 @@ const ComponentItem: React.FC<ComponentItemProps> = ({ title, node, type, index
</Typography.Title>
<Tag color={tagColor}>{tagText}</Tag>
</Flex>
<div
style={{
marginTop: token.paddingLG,
flex: 'auto',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
{node}
</div>
<div className={styles.nodeWrap}>{node}</div>
</div>
);
};

12
.dumi/pages/index/components/DesignFramework.tsx
View File

@ -69,7 +69,7 @@ const useStyle = () => {
card: css`
padding: ${token.paddingSM}px;
border-radius: ${token.borderRadius * 2}px;
background: ${isRootDark ? 'rgba(0,0,0,0.45)' : token.colorBgElevated};
background: ${isRootDark ? 'rgba(0, 0, 0, 0.45)' : token.colorBgElevated};
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.03),
0 1px 6px -1px rgba(0, 0, 0, 0.02),
@ -86,8 +86,8 @@ const useStyle = () => {
display: block;
border-radius: ${token.borderRadius * 2}px;
padding: ${token.paddingMD}px ${token.paddingLG}px;
background: ${isRootDark ? 'rgba(0,0,0,0.25)' : 'rgba(0, 0, 0, 0.02)'};
border: 1px solid ${isRootDark ? 'rgba(255,255,255, 0.45)' : 'rgba(0, 0, 0, 0.06)'};
background: ${isRootDark ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.02)'};
border: 1px solid ${isRootDark ? 'rgba(255, 255, 255, 0.45)' : 'rgba(0, 0, 0, 0.06)'};
img {
height: 48px;
@ -96,7 +96,7 @@ const useStyle = () => {
}))();
};
export default function DesignFramework() {
const DesignFramework: React.FC = () => {
const [locale] = useLocale(locales);
const token = useTheme();
const { styles } = useStyle();
@ -174,4 +174,6 @@ export default function DesignFramework() {
})}
</Row>
);
}
};
export default DesignFramework;

92
.dumi/pages/index/components/Group.tsx
View File

@ -1,68 +1,46 @@
import * as React from 'react';
import { useContext } from 'react';
import { Typography } from 'antd';
import { useTheme } from 'antd-style';
import { createStyles, useTheme } from 'antd-style';
import classNames from 'classnames';
import SiteContext from '../../../theme/slots/SiteContext';
import GroupMaskLayer from './GroupMaskLayer';
export interface GroupMaskProps {
style?: React.CSSProperties;
children?: React.ReactNode;
disabled?: boolean;
onMouseMove?: React.MouseEventHandler<HTMLDivElement>;
onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
}
export const GroupMask: React.FC<GroupMaskProps> = (props) => {
const { children, style, disabled, onMouseMove, onMouseEnter, onMouseLeave } = props;
const additionalStyle: React.CSSProperties = disabled
? {}
: {
position: 'relative',
zIndex: 1,
};
return (
<div
className="site-mask"
style={{ position: 'relative', ...style, ...additionalStyle }}
onMouseMove={onMouseMove}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
{children}
</div>
);
};
const useStyle = createStyles(({ css, token }) => ({
box: css`
position: relative;
transition: all ${token.motionDurationSlow};
`,
marginStyle: css`
max-width: 1208px;
margin-inline: auto;
box-sizing: border-box;
padding-inline: ${token.marginXXL}px;
`,
withoutChildren: css`
min-height: 300px;
border-radius: ${token.borderRadiusLG}px;
background-color: '#e9e9e9';
`,
}));
export interface GroupProps {
id?: string;
title?: React.ReactNode;
titleColor?: string;
description?: React.ReactNode;
children?: React.ReactNode;
background?: string;
/** 是否不使用两侧 margin */
collapse?: boolean;
decoration?: React.ReactNode;
}
const Group: React.FC<GroupProps> = (props) => {
const Group: React.FC<React.PropsWithChildren<GroupProps>> = (props) => {
const { id, title, titleColor, description, children, decoration, background, collapse } = props;
const token = useTheme();
const { styles } = useStyle();
const { isMobile } = useContext(SiteContext);
const marginStyle: React.CSSProperties = collapse
? {}
: {
maxWidth: 1208,
marginInline: 'auto',
boxSizing: 'border-box',
paddingInline: isMobile ? token.margin : token.marginXXL,
};
const childNode = (
<>
<div style={{ textAlign: 'center' }}>
@ -82,38 +60,22 @@ const Group: React.FC<GroupProps> = (props) => {
<Typography.Paragraph
style={{
color: titleColor,
marginBottom: isMobile ? token.marginXXL : (token as any).marginFarXS,
marginBottom: isMobile ? token.marginXXL : token.marginFarXS,
}}
>
{description}
</Typography.Paragraph>
</div>
<div style={marginStyle}>
{children ? (
<div>{children}</div>
) : (
<div
style={{ borderRadius: token.borderRadiusLG, minHeight: 300, background: '#e9e9e9' }}
/>
)}
<div className={classNames({ [styles.marginStyle]: !collapse })}>
{children ? <div>{children}</div> : <div className={styles.withoutChildren} />}
</div>
</>
);
return (
<div
style={{ position: 'relative', background, transition: `all ${token.motionDurationSlow}` }}
>
<div style={{ backgroundColor: background }} className={styles.box}>
<div style={{ position: 'absolute', inset: 0 }}>{decoration}</div>
<GroupMask
disabled={!!background}
style={{
paddingBlock: (token as any).marginFarSM,
}}
>
{childNode}
</GroupMask>
<GroupMaskLayer style={{ paddingBlock: token.marginFarSM }}>{childNode}</GroupMaskLayer>
</div>
);
};

36
.dumi/pages/index/components/GroupMaskLayer.tsx Normal file
View File

@ -0,0 +1,36 @@
import React from 'react';
import { createStyles } from 'antd-style';
import classNames from 'classnames';
const useStyle = createStyles(({ css }) => ({
siteMask: css`
z-index: 1;
position: relative;
`,
}));
export interface GroupMaskLayerProps {
className?: string;
style?: React.CSSProperties;
onMouseMove?: React.MouseEventHandler<HTMLDivElement>;
onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
}
const GroupMaskLayer: React.FC<React.PropsWithChildren<GroupMaskLayerProps>> = (props) => {
const { children, className, style, onMouseMove, onMouseEnter, onMouseLeave } = props;
const { styles } = useStyle();
return (
<div
style={style}
className={classNames(className, styles.siteMask)}
onMouseMove={onMouseMove}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
{children}
</div>
);
};
export default GroupMaskLayer;

11
.dumi/pages/index/components/PreviewBanner/index.tsx
View File

@ -6,7 +6,7 @@ import { Link, useLocation } from 'dumi';
import useLocale from '../../../../hooks/useLocale';
import SiteContext from '../../../../theme/slots/SiteContext';
import * as utils from '../../../../theme/utils';
import { GroupMask } from '../Group';
import GroupMaskLayer from '../GroupMaskLayer';
const ComponentsBlock = React.lazy(() => import('./ComponentsBlock'));
@ -28,7 +28,7 @@ const useStyle = () => {
const { direction } = React.useContext(ConfigProvider.ConfigContext);
const isRTL = direction === 'rtl';
return createStyles(({ token, css, cx }) => {
const textShadow = `0 0 3px ${token.colorBgContainer}`;
const textShadow = `0 0 4px ${token.colorBgContainer}`;
const mask = cx(css`
position: absolute;
@ -91,10 +91,11 @@ const useStyle = () => {
top: -38px;
transform: ${isRTL ? 'rotate3d(24, 83, -45, 57deg)' : 'rotate3d(24, -83, 45, 57deg)'};
`,
child: css`
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
z-index: 1;
`,
btnWrap: css`
@ -113,7 +114,7 @@ const PreviewBanner: React.FC<React.PropsWithChildren> = (props) => {
const isZhCN = utils.isZhCN(pathname);
return (
<GroupMask>
<GroupMaskLayer>
{/* Image Left Top */}
<img
style={{ position: 'absolute', left: isMobile ? -120 : 0, top: 0, width: 240 }}
@ -153,7 +154,7 @@ const PreviewBanner: React.FC<React.PropsWithChildren> = (props) => {
</Flex>
<div className={styles.child}>{children}</div>
</div>
</GroupMask>
</GroupMaskLayer>
);
};

14
.dumi/pages/index/components/Theme/BackgroundImage.tsx
View File

@ -23,12 +23,9 @@ const useStyle = createStyles(({ token }) => ({
`,
}));
const onShow = () => ({
opacity: 1,
});
const onHide = () => ({
opacity: 0,
});
const onShow = () => ({ opacity: 1 });
const onHide = () => ({ opacity: 0 });
const BackgroundImage: React.FC<BackgroundImageProps> = ({ colorPrimary, isLight }) => {
const activeColor = useMemo(() => getClosetColor(colorPrimary), [colorPrimary]);
@ -68,10 +65,7 @@ const BackgroundImage: React.FC<BackgroundImageProps> = ({ colorPrimary, isLight
<source srcSet={entity.url} type="image/jpeg" />
<img
className={cls}
style={{
...style,
opacity: isLight ? opacity : 0,
}}
style={{ ...style, opacity: isLight ? opacity : 0 }}
src={entity.url}
alt=""
/>

14
.dumi/pages/index/components/Theme/MobileCarousel.tsx
View File

@ -1,7 +1,8 @@
import * as React from 'react';
import { useState } from 'react';
import { Carousel, Typography } from 'antd';
import { createStyles, css, useTheme } from 'antd-style';
import { Typography, Carousel } from 'antd';
import { getCarouselStyle } from '../util';
const useStyle = createStyles(() => {
@ -18,6 +19,9 @@ const useStyle = createStyles(() => {
width: 100%;
text-align: center;
`,
img: css`
width: 100%;
`,
};
});
@ -75,7 +79,7 @@ export interface MobileCarouselProps {
description?: React.ReactNode;
}
export default function MobileCarousel(props: MobileCarouselProps) {
const MobileCarousel: React.FC<MobileCarouselProps> = (props) => {
const { styles } = useStyle();
const { id, title, description } = props;
const token = useTheme();
@ -109,10 +113,12 @@ export default function MobileCarousel(props: MobileCarouselProps) {
<Carousel className={styles.carousel} afterChange={setCurrentSlider}>
{mobileImageConfigList.map((item, index) => (
<div key={index}>
<img src={item.imageSrc} alt="" style={{ width: '100%' }} />
<img src={item.imageSrc} className={styles.img} alt="" />
</div>
))}
</Carousel>
</div>
);
}
};
export default MobileCarousel;

2
.dumi/pages/index/components/Theme/ThemePicker.tsx
View File

@ -85,7 +85,7 @@ const ThemePicker: React.FC<ThemePickerProps> = (props) => {
const [locale] = useLocale(locales);
return (
<Flex gap="large" wrap="wrap">
{Object.keys(THEMES).map<React.ReactNode>((theme: THEME, index) => (
{(Object.keys(THEMES) as (keyof typeof THEMES)[]).map<React.ReactNode>((theme, index) => (
<Flex vertical gap="small" justify="center" align="center" key={theme}>
<label
onClick={() => onChange?.(theme)}

170
.dumi/pages/index/components/Theme/index.tsx
View File

@ -7,7 +7,7 @@ import {
QuestionCircleOutlined,
} from '@ant-design/icons';
import { TinyColor } from '@ctrl/tinycolor';
import type { MenuProps } from 'antd';
import type { MenuProps, ThemeConfig } from 'antd';
import {
Breadcrumb,
Button,
@ -21,7 +21,7 @@ import {
theme,
Typography,
} from 'antd';
import { createStyles, css, useTheme } from 'antd-style';
import { createStyles } from 'antd-style';
import type { Color } from 'antd/es/color-picker';
import { generateColor } from 'antd/es/color-picker/util';
import classNames from 'classnames';
@ -90,9 +90,8 @@ const locales = {
};
// ============================= Style =============================
const useStyle = createStyles(({ token, cx }) => {
const useStyle = createStyles(({ token, css, cx }) => {
const { carousel } = getCarouselStyle();
const demo = css`
overflow: hidden;
background: rgba(240, 242, 245, 0.25);
@ -134,8 +133,6 @@ const useStyle = createStyles(({ token, cx }) => {
margin-inline-start: auto;
`,
darkSideMenu: css``,
header: css`
display: flex;
align-items: center;
@ -169,7 +166,7 @@ const useStyle = createStyles(({ token, cx }) => {
h1 {
font-weight: 400;
font-size: 16px;
font-size: ${token.fontSizeLG}px;
line-height: 1.5;
}
`,
@ -194,6 +191,40 @@ const useStyle = createStyles(({ token, cx }) => {
width: 100%;
margin: 0 auto;
`,
pos: css`
position: absolute;
`,
leftTopImagePos: css`
left: 0;
top: -100px;
height: 500px;
`,
rightBottomPos: css`
right: 0;
bottom: -100px;
height: 287px;
`,
leftTopImage: css`
left: 50%;
transform: translate3d(-900px, 0, 0);
top: -100px;
height: 500px;
`,
rightBottomImage: css`
right: 50%;
transform: translate3d(750px, 0, 0);
bottom: -100px;
height: 287px;
`,
motion: css`
transition: all ${token.motionDurationSlow};
`,
op1: css`
opacity: 1;
`,
op0: css`
opacity: 0;
`,
carousel,
};
});
@ -311,9 +342,8 @@ function rgbToColorMatrix(color: string) {
return `invert(${invertValue}%) sepia(${sepiaValue}%) saturate(${saturateValue}%) hue-rotate(${hueRotateValue}deg)`;
}
export default function Theme() {
const Theme: React.FC = () => {
const { styles } = useStyle();
const token = useTheme();
const [locale, lang] = useLocale(locales);
const isZhCN = lang === 'cn';
const { search } = useLocation();
@ -393,44 +423,36 @@ export default function Theme() {
const logoColor = React.useMemo(() => {
const hsb = generateColor(colorPrimaryValue).toHsb();
hsb.b = Math.min(hsb.b, 0.7);
return generateColor(hsb).toHexString();
}, [colorPrimaryValue]);
const memoTheme = React.useMemo<ThemeConfig>(
() => ({
token: { ...themeToken, colorPrimary: colorPrimaryValue },
algorithm: algorithmFn,
components: {
Layout: isLight
? {
headerBg: 'transparent',
bodyBg: 'transparent',
}
: {},
Menu: isLight
? {
itemBg: 'transparent',
subMenuItemBg: 'transparent',
activeBarBorderWidth: 0,
}
: {},
...(themeType === 'v4' ? defaultTheme.components : {}),
},
}),
[themeToken, colorPrimaryValue, algorithmFn, themeType],
);
// ================================ Render ================================
const themeNode = (
<ConfigProvider
theme={{
token: {
...themeToken,
colorPrimary: colorPrimaryValue,
},
algorithm: algorithmFn,
components: {
Layout: isLight
? {
headerBg: 'transparent',
bodyBg: 'transparent',
}
: {
// colorBgBody: 'transparent',
},
Menu: isLight
? {
itemBg: 'transparent',
subMenuItemBg: 'transparent',
activeBarBorderWidth: 0,
}
: {
// colorItemBg: 'transparent',
// colorSubItemBg: 'transparent',
// colorItemBgActive: 'rgba(255,255,255,0.2)',
// colorItemBgSelected: 'rgba(255,255,255,0.2)',
},
...(themeType === 'v4' ? defaultTheme.components : {}),
},
}}
>
<ConfigProvider theme={memoTheme}>
<TokenChecker />
<div
className={classNames(styles.demo, {
@ -450,10 +472,7 @@ export default function Theme() {
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
style={{
filter:
closestColor === DEFAULT_COLOR
? undefined
: // : `drop-shadow(30px 0 0 ${logoColor})`,
rgbToColorMatrix(logoColor),
closestColor === DEFAULT_COLOR ? undefined : rgbToColorMatrix(logoColor),
}}
alt=""
/>
@ -464,7 +483,7 @@ export default function Theme() {
<BellOutlined />
<QuestionCircleOutlined />
<div
className={classNames(styles.avatar, themeType === 'dark' && styles.avatarDark)}
className={classNames(styles.avatar, { [styles.avatarDark]: themeType === 'dark' })}
style={{
backgroundColor: avatarColor,
backgroundImage: `url(${getAvatarURL(closestColor)})`,
@ -473,10 +492,10 @@ export default function Theme() {
</Flex>
</Header>
<Layout className={styles.transBg} hasSider>
<Sider className={classNames(styles.transBg, 'site-layout-background')} width={200}>
<Sider className={classNames(styles.transBg)} width={200}>
<Menu
mode="inline"
className={classNames(styles.transBg, !isLight && styles.darkSideMenu)}
className={classNames(styles.transBg)}
selectedKeys={['Themes']}
openKeys={['Design']}
style={{ height: '100%', borderRight: 0 }}
@ -521,7 +540,6 @@ export default function Theme() {
<Form.Item label={locale.titleTheme} name="themeType">
<ThemePicker />
</Form.Item>
<Form.Item label={locale.titlePrimaryColor} name="colorPrimary">
<ColorPicker />
</Form.Item>
@ -546,22 +564,6 @@ export default function Theme() {
</ConfigProvider>
);
const posStyle: React.CSSProperties = {
position: 'absolute',
};
const leftTopImageStyle: React.CSSProperties = {
left: '50%',
transform: 'translate3d(-900px, 0, 0)',
top: -100,
height: 500,
};
const rightBottomImageStyle: React.CSSProperties = {
right: '50%',
transform: 'translate3d(750px, 0, 0)',
bottom: -100,
height: 287,
};
return isMobile ? (
<MobileCarousel title={locale.themeTitle} description={locale.themeDesc} id="flexible" />
) : (
@ -576,52 +578,44 @@ export default function Theme() {
<>
{/* >>>>>> Default <<<<<< */}
<div
style={{
transition: `all ${token.motionDurationSlow}`,
opacity: isLight && closestColor === DEFAULT_COLOR ? 1 : 0,
}}
className={classNames(
styles.motion,
isLight && closestColor === DEFAULT_COLOR ? styles.op1 : styles.op0,
)}
>
{/* Image Left Top */}
<img
style={{
...posStyle,
...leftTopImageStyle,
}}
className={classNames(styles.pos, styles.leftTopImage)}
src="https://gw.alipayobjects.com/zos/bmw-prod/bd71b0c6-f93a-4e52-9c8a-f01a9b8fe22b.svg"
alt=""
/>
{/* Image Right Bottom */}
<img
style={{
...posStyle,
...rightBottomImageStyle,
}}
className={classNames(styles.pos, styles.rightBottomImage)}
src="https://gw.alipayobjects.com/zos/bmw-prod/84ad805a-74cb-4916-b7ba-9cdc2bdec23a.svg"
alt=""
/>
</div>
{/* >>>>>> Dark <<<<<< */}
<div
style={{
transition: `all ${token.motionDurationSlow}`,
opacity: !isLight || !closestColor ? 1 : 0,
}}
className={classNames(
styles.motion,
!isLight || !closestColor ? styles.op1 : styles.op0,
)}
>
{/* Image Left Top */}
<img
style={{ ...posStyle, left: 0, top: -100, height: 500 }}
className={classNames(styles.pos, styles.leftTopImagePos)}
src="https://gw.alipayobjects.com/zos/bmw-prod/a213184a-f212-4afb-beec-1e8b36bb4b8a.svg"
alt=""
/>
{/* Image Right Bottom */}
<img
style={{ ...posStyle, right: 0, bottom: -100, height: 287 }}
className={classNames(styles.pos, styles.rightBottomPos)}
src="https://gw.alipayobjects.com/zos/bmw-prod/bb74a2fb-bff1-4d0d-8c2d-2ade0cd9bb0d.svg"
alt=""
/>
</div>
{/* >>>>>> Background Image <<<<<< */}
<BackgroundImage isLight={isLight} colorPrimary={colorPrimaryValue} />
</>
@ -630,4 +624,6 @@ export default function Theme() {
{themeNode}
</Group>
);
}
};
export default Theme;

2
.dumi/pages/index/components/util.ts
View File

@ -1,5 +1,5 @@
import { css } from 'antd-style';
import { useEffect, useState } from 'react';
import { css } from 'antd-style';
import fetch from 'cross-fetch';
export interface Author {

9
.dumi/pages/theme-editor/index.tsx
View File

@ -1,8 +1,9 @@
import { enUS, zhCN } from 'antd-token-previewer';
import { Helmet } from 'dumi';
import React, { Suspense, useEffect } from 'react';
import type { ThemeConfig } from 'antd/es/config-provider/context';
import { Button, message, Skeleton } from 'antd';
import { enUS, zhCN } from 'antd-token-previewer';
import type { ThemeConfig } from 'antd/es/config-provider/context';
import { Helmet } from 'dumi';
import useLocale from '../../hooks/useLocale';
const ThemeEditor = React.lazy(() => import('antd-token-previewer/lib/ThemeEditor'));
@ -34,7 +35,7 @@ const locales = {
const ANT_DESIGN_V5_THEME_EDITOR_THEME = 'ant-design-v5-theme-editor-theme';
const CustomTheme = () => {
const CustomTheme: React.FC = () => {
const [messageApi, contextHolder] = message.useMessage();
const [locale, lang] = useLocale(locales);

3
.dumi/rehypeAntd.ts
View File

@ -1,5 +1,6 @@
import assert from 'assert';
import { unistUtilVisit, type HastRoot, type UnifiedTransformer } from 'dumi';
import type { HastRoot, UnifiedTransformer } from 'dumi';
import { unistUtilVisit } from 'dumi';
/**
* plugin for modify hast tree when docs compiling

31
.dumi/theme/builtins/ColorChunk/index.tsx
View File

@ -1,6 +1,7 @@
import { TinyColor, type ColorInput } from '@ctrl/tinycolor';
import { createStyles } from 'antd-style';
import * as React from 'react';
import type { ColorInput } from '@ctrl/tinycolor';
import { TinyColor } from '@ctrl/tinycolor';
import { createStyles } from 'antd-style';
interface ColorChunkProps {
children?: React.ReactNode;
@ -9,20 +10,20 @@ interface ColorChunkProps {
const useStyle = createStyles(({ token, css }) => ({
codeSpan: css`
padding: 0.2em 0.4em;
font-size: 0.9em;
background: ${token.siteMarkdownCodeBg};
border-radius: ${token.borderRadius}px;
font-family: monospace;
`,
padding: 0.2em 0.4em;
font-size: 0.9em;
background: ${token.siteMarkdownCodeBg};
border-radius: ${token.borderRadius}px;
font-family: monospace;
`,
dot: css`
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-inline-end: 4px;
border: 1px solid ${token.colorSplit};
`,
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-inline-end: ${token.marginXXS}px;
border: 1px solid ${token.colorSplit};
`,
}));
const ColorChunk: React.FC<ColorChunkProps> = (props) => {

32
.dumi/theme/builtins/ComponentMeta/index.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import { EditOutlined, GithubOutlined } from '@ant-design/icons';
import { Descriptions, theme, Tooltip, Typography, type GetProp } from 'antd';
import type { GetProp } from 'antd';
import { Descriptions, theme, Tooltip, Typography } from 'antd';
import { createStyles, css } from 'antd-style';
import kebabCase from 'lodash/kebabCase';
import CopyToClipboard from 'react-copy-to-clipboard';
@ -15,6 +16,7 @@ const locales = {
source: '源码',
docs: '文档',
edit: '编辑此页',
version: '版本',
},
en: {
import: 'Import',
@ -23,28 +25,31 @@ const locales = {
source: 'Source',
docs: 'Docs',
edit: 'Edit this page',
version: 'Version',
},
};
const branchUrl = 'https://github.com/ant-design/ant-design/edit/master/';
function isVersionNumber(value?: string) {
return value && /^\d+\.\d+\.\d+$/.test(value);
}
const useStyle = createStyles(({ token }) => ({
code: css`
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
column-gap: 4px;
border-radius: 4px;
column-gap: ${token.paddingXXS}px;
border-radius: ${token.borderRadiusSM}px;
padding-inline: ${token.paddingXS}px;
transition: all ${token.motionDurationSlow} !important;
font-family: ${token.codeFamily};
color: ${token.colorTextSecondary} !important;
&:hover {
background: ${token.controlItemBgHover};
}
a&:hover {
text-decoration: underline !important;
}
@ -70,13 +75,14 @@ export interface ComponentMetaProps {
component: string;
source: string | true;
filename?: string;
version?: string;
}
const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
const { component, source, filename } = props;
const { component, source, filename, version } = props;
const { token } = theme.useToken();
const [locale] = useLocale(locales);
const [locale, lang] = useLocale(locales);
const isZhCN = lang === 'cn';
const { styles } = useStyle();
// ========================= Copy =========================
@ -175,7 +181,15 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
</Typography.Link>
),
},
].filter((v) => v) as GetProp<typeof Descriptions, 'items'>
isVersionNumber(version) && {
label: locale.version,
children: (
<Typography.Text className={styles.code}>
{isZhCN ? `自 ${version} 后支持` : `supported since ${version}`}
</Typography.Text>
),
},
].filter(Boolean) as GetProp<typeof Descriptions, 'items'>
}
/>
);

6
.dumi/theme/builtins/ComponentOverview/index.tsx
View File

@ -14,7 +14,7 @@ import proComponentsList from './ProComponentsList';
const useStyle = createStyles(({ token, css }) => ({
componentsOverviewGroupTitle: css`
margin-bottom: 24px !important;
margin-bottom: ${token.marginLG}px !important;
`,
componentsOverviewTitle: css`
overflow: hidden;
@ -39,7 +39,7 @@ const useStyle = createStyles(({ token, css }) => ({
`,
componentsOverviewAffix: css`
display: flex;
transition: all 0.3s;
transition: all ${token.motionDurationSlow};
justify-content: space-between;
`,
componentsOverviewSearch: css`
@ -52,7 +52,7 @@ const useStyle = createStyles(({ token, css }) => ({
componentsOverviewContent: css`
&:empty:after {
display: block;
padding: 16px 0 40px;
padding: ${token.padding}px 0 ${token.paddingMD * 2}px;
color: ${token.colorTextDisabled};
text-align: center;
border-bottom: 1px solid ${token.colorSplit};

14
.dumi/theme/builtins/ComponentTokenTable/index.tsx
View File

@ -52,7 +52,7 @@ const locales = {
},
};
const useStyle = createStyles(() => ({
const useStyle = createStyles(({ token }) => ({
tableTitle: css`
cursor: pointer;
position: relative;
@ -62,15 +62,15 @@ const useStyle = createStyles(() => ({
line-height: 40px;
`,
arrowIcon: css`
font-size: 16px;
margin-inline-end: 8px;
font-size: ${token.fontSizeLG}px;
margin-inline-end: ${token.marginXS}px;
& svg {
transition: all 0.3s;
transition: all ${token.motionDurationSlow};
}
`,
help: css`
margin-inline-start: 8px;
font-size: 12px;
margin-inline-start: ${token.marginXS}px;
font-size: ${token.fontSizeSM}px;
font-weight: normal;
color: #999;
a {
@ -98,7 +98,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {
const token = useTheme();
const columns = useColumns();
const [open, setOpen] = useState<boolean>(defaultOpen || process.env.NODE_ENV !== 'production');
const [open, setOpen] = useState<boolean>(defaultOpen ?? process.env.NODE_ENV !== 'production');
const { styles } = useStyle();

3
.dumi/theme/builtins/Container/index.tsx
View File

@ -2,8 +2,9 @@
* copied: https://github.com/arvinxx/dumi-theme-antd-style/tree/master/src/builtins/Container
*/
import * as React from 'react';
import type { FC, ReactNode } from 'react';
import { Alert } from 'antd';
import { type FC, type ReactNode } from 'react';
import useStyles from './style';
const Container: FC<{

22
.dumi/theme/builtins/Container/style.ts
View File

@ -1,22 +1,22 @@
import { createStyles } from 'antd-style';
const useStyles = createStyles(({ prefixCls, css }) => ({
const useStyles = createStyles(({ token, prefixCls, css }) => ({
container: css`
margin: 8px 0;
`,
margin: ${token.marginXS}px 0;
`,
alert: css`
.${prefixCls}-alert-message {
font-weight: bold;
}
`,
.${prefixCls}-alert-message {
font-weight: bold;
}
`,
/* 使用 `&&` 加一点点权重 */
desc: css`
&& p {
margin: 0;
}
`,
&& p {
margin: 0;
}
`,
}));
export default useStyles;

13
.dumi/theme/builtins/DemoWrapper/index.tsx
View File

@ -1,5 +1,4 @@
import React, { useContext } from 'react';
import { DumiDemoGrid, FormattedMessage } from 'dumi';
import {
BugFilled,
BugOutlined,
@ -8,11 +7,13 @@ import {
ExperimentFilled,
ExperimentOutlined,
} from '@ant-design/icons';
import classNames from 'classnames';
import { ConfigProvider, Tooltip } from 'antd';
import DemoContext from '../../slots/DemoContext';
import classNames from 'classnames';
import { DumiDemoGrid, FormattedMessage } from 'dumi';
import useLayoutState from '../../../hooks/useLayoutState';
import useLocale from '../../../hooks/useLocale';
import DemoContext from '../../slots/DemoContext';
const locales = {
cn: {
@ -55,7 +56,9 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
const { previewerProps } = item;
const { debug } = previewerProps;
if (debug && !showDebug) return acc;
if (debug && !showDebug) {
return acc;
}
return acc.concat({
...item,
@ -110,7 +113,7 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
)}
</Tooltip>
</span>
<ConfigProvider theme={{ cssVar: enableCssVar }}>
<ConfigProvider theme={{ cssVar: enableCssVar, hashed: !enableCssVar }}>
<DumiDemoGrid items={demos} />
</ConfigProvider>
</div>

11
.dumi/theme/builtins/IconSearch/IconSearch.tsx
View File

@ -1,15 +1,16 @@
import type { CSSProperties } from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import Icon, * as AntdIcons from '@ant-design/icons';
import type { SegmentedProps } from 'antd';
import { Affix, Empty, Input, Segmented } from 'antd';
import { createStyles, useTheme } from 'antd-style';
import { useIntl } from 'dumi';
import debounce from 'lodash/debounce';
import type { SegmentedProps } from 'antd';
import { Affix, Empty, Input, Segmented } from 'antd';
import Category from './Category';
import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
import type { CategoriesKeys } from './fields';
import { categories } from './fields';
import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
export enum ThemeType {
Filled = 'Filled',
@ -19,10 +20,10 @@ export enum ThemeType {
const allIcons: { [key: string]: any } = AntdIcons;
const useStyle = createStyles(({ css }) => ({
const useStyle = createStyles(({ token, css }) => ({
iconSearchAffix: css`
display: flex;
transition: all 0.3s;
transition: all ${token.motionDurationSlow};
justify-content: space-between;
`,
}));

10
.dumi/theme/builtins/IconSearch/index.tsx
View File

@ -1,13 +1,13 @@
import React, { Suspense } from 'react';
import { createStyles } from 'antd-style';
import { Skeleton } from 'antd';
import { createStyles } from 'antd-style';
const IconSearch = React.lazy(() => import('./IconSearch'));
const useStyle = createStyles(({ css }) => ({
const useStyle = createStyles(({ token, css }) => ({
searchWrapper: css`
display: flex;
gap: 16px;
gap: ${token.padding}px;
> *:first-child {
flex: 0 0 328px;
}
@ -21,7 +21,7 @@ const useStyle = createStyles(({ css }) => ({
justify-content: space-between;
> * {
flex: 0 0 15%;
margin: 3px 0;
margin: ${token.marginXXS}px 0;
}
`,
skeletonWrapper: css`
@ -33,7 +33,7 @@ const useStyle = createStyles(({ css }) => ({
`,
}));
const IconSearchFallback = () => {
const IconSearchFallback: React.FC = () => {
const { styles } = useStyle();
return (

142
.dumi/theme/builtins/InstallDependencies/bun.tsx Normal file
View File

@ -0,0 +1,142 @@
import React from 'react';
import { createStyles, css } from 'antd-style';
import classNames from 'classnames';
interface IconProps {
className?: string;
style?: React.CSSProperties;
}
const useStyle = createStyles(() => ({
iconWrap: css`
display: inline-flex;
align-items: center;
line-height: 0;
text-align: center;
vertical-align: -0.125em;
`,
}));
const BunIcon: React.FC<IconProps> = (props) => {
const { className, style } = props;
const { styles } = useStyle();
return (
<span className={classNames(styles.iconWrap, className)} style={style}>
<svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70" width="1em" height="1em">
<title>Bun Logo</title>
<path
id="Shadow"
d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"
/>
<g id="Body">
<path
id="Background"
d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z"
style={{
fill: '#fbf0df',
}}
/>
<path
id="Bottom_Shadow"
data-name="Bottom Shadow"
d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z"
style={{
fill: '#f6dece',
}}
/>
<path
id="Light_Shine"
data-name="Light Shine"
d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z"
style={{
fill: '#fffefc',
}}
/>
<path
id="Top"
d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z"
style={{
fill: '#ccbea7',
fillRule: 'evenodd',
}}
/>
<path
id="Outline"
d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"
/>
</g>
<g id="Mouth">
<g id="Background-2" data-name="Background">
<path
d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z"
style={{
fill: '#b71422',
}}
/>
</g>
<g id="Tongue">
<path
id="Background-3"
data-name="Background"
d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z"
style={{
fill: '#ff6164',
}}
/>
<path
id="Outline-2"
data-name="Outline"
d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"
/>
</g>
<path
id="Outline-3"
data-name="Outline"
d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"
/>
</g>
<g id="Face">
<ellipse
id="Right_Blush"
data-name="Right Blush"
cx="53.22"
cy="40.18"
rx="5.85"
ry="3.44"
style={{
fill: '#febbd0',
}}
/>
<ellipse
id="Left_Bluch"
data-name="Left Bluch"
cx="22.95"
cy="40.18"
rx="5.85"
ry="3.44"
style={{
fill: '#febbd0',
}}
/>
<path
id="Eyes"
d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z"
style={{
fillRule: 'evenodd',
}}
/>
<path
id="Iris"
d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z"
style={{
fill: '#fff',
fillRule: 'evenodd',
}}
/>
</g>
</svg>
</span>
);
};
export default BunIcon;

10
.dumi/theme/builtins/InstallDependencies/index.tsx
View File

@ -6,15 +6,17 @@ import type { Tab } from 'rc-tabs/lib/interface';
import NpmLogo from './npm';
import PnpmLogo from './pnpm';
import YarnLogo from './yarn';
import BunLogo from './bun';
interface InstallProps {
npm?: string;
yarn?: string;
pnpm?: string;
bun?: string;
}
const InstallDependencies: React.FC<InstallProps> = (props) => {
const { npm, yarn, pnpm } = props;
const { npm, yarn, pnpm, bun } = props;
const items: Tab[] = [
{
key: 'npm',
@ -34,6 +36,12 @@ const InstallDependencies: React.FC<InstallProps> = (props) => {
children: pnpm ? <SourceCode lang="bash">{pnpm}</SourceCode> : null,
icon: <PnpmLogo />,
},
{
key: 'bun',
label: 'Bun',
children: bun ? <SourceCode lang="bash">{bun}</SourceCode> : null,
icon: <BunLogo />,
},
].filter((item) => item.children);
return (

9
.dumi/theme/builtins/LocaleLink/index.tsx
View File

@ -1,5 +1,6 @@
import { Link } from 'dumi';
import * as React from 'react';
import { Link } from 'dumi';
import useLocale from '../../../hooks/useLocale';
type LinkProps = Parameters<typeof Link>[0];
@ -9,7 +10,7 @@ export interface LocaleLinkProps extends LinkProps {
children?: React.ReactNode;
}
export default function LocaleLink({ sourceType, to, ...props }: LocaleLinkProps) {
const LocaleLink: React.FC<LocaleLinkProps> = ({ sourceType, to, ...props }) => {
const Component = sourceType === 'a' ? 'a' : Link;
const [, localeType] = useLocale();
@ -46,4 +47,6 @@ export default function LocaleLink({ sourceType, to, ...props }: LocaleLinkProps
}
return <Component {...linkProps} />;
}
};
export default LocaleLink;

8
.dumi/theme/builtins/Previewer/CodePreviewer.tsx
View File

@ -75,14 +75,14 @@ const useStyle = createStyles(({ token }) => {
border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
border-top: 1px solid ${token.colorSplit};
color: ${token.colorTextSecondary};
transition: all 0.2s ease-in-out;
transition: all ${token.motionDurationMid} ease-in-out;
background-color: ${token.colorBgElevated};
cursor: pointer;
&:hover {
color: ${token.colorPrimary};
}
span {
margin-right: ${token.marginXXS}px;
margin-inline-end: ${token.marginXXS}px;
}
`,
};
@ -108,7 +108,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
clientOnly,
pkgDependencyList,
} = props;
const { showDebug } = useContext(DemoContext);
const { showDebug, codeType } = useContext(DemoContext);
const { pkg } = useSiteData();
const location = useLocation();
@ -134,7 +134,6 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
const riddleIconRef = useRef<HTMLFormElement>(null);
const codepenIconRef = useRef<HTMLFormElement>(null);
const [codeExpand, setCodeExpand] = useState<boolean>(false);
const [codeType, setCodeType] = useState<string>('tsx');
const { theme } = useContext<SiteContextProps>(SiteContext);
const { hash, pathname, search } = location;
@ -541,7 +540,6 @@ createRoot(document.getElementById('container')).render(<Demo />);
styleCode={style}
error={liveDemoError}
entryName={entryName}
onCodeTypeChange={setCodeType}
onSourceChange={setLiveDemoSource}
/>
<div

14
.dumi/theme/builtins/Previewer/DesignPreviewer.tsx
View File

@ -10,10 +10,10 @@ import type { AntdPreviewerProps } from './Previewer';
const useStyle = createStyles(({ token, css }) => ({
wrapper: css`
position: relative;
border: 1px solid ${token.colorBorderSecondary};
border-radius: ${token.borderRadius}px;
padding: 20px 24px 40px;
position: relative;
padding: ${token.paddingMD}px ${token.paddingLG}px ${token.paddingMD * 2}px;
margin-bottom: ${token.marginLG}px;
`,
title: css`
@ -35,8 +35,8 @@ const useStyle = createStyles(({ token, css }) => ({
`,
copy: css`
position: absolute;
inset-inline-end: 20px;
inset-block-start: 20px;
inset-inline-end: ${token.paddingMD}px;
inset-block-start: ${token.paddingMD}px;
cursor: pointer;
`,
copyTip: css`
@ -49,7 +49,7 @@ const useStyle = createStyles(({ token, css }) => ({
`,
tip: css`
color: ${token.colorTextTertiary};
margin-top: 40px;
margin-top: ${token.marginMD * 2}px;
`,
}));
@ -86,12 +86,12 @@ const DesignPreviewer: FC<AntdPreviewerProps> = ({ children, title, description,
{copied ? (
<div className={styles.copiedTip}>
<CheckOutlined />
<span style={{ marginLeft: 8 }}>已复制，使用 Kitchen 插件即可粘贴</span>
<span style={{ marginInlineStart: 8 }}>已复制，使用 Kitchen 插件即可粘贴</span>
</div>
) : (
<div onClick={handleCopy} className={styles.copyTip}>
<SketchOutlined />
<span style={{ marginLeft: 8 }}>复制 Sketch JSON</span>
<span style={{ marginInlineStart: 8 }}>复制 Sketch JSON</span>
</div>
)}
</div>

6
.dumi/theme/builtins/Previewer/index.tsx
View File

@ -7,12 +7,12 @@ const { ErrorBoundary } = Alert;
const Previewer = React.lazy(() => import('./Previewer'));
const useStyle = createStyles(({ css }) => ({
const useStyle = createStyles(({ token, css }) => ({
skeletonWrapper: css`
width: 100% !important;
height: 250px;
margin-bottom: 16px;
border-radius: 8px;
margin-bottom: ${token.margin}px;
border-radius: ${token.borderRadiusLG}px;
`,
}));

13
.dumi/theme/builtins/ResourceArticles/index.tsx
View File

@ -1,12 +1,13 @@
/* eslint-disable react/no-array-index-key */
import * as React from 'react';
import { Avatar, Divider, Empty, Skeleton, Tabs } from 'antd';
import { createStyles } from 'antd-style';
import dayjs from 'dayjs';
import { FormattedMessage } from 'dumi';
import { createStyles } from 'antd-style';
import { Avatar, Divider, Empty, Skeleton, Tabs } from 'antd';
import useLocale from '../../../hooks/useLocale';
import type { Article, Authors, SiteData } from '../../../pages/index/components/util';
import { useSiteData } from '../../../pages/index/components/util';
import useLocale from '../../../hooks/useLocale';
const useStyle = createStyles(({ token, css }) => {
const { antCls } = token;
@ -16,7 +17,7 @@ const useStyle = createStyles(({ token, css }) => {
h4 {
margin: 40px 0 24px;
font-weight: 500;
font-size: 20px;
font-size: ${token.fontSizeXL}px;
}
${antCls}-skeleton {
@ -26,7 +27,7 @@ const useStyle = createStyles(({ token, css }) => {
ul li {
display: block;
margin-left: 0;
margin-inline-start: 0;
}
}
@ -44,7 +45,7 @@ const useStyle = createStyles(({ token, css }) => {
li {
margin: 1em 0;
padding: 0;
font-size: 14px;
font-size: ${token.fontSize}px;
list-style: none;
overflow: hidden;
text-overflow: ellipsis;

119
.dumi/theme/builtins/ResourceCards/index.tsx
View File

@ -1,65 +1,41 @@
import React from 'react';
import { createStyles } from 'antd-style';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Col, Row, Tooltip } from 'antd';
import { Col, Row, Tooltip, Card, Typography } from 'antd';
import { createStyles } from 'antd-style';
import useLocale from '../../../hooks/useLocale';
const useStyle = createStyles(({ token, css }) => {
const { boxShadowSecondary } = token;
const { Paragraph } = Typography;
return {
card: css`
const useStyle = createStyles(({ token, css }) => ({
card: css`
position: relative;
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
list-style: none;
border: 1px solid ${token.colorSplit};
border-radius: 2px;
cursor: pointer;
transition: box-shadow 0.3s;
overflow: hidden;
&:hover {
box-shadow: ${boxShadowSecondary};
color: inherit;
.ant-card-cover {
overflow: hidden;
}
`,
image: css`
width: calc(100% + 2px);
max-width: none;
height: 184px;
margin: -1px -1px 0;
object-fit: cover;
`,
badge: css`
img {
transition: all ${token.motionDurationSlow} ease-out;
}
&:hover img {
transform: scale(1.3);
`,
badge: css`
position: absolute;
top: 8px;
right: 8px;
padding: 4px 8px;
padding: ${token.paddingXXS}px ${token.paddingXS}px;
color: #fff;
font-size: 12px;
font-size: ${token.fontSizeSM}px;
line-height: 1;
background: rgba(0, 0, 0, 0.65);
border-radius: 1px;
border-radius: ${token.borderRadiusLG}px;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
display: inline-flex;
column-gap: 4px;
column-gap: ${token.paddingXXS}px;
`,
title: css`
margin: 16px 20px 8px;
opacity: 0.85;
font-size: 20px;
line-height: 28px;
`,
description: css`
margin: 0 20px 20px;
opacity: 0.65;
font-size: 14px;
line-height: 22px;
`,
};
});
}));
export type Resource = {
title: string;
@ -90,38 +66,33 @@ const ResourceCard: React.FC<ResourceCardProps> = ({ resource }) => {
const { styles } = useStyle();
const [locale] = useLocale(locales);
const { title: titleStr, description, cover, src, official } = resource;
const { title, description, cover, src, official } = resource;
let coverColor: string | null = null;
let title: string = titleStr;
const titleMatch = titleStr.match(/(.*)(#[\dA-Fa-f]{6})/);
if (titleMatch) {
title = titleMatch[1].trim();
// eslint-disable-next-line prefer-destructuring
coverColor = titleMatch[2];
}
const badge = official ? (
<div className={styles.badge}>{locale.official}</div>
) : (
<Tooltip title={locale.thirdPartDesc}>
<div className={styles.badge}>
<ExclamationCircleOutlined />
{locale.thirdPart}
</div>
</Tooltip>
);
return (
<Col xs={24} sm={12} md={8} lg={6} style={{ padding: 12 }}>
<Col xs={24} sm={12} md={8} lg={6}>
<a className={styles.card} target="_blank" href={src} rel="noreferrer">
<img
className={styles.image}
src={cover}
alt={title}
style={coverColor ? { backgroundColor: coverColor } : {}}
/>
{official ? (
<div className={styles.badge}>{locale.official}</div>
) : (
<Tooltip title={locale.thirdPartDesc}>
<div className={styles.badge}>
<ExclamationCircleOutlined />
{locale.thirdPart}
</div>
</Tooltip>
)}
<p className={styles?.title}>{title}</p>
<p className={styles.description}>{description}</p>
<Card hoverable className={styles.card} cover={<img src={cover} alt={title} />}>
<Card.Meta
title={title}
description={
<Paragraph style={{ marginBottom: 0 }} ellipsis={{ rows: 1 }} title={description}>
{description}
</Paragraph>
}
/>
{badge}
</Card>
</a>
</Col>
);
@ -132,7 +103,7 @@ export type ResourceCardsProps = {
};
const ResourceCards: React.FC<ResourceCardsProps> = ({ resources }) => (
<Row style={{ margin: '-12px -12px 0 -12px' }}>
<Row gutter={[24, 24]}>
{resources.map((item) => (
<ResourceCard resource={item} key={item?.title} />
))}

12
.dumi/theme/builtins/Sandpack/index.tsx
View File

@ -1,8 +1,8 @@
import type { FC, ReactNode } from 'react';
import React, { Suspense } from 'react';
import { useSearchParams } from 'dumi';
import { createStyles } from 'antd-style';
import { Skeleton } from 'antd';
import { createStyles } from 'antd-style';
import { useSearchParams } from 'dumi';
const OriginSandpack = React.lazy(() => import('./Sandpack'));
@ -20,12 +20,12 @@ const useStyle = createStyles(({ token, css }) => ({
width: 100%;
> * {
width: 100% !important;
border-radius: 8px;
border-radius: ${token.borderRadiusLG}px;
}
`,
placeholder: css`
color: ${token.colorTextDescription};
font-size: 16px;
font-size: ${token.fontSizeLG}px;
`,
}));
@ -41,12 +41,12 @@ const SandpackFallback = () => {
);
};
type SandpackProps = {
interface SandpackProps {
children?: ReactNode;
dark?: boolean;
autorun?: boolean;
dependencies?: string;
};
}
const Sandpack: FC<SandpackProps> = ({
children,

21
.dumi/theme/builtins/TokenTable/index.tsx
View File

@ -1,10 +1,11 @@
import type { FC } from 'react';
import * as React from 'react';
import type { TableProps } from 'antd';
import { Table } from 'antd';
import { createStyles } from 'antd-style';
import { getDesignToken } from 'antd-token-previewer';
import tokenMeta from 'antd/es/version/token-meta.json';
import type { TableProps } from 'antd';
import { Table } from 'antd';
import useLocale from '../../../hooks/useLocale';
import ColorChunk from '../ColorChunk';
@ -39,14 +40,14 @@ const locales = {
const useStyle = createStyles(({ token, css }) => ({
codeSpan: css`
margin: 0 1px;
padding: 0.2em 0.4em;
font-size: 0.9em;
background: ${token.siteMarkdownCodeBg};
border: 1px solid ${token.colorSplit};
border-radius: 3px;
font-family: monospace;
`,
margin: 0 1px;
padding: 0.2em 0.4em;
font-size: 0.9em;
background: ${token.siteMarkdownCodeBg};
border: 1px solid ${token.colorSplit};
border-radius: ${token.borderRadiusSM}px;
font-family: monospace;
`,
}));
export function useColumns(): Exclude<TableProps<TokenData>['columns'], undefined> {

11
.dumi/theme/builtins/VideoPlayer/index.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { PauseCircleFilled, PlayCircleFilled } from '@ant-design/icons';
import { createStyles, css } from 'antd-style';
import classNames from 'classnames';
import { PlayCircleFilled, PauseCircleFilled } from '@ant-design/icons';
const useStyles = createStyles(({ cx, token }) => {
const play = css`
@ -41,10 +41,10 @@ const useStyles = createStyles(({ cx, token }) => {
};
});
export default function VideoPlayer({
const VideoPlayer: React.FC<React.HtmlHTMLAttributes<HTMLVideoElement>> = ({
className,
...restProps
}: React.HtmlHTMLAttributes<HTMLVideoElement>) {
}) => {
const { styles } = useStyles();
const videoRef = React.useRef<HTMLVideoElement>(null);
const [playing, setPlaying] = React.useState(false);
@ -69,9 +69,10 @@ export default function VideoPlayer({
>
<div className={classNames(styles.holder)}>
<video ref={videoRef} className={styles.video} muted loop {...restProps} />
<div className={styles.play}>{playing ? <PauseCircleFilled /> : <PlayCircleFilled />}</div>
</div>
</div>
);
}
};
export default VideoPlayer;

14
.dumi/theme/common/BehaviorMap/BehaviorMap.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useRef } from 'react';
import G6 from '@antv/g6';
import { createStyles, css } from 'antd-style';
import { useRouteMeta } from 'dumi';
import React, { useEffect, useRef } from 'react';
G6.registerNode('behavior-start-node', {
draw: (cfg, group) => {
@ -214,13 +214,13 @@ type BehaviorMapItem = {
link?: string;
};
const useStyle = createStyles(() => ({
const useStyle = createStyles(({ token }) => ({
container: css`
width: 100%;
height: 600px;
background-color: #f5f5f5;
border: 1px solid #e8e8e8;
border-radius: 8px;
border-radius: ${token.borderRadiusLG}px;
overflow: hidden;
position: relative;
`,
@ -228,7 +228,7 @@ const useStyle = createStyles(() => ({
position: absolute;
top: 20px;
left: 20px;
font-size: 16px;
font-size: ${token.fontSizeLG}px;
`,
tips: css`
display: flex;
@ -237,14 +237,14 @@ const useStyle = createStyles(() => ({
right: 20px;
`,
mvp: css`
margin-right: 20px;
margin-inline-end: ${token.marginMD}px;
display: flex;
align-items: center;
&::before {
display: block;
width: 8px;
height: 8px;
margin-right: 8px;
margin-inline-end: ${token.marginXS}px;
background-color: #1677ff;
border-radius: 50%;
content: '';
@ -257,7 +257,7 @@ const useStyle = createStyles(() => ({
display: block;
width: 8px;
height: 8px;
margin-right: 8px;
margin-inline-end: ${token.marginXS}px;
background-color: #a0a0a0;
border-radius: 50%;
content: '';

10
.dumi/theme/common/BehaviorMap/index.tsx
View File

@ -1,7 +1,8 @@
import type { FC } from 'react';
import React, { Suspense } from 'react';
import { createStyles } from 'antd-style';
import { Skeleton } from 'antd';
import { createStyles } from 'antd-style';
import type { BehaviorMapProps } from './BehaviorMap';
const InternalBehaviorMap = React.lazy(() => import('./BehaviorMap'));
@ -11,18 +12,17 @@ const useStyle = createStyles(({ token, css }) => ({
width: 100%;
> * {
width: 100% !important;
border-radius: 8px;
border-radius: ${token.borderRadiusLG}px;
}
`,
placeholder: css`
color: ${token.colorTextDescription};
font-size: 16px;
font-size: ${token.fontSizeLG}px;
`,
}));
const BehaviorMapFallback = () => {
const BehaviorMapFallback: React.FC = () => {
const { styles } = useStyle();
return (
<div className={styles.fallback}>
<Skeleton.Node active style={{ height: 600, width: '100%' }}>

23
.dumi/theme/common/CodePreview.tsx
View File

@ -1,10 +1,12 @@
import React, { useEffect, useMemo, type ComponentProps } from 'react';
import type { ComponentProps } from 'react';
import React, { useContext, useEffect, useMemo } from 'react';
import { Button, Tabs, Typography } from 'antd';
import { createStyles } from 'antd-style';
import toReactElement from 'jsonml-to-react-element';
import JsonML from 'jsonml.js/lib/utils';
import Prism from 'prismjs';
import DemoContext from '../slots/DemoContext';
import LiveCode from './LiveCode';
const useStyle = createStyles(({ token, css }) => {
@ -13,7 +15,7 @@ const useStyle = createStyles(({ token, css }) => {
return {
code: css`
position: relative;
margin-top: -16px;
margin-top: -${token.margin}px;
`,
copyButton: css`
@ -21,7 +23,7 @@ const useStyle = createStyles(({ token, css }) => {
position: absolute;
z-index: 2;
top: 16px;
inset-inline-end: 16px;
inset-inline-end: ${token.padding}px;
width: 32px;
text-align: center;
padding: 0;
@ -66,7 +68,6 @@ interface CodePreviewProps
jsxCode?: string;
styleCode?: string;
entryName: string;
onCodeTypeChange?: (activeKey: string) => void;
onSourceChange?: (source: Record<string, string>) => void;
}
@ -91,7 +92,6 @@ const CodePreview: React.FC<CodePreviewProps> = ({
jsxCode = '',
styleCode = '',
entryName,
onCodeTypeChange,
onSourceChange,
error,
}) => {
@ -107,6 +107,7 @@ const CodePreview: React.FC<CodePreviewProps> = ({
initialCodes.style = '';
}
const [highlightedCodes, setHighlightedCodes] = React.useState(initialCodes);
const { codeType, setCodeType } = useContext(DemoContext);
const sourceCodes = {
// omit trailing line break
tsx: sourceCode?.trim(),
@ -120,7 +121,7 @@ const CodePreview: React.FC<CodePreviewProps> = ({
style: Prism.highlight(styleCode, Prism.languages.css, 'css'),
};
// 去掉空的代码类型
Object.keys(codes).forEach((key: keyof typeof codes) => {
(Object.keys(codes) as (keyof typeof codes)[]).forEach((key) => {
if (!codes[key]) {
delete codes[key];
}
@ -177,7 +178,15 @@ const CodePreview: React.FC<CodePreviewProps> = ({
);
}
return <Tabs centered className="highlight" onChange={onCodeTypeChange} items={items} />;
return (
<Tabs
centered
className="highlight"
activeKey={codeType}
onChange={setCodeType}
items={items}
/>
);
};
export default CodePreview;

13
.dumi/theme/common/Color/ColorPaletteTool.tsx
View File

@ -1,9 +1,10 @@
import { FormattedMessage } from 'dumi';
import React, { useMemo, useState } from 'react';
import React from 'react';
import { ColorPicker } from 'antd';
import type { Color } from 'antd/es/color-picker';
import ColorPatterns from './ColorPatterns';
import { FormattedMessage } from 'dumi';
import useLocale from '../../../hooks/useLocale';
import ColorPatterns from './ColorPatterns';
const primaryMinSaturation = 70; // 主色推荐最小饱和度
const primaryMinBrightness = 70; // 主色推荐最小亮度
@ -22,8 +23,8 @@ const locales = {
};
const ColorPaletteTool: React.FC = () => {
const [primaryColor, setPrimaryColor] = useState<string>('#1890ff');
const [primaryColorInstance, setPrimaryColorInstance] = useState<Color>(null);
const [primaryColor, setPrimaryColor] = React.useState<string>('#1890ff');
const [primaryColorInstance, setPrimaryColorInstance] = React.useState<Color>();
const [locale] = useLocale(locales);
@ -32,7 +33,7 @@ const ColorPaletteTool: React.FC = () => {
setPrimaryColorInstance(color);
};
const colorValidation = useMemo<React.ReactNode>(() => {
const colorValidation = React.useMemo<React.ReactNode>(() => {
let text = '';
if (primaryColorInstance) {
const { s, b } = primaryColorInstance.toHsb() || {};

67
.dumi/theme/common/Color/ColorStyle.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Global, css } from '@emotion/react';
import { css, Global } from '@emotion/react';
import { useTheme } from 'antd-style';
const gray: { [key: number]: string } = {
@ -18,7 +18,7 @@ const gray: { [key: number]: string } = {
13: '#000',
};
const ColorStyle = () => {
const ColorStyle: React.FC = () => {
const token = useTheme();
const makePalette = (color: string, index: number = 1): string => {
@ -68,14 +68,14 @@ ${makeGrayPalette(index + 1)}
margin: 45px 3.5% 45px 0;
&:nth-of-type(3n) {
margin-right: 0;
margin-inline-end: 0;
}
.main-color-item {
margin-right: 0;
margin-inline-end: 0;
&:hover {
margin-right: -8px;
margin-inline-end: -${token.paddingXS}px;
}
}
}
@ -88,41 +88,40 @@ ${makeGrayPalette(index + 1)}
margin: 45px 1%;
&-pick {
margin: 0 0 20px;
font-size: 20px;
margin: 0 0 ${token.marginMD}px;
font-size: ${token.fontSizeXL}px;
text-align: center;
}
&-picker {
margin: 24px 0;
margin: ${token.marginLG}px 0;
&-value {
position: relative;
top: -3px;
margin-left: 16px;
font-size: 14px;
margin-inline-start: ${token.margin}px;
font-size: ${token.fontSize}px;
font-family: Consolas, sans-serif;
.ant-row-rtl & {
margin-right: 16px;
margin-left: 0;
margin-inline-end: ${token.margin}px;
margin-inline-start: 0;
}
}
&-validation {
position: relative;
top: -3px;
margin-left: 16px;
margin-inline-start: ${token.margin}px;
color: ${token.colorError};
font-size: 13px;
font-size: ${token.fontSize}px;
.ant-row-rtl & {
margin-right: 16px;
margin-left: 0;
margin-inline-end: ${token.margin}px;
margin-inline-start: 0;
}
&-dark {
margin-left: 0;
margin-inline-start: 0;
}
}
}
@ -148,31 +147,31 @@ ${makeGrayPalette(index + 1)}
&-item {
position: relative;
height: 44px;
margin-right: 4px;
padding: 0 12px;
font-size: 14px;
margin-inline-end: ${token.marginXXS}px;
padding: 0 ${token.paddingSM}px;
font-size: ${token.fontSize}px;
font-family: Consolas, sans-serif;
line-height: 44px;
cursor: pointer;
transition: all 0.2s;
transition: all ${token.motionDurationMid};
&:first-child {
border-radius: 4px 4px 0 0;
border-radius: ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0 0;
}
&:last-child {
border-radius: 0 0 4px 4px;
border-radius: 0 0 ${token.borderRadiusSM}px ${token.borderRadiusSM}px;
}
&:hover {
margin-right: -8px;
border-radius: 0 4px 4px 0;
margin-inline-end: -${token.marginXS}px;
border-radius: 0 ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0;
}
}
&-item &-text {
float: left;
transition: all 0.3s;
transition: all ${token.motionDurationSlow};
}
&-item &-value {
@ -182,12 +181,12 @@ ${makeGrayPalette(index + 1)}
transform: scale(0.85);
transform-origin: 100% 50%;
opacity: 0;
transition: all 0.3s;
transition: all ${token.motionDurationSlow};
}
}
.color-title {
margin: 0 0 24px;
margin: 0 0 ${token.marginLG}px;
color: #5c6b77;
font-weight: 500;
font-size: 22px;
@ -199,7 +198,7 @@ ${makeGrayPalette(index + 1)}
display: block;
color: #777;
font-weight: lighter;
font-size: 14px;
font-size: ${token.fontSize}px;
}
.main-color:hover {
@ -215,7 +214,7 @@ ${makeGrayPalette(index + 1)}
&-dark {
height: 303px;
padding: 32px 28px;
padding: ${token.paddingXL}px ${token.paddingXL - 4}px;
background-color: #141414;
.color-palette-picker {
@ -245,7 +244,7 @@ ${makeGrayPalette(index + 1)}
flex: 1;
box-sizing: border-box;
height: 86px;
margin-right: 0;
margin-inline-end: 0;
padding: 37px 0 0;
line-height: normal;
text-align: center;
@ -258,7 +257,7 @@ ${makeGrayPalette(index + 1)}
&:hover {
height: 96px;
margin-top: -10px;
border-radius: 4px 4px 0 0;
border-radius: ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0 0;
}
}
@ -273,7 +272,7 @@ ${makeGrayPalette(index + 1)}
&:hover {
.main-color-item {
padding-top: 8px;
padding-top: ${token.paddingXS}px;
}
.main-color-value {

6
.dumi/theme/common/Color/Palette.tsx
View File

@ -1,7 +1,7 @@
import { presetDarkPalettes } from '@ant-design/colors';
import React, { useEffect } from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import { presetDarkPalettes } from '@ant-design/colors';
import { message } from 'antd';
import CopyToClipboard from 'react-copy-to-clipboard';
const rgbToHex = (rgbString: string): string => {
const rgb = rgbString.match(/\d+/g);
@ -55,7 +55,7 @@ const Palette: React.FC<PaletteProps> = (props) => {
const colorName = `${english} / ${chinese}`;
const colorPaletteMap = {
dark: ['#fff', 'unset'],
default: ['rgba(0,0,0,0.85)', '#fff'],
default: ['rgba(0, 0, 0, 0.85)', '#fff'],
};
const [lastColor, firstColor] = dark ? colorPaletteMap.dark : colorPaletteMap.default;
for (let i = 1; i <= count; i += 1) {

132
.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
View File

@ -1,13 +1,32 @@
/* eslint-disable global-require */
import React, { useMemo } from 'react';
import { HistoryOutlined } from '@ant-design/icons';
import { Button, Drawer, Timeline, Typography, Grid } from 'antd';
import React from 'react';
import { BugOutlined, HistoryOutlined } from '@ant-design/icons';
import { Button, Drawer, Grid, Popover, Timeline, Typography } from 'antd';
import type { TimelineItemProps } from 'antd';
import { createStyles } from 'antd-style';
import semver from 'semver';
import deprecatedVersions from '../../../../BUG_VERSIONS.json';
import useFetch from '../../../hooks/useFetch';
import useLocale from '../../../hooks/useLocale';
import Link from '../Link';
interface MatchDeprecatedResult {
match?: string;
reason: string[];
}
function matchDeprecated(v: string): MatchDeprecatedResult {
const match = Object.keys(deprecatedVersions).find((depreciated) =>
semver.satisfies(v, depreciated),
);
const reason = deprecatedVersions[match as keyof typeof deprecatedVersions] || [];
return {
match,
reason: Array.isArray(reason) ? reason : [reason],
};
}
const useStyle = createStyles(({ token, css }) => ({
history: css`
position: absolute;
@ -20,7 +39,33 @@ const useStyle = createStyles(({ token, css }) => ({
`,
ref: css`
margin-left: ${token.marginXS}px;
margin-inline-start: ${token.marginXS}px;
`,
bug: css`
font-size: ${token.fontSize}px;
color: #aaa;
margin-inline-start: ${token.marginXS}px;
display: inline-block;
vertical-align: inherit;
cursor: pointer;
&:hover {
color: #333;
}
`,
bugReasonTitle: css`
padding: ${token.paddingXXS}px ${token.paddingXS}px;
`,
bugReasonList: css`
width: 100%;
max-width: 100%;
li {
padding: ${token.paddingXXS}px ${token.paddingXS}px;
a {
display: flex;
align-items: center;
gap: ${token.marginXXS}px;
}
}
`,
}));
@ -34,16 +79,18 @@ const locales = {
changelog: '更新日志',
loading: '加载中...',
empty: '暂无更新',
bugList: 'Bug 版本',
},
en: {
full: 'Full Changelog',
changelog: 'Changelog',
loading: 'loading...',
empty: 'Nothing update',
bugList: 'Bug Versions',
},
};
function ParseChangelog(props: { changelog: string; refs: string[]; styles: any }) {
const ParseChangelog: React.FC<{ changelog: string; refs: string[]; styles: any }> = (props) => {
const { changelog = '', refs = [], styles } = props;
const parsedChangelog = React.useMemo(() => {
@ -78,7 +125,6 @@ function ParseChangelog(props: { changelog: string; refs: string[]; styles: any
<>
{/* Changelog */}
<span>{parsedChangelog}</span>
{/* Refs */}
{refs?.map((ref) => (
<a className={styles.ref} key={ref} href={ref} target="_blank" rel="noreferrer">
@ -87,39 +133,29 @@ function ParseChangelog(props: { changelog: string; refs: string[]; styles: any
))}
</>
);
}
};
type ChangelogInfo = {
interface ChangelogInfo {
version: string;
changelog: string;
refs: string[];
};
}
function useChangelog(componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[] {
const data: any = useFetch(
lang === 'cn'
? {
key: 'component-changelog-cn',
request: () => import('../../../preset/components-changelog-cn.json'),
}
: {
key: 'component-changelog-en',
request: () => import('../../../preset/components-changelog-en.json'),
},
);
return useMemo(() => {
const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[] => {
const data = useFetch({
key: `component-changelog-${lang}`,
request: () => import(`../../../preset/components-changelog-${lang}.json`),
});
return React.useMemo(() => {
const component = componentPath.replace(/-/g, '');
const componentName = Object.keys(data).find(
(name) => name.toLowerCase() === component.toLowerCase(),
);
return data[componentName!];
return data[componentName as keyof typeof data] as ChangelogInfo[];
}, [data, componentPath]);
}
};
export default function ComponentChangelog(props: ComponentChangelogProps) {
const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
const { pathname = '' } = props;
const [locale, lang] = useLocale(locales);
const [show, setShow] = React.useState(false);
@ -130,7 +166,7 @@ export default function ComponentChangelog(props: ComponentChangelogProps) {
const list = useChangelog(componentPath, lang);
const timelineItems = React.useMemo(() => {
const timelineItems = React.useMemo<TimelineItemProps[]>(() => {
const changelogMap: Record<string, ChangelogInfo[]> = {};
list?.forEach((info) => {
@ -140,13 +176,41 @@ export default function ComponentChangelog(props: ComponentChangelogProps) {
return Object.keys(changelogMap).map((version) => {
const changelogList = changelogMap[version];
const bugVersionInfo = matchDeprecated(version);
return {
children: (
<Typography>
<h4>{version}</h4>
<Typography.Title level={4}>
{version}
{bugVersionInfo.match && (
<Popover
destroyTooltipOnHide
placement="right"
title={<span className={styles.bugReasonTitle}>{locale.bugList}</span>}
content={
<ul className={styles.bugReasonList}>
{bugVersionInfo.reason.map<React.ReactNode>((reason, index) => (
<li key={`reason-${index}`}>
<a type="link" target="_blank" rel="noreferrer" href={reason}>
<BugOutlined />
{reason
?.replace(/#.*$/, '')
?.replace(
/^https:\/\/github\.com\/ant-design\/ant-design\/(issues|pull)\//,
'#',
)}
</a>
</li>
))}
</ul>
}
>
<BugOutlined className={styles.bug} />
</Popover>
)}
</Typography.Title>
<ul>
{changelogList.map((info, index) => (
{changelogList.map<React.ReactNode>((info, index) => (
<li key={index} className={styles.li}>
<ParseChangelog {...info} styles={styles} />
</li>
@ -194,4 +258,6 @@ export default function ComponentChangelog(props: ComponentChangelogProps) {
</Drawer>
</>
);
}
};
export default ComponentChangelog;

8
.dumi/theme/common/EditButton.tsx
View File

@ -21,14 +21,12 @@ const useStyle = createStyles(({ token, css }) => {
display: inline-block;
text-decoration: none;
vertical-align: middle;
margin-inline-start: 6px;
margin-inline-start: ${token.marginXS}px;
${iconCls} {
display: block;
color: ${colorIcon};
font-size: 16px;
transition: all 0.3s;
font-size: ${token.fontSizeLG}px;
transition: all ${token.motionDurationSlow};
&:hover {
color: ${colorText};
}

4
.dumi/theme/common/LiveCode.tsx
View File

@ -22,12 +22,12 @@ const useStyle = createStyles(({ token, css }) => {
.dumi-default-source-code > pre,
.dumi-default-source-code-scroll-content > pre,
.dumi-default-source-code-editor-textarea {
padding: 12px 16px;
padding: ${token.paddingSM}px ${token.padding}px;
}
.dumi-default-source-code > pre,
.dumi-default-source-code-scroll-content > pre {
font-size: 13px;
font-size: ${token.fontSize}px;
line-height: 2;
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

21
.dumi/theme/common/PrevAndNext.tsx
View File

@ -1,10 +1,11 @@
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { createStyles } from 'antd-style';
import type { ReactElement } from 'react';
import React, { useMemo, useContext } from 'react';
import classNames from 'classnames';
import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
import React, { useContext, useMemo } from 'react';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { createStyles } from 'antd-style';
import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
import classNames from 'classnames';
import useMenu from '../../hooks/useMenu';
import SiteContext from '../slots/SiteContext';
import type { SiteContextProps } from '../slots/SiteContext';
@ -18,7 +19,7 @@ const useStyle = createStyles(({ token, css }) => {
margin-inline-end: 170px;
margin-inline-start: 64px;
overflow: hidden;
font-size: 14px;
font-size: ${token.fontSize}px;
border-top: 1px solid ${colorSplit};
display: flex;
`,
@ -31,11 +32,11 @@ const useStyle = createStyles(({ token, css }) => {
${iconCls} {
color: #999;
font-size: ${fontSizeIcon}px;
transition: all 0.3s;
transition: all ${token.motionDurationSlow};
}
.chinese {
margin-inline-start: 4px;
margin-inline-start: ${token.marginXXS}px;
}
`,
prevNav: css`
@ -52,7 +53,7 @@ const useStyle = createStyles(({ token, css }) => {
position: relative;
line-height: 0;
vertical-align: middle;
transition: inset-inline-end 0.3s;
transition: inset-inline-end ${token.motionDurationSlow};
margin-inline-end: 1em;
inset-inline-end: 0;
}
@ -76,7 +77,7 @@ const useStyle = createStyles(({ token, css }) => {
margin-bottom: 1px;
line-height: 0;
vertical-align: middle;
transition: inset-inline-start 0.3s;
transition: inset-inline-start ${token.motionDurationSlow};
margin-inline-start: 1em;
inset-inline-start: 0;
}

112
.dumi/theme/common/styles/BrowserMockup.tsx
View File

@ -1,62 +1,68 @@
import { css, Global } from '@emotion/react';
import React from 'react';
import { css, Global } from '@emotion/react';
import { useTheme } from 'antd-style';
export default () => (
<Global
styles={css`
/* Browser mockup code
export default () => {
const token = useTheme();
return (
<Global
styles={css`
/* Browser mockup code
* Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
* Live example: https://updown.io
*/
.browser-mockup {
position: relative;
border-top: 2em solid rgba(230, 230, 230, 0.7);
border-radius: 3px 3px 0 0;
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
}
.browser-mockup {
position: relative;
border-top: 2em solid rgba(230, 230, 230, 0.7);
border-radius: ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0 0;
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
}
.browser-mockup::before {
position: absolute;
top: -1.25em;
left: 1em;
display: block;
width: 0.5em;
height: 0.5em;
background-color: #f44;
border-radius: 50%;
box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
content: '';
}
.browser-mockup::before {
position: absolute;
top: -1.25em;
left: 1em;
display: block;
width: 0.5em;
height: 0.5em;
background-color: #f44;
border-radius: 50%;
box-shadow:
0 0 0 2px #f44,
1.5em 0 0 2px #9b3,
3em 0 0 2px #fb5;
content: '';
}
.browser-mockup.with-tab::after {
position: absolute;
top: -2em;
left: 5.5em;
display: block;
width: 20%;
height: 0;
border-right: 0.8em solid transparent;
border-bottom: 2em solid white;
border-left: 0.8em solid transparent;
content: '';
}
.browser-mockup.with-tab::after {
position: absolute;
top: -2em;
left: 5.5em;
display: block;
width: 20%;
height: 0;
border-right: 0.8em solid transparent;
border-bottom: 2em solid white;
border-left: 0.8em solid transparent;
content: '';
}
.browser-mockup.with-url::after {
position: absolute;
top: -1.6em;
left: 5.5em;
display: block;
width: calc(100% - 6em);
height: 1.2em;
background-color: white;
border-radius: 2px;
content: '';
}
.browser-mockup > * {
display: block;
}
`}
/>
);
.browser-mockup.with-url::after {
position: absolute;
top: -1.6em;
left: 5.5em;
display: block;
width: calc(100% - 6em);
height: 1.2em;
background-color: #fff;
border-radius: ${token.borderRadiusXS}px;
content: '';
}
.browser-mockup > * {
display: block;
}
`}
/>
);
};

33
.dumi/theme/common/styles/Demo.tsx
View File

@ -23,11 +23,11 @@ const GlobalDemoStyles: React.FC = () => {
position: relative;
display: inline-block;
width: calc(100% - ${token.lineWidth * 2}px);
margin: 0 0 16px;
margin: 0 0 ${token.margin}px;
background-color: ${token.colorBgContainer};
border: 1px solid ${token.colorSplit};
border-radius: ${token.borderRadiusLG}px;
transition: all 0.2s;
transition: all ${token.motionDurationMid};
&.code-box-simplify {
border-radius: 0;
@ -74,12 +74,10 @@ const GlobalDemoStyles: React.FC = () => {
&-expand-trigger {
position: relative;
color: #3b4357;
font-size: 20px;
font-size: ${token.fontSizeXL}px;
cursor: pointer;
opacity: 0.75;
transition: all 0.3s;
margin-inline-start: 12px;
transition: all ${token.motionDurationSlow};
&:hover {
opacity: 1;
}
@ -93,7 +91,7 @@ const GlobalDemoStyles: React.FC = () => {
background: ${token.colorBgContainer};
border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0;
transition: background-color 0.4s;
margin-inline-start: 16px;
margin-inline-start: ${token.margin}px;
a,
a:hover {
@ -111,15 +109,15 @@ const GlobalDemoStyles: React.FC = () => {
position: absolute;
top: 7px;
right: -16px;
font-size: 12px;
font-size: ${token.fontSizeSM}px;
text-decoration: none;
background: inherit;
transform: scale(0.9);
padding-inline-end: 6px;
padding-inline-end: ${token.paddingXXS}px;
${iconCls} {
color: ${token.colorTextSecondary};
transition: all 0.3s;
transition: all ${token.motionDurationSlow};
&:hover {
color: ${token.colorText};
@ -164,7 +162,7 @@ const GlobalDemoStyles: React.FC = () => {
> p {
width: 100%;
margin: 0.5em 0;
font-size: 12px;
font-size: ${token.fontSizeSM}px;
word-break: break-word;
padding-inline-end: 25px;
}
@ -244,10 +242,10 @@ const GlobalDemoStyles: React.FC = () => {
&-actions {
display: flex;
justify-content: center;
padding: 12px 0;
padding: ${token.paddingSM}px 0;
border-top: 1px dashed ${token.colorSplit};
opacity: 0.7;
transition: opacity 0.3s;
transition: opacity ${token.motionDurationSlow};
&:hover {
opacity: 1;
@ -276,7 +274,7 @@ const GlobalDemoStyles: React.FC = () => {
&-code-copy {
width: 14px;
height: 14px;
font-size: 14px;
font-size: ${token.fontSize}px;
text-align: center;
background: ${token.colorBgContainer};
cursor: pointer;
@ -331,8 +329,8 @@ const GlobalDemoStyles: React.FC = () => {
background: ${token.colorBgContainer};
border: none;
box-shadow: unset;
padding: 12px 16px;
font-size: 13px;
padding: ${token.paddingSM}px ${token.padding}px;
font-size: ${token.fontSize}px;
}
}
@ -353,6 +351,9 @@ const GlobalDemoStyles: React.FC = () => {
position: absolute;
top: -32px;
inset-inline-end: 0;
display: flex;
align-items: center;
column-gap: ${token.marginSM}px;
}
${antCls}-row-rtl {

74
.dumi/theme/common/styles/HeadingAnchor.tsx
View File

@ -1,43 +1,47 @@
import React from 'react';
import { css, Global } from '@emotion/react';
import { useTheme } from 'antd-style';
export default () => (
<Global
styles={css`
h1,
h2,
h3,
h4,
h5,
h6 {
> a[aria-hidden]:first-child {
float: left;
width: 20px;
padding-inline-end: 4px;
font-size: 0;
line-height: inherit;
text-align: right;
padding-inline-end: 4px;
margin-inline-start: -24px;
export default () => {
const token = useTheme();
return (
<Global
styles={css`
h1,
h2,
h3,
h4,
h5,
h6 {
> a[aria-hidden]:first-child {
float: left;
width: 20px;
padding-inline-end: ${token.paddingXXS}px;
font-size: 0;
line-height: inherit;
text-align: right;
padding-inline-end: ${token.paddingXXS}px;
margin-inline-start: -${token.marginLG}px;
[data-direction='rtl'] & {
float: right;
[data-direction='rtl'] & {
float: right;
}
&:hover {
border: 0;
}
> .icon-link::before {
font-size: ${token.fontSizeXL}px;
content: '#';
}
}
&:hover {
border: 0;
}
> .icon-link::before {
font-size: 20px;
content: '#';
&:not(:hover) > a[aria-hidden]:first-child > .icon-link {
visibility: hidden;
}
}
&:not(:hover) > a[aria-hidden]:first-child > .icon-link {
visibility: hidden;
}
}
`}
/>
);
`}
/>
);
};

10
.dumi/theme/common/styles/Highlight.tsx
View File

@ -16,7 +16,7 @@ export default () => {
pre code {
display: block;
padding: 16px 32px;
padding: ${token.padding}px ${token.paddingXL}px;
color: ${token.colorText};
font-size: ${token.fontSize}px;
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
@ -31,7 +31,7 @@ export default () => {
pre[class*='language-'] {
color: ${token.colorText};
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
line-height: 1.5;
line-height: ${token.lineHeightLG};
direction: ltr;
white-space: pre;
text-align: left;
@ -62,14 +62,14 @@ export default () => {
/* Code blocks */
pre[class*='language-'] {
margin: 16px 0;
padding: 12px 20px;
margin: ${token.margin}px 0;
padding: ${token.paddingSM}px ${token.paddingMD}px;
overflow: auto;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: #f5f5f5;
background: ${token.colorBgLayout};
}
/* Inline code */

22
.dumi/theme/common/styles/Icon.tsx
View File

@ -1,5 +1,5 @@
import { css, Global } from '@emotion/react';
import React from 'react';
import { css, Global } from '@emotion/react';
import { useTheme } from 'antd-style';
export default () => {
@ -28,9 +28,11 @@ export default () => {
text-align: center;
list-style: none;
background-color: inherit;
border-radius: 4px;
border-radius: ${token.borderRadiusSM}px;
cursor: pointer;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
transition:
color ${token.motionDurationSlow} ease-in-out,
background-color ${token.motionDurationSlow} ease-in-out;
.rtl & {
margin: 3px 0;
@ -38,9 +40,9 @@ export default () => {
}
${iconCls} {
margin: 12px 0 8px;
margin: ${token.marginSM}px 0 ${token.marginXS}px;
font-size: 36px;
transition: transform 0.3s ease-in-out;
transition: transform ${token.motionDurationSlow} ease-in-out;
will-change: transform;
}
@ -53,7 +55,7 @@ export default () => {
transform: scale(0.83);
${antCls}-badge {
transition: color 0.3s ease-in-out;
transition: color ${token.motionDurationSlow} ease-in-out;
}
}
@ -89,7 +91,7 @@ export default () => {
text-align: center;
background: #1677ff;
opacity: 0;
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
transition: all ${token.motionDurationSlow} cubic-bezier(0.18, 0.89, 0.32, 1.28);
content: 'Copied!';
}
@ -101,9 +103,9 @@ export default () => {
.copied-code {
padding: 2px 4px;
font-size: 12px;
background: #f5f5f5;
border-radius: 2px;
font-size: ${token.fontSizeSM}px;
background: ${token.colorBgLayout};
border-radius: ${token.borderRadiusXS}px;
}
`}
/>

13
.dumi/theme/common/styles/IconPickSearcher.tsx
View File

@ -1,5 +1,5 @@
import { css, Global } from '@emotion/react';
import React from 'react';
import { css, Global } from '@emotion/react';
import { useTheme } from 'antd-style';
export default () => {
@ -12,12 +12,12 @@ export default () => {
styles={css`
.icon-pic-searcher {
display: inline-block;
margin: 0 8px;
margin: 0 ${token.marginXS}px;
.icon-pic-btn {
color: ${token.colorIcon};
cursor: pointer;
transition: all 0.3s;
transition: all ${token.motionDurationSlow};
&:hover {
color: ${token.colorIconHover};
@ -29,10 +29,10 @@ export default () => {
width: 66px;
height: 66px;
margin-top: 10px;
padding: 8px;
padding: ${token.paddingXS}px;
text-align: center;
border: 1px solid ${token.colorBorder};
border-radius: 4px;
border-radius: ${token.borderRadiusSM}px;
> img {
max-width: 50px;
@ -57,8 +57,7 @@ export default () => {
padding: 10px 0;
> ${iconCls} {
font-size: 30px;
font-size: ${token.fontSizeHeading2}px;
:hover {
color: ${token.colorLinkHover};
}

46
.dumi/theme/common/styles/InlineCard.tsx
View File

@ -1,24 +1,28 @@
import React from 'react';
import { css, Global } from '@emotion/react';
import { useTheme } from 'antd-style';
export default () => (
<Global
styles={css`
.design-inline-cards {
display: flex;
margin: 0 -20px;
}
.design-inline-cards > * {
flex: 10%;
margin: 0 20px;
}
.design-inline-cards img {
width: 100%;
max-width: 100%;
}
.design-inline-cards h4 {
margin-bottom: 0;
}
`}
/>
);
export default () => {
const token = useTheme();
return (
<Global
styles={css`
.design-inline-cards {
display: flex;
margin: 0 -${token.marginMD}px;
}
.design-inline-cards > * {
flex: 10%;
margin: 0 ${token.marginMD}px;
}
.design-inline-cards img {
width: 100%;
max-width: 100%;
}
.design-inline-cards h4 {
margin-bottom: 0;
}
`}
/>
);
};

88
.dumi/theme/common/styles/Markdown.tsx
View File

@ -15,7 +15,7 @@ const GlobalStyle: React.FC = () => {
styles={css`
.markdown {
color: ${token.colorText};
font-size: 14px;
font-size: ${token.fontSize}px;
line-height: 2;
}
@ -47,8 +47,8 @@ const GlobalStyle: React.FC = () => {
}
.markdown h1 {
margin-top: 8px;
margin-bottom: 20px;
margin-top: ${token.marginXS}px;
margin-bottom: ${token.marginMD}px;
color: ${token.colorTextHeading};
font-weight: 500;
font-size: 30px;
@ -56,7 +56,7 @@ const GlobalStyle: React.FC = () => {
line-height: 38px;
.subtitle {
margin-left: 12px;
margin-inline-start: ${token.marginSM}px;
}
}
@ -82,21 +82,21 @@ const GlobalStyle: React.FC = () => {
}
.markdown h4 {
font-size: 16px;
font-size: ${token.fontSizeLG}px;
}
.markdown h5 {
font-size: 14px;
font-size: ${token.fontSize}px;
}
.markdown h6 {
font-size: 12px;
font-size: ${token.fontSizeSM}px;
}
.markdown hr {
clear: both;
height: 1px;
margin: 24px 0;
margin: ${token.marginLG}px 0;
background: ${token.colorSplit};
border: 0;
}
@ -112,15 +112,15 @@ const GlobalStyle: React.FC = () => {
}
.markdown ul > li {
margin-left: 20px;
padding-left: 4px;
margin-inline-start: ${token.marginMD}px;
padding-inline-start: ${token.paddingXXS}px;
list-style-type: circle;
.rtl & {
margin-right: 20px;
margin-left: 0;
padding-right: 4px;
padding-left: 0;
margin-inline-end: ${token.marginMD}px;
margin-inline-start: 0;
padding-inline-end: ${token.paddingXXS}px;
padding-inline-start: 0;
}
&:empty {
@ -129,15 +129,15 @@ const GlobalStyle: React.FC = () => {
}
.markdown ol > li {
margin-left: 20px;
padding-left: 4px;
margin-inline-start: ${token.marginMD}px;
padding-inline-start: ${token.paddingXXS}px;
list-style-type: decimal;
${antCls}-row-rtl & {
margin-right: 20px;
margin-left: 0;
padding-right: 4px;
padding-left: 0;
margin-inline-end: ${token.marginMD}px;
margin-inline-start: 0;
padding-inline-end: ${token.paddingXXS}px;
padding-inline-start: 0;
}
}
@ -152,7 +152,7 @@ const GlobalStyle: React.FC = () => {
font-size: 0.9em;
background: ${token.siteMarkdownCodeBg};
border: 1px solid ${token.colorSplit};
border-radius: 3px;
border-radius: ${token.borderRadiusSM}px;
}
.markdown pre {
@ -169,7 +169,7 @@ const GlobalStyle: React.FC = () => {
font-size: ${Math.max(token.fontSize - 1, 12)}px;
direction: ltr;
text-align: left;
background: #f5f5f5;
background-color: ${token.colorBgLayout};
border: none;
}
@ -183,8 +183,8 @@ const GlobalStyle: React.FC = () => {
background-color: ${token.siteMarkdownCodeBg};
border-radius: ${token.borderRadius}px;
> pre.prism-code {
padding: 12px 20px;
font-size: 13px;
padding: ${token.paddingSM}px ${token.paddingMD}px;
font-size: ${token.fontSize}px;
line-height: 2;
}
}
@ -194,14 +194,14 @@ const GlobalStyle: React.FC = () => {
vertical-align: middle;
}
span {
margin: 0 20px;
margin: 0 ${token.marginMD}px;
color: #aaa;
font-size: 30px;
}
}
.markdown table td > a:not(:last-child) {
margin-right: 0 !important;
margin-inline-end: 0 !important;
&::after {
position: relative !important;
@ -210,14 +210,14 @@ const GlobalStyle: React.FC = () => {
.markdown blockquote {
margin: 1em 0;
padding-left: 0.8em;
padding-inline-start: 0.8em;
color: ${token.colorTextSecondary};
font-size: 90%;
border-left: 4px solid ${token.colorSplit};
.rtl & {
padding-right: 0.8em;
padding-left: 0;
padding-inline-end: 0.8em;
padding-inline-start: 0;
border-right: 4px solid ${token.colorSplit};
border-left: none;
}
@ -228,13 +228,13 @@ const GlobalStyle: React.FC = () => {
}
.markdown .anchor {
margin-left: 8px;
margin-inline-start: ${token.marginXS}px;
opacity: 0;
transition: opacity 0.3s;
transition: opacity ${token.motionDurationSlow};
.rtl & {
margin-right: 8px;
margin-left: 0;
margin-inline-end: ${token.marginXS}px;
margin-inline-start: 0;
}
}
@ -245,20 +245,20 @@ const GlobalStyle: React.FC = () => {
.markdown a.edit-button {
display: inline-block;
margin-left: 8px;
margin-inline-start: ${token.marginXS}px;
text-decoration: none;
.rtl & {
margin-right: 8px;
margin-left: 0;
margin-inline-end: ${token.marginXS}px;
margin-inline-start: 0;
transform: rotateY(180deg);
}
${antCls}icon {
display: block;
color: ${token.colorTextSecondary};
font-size: 16px;
transition: all 0.3s;
font-size: ${token.fontSizeLG}px;
transition: all ${token.motionDurationSlow};
&:hover {
color: ${token.colorText};
@ -294,7 +294,7 @@ const GlobalStyle: React.FC = () => {
th,
td {
padding: 12px 24px;
padding: ${token.paddingSM}px ${token.paddingLG}px;
text-align: left;
border: 1px solid ${token.colorSplit};
@ -320,7 +320,7 @@ const GlobalStyle: React.FC = () => {
}
tbody tr {
transition: all 0.3s;
transition: all ${token.motionDurationSlow};
&:hover {
background: rgba(60, 90, 100, 0.04);
@ -348,7 +348,7 @@ const GlobalStyle: React.FC = () => {
width: 18%;
min-width: 58px;
color: ${token.colorText};
font-weight: 600;
font-weight: ${token.fontWeightStrong};
white-space: nowrap;
}
@ -388,15 +388,15 @@ const GlobalStyle: React.FC = () => {
${antCls}-row > div,
.code-box-demo ${antCls}-row > div {
min-height: 30px;
margin-top: 8px;
margin-bottom: 8px;
margin-top: ${token.marginXS}px;
margin-bottom: ${token.marginXS}px;
color: #fff;
text-align: center;
border-radius: 0;
}
.code-box-demo ${antCls}-row > div:not(.gutter-row) {
padding: 16px 0;
padding: ${token.padding}px 0;
background: ${demoGridColor};
&:nth-child(2n + 1) {

44
.dumi/theme/common/styles/PreviewImage.tsx
View File

@ -1,5 +1,5 @@
import { css, Global } from '@emotion/react';
import React from 'react';
import { css, Global } from '@emotion/react';
import { useTheme } from 'antd-style';
export default () => {
@ -39,11 +39,11 @@ export default () => {
}
.preview-image-box + .preview-image-box {
margin-left: 24px;
margin-inline-start: ${token.marginLG}px;
.ant-row-rtl & {
margin-right: 24px;
margin-left: 0;
margin-inline-end: ${token.marginLG}px;
margin-inline-start: 0;
}
}
@ -51,7 +51,7 @@ export default () => {
position: relative;
display: inline-block;
width: 100%;
padding: 16px;
padding: ${token.padding}px;
text-align: center;
background: #f2f4f5;
box-sizing: border-box;
@ -97,15 +97,15 @@ export default () => {
}
.preview-image-title {
margin-top: 20px;
margin-top: ${token.marginMD}px;
color: ${token.colorText};
font-size: 12px;
font-size: ${token.fontSizeSM}px;
}
.preview-image-description {
margin-top: 2px;
color: ${token.colorTextSecondary};
font-size: 12px;
font-size: ${token.fontSizeSM}px;
line-height: 1.5;
}
@ -118,11 +118,11 @@ export default () => {
.preview-image-box img {
box-sizing: border-box;
max-width: 100%;
padding: 12px;
padding: ${token.paddingSM}px;
background: ${token.colorBgContainer};
border-radius: ${token.borderRadius}px;
cursor: pointer;
transition: all 0.3s;
transition: all ${token.motionDurationSlow};
&.no-padding {
padding: 0;
@ -132,8 +132,12 @@ export default () => {
.preview-image-boxes.preview-image-boxes-with-carousel img {
padding: 0;
box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 ${token.colorBgContainer}, 0 4px 0 0 #ddd,
0 6px 0 0 ${token.colorBgContainer}, 0 7px 0 0 #ddd;
box-shadow:
0 1px 0 0 #ddd,
0 3px 0 0 ${token.colorBgContainer},
0 4px 0 0 #ddd,
0 6px 0 0 ${token.colorBgContainer},
0 7px 0 0 #ddd;
}
.preview-image-box img:hover {
@ -162,7 +166,7 @@ export default () => {
.motion-principle-wrapper {
width: 100%;
max-width: 900px;
margin: 48px 0 24px;
margin: ${token.marginXXL}px 0 ${token.marginLG}px;
}
.principle-wrapper {
@ -173,24 +177,24 @@ export default () => {
box-sizing: border-box;
width: 100%;
min-height: 180px;
margin-right: 12.5%;
margin-bottom: 24px;
padding: 24px;
margin-inline-end: 12.5%;
margin-bottom: ${token.marginLG}px;
padding: ${token.paddingLG}px;
font-size: 24px;
text-align: center;
border: 1px solid #e8e8e8;
border-radius: 4px;
border-radius: ${token.borderRadiusSM}px;
&:last-child {
margin-right: 0;
margin-inline-end: 0;
}
h4 {
margin: 16px 0 8px;
margin: ${token.margin}px 0 ${token.marginXS}px;
}
p {
font-size: 12px;
font-size: ${token.fontSizeSM}px;
line-height: 24px;
}
}

63
.dumi/theme/common/styles/Responsive.tsx
View File

@ -1,5 +1,5 @@
import { css, Global } from '@emotion/react';
import React from 'react';
import { css, Global } from '@emotion/react';
import { useTheme } from 'antd-style';
export default () => {
@ -70,10 +70,10 @@ export default () => {
}
.ant-row-rtl {
margin-right: 0;
margin-left: 0;
padding-right: 16px;
padding-left: 16px;
margin-inline-end: 0;
margin-inline-start: 0;
padding-inline-end: ${token.padding}px;
padding-inline-start: ${token.padding}px;
> .markdown > * {
width: 100% !important;
@ -88,11 +88,10 @@ export default () => {
.prev-next-nav {
width: calc(100% - 32px);
margin-left: 16px;
margin-inline-start: ${token.margin}px;
.ant-row-rtl & {
margin-right: 16px;
margin-left: 64px;
margin-inline-end: ${token.margin}px;
margin-inline-start: 64px;
}
}
@ -137,7 +136,7 @@ export default () => {
.img-wrapper {
position: initial;
margin-top: 20px;
margin-top: ${token.marginMD}px;
text-align: center;
svg {
@ -150,7 +149,7 @@ export default () => {
.text-wrapper {
min-height: 200px;
margin-top: 32px;
margin-top: ${token.marginXL}px;
padding: 0;
h1 {
@ -159,7 +158,7 @@ export default () => {
p {
color: #314659;
font-size: 14px;
font-size: ${token.fontSize}px;
line-height: 28px;
}
@ -170,21 +169,21 @@ export default () => {
text-align: center;
.banner-btn {
padding: 0 20px;
font-size: 14px;
padding: 0 ${token.paddingMD}px;
font-size: ${token.fontSize}px;
}
}
.banner-promote {
min-width: 100%;
margin-top: 32px;
margin-top: ${token.marginXL}px;
.ant-divider {
display: none;
}
a {
font-size: 14px;
font-size: ${token.fontSize}px;
white-space: nowrap;
img {
@ -200,7 +199,6 @@ export default () => {
.ant-row {
margin: 24px auto 64px;
> div {
margin-bottom: 48px;
}
@ -221,7 +219,7 @@ export default () => {
&-product {
min-height: auto;
padding: 0 16px;
padding: 0 ${token.padding}px;
.product-block {
margin-bottom: 34px;
@ -229,7 +227,7 @@ export default () => {
border-bottom: 1px solid ${token.colorSplit};
&:last-child {
margin-bottom: 32px;
margin-bottom: ${token.marginXL}px;
border-bottom: none;
.block-text-wrapper {
@ -250,14 +248,14 @@ export default () => {
border-bottom: none;
h4 {
margin-bottom: 4px;
margin-bottom: ${token.marginXXS}px;
font-size: 18px;
line-height: 24px;
}
p {
margin-bottom: 8px;
font-size: 12px;
margin-bottom: ${token.marginXS}px;
font-size: ${token.fontSizeSM}px;
line-height: 20px;
}
@ -266,8 +264,8 @@ export default () => {
}
.components-button-wrapper {
margin-top: 16px;
font-size: 12px;
margin-top: ${token.margin}px;
font-size: ${token.fontSizeSM}px;
a {
display: block;
@ -291,19 +289,18 @@ export default () => {
.page3 {
min-height: 688px;
background: url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg')
no-repeat;
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg');
background-repeat: no-repeat;
background-size: cover;
.ant-row {
margin: 0 8px;
margin: 0 ${token.marginXS}px;
}
.page3-block {
margin-bottom: 32px;
padding: 24px;
margin-bottom: ${token.marginXL}px;
padding: ${token.paddingLG}px;
background: ${token.colorBgContainer};
border-radius: 4px;
border-radius: ${token.borderRadiusSM}px;
box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3);
&:nth-child(2) {
@ -315,7 +312,7 @@ export default () => {
}
p {
font-size: 12px;
font-size: ${token.fontSizeSM}px;
}
.page3-img-wrapper {
@ -330,7 +327,7 @@ export default () => {
width: 80%;
max-width: initial;
margin: 0;
padding-left: 16px;
padding-inline-start: ${token.padding}px;
}
}
}

4
.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx
View File

@ -24,8 +24,8 @@ const useStyle = createStyles(({ token, css }) => {
transform: translate3d(0, -100%, 0);
opacity: 0;
transition:
opacity 0.3s,
transform 0.3s;
opacity ${token.motionDurationSlow},
transform ${token.motionDurationSlow};
${antCls}-tabs {
max-width: 1208px;

11
.dumi/theme/layouts/ResourceLayout/index.tsx
View File

@ -31,8 +31,8 @@ const useStyle = () => {
.rc-footer-container {
max-width: ${articleMaxWidth}px;
margin: 0 auto;
padding-right: 0;
padding-left: 0;
padding-inline-end: 0;
padding-inline-start: 0;
}
}
`,
@ -48,10 +48,9 @@ const useStyle = () => {
article {
padding: 0 ${resourcePaddingXS}px;
}
${antCls}-col {
padding-top: 16px !important;
padding-bottom: 16px !important;
padding-top: ${token.padding}px !important;
padding-bottom: ${token.padding}px !important;
}
}
}
@ -76,7 +75,7 @@ const useStyle = () => {
max-width: ${articleMaxWidth}px;
margin: 0 auto 56px;
font-weight: 200;
font-size: 16px;
font-size: ${token.fontSizeLG}px;
line-height: 24px;
}

26
.dumi/theme/slots/Content/ColumnCard.tsx
View File

@ -12,15 +12,15 @@ const ANTD_IMG_URL =
const useStyle = createStyles(({ token, css }) => ({
card: css`
width: 100%;
margin: 40px 0;
transition: all 0.2s;
margin: ${token.marginMD * 2}px 0;
transition: all ${token.motionDurationMid};
background-color: ${token.colorFillQuaternary};
`,
bigTitle: css`
font-size: 16px;
color: #121212;
margin-bottom: 24px;
font-weight: 600;
font-size: ${token.fontSizeLG}px;
margin-bottom: ${token.marginLG}px;
font-weight: ${token.fontWeightStrong};
`,
cardBody: css`
display: flex;
@ -33,24 +33,24 @@ const useStyle = createStyles(({ token, css }) => ({
align-items: center;
img {
width: 200px;
margin-right: 24px;
overflow: hidden;
border-radius: 8px;
margin-inline-end: ${token.marginLG}px;
border-radius: ${token.borderRadiusLG}px;
}
`,
title: css`
color: #444;
font-size: 16px;
font-weight: 600;
font-size: ${token.fontSizeLG}px;
font-weight: ${token.fontWeightStrong};
`,
subTitle: css`
display: flex;
justify-content: flex-start;
align-items: center;
color: #646464;
font-size: 14px;
font-size: ${token.fontSize}px;
font-weight: 400;
margin-top: 8px;
margin-top: ${token.marginXS}px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -69,9 +69,9 @@ const useStyle = createStyles(({ token, css }) => ({
}
}
.arrowIcon {
margin: 0 8px;
color: #8a8f8d;
font-size: 12px;
margin: 0 ${token.marginXS}px;
font-size: ${token.fontSizeSM}px;
}
.zl-btn {
display: flex;

6
.dumi/theme/slots/Content/Contributors.tsx
View File

@ -15,9 +15,9 @@ const useStyle = createStyles(({ token, css }) => ({
margin: 1em 0 !important;
`,
title: css`
font-size: 12px;
font-size: ${token.fontSizeSM}px;
opacity: 0.5;
margin-bottom: 8px;
margin-bottom: ${token.marginXS}px;
`,
list: css`
display: flex;
@ -26,7 +26,7 @@ const useStyle = createStyles(({ token, css }) => ({
li {
height: 24px;
transition: all ${token.motionDurationSlow};
margin-inline-end: -8px;
margin-inline-end: -${token.marginXS}px;
}
&:hover {
li {

35
.dumi/theme/slots/Content/DocAnchor.tsx
View File

@ -1,17 +1,17 @@
import React, { useMemo } from 'react';
import React from 'react';
import { Anchor } from 'antd';
import { createStyles, useTheme } from 'antd-style';
import type { AnchorLinkItemProps } from 'antd/es/anchor/Anchor';
import classNames from 'classnames';
import { useRouteMeta, useTabMeta } from 'dumi';
const useStyle = createStyles(({ token, css }) => {
const { antCls } = token;
return {
toc: css`
${antCls}-anchor {
${antCls}-anchor-link-title {
font-size: 12px;
font-size: ${token.fontSizeSM}px;
}
}
`,
@ -20,30 +20,25 @@ const useStyle = createStyles(({ token, css }) => {
top: ${token.headerHeight + token.contentMarginTop - 8}px;
inset-inline-end: 0;
width: 160px;
margin: 0 0 12px 0;
padding: 8px 0;
padding-inline: 4px 8px;
backdrop-filter: blur(8px);
padding: ${token.paddingXS}px;
border-radius: ${token.borderRadius}px;
box-sizing: border-box;
margin-inline-end: calc(16px - 100vw + 100%);
z-index: 10;
.toc-debug {
color: ${token.purple6};
&:hover {
color: ${token.purple5};
}
}
> div {
box-sizing: border-box;
width: 100%;
max-height: calc(100vh - ${token.headerHeight + token.contentMarginTop + 24}px) !important;
margin: 0 auto;
margin: auto;
overflow: auto;
padding-inline: 4px;
padding: ${token.paddingXXS}px;
backdrop-filter: blur(8px);
}
@media only screen and (max-width: ${token.screenLG}px) {
@ -60,7 +55,7 @@ const useStyle = createStyles(({ token, css }) => {
@media only screen and (max-width: ${token.screenLG}px) {
&,
&.rtl {
padding: 0 48px;
padding: 0 ${token.paddingLG * 2}px;
}
}
`,
@ -72,11 +67,11 @@ interface DocAnchorProps {
debugDemos?: string[];
}
type AnchorItem = {
interface AnchorItem {
id: string;
title: string;
children?: AnchorItem[];
};
}
const DocAnchor: React.FC<DocAnchorProps> = ({ showDebug, debugDemos = [] }) => {
const { styles } = useStyle();
@ -84,24 +79,24 @@ const DocAnchor: React.FC<DocAnchorProps> = ({ showDebug, debugDemos = [] }) =>
const meta = useRouteMeta();
const tab = useTabMeta();
const renderAnchorItem = (item: AnchorItem) => ({
const renderAnchorItem = (item: AnchorItem): AnchorLinkItemProps => ({
href: `#${item.id}`,
title: item.title,
key: item.id,
children: item.children
?.filter((child) => showDebug || !debugDemos.includes(child.id))
.map((child) => ({
.map<AnchorLinkItemProps>((child) => ({
key: child.id,
href: `#${child.id}`,
title: (
<span className={classNames(debugDemos.includes(child.id) && 'toc-debug')}>
<span className={classNames({ 'toc-debug': debugDemos.includes(child.id) })}>
{child?.title}
</span>
),
})),
});
const anchorItems = useMemo(
const anchorItems = React.useMemo<AnchorItem[]>(
() =>
(tab?.toc || meta.toc).reduce<AnchorItem[]>((result, item) => {
if (item.depth === 2) {
@ -129,7 +124,7 @@ const DocAnchor: React.FC<DocAnchorProps> = ({ showDebug, debugDemos = [] }) =>
affix={false}
targetOffset={token.anchorTop}
showInkInFixed
items={anchorItems.map(renderAnchorItem)}
items={anchorItems.map<AnchorLinkItemProps>(renderAnchorItem)}
/>
</section>
);

16
.dumi/theme/slots/Content/index.tsx
View File

@ -1,4 +1,4 @@
import React, { useContext, useLayoutEffect, useMemo } from 'react';
import React, { useContext, useLayoutEffect, useMemo, useState } from 'react';
import { Col, Flex, Typography } from 'antd';
import { createStyles } from 'antd-style';
import classNames from 'classnames';
@ -30,7 +30,7 @@ const useStyle = createStyles(({ token, css }) => ({
@media only screen and (max-width: ${token.screenLG}px) {
&,
&.rtl {
padding: 0 48px;
padding: 0 ${token.paddingLG * 2}px;
}
}
`,
@ -43,6 +43,7 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
const { styles } = useStyle();
const [showDebug, setShowDebug] = useLayoutState(false);
const [codeType, setCodeType] = useState('tsx');
const debugDemos = useMemo(
() => meta.toc?.filter((item) => item._debug_demo).map((item) => item.id) || [],
[meta],
@ -55,8 +56,8 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
}, []);
const contextValue = useMemo<DemoContextProps>(
() => ({ showDebug, setShowDebug }),
[showDebug, debugDemos],
() => ({ showDebug, setShowDebug, codeType, setCodeType }),
[showDebug, codeType, debugDemos],
);
const isRTL = direction === 'rtl';
@ -98,12 +99,15 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
{meta.frontmatter.category === 'Components' &&
String(meta.frontmatter.showImport) !== 'false' && (
<ComponentMeta
component={meta.frontmatter.title}
source
component={meta.frontmatter.title}
filename={meta.frontmatter.filename}
version={meta.frontmatter.tag}
/>
)}
<div style={{ minHeight: 'calc(100vh - 64px)' }}>{children}</div>
<div style={{ minHeight: 'calc(100vh - 64px)', width: 'calc(100% - 10px)' }}>
{children}
</div>
<InViewSuspense>
<ColumnCard
zhihuLink={meta.frontmatter.zhihu_url}

3
.dumi/theme/slots/DemoContext.ts
View File

@ -2,11 +2,14 @@ import { createContext } from 'react';
export type DemoContextProps = {
showDebug?: boolean;
codeType?: string;
};
const DemoContext = createContext<{
showDebug?: boolean;
setShowDebug?: (showDebug: boolean) => void;
codeType?: string;
setCodeType?: (codeType: string) => void;
}>({});
export default DemoContext;

7
.dumi/theme/slots/Footer/AdditionalInfo.tsx
View File

@ -1,5 +1,6 @@
import { removeCSS, updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
import * as React from 'react';
import { removeCSS, updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
import useLocale from '../../../hooks/useLocale';
const whereCls = 'ant-where-checker';
@ -20,7 +21,7 @@ const locales = {
// Check for browser support `:where` or not
// Warning user if not support to modern browser
export default function InfoNewVersion() {
function InfoNewVersion() {
const [location] = useLocale(locales);
const [supportWhere, setSupportWhere] = React.useState(true);
@ -84,3 +85,5 @@ export default function InfoNewVersion() {
</div>
);
}
export default InfoNewVersion;

81
.dumi/theme/slots/Footer/index.tsx
View File

@ -1,3 +1,4 @@
import React, { useContext } from 'react';
import {
AntDesignOutlined,
BgColorsOutlined,
@ -14,11 +15,11 @@ import {
} from '@ant-design/icons';
import { TinyColor } from '@ctrl/tinycolor';
import { createStyles } from 'antd-style';
import getAlphaColor from 'antd/es/theme/util/getAlphaColor';
import { FormattedMessage, Link } from 'dumi';
import RcFooter from 'rc-footer';
import type { FooterColumn } from 'rc-footer/lib/column';
import React, { useContext } from 'react';
import getAlphaColor from 'antd/es/theme/util/getAlphaColor';
import useLocale from '../../../hooks/useLocale';
import useLocation from '../../../hooks/useLocation';
import SiteContext from '../SiteContext';
@ -42,47 +43,47 @@ const useStyle = () => {
return {
holder: css`
background: ${background};
`,
background: ${background};
`,
footer: css`
background: ${background};
color: ${token.colorTextSecondary};
box-shadow: inset 0 106px 36px -116px rgba(0, 0, 0, 0.14);
* {
box-sizing: border-box;
}
h2,
a {
color: ${token.colorText};
}
.rc-footer-column {
margin-bottom: ${isMobile ? 60 : 0}px;
:last-child {
margin-bottom: ${isMobile ? 20 : 0}px;
}
}
.rc-footer-item-icon {
top: -1.5px;
}
.rc-footer-container {
max-width: 1208px;
margin-inline: auto;
padding-inline: ${token.marginXXL}px;
}
.rc-footer-bottom {
background: ${background};
color: ${token.colorTextSecondary};
box-shadow: inset 0 106px 36px -116px rgba(0, 0, 0, 0.14);
.rc-footer-bottom-container {
font-size: ${token.fontSize}px;
* {
box-sizing: border-box;
}
}
`,
h2,
a {
color: ${token.colorText};
}
.rc-footer-column {
margin-bottom: ${isMobile ? 60 : 0}px;
:last-child {
margin-bottom: ${isMobile ? 20 : 0}px;
}
}
.rc-footer-item-icon {
top: -1.5px;
}
.rc-footer-container {
max-width: 1208px;
margin-inline: auto;
padding-inline: ${token.marginXXL}px;
}
.rc-footer-bottom {
box-shadow: inset 0 106px 36px -116px rgba(0, 0, 0, 0.14);
.rc-footer-bottom-container {
font-size: ${token.fontSize}px;
}
}
`,
};
})();
};
@ -246,7 +247,7 @@ const Footer: React.FC = () => {
en: 'JoinUs',
}),
LinkComponent: Link,
} as unknown as typeof col2['items'][number]);
} as unknown as (typeof col2)['items'][number]);
}
const col3 = {

2
.dumi/theme/slots/Header/Logo.tsx
View File

@ -30,7 +30,7 @@ const useStyle = createStyles(({ token, css }) => {
img {
height: 32px;
vertical-align: middle;
margin-inline-end: 12px;
margin-inline-end: ${token.marginSM}px;
}
@media only screen and (max-width: ${mobileMaxWidth}px) {

22
.dumi/theme/slots/Header/Navigation.tsx
View File

@ -30,13 +30,21 @@ const locales = {
// ============================= Style =============================
const useStyle = createStyles(({ token }) => {
const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary, colorText } =
token;
const {
antCls,
iconCls,
fontFamily,
fontSize,
headerHeight,
menuItemBorder,
colorPrimary,
colorText,
} = token;
return {
nav: css`
height: 100%;
font-size: 14px;
font-size: ${fontSize}px;
font-family: Avenir, ${fontFamily}, sans-serif;
border: 0;
@ -46,8 +54,8 @@ const useStyle = createStyles(({ token }) => {
& > ${antCls}-menu-item, & > ${antCls}-menu-submenu {
min-width: ${40 + 12 * 2}px;
height: ${headerHeight}px;
padding-right: 12px;
padding-left: 12px;
padding-inline-end: ${token.paddingSM}px;
padding-inline-start: ${token.paddingSM}px;
line-height: ${headerHeight}px;
&::after {
@ -92,11 +100,11 @@ const useStyle = createStyles(({ token }) => {
}
${antCls}-menu-item-group-title {
padding-left: 24px;
padding-inline-start: ${token.paddingLG}px;
}
${antCls}-menu-item-group-list {
padding: 0 16px;
padding: 0 ${token.paddingLG}px;
}
${antCls}-menu-item,

4
.dumi/theme/slots/Header/index.tsx
View File

@ -83,7 +83,7 @@ const useStyle = createStyles(({ token, css }) => {
color: ${searchIconColor};
background-color: rgba(150, 150, 150, 0.06);
border-color: rgba(100, 100, 100, 0.2);
border-radius: 4px;
border-radius: ${token.borderRadiusSM}px;
}
.dumi-default-search-popover {
@ -101,7 +101,7 @@ const useStyle = createStyles(({ token, css }) => {
display: flex;
align-items: center;
margin: 0;
column-gap: 12px;
column-gap: ${token.paddingSM}px;
> * {
flex: none;
margin: 0;

35
.dumi/theme/slots/Sidebar/index.tsx
View File

@ -21,14 +21,14 @@ const useStyle = createStyles(({ token, css }) => {
> ${antCls}-menu-item,
${antCls}-menu-item a {
overflow: hidden;
font-size: 14px;
font-size: ${token.fontSize}px;
text-overflow: ellipsis;
}
> ${antCls}-menu-item-group > ${antCls}-menu-item-group-title {
margin-top: 16px;
margin-bottom: 16px;
font-size: 13px;
margin-top: ${token.margin}px;
margin-bottom: ${token.margin}px;
font-size: ${token.fontSize}px;
&::after {
position: relative;
@ -53,32 +53,32 @@ const useStyle = createStyles(({ token, css }) => {
> ${antCls}-menu-item-group
> ${antCls}-menu-item-group-list
> ${antCls}-menu-item {
padding-left: 40px !important;
padding-inline-start: 40px !important;
${antCls}-row-rtl & {
padding-right: 40px !important;
padding-left: 16px !important;
padding-inline-end: 40px !important;
padding-inline-start: ${token.padding}px !important;
}
}
// Nest Category > Type > Article
&${antCls}-menu-inline {
${antCls}-menu-item-group-title {
margin-left: 4px;
padding-left: 60px;
margin-inline-start: ${token.marginXXS}px;
padding-inline-start: 60px;
${antCls}-row-rtl & {
padding-right: 60px;
padding-left: 16px;
padding-inline-end: 60px;
padding-inline-start: ${token.padding}px;
}
}
${antCls}-menu-item-group-list > ${antCls}-menu-item {
padding-left: 80px !important;
padding-inline-start: 80px !important;
${antCls}-row-rtl & {
padding-right: 80px !important;
padding-left: 16px !important;
padding-inline-end: 80px !important;
padding-inline-start: ${token.padding}px !important;
}
}
}
@ -93,13 +93,6 @@ const useStyle = createStyles(({ token, css }) => {
a[disabled] {
color: #ccc;
}
.chinese {
margin-left: 6px;
font-weight: normal;
font-size: 12px;
opacity: 0.67;
}
`,
mainMenu: css`
z-index: 1;

2
.dumi/tsconfig.json
View File

@ -3,5 +3,5 @@
"compilerOptions": {
"resolveJsonModule": true
},
"include": ["**/*"]
"include": ["**/*", "../typings/index.d.ts"]
}

2
.eslintrc.js
View File

@ -44,6 +44,7 @@ module.exports = {
'no-unused-expressions': 'off',
'@typescript-eslint/no-unused-expressions': 2,
'@typescript-eslint/consistent-type-imports': [2, { disallowTypeAnnotations: false }],
'import/consistent-type-specifier-style': 2,
},
},
{
@ -173,6 +174,7 @@ module.exports = {
'site/**',
'tests/**',
'scripts/**',
'scripts/*.ts',
'**/*.test.js',
'**/__tests__/*',
'*.config.js',

2
.github/workflows/preview-build.yml vendored
View File

@ -122,4 +122,4 @@ jobs:
path: _site
- name: run e2e test
run: npm run site:test
run: npm run test:site

2
.github/workflows/site-deploy.yml vendored
View File

@ -83,7 +83,7 @@ jobs:
run: echo "VERSION=$(echo ${{ github.ref_name }} | sed 's/\./-/g')" >> $GITHUB_OUTPUT
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
uses: peaceiris/actions-gh-pages@v4
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./_site

74
.github/workflows/test.yml vendored
View File

@ -51,6 +51,7 @@ jobs:
lint:
runs-on: ubuntu-latest
needs: setup
steps:
- name: checkout
uses: actions/checkout@v4
@ -79,10 +80,10 @@ jobs:
- name: lint:react-17
run: npm run compile && npm run install-react-17 && npm run tsc:old
needs: setup
check_metadata:
runs-on: ubuntu-latest
needs: setup
steps:
- name: checkout
uses: actions/checkout@v4
@ -102,44 +103,6 @@ jobs:
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
needs: setup
################################ Dist ################################
dist:
name: dist
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 18
- name: restore cache from package-lock.json
uses: actions/cache@v4
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: restore cache from node_modules
uses: actions/cache@v4
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
- name: cache dist
uses: actions/cache@v4
with:
path: dist
key: dist-${{ github.sha }}
- name: dist
run: npm run dist
env:
NODE_OPTIONS: "--max_old_space_size=4096"
CI: 1
needs: setup
################################ Test ################################
normal-test:
@ -152,6 +115,7 @@ jobs:
env:
REACT: ${{ matrix.react }}
runs-on: ubuntu-latest
needs: build
steps:
- name: checkout
uses: actions/checkout@v4
@ -222,7 +186,7 @@ jobs:
# node test
- name: node test
if: ${{ matrix.module == 'node' }}
run: npm run test-node
run: npm run test:node
# dist test
- name: dist test
@ -237,13 +201,12 @@ jobs:
run: npm test
env:
LIB_DIR: dist-min
needs: [setup, dist]
############################ Test Coverage ###########################
upload-test-coverage:
name: test-coverage
runs-on: ubuntu-latest
needs: [normal-test]
needs: normal-test
steps:
- uses: actions/checkout@v4
@ -268,8 +231,9 @@ jobs:
token: ${{ secrets.CODECOV_TOKEN }}
########################### Compile & Test ###########################
compile:
build:
runs-on: ubuntu-latest
needs: setup
steps:
- name: checkout
uses: actions/checkout@v4
@ -311,11 +275,32 @@ jobs:
- name: check use client
run: node ./tests/dekko/use-client.test.js
needs: setup
- name: cache dist
uses: actions/cache@v4
with:
path: dist
key: dist-${{ github.sha }}
- name: dist
run: npm run dist
env:
NODE_OPTIONS: "--max_old_space_size=4096"
CI: 1
- uses: actions/upload-artifact@v4
if: github.event_name == 'push' && github.ref == 'refs/heads/master'
with:
name: build artifacts
path: |
dist
locale
es
lib
compiled-module-test:
name: module test
runs-on: ubuntu-latest
needs: build
strategy:
matrix:
react: ['16', '17', '18']
@ -375,4 +360,3 @@ jobs:
run: npm test -- --maxWorkers=2 --shard=${{matrix.shard}}
env:
LIB_DIR: ${{ matrix.module }}
needs: compile

2
.github/workflows/upgrade-deps.yml vendored
View File

@ -8,7 +8,7 @@ on:
jobs:
upgrade-deps:
runs-on: ubuntu-latest
if: github.ref == 'refs/heads/master'
if: github.repository == 'ant-design/ant-design' && github.ref == 'refs/heads/master'
permissions:
pull-requests: write # for peter-evans/create-pull-request to create PRs
contents: write # for git push

4
.github/workflows/visual-regression-diff-build.yml vendored
View File

@ -80,7 +80,7 @@ jobs:
run: |
node node_modules/puppeteer/install.mjs
npm run version
npm run test-image
npm run test:image
env:
NODE_OPTIONS: "--max_old_space_size=4096"
@ -91,7 +91,7 @@ jobs:
EVENT_NUMBER: ${{ github.event.number }}
BASE_REF: ${{ github.base_ref }}
run: |
npm run visual-regression -- --pr-id=$EVENT_NUMBER --base-ref=$BASE_REF
npm run test:visual-regression -- --pr-id=$EVENT_NUMBER --base-ref=$BASE_REF
# Upload report in `visualRegressionReport`
- name: upload report artifact

6
.github/workflows/visual-regression-diff-finish.yml vendored
View File

@ -72,11 +72,12 @@ jobs:
workflow: ${{ github.event.workflow_run.workflow_id }}
run_id: ${{ github.event.workflow_run.id }}
name: visual-regression-diff-ref
path: ./tmp
# Save PR id to output
- name: save PR id
id: pr
run: echo "id=$(<visual-regression-pr-id.txt)" >> $GITHUB_OUTPUT
run: echo "id=$(<tmp/visual-regression-pr-id.txt)" >> $GITHUB_OUTPUT
# Download report artifact
- name: download report artifact
@ -87,6 +88,7 @@ jobs:
workflow: ${{ github.event.workflow_run.workflow_id }}
run_id: ${{ github.event.workflow_run.id }}
name: visual-regression-report
path: ./tmp
# unzip report and then upload them to oss
- name: upload visual-regression report
@ -97,7 +99,7 @@ jobs:
PR_ID: ${{ steps.pr.outputs.id }}
run: |
mkdir ./visualRegressionReport
tar -xzvf visualRegressionReport.tar.gz -C ./visualRegressionReport
tar -xzvf tmp/visualRegressionReport.tar.gz -C ./visualRegressionReport
echo "✅ Uncompress Finished"
rm package.json

11
.github/workflows/visual-regression-persist-finish.yml vendored
View File

@ -70,11 +70,12 @@ jobs:
workflow: ${{ github.event.workflow_run.workflow_id }}
run_id: ${{ github.event.workflow_run.id }}
name: visual-regression-ref
path: ./tmp
# Save visual-regression ref to output
- name: Extra Visual Regression Ref
id: visual_regression
run: echo "id=$(<visual-regression-ref.txt)" >> $GITHUB_OUTPUT
run: echo "id=$(<tmp/visual-regression-ref.txt)" >> $GITHUB_OUTPUT
- name: Download Visual-Regression Artifact
if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
@ -83,10 +84,10 @@ jobs:
workflow: ${{ github.event.workflow_run.workflow_id }}
run_id: ${{ github.event.workflow_run.id }}
name: image-snapshots
path: ./
path: ./tmp
- name: Persist Image Snapshot to OSS
if: github.event.workflow_run.event == 'push' && (github.event.workflow_run.head_branch == 'master' || github.event.workflow_run.head_branch == 'feature')
if: github.repository == 'ant-design/ant-design' && github.event.workflow_run.event == 'push' && (github.event.workflow_run.head_branch == 'master' || github.event.workflow_run.head_branch == 'feature')
env:
ALI_OSS_AK_ID: ${{ secrets.ALI_OSS_AK_ID }}
ALI_OSS_AK_SECRET: ${{ secrets.ALI_OSS_AK_SECRET }}
@ -97,6 +98,10 @@ jobs:
npm i ali-oss --no-save
echo "✅ Install `ali-oss` Finished"
echo "🔍 Preparing"
mv ./tmp/imageSnapshots.tar.gz ./imageSnapshots.tar.gz
mv ./tmp/visual-regression-ref.txt ./visual-regression-ref.txt
echo "🤖 Uploading"
node scripts/visual-regression/upload.js ./imageSnapshots.tar.gz --ref=$HEAD_SHA
node scripts/visual-regression/upload.js ./visual-regression-ref.txt --ref=$HEAD_BRANCH

2
.github/workflows/visual-regression-persist-start.yml vendored
View File

@ -70,7 +70,7 @@ jobs:
run: |
node node_modules/puppeteer/install.mjs
npm run version
npm run test-image
npm run test:image
tar -czvf imageSnapshots.tar.gz imageSnapshots/*
env:
NODE_OPTIONS: "--max_old_space_size=4096"

2
.gitignore vendored
View File

@ -36,6 +36,7 @@ config/base.yaml
yarn.lock
package-lock.json
pnpm-lock.yaml
bun.lockb
.pnpm-debug.log
components/**/*.js
components/**/*.jsx
@ -43,6 +44,7 @@ components/**/*.jsx
!components/**/__tests__/**/*.js.snap
/.history
*.tmp
artifacts.zip
server/
# Docs templates

7
.ncurc.js
View File

@ -11,7 +11,12 @@ module.exports = {
packageManager: 'npm',
dep: ['prod'], // check only prod dependencies
// https://github.com/raineorshine/npm-check-updates#filter
filter: (name) => check.some((prefix) => name.startsWith(prefix)),
filter: (name) => {
if (name === '@ant-design/cssinjs') {
return false;
}
return check.some((prefix) => name.startsWith(prefix));
},
// https://github.com/raineorshine/npm-check-updates#target
target: (name, semver) => {
const { operator } = semver[0] ?? {};

1
.prettierignore
View File

@ -31,3 +31,4 @@ components/*/*.jsx
.eslintignore
.history
**/*.yml
*.html

3
BUG_VERSIONS.json
View File

@ -52,5 +52,6 @@
"5.12.6": ["https://github.com/ant-design/ant-design/issues/46719"],
"5.13.0": ["https://github.com/ant-design/ant-design/pull/46962"],
"5.14.0": ["https://github.com/ant-design/ant-design/issues/47354"],
"5.15.0": ["https://github.com/ant-design/ant-design/pull/47504#issuecomment-1980459433"]
"5.15.0": ["https://github.com/ant-design/ant-design/pull/47504#issuecomment-1980459433"],
">= 5.16.0 <= 5.16.1": ["https://github.com/ant-design/ant-design/issues/48200"]
}

57
CHANGELOG.en-US.md
View File

@ -16,6 +16,63 @@ tag: vVERSION
---
## 5.16.2
`2024-04-15`
- 🐞 Fix Input.OTP controlled `value` to `''` not work as expect. [#48399](https://github.com/ant-design/ant-design/pull/48399)
- 🐞 Fix DatePicker of `multiple` with week picker not show the selection on the panel. [#48355](https://github.com/ant-design/ant-design/pull/48355)
- 🐞 Fix Upload `listType` with `picture-card` or `picture-circle` has additional space on top. [#48370](https://github.com/ant-design/ant-design/pull/48370)
- Typography
- 🐞 Fix Typography dynamic set `copyable` or `editable` will not show the operation button. [#48350](https://github.com/ant-design/ant-design/pull/48350)
- 🐞 Fix Typography dynamic update `copyable.text` not working. [#48347](https://github.com/ant-design/ant-design/pull/48347)
- 🐞 Fix Typography using `ellipsis` config with `expandable="collapsible"` and `row={1}` at both time will make ellipsis not working as expect. [#48340](https://github.com/ant-design/ant-design/pull/48340)
- 💄 Fix Steps in compact theme not show the correct progress style. [#48251](https://github.com/ant-design/ant-design/pull/48251)
- 💄 Refactor Tabs and wave-related components CSS duration values with `motionDurationSlow` Component Token. [#48311](https://github.com/ant-design/ant-design/pull/48311) [#48312](https://github.com/ant-design/ant-design/pull/48312) [@li-jia-nan](https://github.com/li-jia-nan)
- 🇯🇵 Add Transfer missing ja_JP translations. [#48411](https://github.com/ant-design/ant-design/pull/48411) [@Inshiku-Han](https://github.com/Inshiku-Han)
- 🌐 Fix Picker ja-JP and ko-KR translations. [#48382](https://github.com/ant-design/ant-design/pull/48382) [@li-jia-nan](https://github.com/li-jia-nan)
- 🛠 Use constant instead of enumeration to reduce package size. [#48406](https://github.com/ant-design/ant-design/pull/48406) [@kiner-tang](https://github.com/kiner-tang)
## 5.16.1
`2024-04-05`
- 🛠 Adjust Typography `ellipsis` logic to use CSS ellipsis in SSR to enhance user experience. [#48205](https://github.com/ant-design/ant-design/pull/48205)
- 🐞 Fix FloatButton config `tooltip` and `badge` at same time will make `badge` customize background not working. [#48198](https://github.com/ant-design/ant-design/pull/48198) [@LonelySnowman](https://github.com/LonelySnowman)
## 5.16.0
`2024-03-31`
- 🔥 New component Input.OTP support. [#48076](https://github.com/ant-design/ant-design/pull/48076)
- 🆕 Closable components support `aria-*` in `closable`. [@kiner-tang](https://github.com/kiner-tang)
- 🆕 [Tag](https://github.com/ant-design/ant-design/pull/47678)
- 🆕 [Notification](https://github.com/ant-design/ant-design/pull/47710)
- 🆕 Table add `rowHoverable` to control hover effect. [#48112](https://github.com/ant-design/ant-design/pull/48112) [@madocto](https://github.com/madocto)
- 🆕 Typography support async copy. [#48123](https://github.com/ant-design/ant-design/pull/48123) [@crazyair](https://github.com/crazyair)
- 🆕 Progress support `steps` with `circle`. [#47940](https://github.com/ant-design/ant-design/pull/47940) [@yykoypj](https://github.com/yykoypj)
- 🆕 Table support `onScroll` event for table body scroll. [#47986](https://github.com/ant-design/ant-design/pull/47986)
- 🆕 Typography ellipsis supports expand and collapse. [#47264](https://github.com/ant-design/ant-design/pull/47264) [@crazyair](https://github.com/crazyair)
- 🆕 ConfigProvider support configuring FloatButton.Group `closeIcon`. [#47953](https://github.com/ant-design/ant-design/pull/47953) [@li-jia-nan](https://github.com/li-jia-nan)
- 🆕 Table support `showSorterTooltip.target` prop for sorters. [#47409](https://github.com/ant-design/ant-design/pull/47409) [@Ke1sy](https://github.com/Ke1sy)
- 🆕 Cascader support `optionRender`. [#47727](https://github.com/ant-design/ant-design/pull/47727) [@crazyair](https://github.com/crazyair)
- ⌨️ Popover can be closed by ESC when trigger is `focus` or `click`. [#47928](https://github.com/ant-design/ant-design/pull/47928) [@CooperHash](https://github.com/CooperHash)
- 🐞 Fix Button that vertically center icons when icon-only. [#48178](https://github.com/ant-design/ant-design/pull/48178) [@momesana](https://github.com/momesana)
- 🐞 Fix Modal.confirm content is not centered when icon is null. [#48173](https://github.com/ant-design/ant-design/pull/48173)
- Form [#48163](https://github.com/ant-design/ant-design/pull/48163) [@madocto](https://github.com/madocto)
- 🐞 Fix Form `getValueProps` shouldn't work when FormItem's `name` doesn't exist .
- 🐞 Fix Form's `setFieldsValue` should tread same as `setFields`.
- 🐞 Fixe Table that internationalization of table columns fails when searching. [#48126](https://github.com/ant-design/ant-design/pull/48126) [@LingJinT](https://github.com/LingJinT)
- 🐞 Fix Upload that `onChange` should be triggered when `fileList.length` is larger than `maxCount`. [#47747](https://github.com/ant-design/ant-design/pull/47747) [@Zhou-Bill](https://github.com/Zhou-Bill)
- 🐞 Fix Carousel several <a href="https://github.com/ant-design/react-slick/pull/110" data-hovercard-type="pull_request" data-hovercard-url="/ant-design/react-slick/pull/110/hovercard">bugs</a> by upgrading react-slick changes and renewing TS type. [#48093](https://github.com/ant-design/ant-design/pull/48093)
- 🐞 Fix ColorPicker that displayed cleared color not change after `value` changed. [#47816](https://github.com/ant-design/ant-design/pull/47816) [@MadCcc](https://github.com/MadCcc)
- 🐞 Make Badge consistent with Tag that applay `colorInfo` token in processing. [#47695](https://github.com/ant-design/ant-design/pull/47695) [@pfdgithub](https://github.com/pfdgithub)
- 🇮🇸 Add missing form translations in is_IS. [#48104](https://github.com/ant-design/ant-design/pull/48104) [@LonelySnowman](https://github.com/LonelySnowman)
- 🇺🇿 Add Uzbek(latn) locale. [#47899](https://github.com/ant-design/ant-design/pull/47899)
- TypeScript
- 🤖 Improve Transfer's `key` type, change `key: string` to `key: React.Key`. [#47879](https://github.com/ant-design/ant-design/pull/47879) [@madocto](https://github.com/madocto)
- 🤖 Table support for generic pairs dataIndex props verification . [@crazyair](https://github.com/crazyair)
## 5.15.4
`2024-03-25`

58
CHANGELOG.zh-CN.md
View File

@ -1,7 +1,6 @@
---
order: 6
title: 更新日志
toc: false
timeline: true
tag: vVERSION
---
@ -16,6 +15,63 @@ tag: vVERSION
---
## 5.16.2
`2024-04-15`
- 🐞 修复 Input.OTP 组件受控设置 `value` 为 `''` 时不生效的问题。[#48399](https://github.com/ant-design/ant-design/pull/48399)
- 🐞 修复 DatePicker 对周选择器配置 `multiple` 多选时，弹出面板不会正确高亮选中项的问题。[#48355](https://github.com/ant-design/ant-design/pull/48355)
- 🐞 修复 Upload 配置 `listType` 为 `picture-card` 或 `picture-circle` 时，上方有额外空隙的问题。[#48370](https://github.com/ant-design/ant-design/pull/48370)
- Typography
- 🐞 修复 Typography 动态配置 `copyable` 或 `editable` 时不会显示操作按钮的问题。[#48350](https://github.com/ant-design/ant-design/pull/48350)
- 🐞 修复 Typography 动态调整 `copyable.text` 不生效的问题。[#48347](https://github.com/ant-design/ant-design/pull/48347)
- 🐞 修复 Typography 的 `ellipsis` 同时配置 `expandable="collapsible"` 和 `row={1}` 时，不会正确省略的问题。[#48340](https://github.com/ant-design/ant-design/pull/48340)
- 💄 修复 Steps 的进度样式在紧凑模式下不正确的问题。[#48251](https://github.com/ant-design/ant-design/pull/48251)
- 💄 重构 Tabs 和波纹样式相关组件的 CSS 过渡时间值，替换为 `motionDurationSlow` Component Token。[#48311](https://github.com/ant-design/ant-design/pull/48311) [#48312](https://github.com/ant-design/ant-design/pull/48312) [@li-jia-nan](https://github.com/li-jia-nan)
- 🇯🇵 补充 Transfer 的 ja_JP 本地化文案。[#48411](https://github.com/ant-design/ant-design/pull/48411) [@Inshiku-Han](https://github.com/Inshiku-Han)
- 🌐 修复 Picker 的 ja_JP 和 ko_KR 本地化文案。[#48382](https://github.com/ant-design/ant-design/pull/48382) [@li-jia-nan](https://github.com/li-jia-nan)
- 🛠 使用常量替代枚举减小包体积。[#48406](https://github.com/ant-design/ant-design/pull/48406) [@kiner-tang](https://github.com/kiner-tang)
## 5.16.1
`2024-04-05`
- 🛠 调整 Typography 的 `ellipsis` 使其在 SSR 阶段使用 CSS 省略以优化用户体验。[#48205](https://github.com/ant-design/ant-design/pull/48205)
- 🐞 修复 FloatButton 中同时配置 `tooltip` 和 `badge` 时， `badge` 的自定义背景色会失效的问题。[#48198](https://github.com/ant-design/ant-design/pull/48198) [@LonelySnowman](https://github.com/LonelySnowman)
## 5.16.0
`2024-03-31`
- 🔥 新增 Input.OTP 组件。[#48076](https://github.com/ant-design/ant-design/pull/48076)
- 🆕 可关闭组件支持在 `closable` 中配置 `aria-*` 属性 [@kiner-tang](https://github.com/kiner-tang)
- 🆕 [Tag](https://github.com/ant-design/ant-design/pull/47678)
- 🆕 [Notification](https://github.com/ant-design/ant-design/pull/47710)
- 🆕 Table 增加 `rowHoverable` 开启或关闭 hover 效果。[#48112](https://github.com/ant-design/ant-design/pull/48112) [@madocto](https://github.com/madocto)
- 🆕 Typography 组件支持异步复制。[#48123](https://github.com/ant-design/ant-design/pull/48123) [@crazyair](https://github.com/crazyair)
- 🆕 Progress 组件 `circle` 模式下支持 `steps`。[#47940](https://github.com/ant-design/ant-design/pull/47940) [@yykoypj](https://github.com/yykoypj)
- 🆕 Table 支持 `onScroll` 事件用于监听表单内容滚动。[#47986](https://github.com/ant-design/ant-design/pull/47986)
- 🆕 Typography 省略支持展开和收起。[#47264](https://github.com/ant-design/ant-design/pull/47264) [@crazyair](https://github.com/crazyair)
- 🆕 ConfigProvider 支持配置 FloatButton.Group 的 `closeIcon` 属性。[#47953](https://github.com/ant-design/ant-design/pull/47953) [@li-jia-nan](https://github.com/li-jia-nan)
- 🆕 Table 支持配置排序的 `showSorterTooltip.target` 属性.[#47409](https://github.com/ant-design/ant-design/pull/47409) [@Ke1sy](https://github.com/Ke1sy)
- 🆕 Cascader 支持 `optionRender`。[#47727](https://github.com/ant-design/ant-design/pull/47727) [@crazyair](https://github.com/crazyair)
- ⌨️ Popover 当 `trigger` 是 `focus` 或 `click` 时能被 ESC 按键所关闭。[#47928](https://github.com/ant-design/ant-design/pull/47928) [@CooperHash](https://github.com/CooperHash)
- 🐞 修复 Button 图标位置居中问题。[#48178](https://github.com/ant-design/ant-design/pull/48178) [@momesana](https://github.com/momesana)
- 🐞 修复 Modal.confirm 无图标时内容不居中的问题。[#48173](https://github.com/ant-design/ant-design/pull/48173)
- Form [#48163](https://github.com/ant-design/ant-design/pull/48163) [@madocto](https://github.com/madocto)
- 🐞 修复 Form 当 FormItem 的 `name` 不存在时，`getValueProps` 不应该执行。
- 🐞 修复 Form 的 `setFieldsValue` 和 `setFields` 的行为应该相同。
- 🐞 修复 Table 表格列在搜索情况下，国际化失效的问题。[#48126](https://github.com/ant-design/ant-design/pull/48126) [@LingJinT](https://github.com/LingJinT)
- 🐞 修复 Upload 当文件数量超出限制时，删除不起作用，无法触发 `onChange` 的问题。[#47747](https://github.com/ant-design/ant-design/pull/47747) [@Zhou-Bill](https://github.com/Zhou-Bill)
- 🐞 Carousel 组件同步上游 react-slick 改动，修复一系列<a href="https://github.com/ant-design/react-slick/pull/110" data-hovercard-type="pull_request" data-hovercard-url="/ant-design/react-slick/pull/110/hovercard">问题</a>，并更新到最新 TS 定义。[#48093](https://github.com/ant-design/ant-design/pull/48093)
- 🐞 修复 ColorPicker 展示的清除颜色在受控 `value` 变化后不会改变的问题。[#47816](https://github.com/ant-design/ant-design/pull/47816) [@MadCcc](https://github.com/MadCcc)
- 🐞 Badge 与 Tag 组件保持一致，processing 状态使用 `colorInfo` token 。[#47695](https://github.com/ant-design/ant-design/pull/47695) [@pfdgithub](https://github.com/pfdgithub)
- 🇮🇸 添加冰岛语缺失的 From 翻译。[#48104](https://github.com/ant-design/ant-design/pull/48104) [@LonelySnowman](https://github.com/LonelySnowman)
- 🇺🇿 添加乌兹别克语(拉丁字母) 国际化。[#47899](https://github.com/ant-design/ant-design/pull/47899)
- TypeScript
- 🤖 改进 Transfer 的`key` 类型，将 `key: string` 改为`key: React.Key`。[#47879](https://github.com/ant-design/ant-design/pull/47879) [@madocto](https://github.com/madocto)
- 🤖 Table 支持泛型对 dataIndex 属性校验。[#48190](https://github.com/ant-design/ant-design/pull/48190) [@crazyair](https://github.com/crazyair)
## 5.15.4
`2024-03-25`

4
README-zh_CN.md
View File

@ -149,6 +149,10 @@ export default App;
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
或者使用 opensumi.run 进行在线开发：
[![opensumi.run](https://custom-icon-badges.demolab.com/badge/opensumi-run-blue.svg?logo=opensumi)](https://opensumi.run/ide/ant-design/ant-design)
或者克隆到本地开发:
```bash

4
README.md
View File

@ -141,6 +141,10 @@ Use Gitpod, a free online dev environment for GitHub.
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
Or use opensumi.run, a free online pure front-end dev environemt.
[![opensumi.run](https://custom-icon-badges.demolab.com/badge/opensumi-run-blue.svg?logo=opensumi)](https://opensumi.run/ide/ant-design/ant-design)
Or clone locally:
```bash

1
components/__tests__/setup.test.tsx
View File

@ -1,4 +1,5 @@
import * as React from 'react';
import { render } from '../../tests/utils';
describe('SetUp.Test', () => {

3
components/_util/ActionButton.tsx
View File

@ -1,5 +1,6 @@
import useState from 'rc-util/lib/hooks/useState';
import * as React from 'react';
import useState from 'rc-util/lib/hooks/useState';
import Button from '../button';
import type { ButtonProps, LegacyButtonType } from '../button/button';
import { convertLegacyProps } from '../button/buttonHelpers';

2
components/_util/PurePanel.tsx
View File

@ -45,7 +45,7 @@ const genPurePanel = <ComponentProps extends BaseProps = BaseProps>(
if (typeof ResizeObserver !== 'undefined') {
const resizeObserver = new ResizeObserver((entries) => {
const element: HTMLDivElement = entries[0].target as any;
const element = entries[0].target as HTMLDivElement;
setPopupHeight(element.offsetHeight + 8);
setPopupWidth(element.offsetWidth);
});

69
components/_util/__tests__/hooks.test.tsx
View File

@ -6,9 +6,9 @@ import type { UseClosableParams } from '../hooks/useClosable';
import useClosable from '../hooks/useClosable';
type ParamsOfUseClosable = [
UseClosableParams['closable'],
UseClosableParams['closeIcon'],
UseClosableParams['defaultClosable'],
closable: UseClosableParams['closable'],
closeIcon: UseClosableParams['closeIcon'],
defaultClosable: UseClosableParams['defaultClosable'],
];
describe('hooks test', () => {
@ -81,7 +81,7 @@ describe('hooks test', () => {
res: [false, ''],
},
// test case like: <Component closeIcon={null | false | element} />
// test case like: <Component closeIcon={null | false | element | true} />
{
params: [undefined, null, undefined],
res: [false, ''],
@ -90,6 +90,10 @@ describe('hooks test', () => {
params: [undefined, false, undefined],
res: [false, ''],
},
{
params: [undefined, true, undefined],
res: [true, '.anticon-close'],
},
{
params: [
undefined,
@ -138,11 +142,16 @@ describe('hooks test', () => {
React.isValidElement(params[1]) ? 'element' : params[1]
},defaultClosable=${params[2]}. the result should be ${res}`, () => {
const App = () => {
const [closable, closeIcon] = useClosable({
closable: params[0],
closeIcon: params[1],
defaultClosable: params[2],
});
const [closable, closeIcon] = useClosable(
{
closable: params[0],
closeIcon: params[1],
},
null,
{
closable: params[2],
},
);
useEffect(() => {
expect(closable).toBe(res[0]);
}, [closable]);
@ -159,10 +168,15 @@ describe('hooks test', () => {
it('useClosable with defaultCloseIcon', () => {
const App = () => {
const [closable, closeIcon] = useClosable({
closable: true,
defaultCloseIcon: <CloseOutlined className="custom-close-icon" />,
});
const [closable, closeIcon] = useClosable(
{
closable: true,
},
null,
{
closeIcon: <CloseOutlined className="custom-close-icon" />,
},
);
useEffect(() => {
expect(closable).toBe(true);
}, [closable]);
@ -171,16 +185,37 @@ describe('hooks test', () => {
const { container } = render(<App />);
expect(container.querySelector('.custom-close-icon')).toBeTruthy();
});
it('useClosable without defaultCloseIcon', () => {
const App = () => {
const [closable, closeIcon] = useClosable(
{
closable: true,
},
null,
);
useEffect(() => {
expect(closable).toBe(true);
}, [closable]);
return <div>hooks test {closeIcon}</div>;
};
const { container } = render(<App />);
expect(container.querySelector('.anticon-close')).toBeTruthy();
});
it('useClosable with customCloseIconRender', () => {
const App = () => {
const customCloseIconRender = (icon: React.ReactNode) => (
<span className="custom-close-wrapper">{icon}</span>
);
const [closable, closeIcon] = useClosable({
closable: true,
customCloseIconRender,
});
const [closable, closeIcon] = useClosable(
{
closable: true,
},
null,
{
closeIconRender: customCloseIconRender,
},
);
useEffect(() => {
expect(closable).toBe(true);
}, [closable]);

1
components/_util/__tests__/responsiveObserve.test.tsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import { render } from '../../../tests/utils';
import useResponsiveObserver from '../responsiveObserver';

3
components/_util/__tests__/transButton.test.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import TransButton from '../transButton';
import { render } from '../../../tests/utils';
import TransButton from '../transButton';
describe('transButton component', () => {
it('disabled should update style', () => {

3
components/_util/__tests__/useSyncState.test.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import { fireEvent, render } from '../../../tests/utils';
import useSyncState from '../hooks/useSyncState';
import { render, fireEvent } from '../../../tests/utils';
describe('Table', () => {
it('useSyncState', () => {

3
components/_util/__tests__/util.test.tsx
View File

@ -1,6 +1,7 @@
/* eslint-disable class-methods-use-this */
import KeyCode from 'rc-util/lib/KeyCode';
import React from 'react';
import KeyCode from 'rc-util/lib/KeyCode';
import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
import { isStyleSupport } from '../styleChecker';
import throttleByAnimationFrame from '../throttleByAnimationFrame';

3
components/_util/__tests__/warning.test.tsx
View File

@ -1,5 +1,6 @@
import { render } from '@testing-library/react';
import React from 'react';
import { render } from '@testing-library/react';
import { devUseWarning as useWarning } from '../warning';
describe('Test warning', () => {

3
components/_util/__tests__/wave.test.tsx
View File

@ -1,10 +1,11 @@
import React from 'react';
import classNames from 'classnames';
import mountTest from '../../../tests/shared/mountTest';
import { act, fireEvent, getByText, render, waitFakeTimer } from '../../../tests/utils';
import Checkbox from '../../checkbox';
import Wave from '../wave';
import { TARGET_CLS } from '../wave/interface';
import Checkbox from '../../checkbox';
(global as any).isVisible = true;

2
components/_util/colors.ts
View File

@ -14,7 +14,7 @@ export const PresetStatusColorTypes = [
export type PresetColorType = PresetColorKey | InverseColor;
export type PresetStatusColorType = typeof PresetStatusColorTypes[number];
export type PresetStatusColorType = (typeof PresetStatusColorTypes)[number];
/**
* determine if the color keyword belongs to the `Ant Design` {@link PresetColors}.

205
components/_util/hooks/useClosable.tsx
View File

@ -3,69 +3,174 @@ import React from 'react';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import pickAttrs from 'rc-util/lib/pickAttrs';
export type BaseClosableType = { closeIcon?: React.ReactNode } & React.AriaAttributes;
export type ClosableType = boolean | BaseClosableType;
export type ContextClosable<T extends { closable?: ClosableType; closeIcon?: ReactNode } = any> =
Partial<Pick<T, 'closable' | 'closeIcon'>>;
export function pickClosable<T extends { closable?: ClosableType; closeIcon?: ReactNode }>(
context?: ContextClosable<T>,
): ContextClosable<T> | undefined {
if (!context) {
return undefined;
}
return {
closable: context.closable,
closeIcon: context.closeIcon,
};
}
export type UseClosableParams = {
closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
closable?: ClosableType;
closeIcon?: ReactNode;
defaultClosable?: boolean;
defaultCloseIcon?: ReactNode;
customCloseIconRender?: (closeIcon: ReactNode) => ReactNode;
context?: ContextClosable;
};
function useInnerClosable(
closable?: UseClosableParams['closable'],
closeIcon?: ReactNode,
defaultClosable?: boolean,
) {
if (typeof closable === 'boolean') {
return closable;
}
if (typeof closable === 'object') {
return true;
}
if (closeIcon === undefined) {
return !!defaultClosable;
}
return closeIcon !== false && closeIcon !== null;
/** Convert `closable` and `closeIcon` to config object */
function useClosableConfig(closableCollection?: ClosableCollection | null) {
const { closable, closeIcon } = closableCollection || {};
return React.useMemo(() => {
if (
// If `closable`, whatever rest be should be true
!closable &&
(closable === false || closeIcon === false || closeIcon === null)
) {
return false;
}
if (closable === undefined && closeIcon === undefined) {
return null;
}
let closableConfig: BaseClosableType = {
closeIcon: typeof closeIcon !== 'boolean' && closeIcon !== null ? closeIcon : undefined,
};
if (closable && typeof closable === 'object') {
closableConfig = {
...closableConfig,
...closable,
};
}
return closableConfig;
}, [closable, closeIcon]);
}
function useClosable({
closable,
closeIcon,
customCloseIconRender,
defaultCloseIcon = <CloseOutlined />,
defaultClosable = false,
}: UseClosableParams): [closable: boolean, closeIcon: React.ReactNode | null] {
const mergedClosable = useInnerClosable(closable, closeIcon, defaultClosable);
/**
* Assign object without `undefined` field. Will skip if is `false`.
* This helps to handle both closableConfig or false
*/
function assignWithoutUndefined<T extends object>(
...objList: (Partial<T> | false | null | undefined)[]
): Partial<T> {
const target: Partial<T> = {};
if (!mergedClosable) {
return [false, null];
}
const { closeIcon: closableIcon, ...restProps } =
typeof closable === 'object'
? closable
: ({} as { closeIcon: React.ReactNode } & React.AriaAttributes);
// Priority: closable.closeIcon > closeIcon > defaultCloseIcon
const mergedCloseIcon: ReactNode = (() => {
if (typeof closable === 'object' && closableIcon !== undefined) {
return closableIcon;
objList.forEach((obj) => {
if (obj) {
(Object.keys(obj) as (keyof T)[]).forEach((key) => {
if (obj[key] !== undefined) {
target[key] = obj[key];
}
});
}
return typeof closeIcon === 'boolean' || closeIcon === undefined || closeIcon === null
? defaultCloseIcon
: closeIcon;
})();
const ariaProps = pickAttrs(restProps, true);
});
const plainCloseIcon = customCloseIconRender
? customCloseIconRender(mergedCloseIcon)
: mergedCloseIcon;
return target;
}
const closeIconWithAria = React.isValidElement(plainCloseIcon) ? (
React.cloneElement(plainCloseIcon, ariaProps)
) : (
<span {...ariaProps}>{plainCloseIcon}</span>
/** Collection contains the all the props related with closable. e.g. `closable`, `closeIcon` */
interface ClosableCollection {
closable?: ClosableType;
closeIcon?: ReactNode;
}
/** Use same object to support `useMemo` optimization */
const EmptyFallbackCloseCollection: ClosableCollection = {};
export default function useClosable(
propCloseCollection?: ClosableCollection,
contextCloseCollection?: ClosableCollection | null,
fallbackCloseCollection: ClosableCollection & {
/**
* Some components need to wrap CloseIcon twice,
* this method will be executed once after the final CloseIcon is calculated
*/
closeIconRender?: (closeIcon: ReactNode) => ReactNode;
} = EmptyFallbackCloseCollection,
): [closable: boolean, closeIcon: React.ReactNode | null] {
// Align the `props`, `context` `fallback` to config object first
const propCloseConfig = useClosableConfig(propCloseCollection);
const contextCloseConfig = useClosableConfig(contextCloseCollection);
const mergedFallbackCloseCollection = React.useMemo(
() => ({
closeIcon: <CloseOutlined />,
...fallbackCloseCollection,
}),
[fallbackCloseCollection],
);
return [true, closeIconWithAria];
}
// Use fallback logic to fill the config
const mergedClosableConfig = React.useMemo(() => {
// ================ Props First ================
// Skip if prop is disabled
if (propCloseConfig === false) {
return false;
}
export default useClosable;
if (propCloseConfig) {
return assignWithoutUndefined(
mergedFallbackCloseCollection,
contextCloseConfig,
propCloseConfig,
);
}
// =============== Context Second ==============
// Skip if context is disabled
if (contextCloseConfig === false) {
return false;
}
if (contextCloseConfig) {
return assignWithoutUndefined(mergedFallbackCloseCollection, contextCloseConfig);
}
// ============= Fallback Default ==============
return !mergedFallbackCloseCollection.closable ? false : mergedFallbackCloseCollection;
}, [propCloseConfig, contextCloseConfig, mergedFallbackCloseCollection]);
// Calculate the final closeIcon
return React.useMemo(() => {
if (mergedClosableConfig === false) {
return [false, null];
}
const { closeIconRender } = mergedFallbackCloseCollection;
const { closeIcon } = mergedClosableConfig;
let mergedCloseIcon: ReactNode = closeIcon;
if (mergedCloseIcon !== null && mergedCloseIcon !== undefined) {
// Wrap the closeIcon if needed
if (closeIconRender) {
mergedCloseIcon = closeIconRender(closeIcon);
}
// Wrap the closeIcon with aria props
const ariaProps = pickAttrs(mergedClosableConfig, true);
if (Object.keys(ariaProps).length) {
mergedCloseIcon = React.isValidElement(mergedCloseIcon) ? (
React.cloneElement(mergedCloseIcon, ariaProps)
) : (
<span {...ariaProps}>{mergedCloseIcon}</span>
);
}
}
return [true, mergedCloseIcon];
}, [mergedClosableConfig, mergedFallbackCloseCollection]);
}

Some files were not shown because too many files have changed in this diff Show More