From 650cf96dbf04b64511748cb575b786a673c6f860 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: Fri, 24 Nov 2023 10:56:04 +0800 Subject: [PATCH 1/6] docs: fix link (#46058) --- docs/react/recommendation.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react/recommendation.zh-CN.md b/docs/react/recommendation.zh-CN.md index f84c4072b1..20a097dcf1 100644 --- a/docs/react/recommendation.zh-CN.md +++ b/docs/react/recommendation.zh-CN.md @@ -10,7 +10,7 @@ title: 社区精选组件 | 类型 | 推荐组件 | | --- | --- | -| 可视化图表 | [Ant Design Charts](https://charts.ant.design/zh) [AntV 数据可视化解决方案](https://antv.vision/zh) [reactflow](https://reactflow.dev/) | +| 可视化图表 | [Ant Design Charts](https://charts.ant.design) [AntV 数据可视化解决方案](https://antv.vision/zh) [reactflow](https://reactflow.dev/) | | React Hooks 库 | [ahooks](https://github.com/alibaba/hooks) | | 表单 | [ProForm](https://procomponents.ant.design/components/form) [Formily](https://github.com/alibaba/formily) [react-hook-form](https://github.com/react-hook-form/react-hook-form) [formik](https://github.com/formium/formik) | | 路由 | [react-router](https://github.com/ReactTraining/react-router) | From 953fe6fa7eb46a0ddfe99b9d78cf37f31858d6ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Fri, 24 Nov 2023 16:17:52 +0800 Subject: [PATCH 2/6] fix: Fix image group preview z index in nested modal (#46035) * fix: Fixed Image.PreviewGroup preview in a nested modal where z-index Settings did not meet expectations * fix: Fixed Image.PreviewGroup preview in a nested modal where z-index Settings did not meet expectations * fix: Fixed Image.PreviewGroup preview in a nested modal where z-index Settings did not meet expectations * test: update test case * test: update test case * bump: rc-menu@7.5.1 * feat: optimize code * feat: optimize code * feat: optimize code --- components/_util/__tests__/useZIndex.test.tsx | 45 +++++++--- components/image/PreviewGroup.tsx | 7 ++ .../__snapshots__/demo-extend.test.ts.snap | 13 +++ .../__tests__/__snapshots__/demo.test.ts.snap | 11 +++ components/image/__tests__/index.test.tsx | 68 +++++++++++++++ components/image/demo/nested.md | 7 ++ components/image/demo/nested.tsx | 85 +++++++++++++++++++ components/image/index.en-US.md | 1 + components/image/index.zh-CN.md | 1 + package.json | 2 +- 10 files changed, 228 insertions(+), 12 deletions(-) create mode 100644 components/image/demo/nested.md create mode 100644 components/image/demo/nested.tsx diff --git a/components/_util/__tests__/useZIndex.test.tsx b/components/_util/__tests__/useZIndex.test.tsx index be5da90d13..1eb36b7571 100644 --- a/components/_util/__tests__/useZIndex.test.tsx +++ b/components/_util/__tests__/useZIndex.test.tsx @@ -180,13 +180,23 @@ const consumerComponent: Record , ImagePreview: ({ rootClassName }: ImageProps) => ( - + <> + + + + + ), }; @@ -207,7 +217,12 @@ function getConsumerSelector(baseSelector: string, consumer: ZIndexConsumer): st } else if (['Menu'].includes(consumer)) { selector = `${baseSelector}.ant-menu-submenu-placement-rightTop`; } else if (consumer === 'ImagePreview') { - selector = `${baseSelector}.comp-ImagePreview`; + selector = ['ImagePreview', 'ImagePreviewGroup'] + .map( + (item) => + `${baseSelector}.comp-${item} .ant-image-preview-wrap, ${baseSelector}.comp-${item}.ant-image-preview-operations-wrapper`, + ) + .join(','); } return selector; } @@ -276,7 +291,7 @@ describe('Test useZIndex hooks', () => { const selector2 = getConsumerSelector('.consumer2', key as ZIndexConsumer); const selector3 = getConsumerSelector('.consumer3', key as ZIndexConsumer); - if (['SelectLike', 'DatePicker'].includes(key)) { + if (['SelectLike', 'DatePicker', 'ImagePreview'].includes(key)) { let comps = document.querySelectorAll(selector1); comps.forEach((comp) => { expect((comp as HTMLDivElement).style.zIndex).toBeFalsy(); @@ -287,11 +302,15 @@ describe('Test useZIndex hooks', () => { const consumerOffset = isColorPicker ? containerBaseZIndexOffset.Popover : consumerBaseZIndexOffset[key as ZIndexConsumer]; + const operOffset = comp.classList.contains('ant-image-preview-operations-wrapper') + ? 1 + : 0; expect((comp as HTMLDivElement).style.zIndex).toBe( String( 1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer] + - consumerOffset, + consumerOffset + + operOffset, ), ); }); @@ -302,11 +321,15 @@ describe('Test useZIndex hooks', () => { const consumerOffset = isColorPicker ? containerBaseZIndexOffset.Popover : consumerBaseZIndexOffset[key as ZIndexConsumer]; + const operOffset = comp.classList.contains('ant-image-preview-operations-wrapper') + ? 1 + : 0; expect((comp as HTMLDivElement).style.zIndex).toBe( String( 1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 + - consumerOffset, + consumerOffset + + operOffset, ), ); }); diff --git a/components/image/PreviewGroup.tsx b/components/image/PreviewGroup.tsx index 136843e2c5..9ef37b476d 100644 --- a/components/image/PreviewGroup.tsx +++ b/components/image/PreviewGroup.tsx @@ -15,6 +15,7 @@ import { getTransitionName } from '../_util/motion'; // CSSINJS import useStyle from './style'; +import { useZIndex } from '../_util/hooks/useZIndex'; export const icons = { rotateLeft: , @@ -40,6 +41,11 @@ const InternalPreviewGroup: React.FC = ({ const [wrapSSR, hashId] = useStyle(prefixCls); + const [zIndex] = useZIndex( + 'ImagePreview', + typeof preview === 'object' ? preview.zIndex : undefined, + ); + const mergedPreview = React.useMemo(() => { if (preview === false) { return preview; @@ -52,6 +58,7 @@ const InternalPreviewGroup: React.FC = ({ transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName), maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName), rootClassName: mergedRootClassName, + zIndex, }; }, [preview]); diff --git a/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap index 54510148b1..4867f42d18 100644 --- a/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -349,6 +349,19 @@ exports[`renders components/image/demo/imageRender.tsx extend context correctly exports[`renders components/image/demo/imageRender.tsx extend context correctly 2`] = `[]`; +exports[`renders components/image/demo/nested.tsx extend context correctly 1`] = ` + +`; + +exports[`renders components/image/demo/nested.tsx extend context correctly 2`] = `[]`; + exports[`renders components/image/demo/placeholder.tsx extend context correctly 1`] = `
`; +exports[`renders components/image/demo/nested.tsx correctly 1`] = ` + +`; + exports[`renders components/image/demo/placeholder.tsx correctly 1`] = `
{ expect(baseElement.querySelector('.test-root-class')).toBeTruthy(); }); + it('Image.PreviewGroup preview in a nested modal where z-index Settings should be correct', () => { + const App = () => ( + + + + + + + + + + + + ); + const { baseElement } = render(); + + fireEvent.click(baseElement.querySelector('.ant-image')!); + + expect( + ( + baseElement.querySelector( + '.test-image-preview-class .ant-image-preview-wrap', + ) as HTMLElement + ).style.zIndex, + ).toBe('1301'); + expect( + ( + baseElement.querySelector( + '.test-image-preview-class.ant-image-preview-operations-wrapper', + ) as HTMLElement + ).style.zIndex, + ).toBe('1302'); + + fireEvent.click(baseElement.querySelectorAll('.ant-image')[1]!); + + expect( + ( + baseElement.querySelector( + '.test-image-preview-group-class .ant-image-preview-wrap', + ) as HTMLElement + ).style.zIndex, + ).toBe('1301'); + expect( + ( + baseElement.querySelector( + '.test-image-preview-group-class.ant-image-preview-operations-wrapper', + ) as HTMLElement + ).style.zIndex, + ).toBe('1302'); + }); }); diff --git a/components/image/demo/nested.md b/components/image/demo/nested.md new file mode 100644 index 0000000000..6613b966fc --- /dev/null +++ b/components/image/demo/nested.md @@ -0,0 +1,7 @@ +## zh-CN + +嵌套在弹框当中使用 + +## en-US + +Nested in the modal diff --git a/components/image/demo/nested.tsx b/components/image/demo/nested.tsx new file mode 100644 index 0000000000..2face1360a --- /dev/null +++ b/components/image/demo/nested.tsx @@ -0,0 +1,85 @@ +import React, { useState } from 'react'; +import { Button, Divider, Image, Modal } from 'antd'; + +const App: React.FC = () => { + const [show1, setShow1] = useState(false); + const [show2, setShow2] = useState(false); + const [show3, setShow3] = useState(false); + return ( + <> + + { + setShow1(open); + }} + onCancel={() => { + setShow1(false); + }} + > + + { + setShow2(open); + }} + onCancel={() => { + setShow2(false); + }} + > + + { + setShow3(open); + }} + onCancel={() => { + setShow3(false); + }} + > + + + + console.log(`current index: ${current}, prev index: ${prev}`), + }} + > + + + + + + + + ); +}; + +export default App; diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md index 04f1265766..265c91ecd3 100644 --- a/components/image/index.en-US.md +++ b/components/image/index.en-US.md @@ -27,6 +27,7 @@ Previewable image. Custom toolbar render Custom preview render Custom preview mask +nested Top progress customization when previewing multiple images Custom component token diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md index f5d49c2b87..6c33b65f66 100644 --- a/components/image/index.zh-CN.md +++ b/components/image/index.zh-CN.md @@ -28,6 +28,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA 自定义工具栏 自定义预览内容 自定义预览文本 +嵌套 多图预览时顶部进度自定义 自定义组件 Token diff --git a/package.json b/package.json index 02ccb67559..5a498a325e 100644 --- a/package.json +++ b/package.json @@ -133,7 +133,7 @@ "rc-drawer": "~6.5.2", "rc-dropdown": "~4.1.0", "rc-field-form": "~1.40.0", - "rc-image": "~7.5.0", + "rc-image": "~7.5.1", "rc-input": "~1.3.6", "rc-input-number": "~8.4.0", "rc-mentions": "~2.9.1", From 0a1c26f1bf0ba063d7ac7bc0d253fcd08b978bbe Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Fri, 24 Nov 2023 18:52:58 +0800 Subject: [PATCH 3/6] docs: add changelog 5.11.4 (#46062) * docs: add changelog 5.11.4 * docs: update --- CHANGELOG.en-US.md | 12 ++++++++++++ CHANGELOG.zh-CN.md | 12 ++++++++++++ package.json | 2 +- 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index cbf6f12ace..0bccd8420e 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -16,6 +16,18 @@ tag: vVERSION --- +## 5.11.4 + +`2023-11-24` + +- 🐞 Fix where Image sets `z-index` abnormally in nested Modal. [#46035](https://github.com/ant-design/ant-design/pull/46035) +- 🐞 Fix Button that disabled link button should not have navigate options when right click. [#46021](https://github.com/ant-design/ant-design/pull/46021) +- Card + - 🛠 Refactor the Card internal method `getAction` into a function component. [#46032](https://github.com/ant-design/ant-design/pull/46032) + - 🐞 Fix the problem of Card warning `invalid annotation` in Rollup. [#46024](https://github.com/ant-design/ant-design/pull/46024) +- TypeScript + - 🤖 Export the type definition for the `required` property of the Radio and Checkbox components. [#46028](https://github.com/ant-design/ant-design/pull/46028) [@nnmax](https://github.com/nnmax) + ## 5.11.3 `2023-11-22` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 354bcceda3..8d3756a2c5 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -16,6 +16,18 @@ tag: vVERSION --- +## 5.11.4 + +`2023-11-24` + +- 🐞 修复 Image 在嵌套 Modal 中设置 `z-index` 异常的问题。[#46035](https://github.com/ant-design/ant-design/pull/46035) +- 🐞 修复 Button 禁用的链接按钮右键点击时会有打开新链接选项的问题。[#46021](https://github.com/ant-design/ant-design/pull/46021) +- Card + - 🛠 把 Card 内部方法 `getAction` 重构为函数组件。[#46032](https://github.com/ant-design/ant-design/pull/46032) + - 🐞 解决 Card 在 Rollup 中会警告 `invalid annotation` 的问题。[#46024](https://github.com/ant-design/ant-design/pull/46024) +- TypeScript + - 🤖 导出 Radio 和 Checkbox 组件的 `required` 属性的类型定义。[#46028](https://github.com/ant-design/ant-design/pull/46028) [@nnmax](https://github.com/nnmax) + ## 5.11.3 `2023-11-22` diff --git a/package.json b/package.json index 5a498a325e..f5efb97574 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.11.3", + "version": "5.11.4", "description": "An enterprise-class UI design language and React components implementation", "keywords": [ "ant", From f21695817e5cf825674d391f0c545ac704ba2c1d Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 24 Nov 2023 19:25:12 +0800 Subject: [PATCH 4/6] docs: fix xpm install commend style (#46077) --- .../builtins/InstallDependencies/index.tsx | 71 ++++++++++++------- .dumi/theme/common/styles/Markdown.tsx | 22 ------ 2 files changed, 46 insertions(+), 47 deletions(-) diff --git a/.dumi/theme/builtins/InstallDependencies/index.tsx b/.dumi/theme/builtins/InstallDependencies/index.tsx index fd61fa091b..b660d82d22 100644 --- a/.dumi/theme/builtins/InstallDependencies/index.tsx +++ b/.dumi/theme/builtins/InstallDependencies/index.tsx @@ -1,7 +1,8 @@ import SourceCode from 'dumi/theme-default/builtins/SourceCode'; import React from 'react'; import type { TabsProps } from 'antd'; -import { Tabs } from 'antd'; +import { ConfigProvider, Tabs } from 'antd'; +import { createStyles, css } from 'antd-style'; import NpmLogo from './npm'; import PnpmLogo from './pnpm'; import YarnLogo from './yarn'; @@ -12,51 +13,71 @@ interface InstallProps { pnpm?: string; } -const npmLabel = ( - - - npm - -); - -const pnpmLabel = ( - - - pnpm - -); - -const yarnLabel = ( - - - yarn - -); +const useStyle = createStyles(() => ({ + packageManager: css` + display: flex; + align-items: center; + justify-content: center; + svg { + margin-inline-end: 8px; + } + }`, +})); const InstallDependencies: React.FC = (props) => { const { npm, yarn, pnpm } = props; + const { styles } = useStyle(); + const items = React.useMemo( () => [ { key: 'npm', children: npm ? {npm} : null, - label: npmLabel, + label: ( +
+ + npm +
+ ), }, { key: 'yarn', children: yarn ? {yarn} : null, - label: yarnLabel, + label: ( +
+ + yarn +
+ ), }, { key: 'pnpm', children: pnpm ? {pnpm} : null, - label: pnpmLabel, + label: ( +
+ + pnpm +
+ ), }, ].filter((item) => item.children), [npm, yarn, pnpm], ); - return ; + + return ( + + + + ); }; export default InstallDependencies; diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx index 0eef2359a9..56246e6160 100644 --- a/.dumi/theme/common/styles/Markdown.tsx +++ b/.dumi/theme/common/styles/Markdown.tsx @@ -199,28 +199,6 @@ const GlobalStyle: React.FC = () => { font-size: 30px; } } - .antd-site-snippet { - .ant-tabs-tab { - .snippet-label { - display: flex; - align-items: center; - justify-content: center; - svg { - margin-inline-end: 8px; - } - } - } - .dumi-default-source-code { - margin: 0 auto; - background-color: ${token.siteMarkdownCodeBg}; - border-radius: ${token.borderRadius}px; - > pre.prism-code { - padding: 12px 20px; - font-size: 13px; - line-height: 2; - } - } - } .markdown table td > a:not(:last-child) { margin-right: 0 !important; From 3fbed04e4b03ef1754a78a9245a2bb59f8b72fd1 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Fri, 24 Nov 2023 21:22:16 +0800 Subject: [PATCH 5/6] test: update useZIndex test time (#46078) Signed-off-by: xrkffgg --- components/_util/__tests__/useZIndex.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/_util/__tests__/useZIndex.test.tsx b/components/_util/__tests__/useZIndex.test.tsx index 1eb36b7571..7dfa3d2cc9 100644 --- a/components/_util/__tests__/useZIndex.test.tsx +++ b/components/_util/__tests__/useZIndex.test.tsx @@ -362,7 +362,7 @@ describe('Test useZIndex hooks', () => { } unmount(); - }, 15000); + }, 20000); }); }); }); From 03409af97f8fa8b32acad7a388eb3fd8640c7c35 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 24 Nov 2023 23:06:58 +0800 Subject: [PATCH 6/6] fix: remove extra parentheses Signed-off-by: lijianan <574980606@qq.com> --- .dumi/theme/builtins/InstallDependencies/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.dumi/theme/builtins/InstallDependencies/index.tsx b/.dumi/theme/builtins/InstallDependencies/index.tsx index b660d82d22..bf32a72f52 100644 --- a/.dumi/theme/builtins/InstallDependencies/index.tsx +++ b/.dumi/theme/builtins/InstallDependencies/index.tsx @@ -21,7 +21,7 @@ const useStyle = createStyles(() => ({ svg { margin-inline-end: 8px; } - }`, + `, })); const InstallDependencies: React.FC = (props) => {