From 50bf708e59cd6601fbc8b16791df7fbfb18b6d06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Sun, 27 Aug 2023 19:57:19 +0800 Subject: [PATCH 01/14] fix: hooks call warning (#44450) --- .../index/components/PreviewBanner/index.tsx | 108 +++++++++--------- 1 file changed, 55 insertions(+), 53 deletions(-) diff --git a/.dumi/pages/index/components/PreviewBanner/index.tsx b/.dumi/pages/index/components/PreviewBanner/index.tsx index 25ed675aa561..dd8835c03c8c 100644 --- a/.dumi/pages/index/components/PreviewBanner/index.tsx +++ b/.dumi/pages/index/components/PreviewBanner/index.tsx @@ -23,62 +23,64 @@ const locales = { }, }; -const useStyle = createStyles(({ token, css }) => { - const textShadow = `0 0 3px ${token.colorBgContainer}`; +const useStyle = () => { const { direction } = React.useContext(ConfigProvider.ConfigContext); const isRTL = direction === 'rtl'; - return { - holder: css` - height: 520px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - position: relative; - overflow: hidden; - perspective: 800px; - row-gap: ${token.marginXL}px; - `, - - typography: css` - text-align: center; - position: relative; - z-index: 1; - padding-inline: ${token.paddingXL}px; - text-shadow: ${new Array(5) - .fill(null) - .map(() => textShadow) - .join(', ')}; - - h1 { - font-family: AliPuHui, ${token.fontFamily} !important; - font-weight: 900 !important; - font-size: ${token.fontSizeHeading2 * 2}px !important; - line-height: ${token.lineHeightHeading2} !important; - } - - p { - font-size: ${token.fontSizeLG}px !important; - font-weight: normal !important; - margin-bottom: 0; - } - `, - - block: css` - position: absolute; - inset-inline-end: 0; - top: -38px; - transform: ${isRTL ? 'rotate3d(24, 83, -45, 57deg)' : 'rotate3d(24, -83, 45, 57deg)'}; - `, - - child: css` - position: relative; - z-index: 1; - `, - }; -}); - + return createStyles(({ token, css }) => { + const textShadow = `0 0 3px ${token.colorBgContainer}`; + + return { + holder: css` + height: 520px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + perspective: 800px; + row-gap: ${token.marginXL}px; + `, + + typography: css` + text-align: center; + position: relative; + z-index: 1; + padding-inline: ${token.paddingXL}px; + text-shadow: ${new Array(5) + .fill(null) + .map(() => textShadow) + .join(', ')}; + + h1 { + font-family: AliPuHui, ${token.fontFamily} !important; + font-weight: 900 !important; + font-size: ${token.fontSizeHeading2 * 2}px !important; + line-height: ${token.lineHeightHeading2} !important; + } + + p { + font-size: ${token.fontSizeLG}px !important; + font-weight: normal !important; + margin-bottom: 0; + } + `, + + block: css` + position: absolute; + inset-inline-end: 0; + top: -38px; + transform: ${isRTL ? 'rotate3d(24, 83, -45, 57deg)' : 'rotate3d(24, -83, 45, 57deg)'}; + `, + + child: css` + position: relative; + z-index: 1; + `, + }; + })(); +}; export interface PreviewBannerProps { children?: React.ReactNode; } From 3c73256e0b01b7b7f4ba0ffea6a9a43e8add4fea Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sun, 27 Aug 2023 22:52:43 +0800 Subject: [PATCH 02/14] chore(deps): update dependency typedoc to ^0.25.0 (#44443) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(deps): update dependency typedoc to ^0.25.0 * fix: fix type * fix: fix * fix: fix * fix: fix --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: 栗嘉男 <574980606@qq.com> --- package.json | 2 +- scripts/generate-token-meta.ts | 35 ++++++++++++++++------------------ 2 files changed, 17 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 37fd55d531fa..ca42f2ec7e38 100644 --- a/package.json +++ b/package.json @@ -302,7 +302,7 @@ "sylvanas": "^0.6.1", "terser": "^5.16.1", "ts-node": "^10.8.2", - "typedoc": "^0.24.8", + "typedoc": "^0.25.0", "typescript": "~5.1.3", "vanilla-jsoneditor": "^0.18.0", "webpack-bundle-analyzer": "^4.1.0", diff --git a/scripts/generate-token-meta.ts b/scripts/generate-token-meta.ts index 39dca5c685c3..ae864c85b337 100644 --- a/scripts/generate-token-meta.ts +++ b/scripts/generate-token-meta.ts @@ -2,12 +2,12 @@ import fs from 'fs-extra'; import type { DeclarationReflection } from 'typedoc'; import { Application, TSConfigReader, TypeDocReader } from 'typedoc'; -type TokenMeta = { +interface TokenMeta { seed: ReturnType; map: ReturnType; alias: ReturnType; components: Record>; -}; +} function getTokenList(list?: DeclarationReflection[], source?: string) { return (list || []) @@ -40,20 +40,17 @@ function getTokenList(list?: DeclarationReflection[], source?: string) { })); } -const main = () => { - const app = new Application(); - - // If you want TypeDoc to load tsconfig.json / typedoc.json files - app.options.addReader(new TSConfigReader()); - app.options.addReader(new TypeDocReader()); - - app.bootstrap({ - // typedoc options here - entryPoints: ['components/theme/interface/index.ts', 'components/*/style/index.{ts,tsx}'], - skipErrorChecking: true, - }); +const main = async () => { + const app = await (Application as any).bootstrap( + { + // typedoc options here + entryPoints: ['components/theme/interface/index.ts', 'components/*/style/index.{ts,tsx}'], + skipErrorChecking: true, + }, + [new TSConfigReader(), new TypeDocReader()], + ); - const project = app.convert(); + const project = await app.convert(); if (project) { // Project may not have converted correctly @@ -66,11 +63,11 @@ const main = () => { }; // eslint-disable-next-line no-restricted-syntax - project?.children?.forEach((file) => { + project?.children?.forEach((file: any) => { // Global Token if (file.name === 'theme/interface') { let presetColors: string[] = []; - file.children?.forEach((type) => { + file.children?.forEach((type: any) => { if (type.name === 'SeedToken') { tokenMeta.seed = getTokenList(type.children, 'seed'); } else if (type.name === 'MapToken') { @@ -102,8 +99,8 @@ const main = () => { } else { const component = file.name .slice(0, file.name.indexOf('/')) - .replace(/(^(.)|-(.))/g, (match) => match.replace('-', '').toUpperCase()); - const componentToken = file.children?.find((item) => item.name === `ComponentToken`); + .replace(/(^(.)|-(.))/g, (match: string) => match.replace('-', '').toUpperCase()); + const componentToken = file.children?.find((item: any) => item?.name === 'ComponentToken'); if (componentToken) { tokenMeta.components[component] = getTokenList(componentToken.children, component); } From ca0396859b672b3ef95d34bcd1e9277b176d28cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Sun, 27 Aug 2023 23:48:56 +0800 Subject: [PATCH 03/14] refactor: abstract ribbon style (#44451) --- components/badge/Ribbon.tsx | 5 +- components/badge/index.en-US.md | 4 +- components/badge/index.zh-CN.md | 4 +- components/badge/style/index.ts | 71 ++-------- components/badge/style/ribbon.ts | 78 ++++++++++ .../theme/util/genComponentStyleHook.ts | 133 ++++++++++-------- components/theme/util/statistic.ts | 8 +- 7 files changed, 177 insertions(+), 126 deletions(-) create mode 100644 components/badge/style/ribbon.ts diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx index 453c071d0c61..0a4d9b21c3f0 100644 --- a/components/badge/Ribbon.tsx +++ b/components/badge/Ribbon.tsx @@ -1,10 +1,11 @@ -import classNames from 'classnames'; import * as React from 'react'; +import classNames from 'classnames'; + import type { PresetColorType } from '../_util/colors'; import { isPresetColor } from '../_util/colors'; import type { LiteralUnion } from '../_util/type'; import { ConfigContext } from '../config-provider'; -import useStyle from './style'; +import useStyle from './style/ribbon'; type RibbonPlacement = 'start' | 'end'; diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md index 253195ffb89b..5602c7926c5b 100644 --- a/components/badge/index.en-US.md +++ b/components/badge/index.en-US.md @@ -48,13 +48,13 @@ Common props ref：[Common props](/docs/react/common-props) | offset | Set offset of the badge dot | \[number, number] | - | | | overflowCount | Max count to show | number | 99 | | | showZero | Whether to show badge when `count` is zero | boolean | false | | -| size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | 4.6.0 | +| size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | - | | status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - | | | styles | Semantic DOM style | Record | - | 5.7.0 | | text | If `status` is set, `text` sets the display text of the status `dot` | ReactNode | - | | | title | Text to show when hovering over the badge | string | - | | -### Badge.Ribbon (4.5.0+) +### Badge.Ribbon | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index 83640d7aa28a..132cec6b254c 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -49,13 +49,13 @@ group: 数据展示 | offset | 设置状态点的位置偏移 | \[number, number] | - | | | overflowCount | 展示封顶的数字值 | number | 99 | | | showZero | 当数值为 0 时，是否展示 Badge | boolean | false | | -| size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | 4.6.0 | +| size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | - | | status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | - | | | styles | 语义化结构 style | Record | - | 5.7.0 | | text | 在设置了 `status` 的前提下有效，设置状态点的文本 | ReactNode | - | | | title | 设置鼠标放在状态点上时显示的文字 | string | - | | -### Badge.Ribbon (4.5.0+) +### Badge.Ribbon | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts index a55e14abc6fd..5d8ed9de3e3c 100644 --- a/components/badge/style/index.ts +++ b/components/badge/style/index.ts @@ -1,10 +1,12 @@ import type { CSSObject } from '@ant-design/cssinjs'; import { Keyframes } from '@ant-design/cssinjs'; + import { resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal'; +import type { GenStyleFn } from '../../theme/util/genComponentStyleHook'; -interface BadgeToken extends FullToken<'Badge'> { +export interface BadgeToken extends FullToken<'Badge'> { badgeFontHeight: number; badgeZIndex: number | string; badgeHeight: number; @@ -61,17 +63,13 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO componentCls, iconCls, antCls, - badgeFontHeight, badgeShadowSize, badgeHeightSm, motionDurationSlow, badgeStatusSize, marginXS, - badgeRibbonOffset, } = token; const numberPrefixCls = `${antCls}-scroll-number`; - const ribbonPrefixCls = `${antCls}-ribbon`; - const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`; const colorPreset = genPresetColor(token, (colorKey, { darkColor }) => ({ [`&${componentCls} ${componentCls}-color-${colorKey}`]: { @@ -82,13 +80,6 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO }, })); - const statusRibbonPreset = genPresetColor(token, (colorKey, { darkColor }) => ({ - [`&${ribbonPrefixCls}-color-${colorKey}`]: { - background: darkColor, - color: darkColor, - }, - })); - return { [componentCls]: { ...resetComponent(token), @@ -286,59 +277,11 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO }, }, }, - [`${ribbonWrapperPrefixCls}`]: { position: 'relative' }, - [`${ribbonPrefixCls}`]: { - ...resetComponent(token), - position: 'absolute', - top: marginXS, - padding: `0 ${token.paddingXS}px`, - color: token.colorPrimary, - lineHeight: `${badgeFontHeight}px`, - whiteSpace: 'nowrap', - backgroundColor: token.colorPrimary, - borderRadius: token.borderRadiusSM, - [`${ribbonPrefixCls}-text`]: { color: token.colorTextLightSolid }, - [`${ribbonPrefixCls}-corner`]: { - position: 'absolute', - top: '100%', - width: badgeRibbonOffset, - height: badgeRibbonOffset, - color: 'currentcolor', - border: `${badgeRibbonOffset / 2}px solid`, - transform: token.badgeRibbonCornerTransform, - transformOrigin: 'top', - filter: token.badgeRibbonCornerFilter, - }, - ...statusRibbonPreset, - [`&${ribbonPrefixCls}-placement-end`]: { - insetInlineEnd: -badgeRibbonOffset, - borderEndEndRadius: 0, - [`${ribbonPrefixCls}-corner`]: { - insetInlineEnd: 0, - borderInlineEndColor: 'transparent', - borderBlockEndColor: 'transparent', - }, - }, - [`&${ribbonPrefixCls}-placement-start`]: { - insetInlineStart: -badgeRibbonOffset, - borderEndStartRadius: 0, - [`${ribbonPrefixCls}-corner`]: { - insetInlineStart: 0, - borderBlockEndColor: 'transparent', - borderInlineStartColor: 'transparent', - }, - }, - - // ====================== RTL ======================= - '&-rtl': { - direction: 'rtl', - }, - }, }; }; // ============================== Export ============================== -export default genComponentStyleHook('Badge', (token) => { +export const prepareToken: (token: Parameters>[0]) => BadgeToken = (token) => { const { fontSize, lineHeight, fontSizeSM, lineWidth, marginXS, colorBorderBg } = token; const badgeFontHeight = Math.round(fontSize * lineHeight); @@ -378,5 +321,11 @@ export default genComponentStyleHook('Badge', (token) => { badgeRibbonCornerFilter: `brightness(75%)`, }); + return badgeToken; +}; + +export default genComponentStyleHook('Badge', (token) => { + const badgeToken = prepareToken(token); + return [genSharedBadgeStyle(badgeToken)]; }); diff --git a/components/badge/style/ribbon.ts b/components/badge/style/ribbon.ts new file mode 100644 index 000000000000..c25dd0e63c3a --- /dev/null +++ b/components/badge/style/ribbon.ts @@ -0,0 +1,78 @@ +import type { CSSObject } from '@ant-design/cssinjs'; + +import { prepareToken, type BadgeToken } from '.'; +import { resetComponent } from '../../style'; +import type { GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook, genPresetColor } from '../../theme/internal'; + +// ============================== Ribbon ============================== +const genRibbonStyle: GenerateStyle = (token: BadgeToken): CSSObject => { + const { antCls, badgeFontHeight, marginXS, badgeRibbonOffset } = token; + const ribbonPrefixCls = `${antCls}-ribbon`; + const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`; + + const statusRibbonPreset = genPresetColor(token, (colorKey, { darkColor }) => ({ + [`&${ribbonPrefixCls}-color-${colorKey}`]: { + background: darkColor, + color: darkColor, + }, + })); + + return { + [`${ribbonWrapperPrefixCls}`]: { position: 'relative' }, + [`${ribbonPrefixCls}`]: { + ...resetComponent(token), + position: 'absolute', + top: marginXS, + padding: `0 ${token.paddingXS}px`, + color: token.colorPrimary, + lineHeight: `${badgeFontHeight}px`, + whiteSpace: 'nowrap', + backgroundColor: token.colorPrimary, + borderRadius: token.borderRadiusSM, + [`${ribbonPrefixCls}-text`]: { color: token.colorTextLightSolid }, + [`${ribbonPrefixCls}-corner`]: { + position: 'absolute', + top: '100%', + width: badgeRibbonOffset, + height: badgeRibbonOffset, + color: 'currentcolor', + border: `${badgeRibbonOffset / 2}px solid`, + transform: token.badgeRibbonCornerTransform, + transformOrigin: 'top', + filter: token.badgeRibbonCornerFilter, + }, + ...statusRibbonPreset, + [`&${ribbonPrefixCls}-placement-end`]: { + insetInlineEnd: -badgeRibbonOffset, + borderEndEndRadius: 0, + [`${ribbonPrefixCls}-corner`]: { + insetInlineEnd: 0, + borderInlineEndColor: 'transparent', + borderBlockEndColor: 'transparent', + }, + }, + [`&${ribbonPrefixCls}-placement-start`]: { + insetInlineStart: -badgeRibbonOffset, + borderEndStartRadius: 0, + [`${ribbonPrefixCls}-corner`]: { + insetInlineStart: 0, + borderBlockEndColor: 'transparent', + borderInlineStartColor: 'transparent', + }, + }, + + // ====================== RTL ======================= + '&-rtl': { + direction: 'rtl', + }, + }, + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook(['Badge', 'Ribbon'], (token) => { + const badgeToken = prepareToken(token); + + return [genRibbonStyle(badgeToken)]; +}); diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts index 4e3838417d4e..fe0eda8d64dd 100644 --- a/components/theme/util/genComponentStyleHook.ts +++ b/components/theme/util/genComponentStyleHook.ts @@ -1,8 +1,9 @@ /* eslint-disable no-redeclare */ +import { useContext } from 'react'; import type { CSSInterpolation } from '@ant-design/cssinjs'; import { useStyleRegister } from '@ant-design/cssinjs'; import { warning } from 'rc-util'; -import { useContext } from 'react'; + import { ConfigContext } from '../../config-provider/context'; import { genCommonStyle, genLinkStyle } from '../../style'; import type { @@ -48,9 +49,14 @@ export type FullToken = TokenWithCommon GlobalTokenWithComponent >; +export type GenStyleFn = ( + token: FullToken, + info: StyleInfo, +) => CSSInterpolation; + export default function genComponentStyleHook( - component: ComponentName, - styleFn: (token: FullToken, info: StyleInfo) => CSSInterpolation, + componentName: ComponentName | [ComponentName, string], + styleFn: GenStyleFn, getDefaultToken?: | OverrideTokenWithoutDerivative[ComponentName] | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName]), @@ -64,6 +70,14 @@ export default function genComponentStyleHook { const [theme, token, hashId] = useToken(); const { getPrefixCls, iconPrefixCls, csp } = useContext(ConfigContext); @@ -93,62 +107,65 @@ export default function genComponentStyleHook { - const { token: proxyToken, flush } = statisticToken(token); - - const customComponentToken = { ...(token[component] as ComponentToken) }; - if (options?.deprecatedTokens) { - const { deprecatedTokens } = options; - deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => { - if (process.env.NODE_ENV !== 'production') { - warning( - !customComponentToken?.[oldTokenKey], - `The token '${String(oldTokenKey)}' of ${component} had deprecated, use '${String( - newTokenKey, - )}' instead.`, - ); - } - - // Should wrap with `if` clause, or there will be `undefined` in object. - if (customComponentToken?.[oldTokenKey] || customComponentToken?.[newTokenKey]) { - customComponentToken[newTokenKey] ??= customComponentToken?.[oldTokenKey]; - } - }); - } - const defaultComponentToken = - typeof getDefaultToken === 'function' - ? getDefaultToken(mergeToken(proxyToken, customComponentToken ?? {})) - : getDefaultToken; - - const mergedComponentToken = { ...defaultComponentToken, ...customComponentToken }; - - const componentCls = `.${prefixCls}`; - const mergedToken = mergeToken< - TokenWithCommonCls> - >( - proxyToken, - { - componentCls, + useStyleRegister( + { ...sharedConfig, path: [concatComponent, prefixCls, iconPrefixCls] }, + () => { + const { token: proxyToken, flush } = statisticToken(token); + + const customComponentToken = { ...(token[component] as ComponentToken) }; + if (options?.deprecatedTokens) { + const { deprecatedTokens } = options; + deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => { + if (process.env.NODE_ENV !== 'production') { + warning( + !customComponentToken?.[oldTokenKey], + `The token '${String(oldTokenKey)}' of ${component} had deprecated, use '${String( + newTokenKey, + )}' instead.`, + ); + } + + // Should wrap with `if` clause, or there will be `undefined` in object. + if (customComponentToken?.[oldTokenKey] || customComponentToken?.[newTokenKey]) { + customComponentToken[newTokenKey] ??= customComponentToken?.[oldTokenKey]; + } + }); + } + const defaultComponentToken = + typeof getDefaultToken === 'function' + ? getDefaultToken(mergeToken(proxyToken, customComponentToken ?? {})) + : getDefaultToken; + + const mergedComponentToken = { ...defaultComponentToken, ...customComponentToken }; + + const componentCls = `.${prefixCls}`; + const mergedToken = mergeToken< + TokenWithCommonCls> + >( + proxyToken, + { + componentCls, + prefixCls, + iconCls: `.${iconPrefixCls}`, + antCls: `.${rootPrefixCls}`, + }, + mergedComponentToken, + ); + + const styleInterpolation = styleFn(mergedToken as unknown as FullToken, { + hashId, prefixCls, - iconCls: `.${iconPrefixCls}`, - antCls: `.${rootPrefixCls}`, - }, - mergedComponentToken, - ); - - const styleInterpolation = styleFn(mergedToken as unknown as FullToken, { - hashId, - prefixCls, - rootPrefixCls, - iconPrefixCls, - overrideComponentToken: customComponentToken as any, - }); - flush(component, mergedComponentToken); - return [ - options?.resetStyle === false ? null : genCommonStyle(token, prefixCls), - styleInterpolation, - ]; - }), + rootPrefixCls, + iconPrefixCls, + overrideComponentToken: customComponentToken as any, + }); + flush(component, mergedComponentToken); + return [ + options?.resetStyle === false ? null : genCommonStyle(token, prefixCls), + styleInterpolation, + ]; + }, + ), hashId, ]; }; diff --git a/components/theme/util/statistic.ts b/components/theme/util/statistic.ts index 7a9458c5e6ba..affc8022b184 100644 --- a/components/theme/util/statistic.ts +++ b/components/theme/util/statistic.ts @@ -67,7 +67,13 @@ export default function statisticToken(token: T) { }); flush = (componentName, componentToken) => { - statistic[componentName] = { global: Array.from(tokenKeys!), component: componentToken }; + statistic[componentName] = { + global: Array.from(tokenKeys!), + component: { + ...statistic[componentName]?.component, + ...componentToken, + }, + }; }; } From 20d12f8ef23c0437bcb6fb365092f8389b8992a6 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun, 27 Aug 2023 23:57:23 +0800 Subject: [PATCH 04/14] chore(deps-dev): bump typescript from 5.1.6 to 5.2.2 (#44430) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(deps-dev): bump typescript from 5.1.6 to 5.2.2 Bumps [typescript](https://github.com/Microsoft/TypeScript) from 5.1.6 to 5.2.2. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](https://github.com/Microsoft/TypeScript/commits) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] * bump typedoc * type: fix type * fix: fix * type: fix type --------- Signed-off-by: dependabot[bot] Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: 栗嘉男 <574980606@qq.com> Co-authored-by: afc163 --- components/cascader/index.tsx | 11 ++++++----- components/image/index.tsx | 8 +++++--- components/message/index.tsx | 2 +- components/tabs/TabPane.ts | 4 ++-- package.json | 2 +- 5 files changed, 15 insertions(+), 12 deletions(-) diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index 23f48cfd6659..91d31f887561 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -1,5 +1,6 @@ 'use client'; +import * as React from 'react'; import LeftOutlined from '@ant-design/icons/LeftOutlined'; import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; import RightOutlined from '@ant-design/icons/RightOutlined'; @@ -15,18 +16,18 @@ import type { import RcCascader from 'rc-cascader'; import type { Placement } from 'rc-select/lib/BaseSelect'; import omit from 'rc-util/lib/omit'; -import * as React from 'react'; -import genPurePanel from '../_util/PurePanel'; + import type { SelectCommonPlacement } from '../_util/motion'; import { getTransitionName } from '../_util/motion'; +import genPurePanel from '../_util/PurePanel'; import type { InputStatus } from '../_util/statusUtils'; import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'; import warning from '../_util/warning'; import { ConfigContext } from '../config-provider'; -import DisabledContext from '../config-provider/DisabledContext'; -import type { SizeType } from '../config-provider/SizeContext'; import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty'; +import DisabledContext from '../config-provider/DisabledContext'; import useSize from '../config-provider/hooks/useSize'; +import type { SizeType } from '../config-provider/SizeContext'; import { FormItemInputContext } from '../form/context'; import useSelectStyle from '../select/style'; import useBuiltinPlacements from '../select/useBuiltinPlacements'; @@ -40,7 +41,7 @@ import useStyle from './style'; // - Hover opacity style // - Search filter match case -export { BaseOptionType, DefaultOptionType }; +export type { BaseOptionType, DefaultOptionType }; export type FieldNamesType = FieldNames; diff --git a/components/image/index.tsx b/components/image/index.tsx index fb87bacd55ca..e844cc069ccd 100644 --- a/components/image/index.tsx +++ b/components/image/index.tsx @@ -1,9 +1,11 @@ 'use client'; +import * as React from 'react'; import EyeOutlined from '@ant-design/icons/EyeOutlined'; import classNames from 'classnames'; -import RcImage, { type ImageProps } from 'rc-image'; -import * as React from 'react'; +import RcImage from 'rc-image'; +import type { ImageProps } from 'rc-image'; + import { getTransitionName } from '../_util/motion'; import { ConfigContext } from '../config-provider'; import defaultLocale from '../locale/en_US'; @@ -77,7 +79,7 @@ const Image: CompositionImage = (props) => { ); }; -export { ImageProps }; +export type { ImageProps }; Image.PreviewGroup = PreviewGroup; diff --git a/components/message/index.tsx b/components/message/index.tsx index 7d2f1fdf201a..d3216af7fccc 100755 --- a/components/message/index.tsx +++ b/components/message/index.tsx @@ -16,7 +16,7 @@ import PurePanel from './PurePanel'; import useMessage, { useInternalMessage } from './useMessage'; import { wrapPromiseFn } from './util'; -export { ArgsProps }; +export type { ArgsProps }; let message: GlobalMessage | null = null; diff --git a/components/tabs/TabPane.ts b/components/tabs/TabPane.ts index 6583651e32cf..4b252401bd3a 100644 --- a/components/tabs/TabPane.ts +++ b/components/tabs/TabPane.ts @@ -1,5 +1,5 @@ import type * as React from 'react'; -import type { TabPaneProps } from 'rc-tabs/lib/TabPanelList/TabPane'; +import type { TabPaneProps } from 'rc-tabs/es/TabPanelList/TabPane'; const TabPane: React.FC = () => null; @@ -7,6 +7,6 @@ if (process.env.NODE_ENV !== 'production') { TabPane.displayName = 'DeprecatedTabPane'; } -export { TabPaneProps }; +export type { TabPaneProps }; export default TabPane; diff --git a/package.json b/package.json index ca42f2ec7e38..659a1a052238 100644 --- a/package.json +++ b/package.json @@ -303,7 +303,7 @@ "terser": "^5.16.1", "ts-node": "^10.8.2", "typedoc": "^0.25.0", - "typescript": "~5.1.3", + "typescript": "~5.2.2", "vanilla-jsoneditor": "^0.18.0", "webpack-bundle-analyzer": "^4.1.0", "xhr-mock": "^2.4.1" From 20593afaeeeb68e76592ffef2ddc071a47c47cd2 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Mon, 28 Aug 2023 09:38:50 +0800 Subject: [PATCH 05/14] type: revert type import path (#44453) --- components/tabs/TabPane.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tabs/TabPane.ts b/components/tabs/TabPane.ts index 4b252401bd3a..d75078d0045a 100644 --- a/components/tabs/TabPane.ts +++ b/components/tabs/TabPane.ts @@ -1,5 +1,5 @@ import type * as React from 'react'; -import type { TabPaneProps } from 'rc-tabs/es/TabPanelList/TabPane'; +import type { TabPaneProps } from 'rc-tabs/lib/TabPanelList/TabPane'; const TabPane: React.FC = () => null; From 4ba36dc55efa991acbc1a722d61fd56e2c9d6926 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 28 Aug 2023 09:50:18 +0800 Subject: [PATCH 06/14] chore: Update index.zh-CN.md (#44441) Signed-off-by: afc163 --- components/select/index.zh-CN.md | 1 + 1 file changed, 1 insertion(+) diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 468ca665b110..e42030a462d5 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -15,6 +15,7 @@ demo: - 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。 - 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio-cn/) 是更好的选择。 +- 如果你在寻找一个可输可选的输入框，那你可能需要 [AutoComplete](/components/autocomplete-cn/)。 ## 代码演示 From 3e171a9f4f32500f26f6b605574cb84e8da3fe0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2?= Date: Mon, 28 Aug 2023 10:49:18 +0800 Subject: [PATCH 07/14] feat: default add resetIcon Style (#41208) * feat: default add resetIcon Style chore: remove test: add case feat(App): icon reset style feature Revert "feat(App): icon reset style feature" This reverts commit be6905553dcabbd490ad60be0c08c8328736bd62. Revert "chore: remove" This reverts commit 417d5f90051a342325ccc9b5cbf3d249ab0ec826. chore: update chore: update * chore: update * chore: resolve import * chore: update code style --- components/app/__tests__/index.test.tsx | 27 +++++++++++++++ components/config-provider/style/index.ts | 33 ++----------------- components/theme/internal.ts | 2 ++ .../theme/util/genComponentStyleHook.ts | 4 +++ components/theme/util/useResetIconStyle.ts | 31 +++++++++++++++++ 5 files changed, 66 insertions(+), 31 deletions(-) create mode 100644 components/theme/util/useResetIconStyle.ts diff --git a/components/app/__tests__/index.test.tsx b/components/app/__tests__/index.test.tsx index 7cfccbdc93e5..c67fed6ce686 100644 --- a/components/app/__tests__/index.test.tsx +++ b/components/app/__tests__/index.test.tsx @@ -1,3 +1,4 @@ +import { SmileOutlined } from '@ant-design/icons'; import React, { useEffect } from 'react'; import type { NotificationConfig } from 'antd/es/notification/interface'; import App from '..'; @@ -181,4 +182,30 @@ describe('App', () => { ); expect(container.querySelector('.ant-app')).toHaveStyle('color: blue;'); }); + + // https://github.com/ant-design/ant-design/issues/41197#issuecomment-1465803061 + describe('restIcon style', () => { + beforeEach(() => { + Array.from(document.querySelectorAll('style')).forEach((style) => { + style.parentNode?.removeChild(style); + }); + }); + + it('should work by default', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.anticon')).toBeTruthy(); + const dynamicStyles = Array.from(document.querySelectorAll('style[data-css-hash]')); + expect( + dynamicStyles.some((style) => { + const { innerHTML } = style; + return innerHTML.startsWith('.anticon'); + }), + ).toBeTruthy(); + }); + }); }); diff --git a/components/config-provider/style/index.ts b/components/config-provider/style/index.ts index 87514c6073f1..23c40cb76c27 100644 --- a/components/config-provider/style/index.ts +++ b/components/config-provider/style/index.ts @@ -1,31 +1,2 @@ -import { useStyleRegister } from '@ant-design/cssinjs'; -import type { CSPConfig } from '..'; -import { resetIcon } from '../../style'; -import { useToken } from '../../theme/internal'; - -const useStyle = (iconPrefixCls: string, csp?: CSPConfig) => { - const [theme, token] = useToken(); - - // Generate style for icons - return useStyleRegister( - { - theme, - token, - hashId: '', - path: ['ant-design-icons', iconPrefixCls], - nonce: () => csp?.nonce!, - }, - () => [ - { - [`.${iconPrefixCls}`]: { - ...resetIcon(), - [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: { - display: 'block', - }, - }, - }, - ], - ); -}; - -export default useStyle; +// eslint-disable-next-line no-restricted-exports +export { useResetIconStyle as default } from '../../theme/internal'; diff --git a/components/theme/internal.ts b/components/theme/internal.ts index 66c2fb55e5fd..b686ad7d351a 100644 --- a/components/theme/internal.ts +++ b/components/theme/internal.ts @@ -13,6 +13,7 @@ import type { FullToken } from './util/genComponentStyleHook'; import genComponentStyleHook from './util/genComponentStyleHook'; import genPresetColor from './util/genPresetColor'; import statisticToken, { merge as mergeToken } from './util/statistic'; +import useResetIconStyle from './util/useResetIconStyle'; export { DesignTokenContext, defaultConfig } from './context'; export { @@ -22,6 +23,7 @@ export { mergeToken, statisticToken, // hooks + useResetIconStyle, useStyleRegister, useToken, }; diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts index fe0eda8d64dd..1420cfee7395 100644 --- a/components/theme/util/genComponentStyleHook.ts +++ b/components/theme/util/genComponentStyleHook.ts @@ -14,6 +14,7 @@ import type { } from '../interface'; import useToken from '../useToken'; import statisticToken, { merge as mergeToken } from './statistic'; +import useResetIconStyle from './useResetIconStyle'; export type OverrideTokenWithoutDerivative = ComponentTokenMap; export type OverrideComponent = keyof OverrideTokenWithoutDerivative; @@ -106,6 +107,9 @@ export default function genComponentStyleHook { + const [theme, token] = useToken(); + + // Generate style for icons + return useStyleRegister( + { + theme, + token, + hashId: '', + path: ['ant-design-icons', iconPrefixCls], + nonce: () => csp?.nonce!, + }, + () => [ + { + [`.${iconPrefixCls}`]: { + ...resetIcon(), + [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: { + display: 'block', + }, + }, + }, + ], + ); +}; + +export default useResetIconStyle; From 74f6040cdce3cad6d0c096e1c5aebe835bd3d6af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= Date: Mon, 28 Aug 2023 14:58:42 +0800 Subject: [PATCH 08/14] fix: carousel vertical drag issue (#44460) --- components/carousel/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx index 451a95bf8649..7b5ddb0c470a 100644 --- a/components/carousel/index.tsx +++ b/components/carousel/index.tsx @@ -1,9 +1,10 @@ 'use client'; +import * as React from 'react'; import type { Settings } from '@ant-design/react-slick'; import SlickCarousel from '@ant-design/react-slick'; import classNames from 'classnames'; -import * as React from 'react'; + import { ConfigContext } from '../config-provider'; import useStyle from './style'; @@ -116,6 +117,7 @@ const Carousel = React.forwardRef((props, ref) => { dotsClass={dsClass} arrows={arrows} draggable={draggable} + verticalSwiping={vertical} waitForAnimate={waitForAnimate} /> , From bbbc3d9bd5c76510313442ab0fb45d1c4ba7cb12 Mon Sep 17 00:00:00 2001 From: vagusX Date: Mon, 28 Aug 2023 17:18:13 +0800 Subject: [PATCH 09/14] docs: v5.8.5 (#44461) --- CHANGELOG.en-US.md | 18 ++++++++++++++++++ CHANGELOG.zh-CN.md | 18 ++++++++++++++++++ package.json | 2 +- 3 files changed, 37 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 12e8f7c4c226..c57025a57aa3 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -16,6 +16,24 @@ tag: vVERSION --- +## 5.8.5 + +`2023-08-28` + +- 🛠 Refactor Badge style logic and take Ribbon style out to reduce SSR inline style size. [#44451](https://github.com/ant-design/ant-design/pull/44451) +- 🐞 Fix the issue of abnormal icon styling when using `@ant-design/icons`` within App. [#41208](https://github.com/ant-design/ant-design/pull/41208) [@Wxh16144](https://github.com/Wxh16144) +- 🐞 Fix the issue of vertical dragging malfunction in Carousel. [#44460](https://github.com/ant-design/ant-design/pull/44460) [@RedJue](https://github.com/RedJue) +- 🐞 Fix Tour panel use wrong design token. [#44428](https://github.com/ant-design/ant-design/pull/44428) +- 🐞 Fix Form `wrapperCol` with responsive `xs` config not working. [#44388](https://github.com/ant-design/ant-design/pull/44388) +- 🐞 Fix ColorPicker duplicate `key` issue. [#44370](https://github.com/ant-design/ant-design/pull/44370) [@xr0master](https://github.com/xr0master) +- 🐞 Fix Radio that not work in Tree title. [#44380](https://github.com/ant-design/ant-design/pull/44380) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix Table that would crash when `filterDropdown` does not support `ref`. [#44357](https://github.com/ant-design/ant-design/pull/44357) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix Form `inline` layout show extra bottom margin when validation failed. [#44360](https://github.com/ant-design/ant-design/pull/44360) +- 🐞 Fix DatePicker `showTime` working error when `format` is Array. [#44306](https://github.com/ant-design/ant-design/pull/44306) [@Zian502](https://github.com/Zian502) +- 🐞 Fix Watermark can not be fully shown when `content` is too long. [#44321](https://github.com/ant-design/ant-design/pull/44321) +- TypeScript + - 🤖 Fix the type error with align property in Dropdown component. [#44423](https://github.com/ant-design/ant-design/pull/44423) [@LeTuongKhanh](https://github.com/LeTuongKhanh) + ## 5.8.4 `2023-08-18` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 9eab1234e88a..d680fda23212 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -16,6 +16,24 @@ tag: vVERSION --- +## 5.8.5 + +`2023-08-28` + +- 🛠 重构 Badge 样式逻辑将 Ribbon 样式抽离以降低 SSR 内联样式尺寸。[#44451](https://github.com/ant-design/ant-design/pull/44451) +- 🐞 修复 App 组件下使用 `@ant-design/icons` 的图标样式异常的问题。[#41208](https://github.com/ant-design/ant-design/pull/41208) [@Wxh16144](https://github.com/Wxh16144) +- 🐞 修复 Carousel 组件垂直方向拖动失效的问题。[#44460](https://github.com/ant-design/ant-design/pull/44460) [@RedJue](https://github.com/RedJue) +- 🐞 修复 Tour 面板使用的 design token 错误的问题。[#44428](https://github.com/ant-design/ant-design/pull/44428) +- 🐞 修复 Form `wrapperCol` 配置响应式 `xs` 属性无效的问题。[#44388](https://github.com/ant-design/ant-design/pull/44388) +- 🐞 修复 ColorPicker 中重复 `key` 的问题。[#44370](https://github.com/ant-design/ant-design/pull/44370) [@xr0master](https://github.com/xr0master) +- 🐞 修复 Radio 组件组合 Tree 组件后失效的问题。[#44380](https://github.com/ant-design/ant-design/pull/44380) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Table 组件 `filterDropdown` 不支持 `ref` 时报错的问题。[#44357](https://github.com/ant-design/ant-design/pull/44357) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Form `inline` 布局在校验失败时出现额外空行的问题。[#44360](https://github.com/ant-design/ant-design/pull/44360) +- 🐞 修复 DatePicker 中 `showTime` 为 true 且 `format` 为数组时，组件报错。[#44306](https://github.com/ant-design/ant-design/pull/44306) [@Zian502](https://github.com/Zian502) +- 🐞 修复 Watermark 中 `content` 内容过长时无法完整显示的问题。[#44321](https://github.com/ant-design/ant-design/pull/44321) +- TypeScript + - 🤖 修复 Dropdown 组件中 `align` 属性的类型错误。[#44423](https://github.com/ant-design/ant-design/pull/44423) [@LeTuongKhanh](https://github.com/LeTuongKhanh) + ## 5.8.4 `2023-08-18` diff --git a/package.json b/package.json index 659a1a052238..41bcc777eef2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.8.4", + "version": "5.8.5", "packageManager": "^npm@9.0.0", "description": "An enterprise-class UI design language and React components implementation", "title": "Ant Design", From 97b03dc9386d2cbe2d8575e6040c73cecfe6506c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Mon, 28 Aug 2023 19:38:03 +0800 Subject: [PATCH 10/14] fix: rm useless ts def of upload (#44468) --- components/upload/index.en-US.md | 2 +- components/upload/index.zh-CN.md | 2 +- components/upload/interface.ts | 5 +++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md index 49a2c7d48c64..08928a434239 100644 --- a/components/upload/index.en-US.md +++ b/components/upload/index.en-US.md @@ -87,7 +87,7 @@ Extends File with additional props. | crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.20.0 | | name | File name | string | - | - | | percent | Upload progress percent | number | - | - | -| status | Upload status. Show different style when configured | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | - | +| status | Upload status. Show different style when configured | `error` \| `done` \| `uploading` \| `removed` | - | - | | thumbUrl | Thumb image url | string | - | - | | uid | unique id. Will auto-generate when not provided | string | - | - | | url | Download url | string | - | - | diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index d3685cce05e5..8d42a0ae82fe 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -88,7 +88,7 @@ demo: | crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.20.0 | | name | 文件名 | string | - | - | | percent | 上传进度 | number | - | - | -| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | - | +| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `done` \| `uploading` \| `removed` | - | - | | thumbUrl | 缩略图地址 | string | - | - | | uid | 唯一标识符，不设置时会自动生成 | string | - | - | | url | 下载地址 | string | - | - | diff --git a/components/upload/interface.ts b/components/upload/interface.ts index 0639346be407..928919a6a5ba 100755 --- a/components/upload/interface.ts +++ b/components/upload/interface.ts @@ -1,16 +1,17 @@ +import type * as React from 'react'; import type { RcFile as OriRcFile, UploadRequestOption as RcCustomRequestOptions, UploadProps as RcUploadProps, } from 'rc-upload/lib/interface'; -import type * as React from 'react'; + import type { ProgressAriaProps, ProgressProps } from '../progress'; export interface RcFile extends OriRcFile { readonly lastModifiedDate: Date; } -export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed'; +export type UploadFileStatus = 'error' | 'done' | 'uploading' | 'removed'; export interface HttpRequestHeader { [key: string]: string; From 07056fa791ea9dd3926000c014783bdeb0242e86 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 28 Aug 2023 19:48:55 +0800 Subject: [PATCH 11/14] docs: fix theme card style in Firefox (#44473) --- .dumi/pages/index/components/Theme/ThemePicker.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx index e99b1cd13872..790a553fc498 100644 --- a/.dumi/pages/index/components/Theme/ThemePicker.tsx +++ b/.dumi/pages/index/components/Theme/ThemePicker.tsx @@ -43,6 +43,7 @@ const useStyle = createStyles(({ token, css }) => ({ width: 0; height: 0; opacity: 0; + position: absolute; } img { From 4d1bac4651e1adfd54a871792c8d157433cc88cc Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Mon, 28 Aug 2023 20:10:40 +0800 Subject: [PATCH 12/14] site: add code-hide Button for CodePreviewer (#44449) * site: add code-hide Button for CodePreviewer * fix: fix style * add token * fix: fix css props * fix * fix: fix * fix: fix * Update .dumi/theme/builtins/Previewer/CodePreviewer.tsx Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: lijianan <574980606@qq.com> * fix: fix --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc <1075746765@qq.com> --- .../builtins/Previewer/CodePreviewer.tsx | 41 +++++++++++++++++-- .dumi/theme/common/CodePreview.tsx | 22 ++++------ .dumi/theme/common/styles/Demo.tsx | 2 +- .dumi/theme/locales/en-US.json | 1 + .dumi/theme/locales/zh-CN.json | 1 + 5 files changed, 49 insertions(+), 18 deletions(-) diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx index 66033bec7dde..60024d8afcef 100644 --- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx @@ -1,17 +1,21 @@ +/* eslint-disable jsx-a11y/no-noninteractive-tabindex */ +import React, { useContext, useEffect, useRef, useState } from 'react'; import { CheckOutlined, LinkOutlined, SnippetsOutlined, ThunderboltOutlined, + UpOutlined, } from '@ant-design/icons'; import type { Project } from '@stackblitz/sdk'; import stackblitzSdk from '@stackblitz/sdk'; +import { Alert, Badge, Space, Tooltip } from 'antd'; +import { createStyles, css } from 'antd-style'; import classNames from 'classnames'; import { FormattedMessage, useSiteData } from 'dumi'; import LZString from 'lz-string'; -import React, { useContext, useEffect, useRef, useState } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; -import { Alert, Badge, Space, Tooltip } from 'antd'; + import type { AntdPreviewerProps } from '.'; import useLocation from '../../../hooks/useLocation'; import BrowserFrame from '../../common/BrowserFrame'; @@ -63,6 +67,31 @@ function useShowRiddleButton() { return showRiddleButton; } +const useStyle = createStyles(({ token }) => { + const { borderRadius } = token; + return { + codeHideBtn: css` + width: 100%; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 0 0 ${borderRadius}px ${borderRadius}px; + border-top: 1px solid ${token.colorSplit}; + color: ${token.colorTextSecondary}; + transition: all 0.2s ease-in-out; + background-color: ${token.colorBgElevated}; + cursor: pointer; + &:hover { + color: ${token.colorPrimary}; + } + span { + margin-right: ${token.marginXXS}px; + } + `, + }; +}); + const CodePreviewer: React.FC = (props) => { const { asset, @@ -86,6 +115,8 @@ const CodePreviewer: React.FC = (props) => { const { pkg } = useSiteData(); const location = useLocation(); + const { styles } = useStyle(); + const entryCode = asset.dependencies['index.tsx'].value; const showRiddleButton = useShowRiddleButton(); @@ -509,8 +540,12 @@ createRoot(document.getElementById('container')).render(); sourceCode={entryCode} jsxCode={jsx} styleCode={style} - onCodeTypeChange={(type) => setCodeType(type)} + onCodeTypeChange={setCodeType} /> +
setCodeExpand(false)}> + + +
)} diff --git a/.dumi/theme/common/CodePreview.tsx b/.dumi/theme/common/CodePreview.tsx index b69303dae1fe..827630fcc014 100644 --- a/.dumi/theme/common/CodePreview.tsx +++ b/.dumi/theme/common/CodePreview.tsx @@ -1,8 +1,8 @@ import React, { useEffect, useMemo } from 'react'; -import Prism from 'prismjs'; +import { Tabs } from 'antd'; import toReactElement from 'jsonml-to-react-element'; import JsonML from 'jsonml.js/lib/utils'; -import { Tabs } from 'antd'; +import Prism from 'prismjs'; const LANGS = { tsx: 'TypeScript', @@ -17,22 +17,16 @@ interface CodePreviewProps { onCodeTypeChange?: (activeKey: string) => void; } -function toReactComponent(jsonML: any) { +function toReactComponent(jsonML: any[]) { return toReactElement(jsonML, [ [ (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre', - (node: any, index: any) => { - // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7 + (node: any, index: number) => { const attr = JsonML.getAttributes(node); - return React.createElement( - 'pre', - { - key: index, - className: `language-${attr.lang}`, - }, - React.createElement('code', { - dangerouslySetInnerHTML: { __html: attr.highlighted }, - }), + return ( + 
+            
+
); }, ], diff --git a/.dumi/theme/common/styles/Demo.tsx b/.dumi/theme/common/styles/Demo.tsx index c7b9b6fc5c75..9b0d8c1faa96 100644 --- a/.dumi/theme/common/styles/Demo.tsx +++ b/.dumi/theme/common/styles/Demo.tsx @@ -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'; const GlobalDemoStyles: React.FC = () => { diff --git a/.dumi/theme/locales/en-US.json b/.dumi/theme/locales/en-US.json index 7a9f792abbd9..6ca8a49d35ef 100644 --- a/.dumi/theme/locales/en-US.json +++ b/.dumi/theme/locales/en-US.json @@ -31,6 +31,7 @@ "app.demo.copied": "Copied!", "app.demo.code.show": "Show code", "app.demo.code.hide": "Hide code", + "app.demo.code.hide.simplify": "Hide", "app.demo.codepen": "Open in CodePen", "app.demo.codesandbox": "Open in CodeSandbox", "app.demo.stackblitz": "Open in Stackblitz", diff --git a/.dumi/theme/locales/zh-CN.json b/.dumi/theme/locales/zh-CN.json index 3618d9dabbd6..2a37d63e3ea7 100644 --- a/.dumi/theme/locales/zh-CN.json +++ b/.dumi/theme/locales/zh-CN.json @@ -31,6 +31,7 @@ "app.demo.copied": "复制成功", "app.demo.code.show": "显示代码", "app.demo.code.hide": "收起代码", + "app.demo.code.hide.simplify": "收起", "app.demo.codepen": "在 CodePen 中打开", "app.demo.codesandbox": "在 CodeSandbox 中打开", "app.demo.stackblitz": "在 Stackblitz 中打开", From 2d1d98790e5ec438b77645cfd1f49b194d810ae9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= Date: Mon, 28 Aug 2023 20:16:34 +0800 Subject: [PATCH 13/14] fix: color picker open popup when disabled (#44466) --- components/color-picker/ColorPicker.tsx | 7 ++- .../color-picker/__tests__/index.test.tsx | 45 +++++++++++++++++-- 2 files changed, 45 insertions(+), 7 deletions(-) diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index abdc869311fd..7b9eab1e51c9 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/components/color-picker/ColorPicker.tsx @@ -1,6 +1,5 @@ import type { CSSProperties, FC } from 'react'; import React, { useContext, useMemo, useRef, useState } from 'react'; - import type { HsbaColorType, ColorPickerProps as RcColorPickerProps, @@ -11,16 +10,16 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState'; import genPurePanel from '../_util/PurePanel'; import { getStatusClassNames } from '../_util/statusUtils'; import warning from '../_util/warning'; -import type { SizeType } from '../config-provider/SizeContext'; import type { ConfigConsumerProps } from '../config-provider/context'; import { ConfigContext } from '../config-provider/context'; import useSize from '../config-provider/hooks/useSize'; +import type { SizeType } from '../config-provider/SizeContext'; import { FormItemInputContext, NoFormStyle } from '../form/context'; import type { PopoverProps } from '../popover'; import Popover from '../popover'; import theme from '../theme'; -import ColorPickerPanel from './ColorPickerPanel'; import type { Color } from './color'; +import ColorPickerPanel from './ColorPickerPanel'; import ColorTrigger from './components/ColorTrigger'; import useColorState from './hooks/useColorState'; import type { @@ -229,7 +228,7 @@ const ColorPicker: CompoundedComponent = (props) => { style={styles?.popup} overlayInnerStyle={styles?.popupOverlayInner} onOpenChange={(visible) => { - if (popupAllowCloseRef.current) { + if (popupAllowCloseRef.current && !disabled) { setPopupOpen(visible); } }} diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx index a005aefb84a2..4c6763a0d21e 100644 --- a/components/color-picker/__tests__/index.test.tsx +++ b/components/color-picker/__tests__/index.test.tsx @@ -1,16 +1,18 @@ +import React, { useMemo, useState } from 'react'; import { createEvent, fireEvent, render } from '@testing-library/react'; import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; -import React, { useMemo, useState } from 'react'; + +import { resetWarned } from '../../_util/warning'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { waitFakeTimer } from '../../../tests/utils'; -import { resetWarned } from '../../_util/warning'; +import Button from '../../button'; import ConfigProvider from '../../config-provider'; import Form from '../../form'; import theme from '../../theme'; +import type { Color } from '../color'; import type { ColorPickerProps } from '../ColorPicker'; import ColorPicker from '../ColorPicker'; -import type { Color } from '../color'; function doMouseMove( container: HTMLElement, @@ -518,4 +520,41 @@ describe('ColorPicker', () => { render(); expect(errorSpy).not.toHaveBeenCalled(); }); + + it('Should not show popup when disabled', async () => { + const Demo = () => { + const [disabled, setDisabled] = useState(false); + return ( +
+ +
+ + +
+
+ ); + }; + const { container } = render(); + fireEvent.click(container.querySelector('.disabled-btn')!); + fireEvent.click(container.querySelector('.ant-color-picker-trigger')!); + await waitFakeTimer(); + fireEvent.click(container.querySelector('.active-btn')!); + expect(document.body.querySelector('.ant-popover')).toBeFalsy(); + }); }); From a95662d0e11dea39a4b3f69aa3d5bf2410b37529 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Mon, 28 Aug 2023 21:42:39 +0800 Subject: [PATCH 14/14] refactor: button default not use compact style (#44475) * refactor: button default not use compact style * chore: clean up --- components/button/button.tsx | 17 +++++++++++------ components/button/style/compactCmp.ts | 16 ++++++++++++++++ components/button/style/index.ts | 16 +++++++++------- components/theme/internal.ts | 4 +++- components/theme/util/genComponentStyleHook.ts | 17 ++++++++++++++++- 5 files changed, 55 insertions(+), 15 deletions(-) create mode 100644 components/button/style/compactCmp.ts diff --git a/components/button/button.tsx b/components/button/button.tsx index 64bdc20e413d..47c8b2bf50c4 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -1,7 +1,4 @@ /* eslint-disable react/button-has-type */ -import classNames from 'classnames'; -import omit from 'rc-util/lib/omit'; -import { composeRef } from 'rc-util/lib/ref'; import React, { Children, createRef, @@ -11,19 +8,24 @@ import React, { useMemo, useState, } from 'react'; +import classNames from 'classnames'; +import omit from 'rc-util/lib/omit'; +import { composeRef } from 'rc-util/lib/ref'; + import warning from '../_util/warning'; import Wave from '../_util/wave'; import { ConfigContext } from '../config-provider'; import DisabledContext from '../config-provider/DisabledContext'; -import type { SizeType } from '../config-provider/SizeContext'; import useSize from '../config-provider/hooks/useSize'; +import type { SizeType } from '../config-provider/SizeContext'; import { useCompactItemContext } from '../space/Compact'; -import IconWrapper from './IconWrapper'; -import LoadingIcon from './LoadingIcon'; import Group, { GroupSizeContext } from './button-group'; import type { ButtonHTMLType, ButtonShape, ButtonType } from './buttonHelpers'; import { isTwoCNChar, isUnBorderedButtonType, spaceChildren } from './buttonHelpers'; +import IconWrapper from './IconWrapper'; +import LoadingIcon from './LoadingIcon'; import useStyle from './style'; +import CompactStyle from './style/compactCmp'; export type LegacyButtonType = ButtonType | 'danger'; @@ -285,6 +287,9 @@ const InternalButton: React.ForwardRefRenderFunction< > {iconNode} {kids} + + {/* Styles: compact */} + {compactItemClassnames && } ); diff --git a/components/button/style/compactCmp.ts b/components/button/style/compactCmp.ts new file mode 100644 index 000000000000..ef3f4550329a --- /dev/null +++ b/components/button/style/compactCmp.ts @@ -0,0 +1,16 @@ +// Style as inline component +import { prepareToken } from '.'; +import { genCompactItemStyle } from '../../style/compact-item'; +import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical'; +import { genSubStyleComponent } from '../../theme/internal'; + +// ============================== Export ============================== +export default genSubStyleComponent(['Button', 'compact'], (token) => { + const buttonToken = prepareToken(token); + + return [ + // Space Compact + genCompactItemStyle(buttonToken), + genCompactItemVerticalStyle(buttonToken), + ]; +}); diff --git a/components/button/style/index.ts b/components/button/style/index.ts index 1631719dbc7a..9994801a2f37 100644 --- a/components/button/style/index.ts +++ b/components/button/style/index.ts @@ -1,9 +1,9 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; + import { genFocusStyle } from '../../style'; -import { genCompactItemStyle } from '../../style/compact-item'; -import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import type { GenStyleFn } from '../../theme/util/genComponentStyleHook'; import genGroupStyle from './group'; /** Component only token. Which will handle additional calculation of alias token */ @@ -517,7 +517,7 @@ const genBlockButtonStyle: GenerateStyle = (token) => { }; // ============================== Export ============================== -export default genComponentStyleHook('Button', (token) => { +export const prepareToken: (token: Parameters>[0]) => ButtonToken = (token) => { const { controlTmpOutline, paddingContentHorizontal } = token; const buttonToken = mergeToken(token, { @@ -527,6 +527,12 @@ export default genComponentStyleHook('Button', (token) => { buttonFontWeight: 400, }); + return buttonToken; +}; + +export default genComponentStyleHook('Button', (token) => { + const buttonToken = prepareToken(token); + return [ // Shared genSharedButtonStyle(buttonToken), @@ -544,9 +550,5 @@ export default genComponentStyleHook('Button', (token) => { // Button Group genGroupStyle(buttonToken), - - // Space Compact - genCompactItemStyle(token), - genCompactItemVerticalStyle(token), ]; }); diff --git a/components/theme/internal.ts b/components/theme/internal.ts index b686ad7d351a..23bf38fc7748 100644 --- a/components/theme/internal.ts +++ b/components/theme/internal.ts @@ -1,4 +1,5 @@ import { useStyleRegister } from '@ant-design/cssinjs'; + import type { AliasToken, GenerateStyle, @@ -10,7 +11,7 @@ import type { import { PresetColors } from './interface'; import useToken from './useToken'; import type { FullToken } from './util/genComponentStyleHook'; -import genComponentStyleHook from './util/genComponentStyleHook'; +import genComponentStyleHook, { genSubStyleComponent } from './util/genComponentStyleHook'; import genPresetColor from './util/genPresetColor'; import statisticToken, { merge as mergeToken } from './util/statistic'; import useResetIconStyle from './util/useResetIconStyle'; @@ -19,6 +20,7 @@ export { DesignTokenContext, defaultConfig } from './context'; export { PresetColors, genComponentStyleHook, + genSubStyleComponent, genPresetColor, mergeToken, statisticToken, diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts index 1420cfee7395..f729e8682fd6 100644 --- a/components/theme/util/genComponentStyleHook.ts +++ b/components/theme/util/genComponentStyleHook.ts @@ -1,5 +1,5 @@ /* eslint-disable no-redeclare */ -import { useContext } from 'react'; +import { useContext, type ComponentType } from 'react'; import type { CSSInterpolation } from '@ant-design/cssinjs'; import { useStyleRegister } from '@ant-design/cssinjs'; import { warning } from 'rc-util'; @@ -174,3 +174,18 @@ export default function genComponentStyleHook( + ...args: Parameters> +): ComponentType { + const useStyle = genComponentStyleHook(...args); + + return ({ prefixCls }: SubStyleComponentProps) => { + useStyle(prefixCls); + return null; + }; +}