mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
Merge branch 'master' into master
This commit is contained in:
afc163
GitHub
commit
b53205255e
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
36
.dumi/pages/index/components/GroupMaskLayer.tsx
Normal 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;
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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=""
|
||||
/>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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)}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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'>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -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};
|
||||
|
||||
@ -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();
|
||||
|
||||
|
||||
@ -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<{
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
`,
|
||||
}));
|
||||
|
||||
@ -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
142
.dumi/theme/builtins/InstallDependencies/bun.tsx
Normal 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;
|
||||
@ -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 (
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
`,
|
||||
}));
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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} />
|
||||
))}
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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> {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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: '';
|
||||
|
||||
@ -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%' }}>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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() || {};
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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};
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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 */
|
||||
|
||||
@ -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;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
|
||||
@ -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};
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 = {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -3,5 +3,5 @@
|
||||
"compilerOptions": {
|
||||
"resolveJsonModule": true
|
||||
},
|
||||
"include": ["**/*"]
|
||||
"include": ["**/*", "../typings/index.d.ts"]
|
||||
}
|
||||
|
||||
@ -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
2
.github/workflows/preview-build.yml
vendored
@ -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
2
.github/workflows/site-deploy.yml
vendored
@ -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
74
.github/workflows/test.yml
vendored
@ -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
2
.github/workflows/upgrade-deps.yml
vendored
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
2
.gitignore
vendored
@ -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
|
||||
|
||||
@ -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] ?? {};
|
||||
|
||||
@ -31,3 +31,4 @@ components/*/*.jsx
|
||||
.eslintignore
|
||||
.history
|
||||
**/*.yml
|
||||
*.html
|
||||
@ -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"]
|
||||
}
|
||||
|
||||
@ -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`
|
||||
|
||||
@ -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`
|
||||
|
||||
@ -149,6 +149,10 @@ export default App;
|
||||
|
||||
[](https://gitpod.io/#https://github.com/ant-design/ant-design)
|
||||
|
||||
或者使用 opensumi.run 进行在线开发：
|
||||
|
||||
[](https://opensumi.run/ide/ant-design/ant-design)
|
||||
|
||||
或者克隆到本地开发:
|
||||
|
||||
```bash
|
||||
|
||||
@ -141,6 +141,10 @@ Use Gitpod, a free online dev environment for GitHub.
|
||||
|
||||
[](https://gitpod.io/#https://github.com/ant-design/ant-design)
|
||||
|
||||
Or use opensumi.run, a free online pure front-end dev environemt.
|
||||
|
||||
[](https://opensumi.run/ide/ant-design/ant-design)
|
||||
|
||||
Or clone locally:
|
||||
|
||||
```bash
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { render } from '../../tests/utils';
|
||||
|
||||
describe('SetUp.Test', () => {
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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);
|
||||
});
|
||||
|
||||
@ -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,4 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
import { render } from '../../../tests/utils';
|
||||
import useResponsiveObserver from '../responsiveObserver';
|
||||
|
||||
|
||||
@ -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', () => {
|
||||
|
||||
@ -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', () => {
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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', () => {
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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}.
|
||||
|
||||
@ -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
Loading…
Reference in New Issue
Block a user