From 696c9dde020c04a9dc877274c0d8d9ddfec2c4be Mon Sep 17 00:00:00 2001 From: ice <49827327+coding-ice@users.noreply.github.com> Date: Tue, 24 Sep 2024 23:52:50 +0800 Subject: [PATCH 01/32] fix(button): type=link error token & add prefix cls (color/variant) & specificity too high (#50962) --- .../__snapshots__/demo-extend.test.ts.snap | 10 +- .../__snapshots__/demo.test.tsx.snap | 10 +- .../__snapshots__/demo-extend.test.ts.snap | 12 +- .../__tests__/__snapshots__/demo.test.ts.snap | 12 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 10 +- .../__tests__/__snapshots__/demo.test.ts.snap | 10 +- .../__snapshots__/demo-extend.test.ts.snap | 10 +- .../__snapshots__/demo.test.tsx.snap | 10 +- .../__snapshots__/demo-extend.test.ts.snap | 10 +- .../__snapshots__/demo.test.tsx.snap | 10 +- .../__snapshots__/demo-extend.test.ts.snap | 6 +- .../__snapshots__/demo.test.tsx.snap | 6 +- .../__snapshots__/demo-extend.test.ts.snap | 385 ++++--- .../__tests__/__snapshots__/demo.test.ts.snap | 383 ++++--- .../__snapshots__/index.test.tsx.snap | 42 +- components/button/__tests__/index.test.tsx | 8 +- components/button/button.tsx | 7 +- components/button/demo/debug-color-variant.md | 7 + .../button/demo/debug-color-variant.tsx | 94 ++ components/button/index.en-US.md | 1 + components/button/index.zh-CN.md | 1 + components/button/style/index.ts | 139 +-- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 4 +- .../__snapshots__/demo.test.tsx.snap | 4 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__snapshots__/demo.test.tsx.snap | 2 +- .../__snapshots__/components.test.tsx.snap | 220 ++-- .../__snapshots__/demo-extend.test.ts.snap | 32 +- .../__snapshots__/demo-extend.test.ts.snap | 6 +- .../__tests__/__snapshots__/demo.test.ts.snap | 6 +- .../__snapshots__/demo-extend.test.tsx.snap | 40 +- .../__tests__/__snapshots__/demo.test.ts.snap | 26 +- .../__snapshots__/demo-extend.test.ts.snap | 80 +- .../__snapshots__/demo.test.tsx.snap | 78 +- .../dropdown-button.test.tsx.snap | 8 +- .../__snapshots__/demo-extend.test.ts.snap | 6 +- .../__tests__/__snapshots__/demo.test.ts.snap | 6 +- .../__snapshots__/demo-extend.test.ts.snap | 66 +- .../__tests__/__snapshots__/demo.test.ts.snap | 66 +- .../__snapshots__/demo-extend.test.ts.snap | 106 +- .../__snapshots__/demo.test.tsx.snap | 98 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 6 +- .../__tests__/__snapshots__/demo.test.ts.snap | 6 +- .../__snapshots__/demo-extend.test.ts.snap | 4 +- .../__snapshots__/demo.test.tsx.snap | 4 +- .../__snapshots__/Search.test.tsx.snap | 22 +- .../__snapshots__/demo-extend.test.ts.snap | 52 +- .../__snapshots__/demo.test.tsx.snap | 50 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 980 +++++++++--------- .../__snapshots__/demo-extend.test.ts.snap | 4 +- .../__snapshots__/demo.test.tsx.snap | 4 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__snapshots__/demo.test.tsx.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 20 +- .../__tests__/__snapshots__/demo.test.ts.snap | 20 +- .../__snapshots__/Modal.test.tsx.snap | 16 +- .../__snapshots__/demo-extend.test.ts.snap | 108 +- .../__snapshots__/demo.test.tsx.snap | 108 +- .../__snapshots__/demo-extend.test.ts.snap | 48 +- .../__tests__/__snapshots__/demo.test.ts.snap | 48 +- .../__snapshots__/demo-extend.test.ts.snap | 132 +-- .../__snapshots__/demo.test.tsx.snap | 60 +- .../__snapshots__/index.test.tsx.snap | 8 +- .../__snapshots__/demo-extend.test.ts.snap | 60 +- .../__snapshots__/demo.test.tsx.snap | 60 +- .../__snapshots__/demo-extend.test.ts.snap | 4 +- .../__tests__/__snapshots__/demo.test.ts.snap | 4 +- .../__snapshots__/demo-extend.test.ts.snap | 12 +- .../__tests__/__snapshots__/demo.test.ts.snap | 12 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__snapshots__/demo.test.tsx.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 24 +- .../__tests__/__snapshots__/demo.test.ts.snap | 24 +- .../__snapshots__/demo-extend.test.ts.snap | 4 +- .../__tests__/__snapshots__/demo.test.ts.snap | 4 +- .../__snapshots__/demo-extend.test.ts.snap | 6 +- .../__snapshots__/demo.test.tsx.snap | 4 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__snapshots__/demo.test.tsx.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 222 ++-- .../__snapshots__/demo.test.tsx.snap | 202 ++-- .../__snapshots__/space-compact.test.tsx.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 4 +- .../__tests__/__snapshots__/demo.test.ts.snap | 4 +- .../__snapshots__/demo-extend.test.ts.snap | 16 +- .../__tests__/__snapshots__/demo.test.ts.snap | 16 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- .../table/__tests__/Table.filter.test.tsx | 95 +- .../__tests__/Table.rowSelection.test.tsx | 6 +- .../__snapshots__/Table.filter.test.tsx.snap | 8 +- .../__snapshots__/demo-extend.test.ts.snap | 98 +- .../__tests__/__snapshots__/demo.test.ts.snap | 18 +- .../__snapshots__/demo-extend.test.ts.snap | 16 +- .../__tests__/__snapshots__/demo.test.ts.snap | 16 +- .../__snapshots__/demo-extend.test.ts.snap | 56 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 98 +- .../__snapshots__/demo.test.tsx.snap | 98 +- .../__snapshots__/tooltip.test.tsx.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 48 +- .../__snapshots__/demo.test.tsx.snap | 46 +- .../__snapshots__/index.test.tsx.snap | 16 +- .../__snapshots__/demo-extend.test.ts.snap | 62 +- .../__tests__/__snapshots__/demo.test.ts.snap | 62 +- .../__snapshots__/index.test.tsx.snap | 20 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 100 +- .../__tests__/__snapshots__/demo.test.ts.snap | 100 +- .../__snapshots__/uploadlist.test.tsx.snap | 42 +- .../__snapshots__/demo-extend.test.ts.snap | 6 +- .../__tests__/__snapshots__/demo.test.ts.snap | 6 +- 124 files changed, 2941 insertions(+), 2545 deletions(-) create mode 100644 components/button/demo/debug-color-variant.md create mode 100644 components/button/demo/debug-color-variant.tsx diff --git a/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap index 3bfe1c5121..1151d1435d 100644 --- a/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -7,7 +7,7 @@ Array [ class="" > , , + + +
+ + + + + +
+
+ + + + + +
+ +`; + +exports[`renders components/button/demo/debug-color-variant.tsx extend context correctly 2`] = `[]`; + exports[`renders components/button/demo/debug-icon.tsx extend context correctly 1`] = ` Array [
@@ -1026,7 +1143,7 @@ Array [ @@ -1755,7 +1872,7 @@ Array [ class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small" > @@ -2108,7 +2225,7 @@ Array [ + + +
+ + + + + +
+
+ + + + + +
+ +`; + exports[`renders components/button/demo/debug-icon.tsx correctly 1`] = ` Array [
@@ -933,7 +1048,7 @@ Array [ @@ -1578,7 +1693,7 @@ Array [ class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small" > @@ -1855,7 +1970,7 @@ Array [
@@ -459,11 +459,11 @@ describe('Button', () => { ); expect(defaultContainer.firstChild).toHaveStyle({ - color: 'rgb(255, 255, 255)', + '--ant-button-solid-text-color': '#fff', }); const { container: darkContainer } = render( - + @@ -471,7 +471,7 @@ describe('Button', () => { ); expect(darkContainer.firstChild).toHaveStyle({ - color: 'rgb(0, 0, 0)', + '--ant-button-solid-text-color': '#000', }); }); }); diff --git a/components/button/button.tsx b/components/button/button.tsx index 3fb4345bcd..a04b6f78f1 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -249,8 +249,11 @@ const InternalCompoundedButton = React.forwardRef< cssVarCls, { [`${prefixCls}-${shape}`]: shape !== 'default' && shape, - [`${prefixCls}-${mergedColorText}`]: mergedColorText, - [`${prefixCls}-${mergedVariant}`]: mergedVariant, + // line(253 - 254): Compatible with versions earlier than 5.21.0 + [`${prefixCls}-${mergedType}`]: mergedType, + [`${prefixCls}-dangerous`]: danger, + [`${prefixCls}-color-${mergedColorText}`]: mergedColorText, + [`${prefixCls}-variant-${mergedVariant}`]: mergedVariant, [`${prefixCls}-${sizeCls}`]: sizeCls, [`${prefixCls}-icon-only`]: !children && children !== 0 && !!iconType, [`${prefixCls}-background-ghost`]: ghost && !isUnBorderedButtonVariant(mergedVariant), diff --git a/components/button/demo/debug-color-variant.md b/components/button/demo/debug-color-variant.md new file mode 100644 index 0000000000..c0c0fc5dc7 --- /dev/null +++ b/components/button/demo/debug-color-variant.md @@ -0,0 +1,7 @@ +## zh-CN + +调试使用 + +## en-US + +Debug usage diff --git a/components/button/demo/debug-color-variant.tsx b/components/button/demo/debug-color-variant.tsx new file mode 100644 index 0000000000..c99e34511a --- /dev/null +++ b/components/button/demo/debug-color-variant.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import { Button, ConfigProvider, Flex } from 'antd'; +import { createStyles } from 'antd-style'; + +const useSpecStyle = createStyles(({ css }) => ({ + primary: css` + background: #5794f7; + border-color: blue; + color: wheat; + `, + default: css` + border-color: gray; + background: #f5f5f5; + color: #313030; + `, + dashed: css` + border-color: gray; + background: #f5f5f5; + color: #313030; + `, + text: css` + color: gray; + `, + link: css` + color: blue; + `, +})); + +const useOriginalClsStyle = createStyles(({ css }) => ({ + wrapper: css` + .ant-btn-primary { + color: #ec5b56; + } + .ant-btn-default { + color: orange; + } + .ant-btn-dashed { + color: #3976f6; + } + .ant-btn-text { + color: green; + } + .ant-btn-link { + color: #0e98aa; + } + `, +})); + +const App: React.FC = () => { + const { styles: specStyle } = useSpecStyle(); + const { styles: originalClsStyle } = useOriginalClsStyle(); + + return ( + + {/* link color */} + + + + + + + + {/* css specificity */} + + + + + + + + + {/* Compatibility: v < 5.20.1 */} + + + + + + + + + ); +}; + +export default App; diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index d46d4d6472..19eb7c8e0e 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -35,6 +35,7 @@ And 4 other properties additionally. Syntactic sugar Color & Variant +Debug Color & Variant Icon Icon Position Debug Icon diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 765dca8ae7..560622c894 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -38,6 +38,7 @@ group: 语法糖 颜色与变体 +调试颜色与变体 按钮图标 按钮图标位置 调试图标按钮 diff --git a/components/button/style/index.ts b/components/button/style/index.ts index 75808e02a2..7613a72488 100644 --- a/components/button/style/index.ts +++ b/components/button/style/index.ts @@ -179,7 +179,7 @@ const genSolidButtonStyle = ( hoverStyle: CSSObject, activeStyle: CSSObject, ): CSSObject => ({ - [`&${token.componentCls}-solid`]: { + [`&${token.componentCls}-variant-solid`]: { color: textColor, background, @@ -194,7 +194,7 @@ const genOutlinedDashedButtonStyle = ( hoverStyle: CSSObject, activeStyle: CSSObject, ) => ({ - [`&${token.componentCls}-outlined, &${token.componentCls}-dashed`]: { + [`&${token.componentCls}-variant-outlined, &${token.componentCls}-variant-dashed`]: { borderColor, background, @@ -203,7 +203,7 @@ const genOutlinedDashedButtonStyle = ( }); const genDashedButtonStyle: GenerateStyle = (token) => ({ - [`&${token.componentCls}-dashed`]: { + [`&${token.componentCls}-variant-dashed`]: { borderStyle: 'dashed', }, }); @@ -214,7 +214,7 @@ const genFilledButtonStyle = ( hoverStyle: CSSObject, activeStyle: CSSObject, ) => ({ - [`&${token.componentCls}-filled`]: { + [`&${token.componentCls}-variant-filled`]: { boxShadow: 'none', background, @@ -229,7 +229,7 @@ const genTextLinkButtonStyle = ( hoverStyle: CSSObject, activeStyle: CSSObject, ) => ({ - [`&${token.componentCls}-${variant}`]: { + [`&${token.componentCls}-variant-${variant}`]: { color: textColor, boxShadow: 'none', @@ -255,22 +255,6 @@ const genDefaultButtonStyle: GenerateStyle = (token) => }, ), - ...genOutlinedDashedButtonStyle( - token, - token.defaultBorderColor, - token.defaultBg, - { - color: token.defaultHoverColor, - borderColor: token.defaultHoverBorderColor, - background: token.defaultHoverBg, - }, - { - color: token.defaultActiveColor, - borderColor: token.defaultActiveBorderColor, - background: token.defaultActiveBg, - }, - ), - ...genDashedButtonStyle(token), ...genFilledButtonStyle( @@ -284,19 +268,6 @@ const genDefaultButtonStyle: GenerateStyle = (token) => }, ), - ...genTextLinkButtonStyle( - token, - token.textTextColor, - 'text', - { - color: token.textTextHoverColor, - background: token.textHoverBg, - }, - { - color: token.textTextActiveColor, - background: token.colorBgTextActive, - }, - ), ...genTextLinkButtonStyle( token, token.textTextColor, @@ -325,18 +296,6 @@ const genPrimaryButtonStyle: GenerateStyle = (token) => boxShadow: token.primaryShadow, - ...genSolidButtonStyle( - token, - token.primaryColor, - token.colorPrimary, - { - background: token.colorPrimaryHover, - }, - { - background: token.colorPrimaryActive, - }, - ), - ...genOutlinedDashedButtonStyle( token, token.colorPrimary, @@ -368,7 +327,7 @@ const genPrimaryButtonStyle: GenerateStyle = (token) => ...genTextLinkButtonStyle( token, - token.colorPrimary, + token.colorLink, 'text', { color: token.colorPrimaryTextHover, @@ -380,19 +339,6 @@ const genPrimaryButtonStyle: GenerateStyle = (token) => }, ), - ...genTextLinkButtonStyle( - token, - token.colorPrimary, - 'link', - { - color: token.colorPrimaryTextHover, - background: token.linkHoverBg, - }, - { - color: token.colorPrimaryTextActive, - }, - ), - ...genGhostButtonStyle( token.componentCls, token.ghostBg, @@ -502,12 +448,76 @@ const genColorButtonStyle: GenerateStyle = (token) => { const { componentCls } = token; return { - [`${componentCls}-default`]: genDefaultButtonStyle(token), - [`${componentCls}-primary`]: genPrimaryButtonStyle(token), - [`${componentCls}-dangerous`]: genDangerousStyle(token), + [`${componentCls}-color-default`]: genDefaultButtonStyle(token), + [`${componentCls}-color-primary`]: genPrimaryButtonStyle(token), + [`${componentCls}-color-dangerous`]: genDangerousStyle(token), }; }; +// =========== Compatible with versions earlier than 5.21.0 =========== +const genCompatibleButtonStyle: GenerateStyle = (token) => ({ + // default + outlined + ...genOutlinedDashedButtonStyle( + token, + token.defaultBorderColor, + token.defaultBg, + { + color: token.defaultHoverColor, + borderColor: token.defaultHoverBorderColor, + background: token.defaultHoverBg, + }, + { + color: token.defaultActiveColor, + borderColor: token.defaultActiveBorderColor, + background: token.defaultActiveBg, + }, + ), + + // default + text + ...genTextLinkButtonStyle( + token, + token.textTextColor, + 'text', + { + color: token.textTextHoverColor, + background: token.textHoverBg, + }, + { + color: token.textTextActiveColor, + background: token.colorBgTextActive, + }, + ), + + // primary + solid + ...genSolidButtonStyle( + token, + token.primaryColor, + token.colorPrimary, + { + background: token.colorPrimaryHover, + color: token.primaryColor, + }, + { + background: token.colorPrimaryActive, + color: token.primaryColor, + }, + ), + + // primary + link + ...genTextLinkButtonStyle( + token, + token.colorLink, + 'link', + { + color: token.colorLinkHover, + background: token.linkHoverBg, + }, + { + color: token.colorLinkActive, + }, + ), +}); + // =============================== Size =============================== const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation => { const { @@ -641,6 +651,9 @@ export default genStyleHooks( // Color genColorButtonStyle(buttonToken), + // https://github.com/ant-design/ant-design/issues/50969 + genCompatibleButtonStyle(buttonToken), + // Button Group genGroupStyle(buttonToken), ]; diff --git a/components/card/__tests__/__snapshots__/index.test.tsx.snap b/components/card/__tests__/__snapshots__/index.test.tsx.snap index f7f6d57872..838b3c0b47 100644 --- a/components/card/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/card/__tests__/__snapshots__/index.test.tsx.snap @@ -378,7 +378,7 @@ exports[`Card title should be vertically aligned 1`] = ` class="ant-card-extra" >
Ant Design -
-
+ , ({ ...genFocusOutline(token), }, }); + +export const operationUnit = (token: AliasToken): CSSObject => ({ + // FIXME: This use link but is a operation unit. Seems should be a colorPrimary. + // And Typography use this to generate link style which should not do this. + color: token.colorLink, + textDecoration: token.linkDecoration, + outline: 'none', + cursor: 'pointer', + transition: `all ${token.motionDurationSlow}`, + border: 0, + padding: 0, + background: 'none', + userSelect: 'none', + + ...genFocusStyle(token), + + '&:focus, &:hover': { + color: token.colorLinkHover, + }, + + '&:active': { + color: token.colorLinkActive, + }, +}); diff --git a/components/style/operationUnit.ts b/components/style/operationUnit.ts deleted file mode 100644 index 0f77b62726..0000000000 --- a/components/style/operationUnit.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type { CSSObject } from '@ant-design/cssinjs'; - -import type { AliasToken } from '../theme/internal'; - -export const operationUnit = (token: AliasToken): CSSObject => ({ - // FIXME: This use link but is a operation unit. Seems should be a colorPrimary. - // And Typography use this to generate link style which should not do this. - color: token.colorLink, - textDecoration: 'none', - outline: 'none', - cursor: 'pointer', - transition: `color ${token.motionDurationSlow}`, - - '&:focus, &:hover': { - color: token.colorLinkHover, - }, - - '&:active': { - color: token.colorLinkActive, - }, -}); diff --git a/components/table/style/expand.ts b/components/table/style/expand.ts index 119031ace8..09e2c40dca 100644 --- a/components/table/style/expand.ts +++ b/components/table/style/expand.ts @@ -55,18 +55,14 @@ const genExpandStyle: GenerateStyle = (token) => { ...operationUnit(token), position: 'relative', float: 'left', - boxSizing: 'border-box', width: expandIconSize, height: expandIconSize, - padding: 0, color: 'inherit', lineHeight: unit(expandIconSize), background: tableExpandIconBg, border: tableBorder, borderRadius, transform: `scale(${expandIconScale})`, - transition: `all ${motionDurationSlow}`, - userSelect: 'none', '&:focus, &:hover, &:active': { borderColor: 'currentcolor', diff --git a/components/transfer/ListItem.tsx b/components/transfer/ListItem.tsx index 8b870364a0..45d7919857 100644 --- a/components/transfer/ListItem.tsx +++ b/components/transfer/ListItem.tsx @@ -3,7 +3,6 @@ import DeleteOutlined from '@ant-design/icons/DeleteOutlined'; import classNames from 'classnames'; import type { KeyWiseTransferItem } from '.'; -import TransButton from '../_util/transButton'; import Checkbox from '../checkbox'; import { useLocale } from '../locale'; import defaultLocale from '../locale/en_US'; @@ -53,16 +52,15 @@ const ListItem = (props: ListItemProps {labelNode} - { - onRemove?.(item); - }} + onClick={() => onRemove?.(item)} > - + ); } diff --git a/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap index 858e7b65da..0be3b3ef63 100644 --- a/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -8278,12 +8278,10 @@ Array [ > content3 -
-
+
  • content6 -
    -
    +
  • content9 -
    -
    +
  • content12 -
    -
    +
  • content15 -
    -
    +
  • content18 -
    -
    +
    • diff --git a/components/transfer/__tests__/__snapshots__/demo.test.ts.snap b/components/transfer/__tests__/__snapshots__/demo.test.ts.snap index c940f3b242..41f4fd8323 100644 --- a/components/transfer/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/transfer/__tests__/__snapshots__/demo.test.ts.snap @@ -5357,12 +5357,10 @@ Array [ > content3 -
    -
    +
  • content6 -
    -
    +
  • content9 -
    -
    +
  • content12 -
    -
    +
  • content15 -
    -
    +
  • content18 -
    -
    +
    • diff --git a/components/transfer/style/index.ts b/components/transfer/style/index.ts index a8cb8bf655..c4c464b6ed 100644 --- a/components/transfer/style/index.ts +++ b/components/transfer/style/index.ts @@ -1,7 +1,7 @@ import { unit } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs'; -import { resetComponent, resetIcon, textEllipsis } from '../../style'; +import { resetComponent, resetIcon, textEllipsis, operationUnit } from '../../style'; import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import { genStyleHooks, mergeToken } from '../../theme/internal'; @@ -122,6 +122,7 @@ const genTransferListStyle: GenerateStyle = (token: TransferToken itemPaddingBlock, controlItemBgActive, colorTextDisabled, + colorTextSecondary, listHeight, listWidth, listWidthLG, @@ -242,20 +243,11 @@ const genTransferListStyle: GenerateStyle = (token: TransferToken }, '&-remove': { - position: 'relative', + ...operationUnit(token), color: colorBorder, - cursor: 'pointer', - transition: `all ${motionDurationSlow}`, - - '&:hover': { - color: token.colorLinkHover, - }, - - '&::after': { - position: 'absolute', - inset: `-${unit(itemPaddingBlock)} -50%`, - content: '""', + '&:hover, &:focus': { + color: colorTextSecondary, }, }, diff --git a/components/typography/Base/CopyBtn.tsx b/components/typography/Base/CopyBtn.tsx index 1b651e40e7..20fafbbd93 100644 --- a/components/typography/Base/CopyBtn.tsx +++ b/components/typography/Base/CopyBtn.tsx @@ -5,7 +5,6 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; import classNames from 'classnames'; import type { CopyConfig } from '.'; -import TransButton from '../../_util/transButton'; import type { Locale } from '../../locale'; import Tooltip from '../../tooltip'; import { getNode, toList } from './util'; @@ -14,7 +13,7 @@ export interface CopyBtnProps extends Omit { prefixCls: string; copied: boolean; locale: Locale['Text']; - onCopy: (e?: React.MouseEvent) => void; + onCopy: React.MouseEventHandler; iconOnly: boolean; loading: boolean; } @@ -39,7 +38,8 @@ const CopyBtn: React.FC = ({ return ( - = ({ {copied ? getNode(iconNodes[1], , true) : getNode(iconNodes[0], btnLoading ? : , true)} - + ); }; diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx index d628447a95..056411ba71 100644 --- a/components/typography/Base/index.tsx +++ b/components/typography/Base/index.tsx @@ -10,7 +10,6 @@ import omit from 'rc-util/lib/omit'; import { composeRef } from 'rc-util/lib/ref'; import { isStyleSupport } from '../../_util/styleChecker'; -import TransButton from '../../_util/transButton'; import { ConfigContext } from '../../config-provider'; import useLocale from '../../locale/useLocale'; import type { TooltipProps } from '../../tooltip'; @@ -31,7 +30,7 @@ export type BaseType = 'secondary' | 'success' | 'warning' | 'danger'; export interface CopyConfig { text?: string | (() => string | Promise); - onCopy?: (event?: React.MouseEvent) => void; + onCopy?: (event?: React.MouseEvent) => void; icon?: React.ReactNode; tooltips?: React.ReactNode; format?: 'text/plain' | 'text/html'; @@ -130,7 +129,7 @@ const Base = React.forwardRef((props, ref) => { const [textLocale] = useLocale('Text'); const typographyRef = React.useRef(null); - const editIconRef = React.useRef(null); + const editIconRef = React.useRef(null); // ============================ MISC ============================ const prefixCls = getPrefixCls('typography', customizePrefixCls); @@ -349,14 +348,15 @@ const Base = React.forwardRef((props, ref) => { const renderExpand = () => { const { expandable, symbol } = ellipsisConfig; return expandable ? ( - onExpandClick(e!, { expanded: !expanded })} aria-label={expanded ? textLocale.collapse : textLocale?.expand} > {typeof symbol === 'function' ? symbol(expanded) : symbol} - + ) : null; }; @@ -373,7 +373,8 @@ const Base = React.forwardRef((props, ref) => { return triggerType.includes('icon') ? ( - ((props, ref) => { tabIndex={tabIndex} > {icon || } - + ) : null; }; diff --git a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap index 40bb1ace3a..cb48319d35 100644 --- a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -440,12 +440,10 @@ Array [ class="ant-typography" > This is a copyable text. -
    -
    +
    Replace copy text. -
    -
    +
    Custom Copy icon and replace tooltips text. -
    -
    +
    Hide Copy tooltips. -
    -
    +
    Request copy text. -
    -
    +
    -
    -
    +
    This is an editable text. -
    -
    +
    This is a loooooooooooooooooooooooooooooooong editable text with suffix. -
    -
    +
    Custom Edit icon and replace tooltip text. -
    -
    +
    Text or icon as trigger - click to start editing. -
    -
    +
    Editable text with a custom enter icon in edit field. -
    -
    +
    Editable text with no enter icon in edit field. -
    -
    +
    Hide Edit tooltip. -
    -
    +
    This is an editable text with limited length. -
    -
    +
    h1. Ant Design -
    -
    +
    h2. Ant Design -
    -
    +
    h3. Ant Design -
    -
    +
    h4. Ant Design -
    -
    +
    h5. Ant Design -
    -
    +
    Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team. -
    -
    +
    In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -
    -
    +
    In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -
    -
    +
    In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -
    -
    +
    Ant Design is a design language for background applications, is refined by Ant UED Team. -
    -
    +
    In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -
    -
    +
    This is a copyable text. -
    -
    +
    ,
    Replace copy text. -
    -
    +
    ,
    Custom Copy icon and replace tooltips text. -
    -
    +
    ,
    Hide Copy tooltips. -
    -
    +
    ,
    Request copy text. -
    -
    +
    , -
    -
    +     , ] `; @@ -634,12 +622,10 @@ Array [ class="ant-typography" > This is an editable text. -
    -
    +
    ,
    with suffix. -
    -
    +
    ,
    Custom Edit icon and replace tooltip text. -
    -
    +
    , Trigger edit with:, , @@ -797,12 +779,10 @@ Array [ class="ant-typography" > Text or icon as trigger - click to start editing. -
    -
    +
    ,
    Editable text with a custom enter icon in edit field. -
    -
    +
    ,
    Editable text with no enter icon in edit field. -
    -
    +
    ,
    Hide Edit tooltip. -
    -
    +
    ,
    This is an editable text with limited length. -
    -
    +
    ,

    h1. Ant Design -
    -
    +

    ,

    h2. Ant Design -
    -
    +

    ,

    h3. Ant Design -
    -
    +

    ,

    h4. Ant Design -
    -
    +

    ,
    h5. Ant Design -
    -
    +
    , ] `; @@ -1233,12 +1195,10 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx correctly 1` style="-webkit-line-clamp:2" > Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team. -
    -
    +
    `; @@ -1397,12 +1357,10 @@ Array [ style="max-width:400px;font-size:24px" > In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -
    -
    + ,
    , In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -
    -
    +     ,
    , In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -
    -
    +     ,
    , Ant Design is a design language for background applications, is refined by Ant UED Team. -
    -
    +     ,

    [Before] @@ -1577,12 +1529,10 @@ Array [ style="width:100px;white-space:nowrap" > In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -

    -
    + , ] `; diff --git a/components/typography/__tests__/copy.test.tsx b/components/typography/__tests__/copy.test.tsx index 9d7559797d..b6439b76ff 100644 --- a/components/typography/__tests__/copy.test.tsx +++ b/components/typography/__tests__/copy.test.tsx @@ -224,7 +224,7 @@ describe('Typography copy', () => { }); it('the first parameter of onCopy is the click event', () => { - function onCopy(e?: React.MouseEvent) { + function onCopy(e?: React.MouseEvent) { expect(e).not.toBeUndefined(); } diff --git a/components/typography/__tests__/index.test.tsx b/components/typography/__tests__/index.test.tsx index d4ac01487d..28d74d2359 100644 --- a/components/typography/__tests__/index.test.tsx +++ b/components/typography/__tests__/index.test.tsx @@ -3,6 +3,7 @@ import { CheckOutlined, HighlightOutlined, LikeOutlined, SmileOutlined } from '@ import copy from 'copy-to-clipboard'; import KeyCode from 'rc-util/lib/KeyCode'; import { resetWarned } from 'rc-util/lib/warning'; +import userEvent from '@testing-library/user-event'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; @@ -476,33 +477,24 @@ describe('Typography', () => { expect(ref.current instanceof HTMLSpanElement).toBe(true); }); - it('Callback on enter key is triggered', () => { - const onEditStart = jest.fn(); + it('should trigger callback when press {enter}', async () => { const onCopy = jest.fn(); - + const onEditStart = jest.fn(); const { container: wrapper } = render( - + test , ); - const timer: any = 9527; - jest.spyOn(window, 'setTimeout').mockReturnValue(timer); - jest.spyOn(window, 'clearTimeout'); - // must copy first, because editing button will hide copy button - fireEvent.keyUp(wrapper.querySelectorAll('.ant-typography-copy')[0], { - keyCode: KeyCode.ENTER, - }); - fireEvent.keyUp(wrapper.querySelectorAll('.anticon-edit')[0], { keyCode: KeyCode.ENTER }); - - expect(onEditStart.mock.calls.length).toBe(1); - expect(onCopy.mock.calls.length).toBe(1); - jest.restoreAllMocks(); + const copyButton = wrapper.querySelector('.ant-typography-copy') as HTMLButtonElement; + expect(copyButton).toBeTruthy(); + // https://github.com/testing-library/user-event/issues/179#issuecomment-1125146667 + copyButton.focus(); + userEvent.keyboard('{enter}'); + await waitFor(() => expect(onCopy).toHaveBeenCalledTimes(1)); + const editButton = wrapper.querySelector('.ant-typography-edit') as HTMLButtonElement; + expect(editButton).toBeTruthy(); + editButton.focus(); + userEvent.keyboard('{enter}'); + await waitFor(() => expect(onEditStart).toHaveBeenCalledTimes(1)); }); }); diff --git a/components/typography/hooks/useCopyClick.ts b/components/typography/hooks/useCopyClick.ts index 8bf361f78e..3b925ac4c4 100644 --- a/components/typography/hooks/useCopyClick.ts +++ b/components/typography/hooks/useCopyClick.ts @@ -32,7 +32,7 @@ const useCopyClick = ({ React.useEffect(() => cleanCopyId, []); // Keep copy action up to date - const onClick = useEvent(async (e?: React.MouseEvent) => { + const onClick = useEvent(async (e?: React.MouseEvent) => { e?.preventDefault(); e?.stopPropagation(); setCopyLoading(true); diff --git a/components/typography/style/mixins.ts b/components/typography/style/mixins.ts index beaec542b8..75433d4915 100644 --- a/components/typography/style/mixins.ts +++ b/components/typography/style/mixins.ts @@ -60,11 +60,6 @@ export const getLinkStyles: GenerateStyle = (token) return { 'a&, a': { ...operationUnit(token), - textDecoration: token.linkDecoration, - - '&:active, &:hover': { - textDecoration: token.linkHoverDecoration, - }, [`&[disabled], &${componentCls}-disabled`]: { color: token.colorTextDisabled, From d9c778ca5f3eeeead32fa9204180b7eb66e7aee0 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Sun, 29 Sep 2024 18:02:55 +0800 Subject: [PATCH 24/32] site: add version update date for component changedoc (#51070) --- .../common/ComponentChangelog/ComponentChangelog.tsx | 2 ++ scripts/generate-component-changelog.ts | 10 +++++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx index fa0888527b..44fc2855df 100644 --- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx +++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx @@ -19,6 +19,7 @@ interface ChangelogInfo { version: string; changelog: string; refs: string[]; + releaseDate: string; } function matchDeprecated(v: string): MatchDeprecatedResult { @@ -243,6 +244,7 @@ const ComponentChangelog: React.FC = (props) => { )} + {changelogList[0].releaseDate} ), diff --git a/scripts/generate-component-changelog.ts b/scripts/generate-component-changelog.ts index 8e73b177dd..b33376c143 100644 --- a/scripts/generate-component-changelog.ts +++ b/scripts/generate-component-changelog.ts @@ -92,6 +92,7 @@ const miscKeys = [ // let lastGroup = ''; let lastVersion = ''; + let lastReleaseDate = ''; // Split with lines const lines = content.split(/[\n\r]+/).filter((line) => line.trim()); @@ -99,7 +100,7 @@ const miscKeys = [ // Changelog map const componentChangelog: Record< string, - { version: string; changelog: string; refs: string[] }[] + { version: string; changelog: string; refs: string[]; releaseDate: string }[] > = {}; Object.keys(componentNameMap).forEach((name) => { componentChangelog[name] = []; @@ -119,6 +120,12 @@ const miscKeys = [ continue; } + // Get release date + const matchReleaseDate = line.match(/`(\d{4}-\d{2}-\d{2})`/); + if (matchReleaseDate) { + lastReleaseDate = matchReleaseDate[1]; + } + // Start when get version if (!lastVersion) { continue; @@ -175,6 +182,7 @@ const miscKeys = [ version: lastVersion, changelog: changelogLine, refs, + releaseDate: lastReleaseDate, }); matched = true; } From fc91464a9a95d8789ec64c3bb24372823650447c Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 30 Sep 2024 14:08:03 +0800 Subject: [PATCH 25/32] refactor: refactor components/upload/UploadList/index.tsx (#51074) --- components/upload/UploadList/index.tsx | 93 +++++++++----------------- 1 file changed, 33 insertions(+), 60 deletions(-) diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx index 0263d7f1bd..a2c23a4148 100644 --- a/components/upload/UploadList/index.tsx +++ b/components/upload/UploadList/index.tsx @@ -6,6 +6,7 @@ import PictureTwoTone from '@ant-design/icons/PictureTwoTone'; import classNames from 'classnames'; import type { CSSMotionListProps } from 'rc-motion'; import CSSMotion, { CSSMotionList } from 'rc-motion'; +import omit from 'rc-util/lib/omit'; import useForceUpdate from '../../_util/hooks/useForceUpdate'; import initCollapseMotion from '../../_util/motion'; @@ -18,7 +19,7 @@ import { isImageUrl, previewImage } from '../utils'; import ListItem from './ListItem'; interface UploadListRef { - handlePreview: (file: UploadFile, e?: React.SyntheticEvent) => void; + handlePreview: (file: UploadFile, e: React.SyntheticEvent) => void; handleDownload: (file: UploadFile) => void; } @@ -52,31 +53,26 @@ const InternalUploadList: React.ForwardRefRenderFunction { - if (listType !== 'picture' && listType !== 'picture-card' && listType !== 'picture-circle') { + if (!listType.startsWith('picture')) { return; } (items || []).forEach((file) => { if ( - typeof document === 'undefined' || - typeof window === 'undefined' || - !(window as any).FileReader || - !(window as any).File || !(file.originFileObj instanceof File || (file.originFileObj as any) instanceof Blob) || file.thumbUrl !== undefined ) { return; } file.thumbUrl = ''; - if (previewFile) { - previewFile(file.originFileObj as File).then((previewDataUrl: string) => { - // Need append '' to avoid dead loop - file.thumbUrl = previewDataUrl || ''; - forceUpdate(); - }); - } + previewFile?.(file.originFileObj as File).then((previewDataUrl: string) => { + // Need append '' to avoid dead loop + file.thumbUrl = previewDataUrl || ''; + forceUpdate(); + }); }); }, [listType, items, previewFile]); @@ -85,11 +81,11 @@ const InternalUploadList: React.ForwardRefRenderFunction) => { + const onInternalPreview = (file: UploadFile, e: React.SyntheticEvent) => { if (!onPreview) { return; } - e?.preventDefault(); + e.preventDefault(); return onPreview(file); }; @@ -110,14 +106,12 @@ const InternalUploadList: React.ForwardRefRenderFunction : ; - let icon: React.ReactNode = isLoading ? : ; - if (listType === 'picture') { - icon = isLoading ? : fileIcon; - } else if (listType === 'picture-card' || listType === 'picture-circle') { - icon = isLoading ? locale.uploading : fileIcon; + if (listType.startsWith('picture')) { + const loadingIcon = listType === 'picture' ? : locale.uploading; + const fileIcon = isImgUrl?.(file) ? : ; + return isLoading ? loadingIcon : fileIcon; } - return icon; + return isLoading ? : ; }; const actionIconRender = ( @@ -142,15 +136,15 @@ const InternalUploadList: React.ForwardRefRenderFunction {}, - }); - - return @@ -172,39 +166,18 @@ const InternalUploadList: React.ForwardRefRenderFunction>> Motion config - const motionKeyList = [...items.map((file) => ({ key: file.uid, file }))]; - - const animationDirection = - listType === 'picture-card' || listType === 'picture-circle' ? 'animate-inline' : 'animate'; - // const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`; - - let motionConfig: Omit = { + const listItemMotion = React.useMemo( + () => omit(initCollapseMotion(rootPrefixCls), ['onAppearEnd', 'onEnterEnd', 'onLeaveEnd']), + [rootPrefixCls], + ); + const motionConfig: Omit = { + ...(isPictureCardOrCirle ? {} : listItemMotion), motionDeadline: 2000, - motionName: `${prefixCls}-${animationDirection}`, - keys: motionKeyList, + motionName: `${prefixCls}-${isPictureCardOrCirle ? 'animate-inline' : 'animate'}`, + keys: [...items.map((file) => ({ key: file.uid, file }))], motionAppear, }; - const listItemMotion = React.useMemo>(() => { - const motion = { - ...initCollapseMotion(rootPrefixCls), - }; - - delete motion.onAppearEnd; - delete motion.onEnterEnd; - delete motion.onLeaveEnd; - - return motion; - }, [rootPrefixCls]); - - if (listType !== 'picture-card' && listType !== 'picture-circle') { - motionConfig = { - ...listItemMotion, - ...motionConfig, - }; - } - return (
    From 0f30e808a2ddb2060cc995f3a47d857a2fdb8bcf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Mon, 30 Sep 2024 17:41:30 +0800 Subject: [PATCH 26/32] docs: update changelog for version 5.21.2 release (#51078) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * dcos: update changelog for version 5.21.2 release * chore: add empty line before version 5.21.2 in changelog * chore: revert changes to fix Typography `copyable` icon alignment issue * chore: update version to 5.21.2 in package.json * fix: update changelog to correct activeBorderColor token description for Select component * fix: update changelog to specify Input.Search component for alignment issue * Update CHANGELOG.zh-CN.md Co-authored-by: afc163 Signed-off-by: 陈帅 * fix: reorganize Splitter section in changelog for clarity and fix formatting issues # Conflicts: # CHANGELOG.zh-CN.md # Please enter the commit message for your changes. Lines starting # with '#' will be ignored, and an empty message aborts the commit. # # interactive rebase in progress; onto 86489ccab0 # Last command done (1 command done): # pick 33c6cfef84 fix: reorganize Splitter section in changelog for clarity and fix formatting issues # No commands remaining. # You are currently rebasing branch 'changelog' on '86489ccab0'. # # Changes to be committed: # modified: CHANGELOG.en-US.md # modified: CHANGELOG.zh-CN.md # * Update CHANGELOG.en-US.md Co-authored-by: afc163 Signed-off-by: 陈帅 * Update CHANGELOG.en-US.md Co-authored-by: afc163 Signed-off-by: 陈帅 * Update CHANGELOG.zh-CN.md Co-authored-by: afc163 Signed-off-by: 陈帅 * fix: 移除关于 Splitter 在触屏设备上拖拽异常的修复记录 --------- Signed-off-by: 陈帅 Co-authored-by: afc163 --- CHANGELOG.en-US.md | 14 ++++++++++++++ CHANGELOG.zh-CN.md | 14 ++++++++++++++ package.json | 2 +- 3 files changed, 29 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 3f971b157e..a46a3f8b0d 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -16,6 +16,20 @@ tag: vVERSION --- +## 5.21.2 + +`2024-09-30` + +- 🐞 Revert [#49221](https://github.com/ant-design/ant-design/pull/49221) to fix Typography `copyable` icon align issue. [#51066](https://github.com/ant-design/ant-design/pull/51066) [@afc163](https://github.com/afc163) +- 🐞 Fix Tabs flicker when browser zoom is enabled. [#51072](https://github.com/ant-design/ant-design/pull/51072) [@afc163](https://github.com/afc163) +- 🐞 Fix Select incorrect `activeBorderColor` token when variant is filled. [#51054](https://github.com/ant-design/ant-design/pull/51054) [@coding-ice](https://github.com/coding-ice) +- 🐞 Fixed Input.Search alignment issue between the input field and search button at different zoom levels. [#50926](https://github.com/ant-design/ant-design/pull/50926) [@nathanlao](https://github.com/nathanlao) +- 💄 MISC: Tweak outline width of focus style from `4px` to `3px`. [#51069](https://github.com/ant-design/ant-design/pull/51069) [@afc163](https://github.com/afc163) +- Splitter + - 🐞 Fixed the issue with Splitter dragging abnormally on touch screen devices. [#51060](https://github.com/ant-design/ant-design/pull/51060) [@sakuraee](https://github.com/sakuraee) + - 💄 Fixed Splitter.Panel style is invalid error. [#51032](https://github.com/ant-design/ant-design/pull/51032) [@wanpan11](https://github.com/wanpan11) +- ⚡️ Remove TransButton in Table/Transfer/Typography. [#51068](https://github.com/ant-design/ant-design/pull/51068) [@afc163](https://github.com/afc163) + ## 5.21.1 `2024-09-25` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 3d297d1b83..11f27a3c68 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,20 @@ tag: vVERSION --- +## 5.21.2 + +`2024-09-30` + +- 🐞 回滚 [#49221](https://github.com/ant-design/ant-design/pull/49221) 以修复 Typography `copyable` 图标位置偏上的问题。[#51066](https://github.com/ant-design/ant-design/pull/51066) [@afc163](https://github.com/afc163) +- 🐞 修复 Tabs 在浏览器缩放时无限闪烁的问题。[#51072](https://github.com/ant-design/ant-design/pull/51072) [@afc163](https://github.com/afc163) +- 🐞 修复了 Input.Search 组件中在不同缩放级别下输入框和按钮的对齐问题。[#50926](https://github.com/ant-design/ant-design/pull/50926) [@nathanlao](https://github.com/nathanlao) +- 🐞 修复 Select `variant="filled"` 时 `activeBorderColor` token 失效的问题。[#51054](https://github.com/ant-design/ant-design/pull/51054) [@coding-ice](https://github.com/coding-ice) +- 💄 MISC: 调整 focus 时的 outline 边框宽度，从 `4px` 调整到 `3px`。[#51069](https://github.com/ant-design/ant-design/pull/51069) [@afc163](https://github.com/afc163) +- Splitter + - 🐞 修复 Splitter 在触屏设备上拖拽异常的问题。[#51060](https://github.com/ant-design/ant-design/pull/51060) [@sakuraee](https://github.com/sakuraee) + - 💄 修复 Splitter.Panel 无法隐藏的问题。[#51032](https://github.com/ant-design/ant-design/pull/51032) [@wanpan11](https://github.com/wanpan11) +- 📦 移除 Table/Transfer/Typography 内的 TransButton 实现以降低打包体积。[#51068](https://github.com/ant-design/ant-design/pull/51068) [@afc163](https://github.com/afc163) + ## 5.21.1 `2024-09-25` diff --git a/package.json b/package.json index bf72098d4a..52f10b2984 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.21.1", + "version": "5.21.2", "description": "An enterprise-class UI design language and React components implementation", "license": "MIT", "funding": { From 39509d4e859aad0f6d95aee2d12d55bad9f47769 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Mon, 30 Sep 2024 17:45:10 +0800 Subject: [PATCH 27/32] site: support bold for change doc (#51076) --- .../common/ComponentChangelog/ComponentChangelog.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx index 44fc2855df..10f60d6ae9 100644 --- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx +++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx @@ -103,22 +103,30 @@ const ParseChangelog: React.FC<{ changelog: string }> = (props) => { const nodes: React.ReactNode[] = []; let isQuota = false; + let isBold = false; let lastStr = ''; for (let i = 0; i < changelog.length; i += 1) { const char = changelog[i]; - if (char !== '`') { + if (char !== '`' && char !== '*') { lastStr += char; } else { let node: React.ReactNode = lastStr; if (isQuota) { node = {node}; + } else if (isBold) { + node = {node}; } nodes.push(node); lastStr = ''; - isQuota = !isQuota; + if (char === '`') { + isQuota = !isQuota; + } else if (char === '*' && changelog[i + 1] === '*') { + isBold = !isBold; + i += 1; // Skip the next '*' + } } } From 0ed8d61ff649e16458805cc27eb56bf5013dfdc4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 30 Sep 2024 20:21:18 +0800 Subject: [PATCH 28/32] docs: move change-log link to meta part (#51085) --- .dumi/theme/builtins/ComponentMeta/index.tsx | 31 +++++++++++++------ .../ComponentChangelog/ComponentChangelog.tsx | 21 +++++++------ .dumi/theme/slots/Content/index.tsx | 6 ---- 3 files changed, 33 insertions(+), 25 deletions(-) diff --git a/.dumi/theme/builtins/ComponentMeta/index.tsx b/.dumi/theme/builtins/ComponentMeta/index.tsx index 06e7ec51fc..19f3b3b089 100644 --- a/.dumi/theme/builtins/ComponentMeta/index.tsx +++ b/.dumi/theme/builtins/ComponentMeta/index.tsx @@ -1,12 +1,13 @@ import React from 'react'; -import { EditOutlined, GithubOutlined } from '@ant-design/icons'; +import { EditOutlined, GithubOutlined, HistoryOutlined } from '@ant-design/icons'; import type { GetProp } from 'antd'; -import { Descriptions, theme, Tooltip, Typography } from 'antd'; +import { Descriptions, theme, Tooltip, Typography, Space } from 'antd'; import { createStyles, css } from 'antd-style'; import kebabCase from 'lodash/kebabCase'; import CopyToClipboard from 'react-copy-to-clipboard'; import useLocale from '../../../hooks/useLocale'; +import ComponentChangelog from '../../common/ComponentChangelog'; const locales = { cn: { @@ -16,6 +17,7 @@ const locales = { source: '源码', docs: '文档', edit: '编辑此页', + changelog: '更新日志', version: '版本', }, en: { @@ -25,6 +27,7 @@ const locales = { source: 'Source', docs: 'Docs', edit: 'Edit this page', + changelog: 'Changelog', version: 'Version', }, }; @@ -179,14 +182,22 @@ const ComponentMeta: React.FC = (props) => { filename && { label: locale.docs, children: ( - - - {locale.edit} - + + + + {locale.edit} + + + + + {locale.changelog} + + + ), }, isVersionNumber(version) && { diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx index 10f60d6ae9..d8227be3aa 100644 --- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx +++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx @@ -1,6 +1,6 @@ -import React from 'react'; -import { BugOutlined, HistoryOutlined } from '@ant-design/icons'; -import { Button, Drawer, Grid, Popover, Timeline, Typography } from 'antd'; +import React, { cloneElement, isValidElement } from 'react'; +import { BugOutlined } from '@ant-design/icons'; +import { Drawer, Grid, Popover, Timeline, Typography } from 'antd'; import type { TimelineItemProps } from 'antd'; import { createStyles } from 'antd-style'; import semver from 'semver'; @@ -8,6 +8,7 @@ import semver from 'semver'; import deprecatedVersions from '../../../../BUG_VERSIONS.json'; import useFetch from '../../../hooks/useFetch'; import useLocale from '../../../hooks/useLocale'; +import useLocation from '../../../hooks/useLocation'; import Link from '../Link'; interface MatchDeprecatedResult { @@ -76,7 +77,7 @@ const useStyle = createStyles(({ token, css }) => ({ })); export interface ComponentChangelogProps { - pathname: string; + children?: React.ReactNode; } const locales = { @@ -199,9 +200,10 @@ const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[] }; const ComponentChangelog: React.FC = (props) => { - const { pathname = '' } = props; + const { children } = props; const [locale, lang] = useLocale(locales); const [show, setShow] = React.useState(false); + const { pathname } = useLocation(); const { styles } = useStyle(); @@ -263,15 +265,16 @@ const ComponentChangelog: React.FC = (props) => { const screens = Grid.useBreakpoint(); const width = screens.md ? '48vw' : '90vw'; - if (!list || !list.length) { + if (!pathname.startsWith('/components/') || !list || !list.length) { return null; } return ( <> - + {isValidElement(children) && + cloneElement(children as React.ReactElement, { + onClick: () => setShow(true), + })} import('./DocAnchor')); const DocMeta = React.lazy(() => import('./DocMeta')); const Footer = React.lazy(() => import('../Footer')); const PrevAndNext = React.lazy(() => import('../../common/PrevAndNext')); -const ComponentChangelog = React.lazy(() => import('../../common/ComponentChangelog')); const EditButton = React.lazy(() => import('../../common/EditButton')); const Content: React.FC = ({ children }) => { @@ -70,11 +69,6 @@ const Content: React.FC = ({ children }) => { )} - {pathname.startsWith('/components/') && ( - - - - )} ) : null} From bb75758ae06a7a6b0a5e53805c50f44b9d121320 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Tue, 1 Oct 2024 10:48:24 +0800 Subject: [PATCH 29/32] chore: update the publish date (#51086) --- CHANGELOG.en-US.md | 2 +- CHANGELOG.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index a46a3f8b0d..ea994dd901 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -18,7 +18,7 @@ tag: vVERSION ## 5.21.2 -`2024-09-30` +`2024-10-01` - 🐞 Revert [#49221](https://github.com/ant-design/ant-design/pull/49221) to fix Typography `copyable` icon align issue. [#51066](https://github.com/ant-design/ant-design/pull/51066) [@afc163](https://github.com/afc163) - 🐞 Fix Tabs flicker when browser zoom is enabled. [#51072](https://github.com/ant-design/ant-design/pull/51072) [@afc163](https://github.com/afc163) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 11f27a3c68..c0d3c6b770 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -17,7 +17,7 @@ tag: vVERSION ## 5.21.2 -`2024-09-30` +`2024-10-01` - 🐞 回滚 [#49221](https://github.com/ant-design/ant-design/pull/49221) 以修复 Typography `copyable` 图标位置偏上的问题。[#51066](https://github.com/ant-design/ant-design/pull/51066) [@afc163](https://github.com/afc163) - 🐞 修复 Tabs 在浏览器缩放时无限闪烁的问题。[#51072](https://github.com/ant-design/ant-design/pull/51072) [@afc163](https://github.com/afc163) From 6b57e3b281f125e5eedd1eb397734596e55c984e Mon Sep 17 00:00:00 2001 From: "C. T. Lin" Date: Tue, 1 Oct 2024 12:06:30 +0800 Subject: [PATCH 30/32] fix: add peerDependencies back (#51079) --- package.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/package.json b/package.json index 52f10b2984..3abd193d21 100644 --- a/package.json +++ b/package.json @@ -100,6 +100,10 @@ "browserslist": [ "defaults" ], + "peerDependencies": { + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + }, "dependencies": { "@ant-design/colors": "^7.1.0", "@ant-design/cssinjs": "^1.21.1", From 396d070ef785d36c602bc405d2cea7f247e702cf Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Tue, 1 Oct 2024 12:56:23 +0800 Subject: [PATCH 31/32] site: site style update (#51088) --- .dumi/theme/builtins/ComponentMeta/index.tsx | 17 +-- .../ComponentChangelog/ComponentChangelog.tsx | 111 ++++++++++-------- .../theme/common/ComponentChangelog/index.tsx | 7 +- 3 files changed, 76 insertions(+), 59 deletions(-) diff --git a/.dumi/theme/builtins/ComponentMeta/index.tsx b/.dumi/theme/builtins/ComponentMeta/index.tsx index 19f3b3b089..23a6effc7f 100644 --- a/.dumi/theme/builtins/ComponentMeta/index.tsx +++ b/.dumi/theme/builtins/ComponentMeta/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { EditOutlined, GithubOutlined, HistoryOutlined } from '@ant-design/icons'; import type { GetProp } from 'antd'; -import { Descriptions, theme, Tooltip, Typography, Space } from 'antd'; +import { Descriptions, Flex, theme, Tooltip, Typography } from 'antd'; import { createStyles, css } from 'antd-style'; import kebabCase from 'lodash/kebabCase'; import CopyToClipboard from 'react-copy-to-clipboard'; @@ -46,7 +46,7 @@ const useStyle = createStyles(({ token }) => ({ align-items: center; column-gap: ${token.paddingXXS}px; border-radius: ${token.borderRadiusSM}px; - padding-inline: ${token.paddingXXS}px; + padding-inline: ${token.paddingXXS}px !important; transition: all ${token.motionDurationSlow} !important; font-family: ${token.codeFamily}; color: ${token.colorTextSecondary} !important; @@ -73,6 +73,9 @@ const useStyle = createStyles(({ token }) => ({ semicolon: css` color: ${token.colorText}; `, + icon: css` + margin-inline-end: ${token.marginXXS}px; + `, })); export interface ComponentMetaProps { @@ -174,7 +177,7 @@ const ComponentMeta: React.FC = (props) => { label: locale.source, children: ( - + {abbrSource} ), @@ -182,22 +185,22 @@ const ComponentMeta: React.FC = (props) => { filename && { label: locale.docs, children: ( - + - + {locale.edit} - + {locale.changelog} - + ), }, isVersionNumber(version) && { diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx index d8227be3aa..5f84e5b229 100644 --- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx +++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx @@ -1,6 +1,6 @@ import React, { cloneElement, isValidElement } from 'react'; import { BugOutlined } from '@ant-design/icons'; -import { Drawer, Grid, Popover, Timeline, Typography } from 'antd'; +import { Drawer, Flex, Grid, Popover, Tag, Timeline, Typography } from 'antd'; import type { TimelineItemProps } from 'antd'; import { createStyles } from 'antd-style'; import semver from 'semver'; @@ -35,6 +35,11 @@ function matchDeprecated(v: string): MatchDeprecatedResult { } const useStyle = createStyles(({ token, css }) => ({ + listWrap: css` + > li { + line-height: 2; + } + `, linkRef: css` margin-inline-start: ${token.marginXS}px; `, @@ -74,12 +79,23 @@ const useStyle = createStyles(({ token, css }) => ({ scrollbarColor: 'unset', }, }, + versionWrap: css` + margin-bottom: 1em; + `, + versionTitle: css` + margin: 0 !important; + `, + versionTag: css` + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + &:last-child { + margin-inline-end: 0; + } + `, })); -export interface ComponentChangelogProps { - children?: React.ReactNode; -} - const locales = { cn: { full: '查看完整日志', @@ -136,19 +152,12 @@ const ParseChangelog: React.FC<{ changelog: string }> = (props) => { return nodes; }, [changelog]); - return ( - <> - {/* Changelog */} - {parsedChangelog} - - ); + return {parsedChangelog}; }; -const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[]; styles: any }> = ({ - changelogList, - styles, -}) => { - const elements = []; +const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[] }> = ({ changelogList }) => { + const elements: React.ReactNode[] = []; + const { styles } = useStyle(); for (let i = 0; i < changelogList.length; i += 1) { const { refs, changelog } = changelogList[i]; // Check if the next line is an image link and append it to the current line @@ -180,7 +189,7 @@ const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[]; styles: an ); } } - return
      {elements}
    ; + return
      {elements}
    ; }; const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[] => { @@ -199,7 +208,7 @@ const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[] }, [data, componentPath]); }; -const ComponentChangelog: React.FC = (props) => { +const ComponentChangelog: React.FC> = (props) => { const { children } = props; const [locale, lang] = useLocale(locales); const [show, setShow] = React.useState(false); @@ -225,37 +234,41 @@ const ComponentChangelog: React.FC = (props) => { return { children: ( - - {version} - {bugVersionInfo.match && ( - {locale.bugList}} - content={ - - } - > - - - )} - - {changelogList[0].releaseDate} - + + + {version} + {bugVersionInfo.match && ( + {locale.bugList}} + content={ + + } + > + + + )} + + + {changelogList[0]?.releaseDate} + + + ), }; diff --git a/.dumi/theme/common/ComponentChangelog/index.tsx b/.dumi/theme/common/ComponentChangelog/index.tsx index 1c8117f1a8..8eb06b603c 100644 --- a/.dumi/theme/common/ComponentChangelog/index.tsx +++ b/.dumi/theme/common/ComponentChangelog/index.tsx @@ -1,10 +1,11 @@ import React from 'react'; -import type { ComponentChangelogProps } from './ComponentChangelog'; import ComponentChangelog from './ComponentChangelog'; -export default (props: ComponentChangelogProps) => ( +const ChangeLog: React.FC> = ({ children }) => ( - + {children} ); + +export default ChangeLog; From 66222a296b8cf1c24c81a36f7ec23f0b19791060 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Oct 2024 10:43:35 +0800 Subject: [PATCH 32/32] chore: import rc-util from path (#51087) --- components/_util/wave/useWave.ts | 2 +- components/anchor/Anchor.tsx | 2 +- components/color-picker/components/ColorSlider.tsx | 2 +- components/color-picker/hooks/useModeColor.ts | 3 ++- components/dropdown/dropdown.tsx | 2 +- components/float-button/FloatButtonGroup.tsx | 2 +- components/input/OTP/index.tsx | 2 +- components/menu/OverrideContext.tsx | 2 +- components/menu/menu.tsx | 2 +- components/splitter/Splitter.tsx | 2 +- components/typography/hooks/useCopyClick.ts | 2 +- components/watermark/context.ts | 2 +- components/watermark/index.tsx | 2 +- components/watermark/useRafDebounce.ts | 2 +- 14 files changed, 15 insertions(+), 14 deletions(-) diff --git a/components/_util/wave/useWave.ts b/components/_util/wave/useWave.ts index 09e944f9ed..29f6a1a51b 100644 --- a/components/_util/wave/useWave.ts +++ b/components/_util/wave/useWave.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useEvent } from 'rc-util'; +import useEvent from 'rc-util/lib/hooks/useEvent'; import raf from 'rc-util/lib/raf'; import { ConfigContext } from '../../config-provider'; diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index d00890e038..452836fa36 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import classNames from 'classnames'; -import { useEvent } from 'rc-util'; +import useEvent from 'rc-util/lib/hooks/useEvent'; import scrollIntoView from 'scroll-into-view-if-needed'; import getScroll from '../_util/getScroll'; diff --git a/components/color-picker/components/ColorSlider.tsx b/components/color-picker/components/ColorSlider.tsx index e4eef18fe4..f6ee8da055 100644 --- a/components/color-picker/components/ColorSlider.tsx +++ b/components/color-picker/components/ColorSlider.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import type { BaseSliderProps } from '@rc-component/color-picker'; import classNames from 'classnames'; import { UnstableContext } from 'rc-slider'; -import { useEvent } from 'rc-util'; +import useEvent from 'rc-util/lib/hooks/useEvent'; import type { GetContextProp, GetProp } from '../../_util/type'; import Slider from '../../slider'; diff --git a/components/color-picker/hooks/useModeColor.ts b/components/color-picker/hooks/useModeColor.ts index 95a3256f45..ffef564b5e 100644 --- a/components/color-picker/hooks/useModeColor.ts +++ b/components/color-picker/hooks/useModeColor.ts @@ -1,5 +1,6 @@ import * as React from 'react'; -import { useEvent, useMergedState } from 'rc-util'; +import useEvent from 'rc-util/lib/hooks/useEvent'; +import useMergedState from 'rc-util/lib/hooks/useMergedState'; import { useLocale } from '../../locale'; import type { AggregationColor } from '../color'; diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index c29f6068cc..e5fec1d991 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -3,7 +3,7 @@ import RightOutlined from '@ant-design/icons/RightOutlined'; import type { AlignType } from '@rc-component/trigger'; import classNames from 'classnames'; import RcDropdown from 'rc-dropdown'; -import { useEvent } from 'rc-util'; +import useEvent from 'rc-util/lib/hooks/useEvent'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; import omit from 'rc-util/lib/omit'; diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index 277ef411e4..dab79aa497 100644 --- a/components/float-button/FloatButtonGroup.tsx +++ b/components/float-button/FloatButtonGroup.tsx @@ -3,7 +3,7 @@ import CloseOutlined from '@ant-design/icons/CloseOutlined'; import FileTextOutlined from '@ant-design/icons/FileTextOutlined'; import classNames from 'classnames'; import CSSMotion from 'rc-motion'; -import { useEvent } from 'rc-util'; +import useEvent from 'rc-util/lib/hooks/useEvent'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; import { useZIndex } from '../_util/hooks/useZIndex'; diff --git a/components/input/OTP/index.tsx b/components/input/OTP/index.tsx index bad0f54400..3baead3550 100644 --- a/components/input/OTP/index.tsx +++ b/components/input/OTP/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import classNames from 'classnames'; -import { useEvent } from 'rc-util'; +import useEvent from 'rc-util/lib/hooks/useEvent'; import pickAttrs from 'rc-util/lib/pickAttrs'; import { getMergedStatus } from '../../_util/statusUtils'; diff --git a/components/menu/OverrideContext.tsx b/components/menu/OverrideContext.tsx index 4c9ebf037a..256fb10dce 100644 --- a/components/menu/OverrideContext.tsx +++ b/components/menu/OverrideContext.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { supportNodeRef, useComposeRef } from 'rc-util'; +import { supportNodeRef, useComposeRef } from 'rc-util/lib/ref'; import ContextIsolator from '../_util/ContextIsolator'; import type { MenuProps } from './menu'; diff --git a/components/menu/menu.tsx b/components/menu/menu.tsx index 3f8d8fb987..caaa40f22c 100644 --- a/components/menu/menu.tsx +++ b/components/menu/menu.tsx @@ -4,7 +4,7 @@ import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined'; import classNames from 'classnames'; import type { MenuProps as RcMenuProps, MenuRef as RcMenuRef } from 'rc-menu'; import RcMenu from 'rc-menu'; -import { useEvent } from 'rc-util'; +import useEvent from 'rc-util/lib/hooks/useEvent'; import omit from 'rc-util/lib/omit'; import initCollapseMotion from '../_util/motion'; diff --git a/components/splitter/Splitter.tsx b/components/splitter/Splitter.tsx index 16db4f4500..42fcb83f46 100644 --- a/components/splitter/Splitter.tsx +++ b/components/splitter/Splitter.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import classNames from 'classnames'; import ResizeObserver from 'rc-resize-observer'; -import { useEvent } from 'rc-util'; +import useEvent from 'rc-util/lib/hooks/useEvent'; import type { GetProp } from '../_util/type'; import { devUseWarning } from '../_util/warning'; diff --git a/components/typography/hooks/useCopyClick.ts b/components/typography/hooks/useCopyClick.ts index 3b925ac4c4..b97f3b98f5 100644 --- a/components/typography/hooks/useCopyClick.ts +++ b/components/typography/hooks/useCopyClick.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import copy from 'copy-to-clipboard'; -import { useEvent } from 'rc-util'; +import useEvent from 'rc-util/lib/hooks/useEvent'; import toList from '../../_util/toList'; import type { CopyConfig } from '../Base'; diff --git a/components/watermark/context.ts b/components/watermark/context.ts index c5060f8282..f2ca178cb8 100644 --- a/components/watermark/context.ts +++ b/components/watermark/context.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useEvent } from 'rc-util'; +import useEvent from 'rc-util/lib/hooks/useEvent'; export interface WatermarkContextProps { add: (ele: HTMLElement) => void; diff --git a/components/watermark/index.tsx b/components/watermark/index.tsx index 6d22de4f33..d12b66070c 100644 --- a/components/watermark/index.tsx +++ b/components/watermark/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import { useMutateObserver } from '@rc-component/mutate-observer'; import classNames from 'classnames'; -import { useEvent } from 'rc-util'; +import useEvent from 'rc-util/lib/hooks/useEvent'; import { useToken } from '../theme/internal'; import WatermarkContext from './context'; diff --git a/components/watermark/useRafDebounce.ts b/components/watermark/useRafDebounce.ts index ff708012e4..6ee14e58c9 100644 --- a/components/watermark/useRafDebounce.ts +++ b/components/watermark/useRafDebounce.ts @@ -1,5 +1,5 @@ import React from 'react'; -import { useEvent } from 'rc-util'; +import useEvent from 'rc-util/lib/hooks/useEvent'; import raf from 'rc-util/lib/raf'; /**