From 926bf87af9f8762ff14b878d138674edf232d12f Mon Sep 17 00:00:00 2001 From: Wuxh Date: Tue, 31 Jan 2023 14:33:59 +0800 Subject: [PATCH 01/28] fix: fix Message component icon style (#40471) * fix: fix Message component icon style * chore: update --- components/message/style/index.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/components/message/style/index.tsx b/components/message/style/index.tsx index f7ed5f3c5e..bb36329e17 100644 --- a/components/message/style/index.tsx +++ b/components/message/style/index.tsx @@ -117,7 +117,7 @@ const genMessageStyle: GenerateStyle = (token) => { padding: paddingXS, textAlign: 'center', - [iconCls]: { + [`${componentCls}-custom-content > ${iconCls}`]: { verticalAlign: 'text-bottom', marginInlineEnd: marginXS, // affected by ltr or rtl fontSize: fontSizeLG, @@ -132,18 +132,18 @@ const genMessageStyle: GenerateStyle = (token) => { pointerEvents: 'all', }, - [`${componentCls}-success ${iconCls}`]: { + [`${componentCls}-success > ${iconCls}`]: { color: colorSuccess, }, - [`${componentCls}-error ${iconCls}`]: { + [`${componentCls}-error > ${iconCls}`]: { color: colorError, }, - [`${componentCls}-warning ${iconCls}`]: { + [`${componentCls}-warning > ${iconCls}`]: { color: colorWarning, }, [` - ${componentCls}-info ${iconCls}, - ${componentCls}-loading ${iconCls}`]: { + ${componentCls}-info > ${iconCls}, + ${componentCls}-loading > ${iconCls}`]: { color: colorInfo, }, }, From b328974ad76c99628b5a57ac2939025a0217f7a7 Mon Sep 17 00:00:00 2001 From: Peach Date: Tue, 31 Jan 2023 16:18:18 +0800 Subject: [PATCH 02/28] docs: changelog for 5.1.7 (#40468) * docs: changelog for 5.1.7 * chore: bump version to 5.1.7 * docs: update changelog * Apply suggestions from code review Co-authored-by: MadCcc <1075746765@qq.com> --------- Co-authored-by: MadCcc <1075746765@qq.com> --- CHANGELOG.en-US.md | 19 +++++++++++++++++++ CHANGELOG.zh-CN.md | 19 +++++++++++++++++++ package.json | 2 +- 3 files changed, 39 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index f50a993794..6bb4d10baf 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,25 @@ timeline: true --- +## 5.1.7 + +`2023-1-31` + +- Input + - 🐞 Fix Input that unexpected cancel button is shown when `type="search"`. [#40457](https://github.com/ant-design/ant-design/pull/40457) [@MadCcc](https://github.com/MadCcc) + - 🐞 Fix Input suffix color does not update bug when component status changed. [#40344](https://github.com/ant-design/ant-design/pull/40344) [@Yuiai01](https://github.com/Yuiai01) +- 🐞 Fix Switch text layout problem in Safari and Chrome <= 84 with compatible mode. [#40453](https://github.com/ant-design/ant-design/pull/40453) [@Ifeinstein](https://github.com/Ifeinstein) +- 🐞 Fix Progress that throw error when `percent` is `null`. [#40378](https://github.com/ant-design/ant-design/pull/40378) [@li-jia-nan](https://github.com/li-jia-nan) +- 🐞 Fix List title and avatar be rendered in the wrong position. [#40395](https://github.com/ant-design/ant-design/pull/40395) [@li-jia-nan](https://github.com/li-jia-nan) +- 🐞 Fix Dropdown submenu wrong position. [#40349](https://github.com/ant-design/ant-design/pull/40349) +- 🐞 Fix Badge throw `findDOMNode` warning in StrictMode when `dot` switch. [#40347](https://github.com/ant-design/ant-design/pull/40347) +- 🐞 Fix Message wrong icon color problem. [#40471](https://github.com/ant-design/ant-design/pull/40471) [@Wxh16144](https://github.com/Wxh16144) +- 💄 Adjust Empty component default style in dark theme. [#40447](https://github.com/ant-design/ant-design/pull/40447) +- RTL + - 💄 Fix Table scroll shadow in RTL mode. [#40441](https://github.com/ant-design/ant-design/pull/40441) [@ds1371dani](https://github.com/ds1371dani) +- TypeScript + - 🤖 Export ConfigProvider's ThemeConfig type. [#40370](https://github.com/ant-design/ant-design/pull/40370) [@Kamahl19](https://github.com/Kamahl19) + ## 5.1.6 `2023-1-20` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 403dc45e74..8ae2b35d6d 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,25 @@ timeline: true --- +## 5.1.7 + +`2023-1-31` + +- Input + - 🐞 修复 Input 组件 `type="search"` 时未隐藏浏览器原生取消按钮的问题。[#40457](https://github.com/ant-design/ant-design/pull/40457) [@MadCcc](https://github.com/MadCcc) + - 🐞 修复 Input 的 suffix 颜色不随组件状态改变的问题。[#40344](https://github.com/ant-design/ant-design/pull/40344) [@Yuiai01](https://github.com/Yuiai01) +- 🐞 修复 Switch 在 Safari 和 Chrome <= 84 兼容模式下文本的显示问题。[#40453](https://github.com/ant-design/ant-design/pull/40453) [@Ifeinstein](https://github.com/Ifeinstein) +- 🐞 修复 Progress 的 `percent` 属性设置为 `null` 时报错的问题。[#40378](https://github.com/ant-design/ant-design/pull/40378) [@li-jia-nan](https://github.com/li-jia-nan) +- 🐞 修复 List 中 title 和 avatar 渲染错位的问题。[#40395](https://github.com/ant-design/ant-design/pull/40395) [@li-jia-nan](https://github.com/li-jia-nan) +- 🐞 修复 Dropdown 子菜单位置不正确的问题。[#40349](https://github.com/ant-design/ant-design/pull/40349) +- 🐞 修复 Badge 在 StrictMode 下切换 `dot` 时会报 `findDOMNode` 警告的问题。[#40347](https://github.com/ant-design/ant-design/pull/40347) +- 🐞 修复 Message 图标颜色错误的问题。[#40471](https://github.com/ant-design/ant-design/pull/40471) [@Wxh16144](https://github.com/Wxh16144) +- 💄 优化 Empty 在暗色主题下默认的颜色。[#40447](https://github.com/ant-design/ant-design/pull/40447) +- RTL + - 💄 修复 Table 在 RTL 模式下的滚动阴影。[#40441](https://github.com/ant-design/ant-design/pull/40441) [@ds1371dani](https://github.com/ds1371dani) +- TypeScript + - 🤖 导出 ConfigProvider 组件的 ThemeConfig 类型。[#40370](https://github.com/ant-design/ant-design/pull/40370) [@Kamahl19](https://github.com/Kamahl19) + ## 5.1.6 `2023-1-20` diff --git a/package.json b/package.json index 0ea577524e..bd1bec6f11 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.1.6", + "version": "5.1.7", "description": "An enterprise-class UI design language and React components implementation", "title": "Ant Design", "keywords": [ From d93bf3c5440e91dad69fa4253a62872c56055b89 Mon Sep 17 00:00:00 2001 From: Wuxh Date: Tue, 31 Jan 2023 16:53:49 +0800 Subject: [PATCH 03/28] fix: fix Select component placeholder style issue (#40477) --- components/select/style/multiple.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/select/style/multiple.tsx b/components/select/style/multiple.tsx index 461dfa9df6..db63024a6e 100644 --- a/components/select/style/multiple.tsx +++ b/components/select/style/multiple.tsx @@ -212,8 +212,7 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation { { [`${componentCls}-multiple${componentCls}-sm`]: { [`${componentCls}-selection-placeholder`]: { - insetInlineStart: token.controlPaddingHorizontalSM - token.lineWidth, - insetInlineEnd: 'auto', + insetInline: token.controlPaddingHorizontalSM - token.lineWidth, }, // https://github.com/ant-design/ant-design/issues/29559 From 0ab8419d6b99c6dc5e58e9a15516242e83b58396 Mon Sep 17 00:00:00 2001 From: lyn <76365499@qq.com> Date: Wed, 1 Feb 2023 10:11:53 +0800 Subject: [PATCH 04/28] docs: update Button/Segmented docs (#40461) --- components/button/index.en-US.md | 2 +- components/button/index.zh-CN.md | 2 +- components/segmented/index.en-US.md | 2 +- components/segmented/index.zh-CN.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index f94c694350..466329531e 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -61,7 +61,7 @@ Different button styles can be generated by setting Button properties. The recom | htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | | | icon | Set the icon component of button | ReactNode | - | | | loading | Set the loading status of button | boolean \| { delay: number } | false | | -| shape | Can be set button shape | `default` \| `circle` \| `round` | 'default' | | +| shape | Can be set button shape | `default` \| `circle` \| `round` | `default` | | | size | Set the size of button | `large` \| `middle` \| `small` | `middle` | | | target | Same as target attribute of a, works when href is specified | string | - | | | type | Can be set to `primary` `ghost` `dashed` `link` `text` `default` | string | `default` | | diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 60d393d200..8feb290dcb 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -66,7 +66,7 @@ group: | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | | | icon | 设置按钮的图标组件 | ReactNode | - | | | loading | 设置按钮载入状态 | boolean \| { delay: number } | false | | -| shape | 设置按钮形状 | `default` \| `circle` \| `round` | 'default' | | +| shape | 设置按钮形状 | `default` \| `circle` \| `round` | `default` | | | size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` | | | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | | | type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` | | diff --git a/components/segmented/index.en-US.md b/components/segmented/index.en-US.md index b3d433ab24..c49eb5b47d 100644 --- a/components/segmented/index.en-US.md +++ b/components/segmented/index.en-US.md @@ -40,5 +40,5 @@ Segmented Controls. This component is available since `antd@4.20.0`. | disabled | Disable all segments | boolean | false | | | onChange | The callback function that is triggered when the state changes | function(value: string \| number) | | | | options | Set children optional | string\[] \| number\[] \| Array<{ label: ReactNode value: string icon? ReactNode disabled?: boolean className?: string }> | [] | | -| size | The size of the Segmented. | `large` \| `middle` \| `small` | - | | +| size | The size of the Segmented. | `large` \| `middle` \| `small` | `middle` | | | value | Currently selected value | string \| number | | | diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md index 76cce0d51f..df9f591edb 100644 --- a/components/segmented/index.zh-CN.md +++ b/components/segmented/index.zh-CN.md @@ -43,5 +43,5 @@ demo: | disabled | 是否禁用 | boolean | false | | | onChange | 选项变化时的回调函数 | function(value: string \| number) | | | | options | 数据化配置选项内容 | string\[] \| number\[] \| Array<{ label: ReactNode value: string icon? ReactNode disabled?: boolean className?: string }> | [] | | -| size | 控件尺寸 | `large` \| `middle` \| `small` | - | | +| size | 控件尺寸 | `large` \| `middle` \| `small` | `middle` | | | value | 当前选中的值 | string \| number | | | From 218d8f441ceb0a27e02cc6195183d2e9d0d2d212 Mon Sep 17 00:00:00 2001 From: Wuxh Date: Wed, 1 Feb 2023 10:14:21 +0800 Subject: [PATCH 05/28] chore: Fix word spelling errors (#40472) * chore: Fix word spelling errors * chore: update * chore: Argument name of useMessage (#1) --------- Co-authored-by: luo3house <96865086+luo3house@users.noreply.github.com> --- components/message/index.tsx | 10 +++++----- components/message/useMessage.tsx | 11 ++++------- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/components/message/index.tsx b/components/message/index.tsx index 8670b58824..946c2a1167 100755 --- a/components/message/index.tsx +++ b/components/message/index.tsx @@ -19,7 +19,7 @@ const methods: NoticeType[] = ['success', 'info', 'warning', 'error', 'loading'] let message: GlobalMessage | null = null; -let act: (callback: VoidFunction) => Promise | void = (callback: VoidFunction) => callback(); +let act: (callback: VoidFunction) => Promise | void = (callback) => callback(); interface GlobalMessage { fragment: DocumentFragment; @@ -84,7 +84,7 @@ interface GlobalHolderRef { } const GlobalHolder = React.forwardRef((_, ref) => { - const initializeMeassgConfig: () => ConfigOptions = () => { + const initializeMessageConfig: () => ConfigOptions = () => { const { prefixCls, container, maxCount, duration, rtl, top } = getGlobalContext(); return { @@ -97,16 +97,16 @@ const GlobalHolder = React.forwardRef((_, ref) => { }; }; - const [meassgConfig, setMeassgConfig] = React.useState(initializeMeassgConfig); + const [messageConfig, setMessageConfig] = React.useState(initializeMessageConfig); - const [api, holder] = useInternalMessage(meassgConfig); + const [api, holder] = useInternalMessage(messageConfig); const global = globalConfig(); const rootPrefixCls = global.getRootPrefixCls(); const rootIconPrefixCls = global.getIconPrefixCls(); const sync = () => { - setMeassgConfig(initializeMeassgConfig); + setMessageConfig(initializeMessageConfig); }; React.useEffect(sync, []); diff --git a/components/message/useMessage.tsx b/components/message/useMessage.tsx index b2986b304e..e5242166b2 100644 --- a/components/message/useMessage.tsx +++ b/components/message/useMessage.tsx @@ -98,7 +98,7 @@ const Holder = React.forwardRef((props, ref) => { let keyIndex = 0; export function useInternalMessage( - notificationConfig?: HolderProps, + messageConfig?: HolderProps, ): readonly [MessageInstance, React.ReactElement] { const holderRef = React.useRef(null); @@ -213,12 +213,9 @@ export function useInternalMessage( }, []); // ============================== Return =============================== - return [ - wrapAPI, - , - ] as const; + return [wrapAPI, ] as const; } -export default function useMessage(notificationConfig?: ConfigOptions) { - return useInternalMessage(notificationConfig); +export default function useMessage(messageConfig?: ConfigOptions) { + return useInternalMessage(messageConfig); } From 79c25f620aafa58418da1ddc505b4aa04f8220ae Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 1 Feb 2023 11:16:22 +0800 Subject: [PATCH 06/28] chore: codepen input render on client (#40478) * fix: codepen input render on client * chore: client only * chore: code clean --- .dumi/theme/builtins/Previewer/index.tsx | 7 +++++-- .dumi/theme/common/ClientOnly.tsx | 18 ++++++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 .dumi/theme/common/ClientOnly.tsx diff --git a/.dumi/theme/builtins/Previewer/index.tsx b/.dumi/theme/builtins/Previewer/index.tsx index b4515d234b..0f82807af7 100644 --- a/.dumi/theme/builtins/Previewer/index.tsx +++ b/.dumi/theme/builtins/Previewer/index.tsx @@ -13,6 +13,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; import ReactDOM from 'react-dom'; import { FormattedMessage } from 'dumi'; +import ClientOnly from '../../common/ClientOnly'; import BrowserFrame from '../../common/BrowserFrame'; import EditButton from '../../common/EditButton'; import CodePenIcon from '../../common/CodePenIcon'; @@ -195,7 +196,7 @@ const Demo: React.FC = (props) => { const codepenPrefillConfig = { title: `${localizedTitle} - antd@${dependencies.antd}`, html, - js: `${'const { createRoot } = ReactDOM;\n'}${sourceCodes?.jsx + js: `const { createRoot } = ReactDOM;\n${sourceCodes?.jsx .replace(/import\s+(?:React,\s+)?{(\s+[^}]*\s+)}\s+from\s+'react'/, `const { $1 } = React;`) .replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'antd';/, 'const { $1 } = antd;') .replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'@ant-design\/icons';/, 'const { $1 } = icons;') @@ -407,7 +408,9 @@ const Demo: React.FC = (props) => { codepenIconRef.current?.submit(); }} > - + + + }> diff --git a/.dumi/theme/common/ClientOnly.tsx b/.dumi/theme/common/ClientOnly.tsx new file mode 100644 index 0000000000..1371d3eeb3 --- /dev/null +++ b/.dumi/theme/common/ClientOnly.tsx @@ -0,0 +1,18 @@ +import type { FC, ReactElement, ReactNode } from 'react'; +import { useEffect, useState } from 'react'; + +export type ClientOnlyProps = { + children: ReactNode; +}; + +const ClientOnly: FC = ({ children }) => { + const [clientReady, setClientReady] = useState(false); + + useEffect(() => { + setClientReady(true); + }, []); + + return clientReady ? (children as ReactElement) : null; +}; + +export default ClientOnly; From 8fc56256e7682704b0531da2f8b5647d7e11c759 Mon Sep 17 00:00:00 2001 From: Rinku Chaudhari <76877078+therealrinku@users.noreply.github.com> Date: Wed, 1 Feb 2023 09:07:29 +0545 Subject: [PATCH 07/28] ts(Tree.tsx): translated chinese ts defintions to english (#40445) --- components/tree/Tree.tsx | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx index 51e4db82b9..79732e61a9 100644 --- a/components/tree/Tree.tsx +++ b/components/tree/Tree.tsx @@ -112,37 +112,37 @@ export interface TreeProps > { showLine?: boolean | { showLeafIcon: boolean | TreeLeafIcon }; className?: string; - /** 是否支持多选 */ + /** Whether to support multiple selection */ multiple?: boolean; - /** 是否自动展开父节点 */ + /** Whether to automatically expand the parent node */ autoExpandParent?: boolean; - /** Checkable状态下节点选择完全受控（父子节点选中状态不再关联） */ + /** Node selection in Checkable state is fully controlled (the selected state of parent and child nodes is no longer associated) */ checkStrictly?: boolean; - /** 是否支持选中 */ + /** Whether to support selection */ checkable?: boolean; - /** 是否禁用树 */ + /** whether to disable the tree */ disabled?: boolean; - /** 默认展开所有树节点 */ + /** Expand all tree nodes by default */ defaultExpandAll?: boolean; - /** 默认展开对应树节点 */ + /** Expand the corresponding tree node by default */ defaultExpandParent?: boolean; - /** 默认展开指定的树节点 */ + /** Expand the specified tree node by default */ defaultExpandedKeys?: Key[]; - /** （受控）展开指定的树节点 */ + /** (Controlled) Expand the specified tree node */ expandedKeys?: Key[]; - /** （受控）选中复选框的树节点 */ + /** (Controlled) Tree node with checked checkbox */ checkedKeys?: Key[] | { checked: Key[]; halfChecked: Key[] }; - /** 默认选中复选框的树节点 */ + /** Tree node with checkbox checked by default */ defaultCheckedKeys?: Key[]; - /** （受控）设置选中的树节点 */ + /** (Controlled) Set the selected tree node */ selectedKeys?: Key[]; - /** 默认选中的树节点 */ + /** Tree node selected by default */ defaultSelectedKeys?: Key[]; selectable?: boolean; - /** 点击树节点触发 */ + /** Click on the tree node to trigger */ filterAntTreeNode?: (node: AntTreeNode) => boolean; loadedKeys?: Key[]; - /** 设置节点可拖拽（IE>8） */ + /** Set the node to be draggable (IE>8) */ draggable?: DraggableFn | boolean | DraggableConfig; style?: React.CSSProperties; showIcon?: boolean; From e060da33fdbc5c4c4d0603dd26429102664e141c Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 1 Feb 2023 12:43:18 +0800 Subject: [PATCH 08/28] fix: Progress success should have animation (#40487) --- components/progress/style/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/progress/style/index.tsx b/components/progress/style/index.tsx index 9a23a6819e..2a5275d3ef 100644 --- a/components/progress/style/index.tsx +++ b/components/progress/style/index.tsx @@ -80,7 +80,7 @@ const genBaseStyle: GenerateStyle = (token) => { }, }, - [`&${progressCls}-success-bg, ${progressCls}-bg`]: { + [`${progressCls}-success-bg, ${progressCls}-bg`]: { position: 'relative', backgroundColor: token.colorInfo, borderRadius: token.progressLineRadius, From 9b25e1bd15853a69d0cbae4d0bb1699b621b4c10 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 1 Feb 2023 15:59:42 +0800 Subject: [PATCH 09/28] fix: tabs overflow unexpected height (#40488) * fix: tabs overflow unexpected height * chore: code clean --- components/tabs/style/index.ts | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts index a08a8abd66..8c00e97956 100644 --- a/components/tabs/style/index.ts +++ b/components/tabs/style/index.ts @@ -170,7 +170,7 @@ const genDropdownStyle: GenerateStyle = (token: TabsToken): CSSObject backgroundClip: 'padding-box', borderRadius: token.borderRadiusLG, outline: 'none', - boxShadow: token.boxShadow, + boxShadow: token.boxShadowSecondary, '&-item': { ...textEllipsis, @@ -772,22 +772,6 @@ const genTabsStyle: GenerateStyle = (token: TabsToken): CSSObject => padding: tabsCardHorizontalPadding, background: 'transparent', border: 0, - - '&::after': { - position: 'absolute', - right: { - _skip_check_: true, - value: 0, - }, - bottom: 0, - left: { - _skip_check_: true, - value: 0, - }, - height: token.controlHeightLG / 8, - transform: 'translateY(100%)', - content: "''", - }, }, [`${componentCls}-nav-add`]: { From 8f5f7cf814835d265183ef3d0331fff51ebe1c4d Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 1 Feb 2023 21:55:20 +0800 Subject: [PATCH 11/28] site: fix 404 page (#40366) --- .dumi/pages/404/index.tsx | 40 ++++++++++++----------------- .dumi/theme/common/CommonHelmet.tsx | 13 +++++++--- .dumi/theme/slots/Content/index.tsx | 26 ++++++++++--------- 3 files changed, 39 insertions(+), 40 deletions(-) diff --git a/.dumi/pages/404/index.tsx b/.dumi/pages/404/index.tsx index a15eb59726..17f4312afa 100644 --- a/.dumi/pages/404/index.tsx +++ b/.dumi/pages/404/index.tsx @@ -32,33 +32,25 @@ const NotFoundPage: React.FC = ({ router }) => { // Report if necessary const { yuyanMonitor } = window as any; - if (yuyanMonitor) { - yuyanMonitor.log({ - code: 11, - msg: `Page not found: ${location.href}; Source: ${document.referrer}`, - }); - } + yuyanMonitor?.log({ + code: 11, + msg: `Page not found: ${location.href}; Source: ${document.referrer}`, + }); }, []); return ( -
-
- - - - } - /> -
-
+ + + + } + /> ); }; diff --git a/.dumi/theme/common/CommonHelmet.tsx b/.dumi/theme/common/CommonHelmet.tsx index 10405ef028..3cf879b5e6 100644 --- a/.dumi/theme/common/CommonHelmet.tsx +++ b/.dumi/theme/common/CommonHelmet.tsx @@ -5,10 +5,15 @@ const CommonHelmet = () => { const meta = useRouteMeta(); const [title, description] = useMemo(() => { - const helmetTitle = `${meta.frontmatter.subtitle || ''} ${ - meta.frontmatter?.title - } - Ant Design`; - const helmetDescription = meta.frontmatter.description; + let helmetTitle; + if (!meta.frontmatter.subtitle && !meta.frontmatter.title) { + helmetTitle = '404 Not Found - Ant Design'; + } else { + helmetTitle = `${meta.frontmatter.subtitle || ''} ${ + meta.frontmatter?.title || '' + } - Ant Design`; + } + const helmetDescription = meta.frontmatter.description || ''; return [helmetTitle, helmetDescription]; }, [meta]); diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx index 430ff4aa9e..1ecddfd0be 100644 --- a/.dumi/theme/slots/Content/index.tsx +++ b/.dumi/theme/slots/Content/index.tsx @@ -187,18 +187,20 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
- - {meta.frontmatter?.title} - {meta.frontmatter.subtitle && ( - {meta.frontmatter.subtitle} - )} - {!pathname.startsWith('/components/overview') && ( - } - filename={meta.frontmatter.filename} - /> - )} - + {meta.frontmatter?.title && meta.frontmatter.subtitle ? ( + + {meta.frontmatter?.title} + {meta.frontmatter.subtitle && ( + {meta.frontmatter.subtitle} + )} + {!pathname.startsWith('/components/overview') && ( + } + filename={meta.frontmatter.filename} + /> + )} + + ) : null} {/* 添加作者、时间等信息 */} {meta.frontmatter.date || meta.frontmatter.author ? ( From 83cfad47146adfc12b192ecea3f1a4617d8ab877 Mon Sep 17 00:00:00 2001 From: "@linhf2023" <32009993+any1024@users.noreply.github.com> Date: Wed, 1 Feb 2023 22:55:41 +0800 Subject: [PATCH 12/28] fix: Add ref to Collapse and Panel component (#40443) * chore: update rc-collapse to 3.5.x * feat: Add ref to Collapse and Panel component * test(collapse): add ref case * update snapshot * Revert "update snapshot" This reverts commit 1d4710a8db4dd2dec552e5b8d0599f3a1c3cc7d0. * chore(deps): bump rc-collapse * chore: update --- components/collapse/Collapse.tsx | 13 ++++------- components/collapse/CollapsePanel.tsx | 14 ++++++++---- components/collapse/__tests__/index.test.tsx | 24 ++++++++++++++++++++ package.json | 2 +- 4 files changed, 39 insertions(+), 14 deletions(-) diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 7b5af39af7..f3d3f16c8d 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -50,11 +50,7 @@ interface PanelProps { collapsible?: CollapsibleType; } -type CompoundedComponent = React.FC & { - Panel: typeof CollapsePanel; -}; - -const Collapse: CompoundedComponent = (props) => { +const Collapse = React.forwardRef((props, ref) => { const { getPrefixCls, direction } = React.useContext(ConfigContext); const { prefixCls: customizePrefixCls, @@ -132,6 +128,7 @@ const Collapse: CompoundedComponent = (props) => { return wrapSSR( { {getItems()} , ); -}; - -Collapse.Panel = CollapsePanel; +}); if (process.env.NODE_ENV !== 'production') { Collapse.displayName = 'Collapse'; } -export default Collapse; +export default Object.assign(Collapse, { Panel: CollapsePanel }); diff --git a/components/collapse/CollapsePanel.tsx b/components/collapse/CollapsePanel.tsx index f02502942b..c05d902e54 100644 --- a/components/collapse/CollapsePanel.tsx +++ b/components/collapse/CollapsePanel.tsx @@ -21,8 +21,7 @@ export interface CollapsePanelProps { collapsible?: CollapsibleType; children?: React.ReactNode; } - -const CollapsePanel: React.FC = (props) => { +const CollapsePanel = React.forwardRef((props, ref) => { warning( !('disabled' in props), 'Collapse.Panel', @@ -38,7 +37,14 @@ const CollapsePanel: React.FC = (props) => { }, className, ); - return ; -}; + return ( + + ); +}); export default CollapsePanel; diff --git a/components/collapse/__tests__/index.test.tsx b/components/collapse/__tests__/index.test.tsx index c1b2602acb..7a56860da3 100644 --- a/components/collapse/__tests__/index.test.tsx +++ b/components/collapse/__tests__/index.test.tsx @@ -152,6 +152,30 @@ describe('Collapse', () => { jest.useRealTimers(); }); + it('ref should work', () => { + const ref = React.createRef(); + const panelRef1 = React.createRef(); + const panelRef2 = React.createRef(); + + const { container } = render( + + + 1 + + + 2 + + + 2 + + , + ); + + expect(ref.current).toBe(container.firstChild); + expect(panelRef1.current).toBe(document.querySelectorAll('.ant-collapse-item')[0]); + expect(panelRef2.current).toBe(document.querySelectorAll('.ant-collapse-item')[1]); + }); + describe('expandIconPosition', () => { ['left', 'right'].forEach((pos) => { it(`warning for legacy '${pos}'`, () => { diff --git a/package.json b/package.json index bd1bec6f11..d7e580f5fd 100644 --- a/package.json +++ b/package.json @@ -121,7 +121,7 @@ "qrcode.react": "^3.1.0", "rc-cascader": "~3.8.0", "rc-checkbox": "~2.3.0", - "rc-collapse": "~3.4.2", + "rc-collapse": "~3.5.2", "rc-dialog": "~9.0.2", "rc-drawer": "~6.1.1", "rc-dropdown": "~4.0.0", From 590b0845653778cff73487e872b21e8866b92b49 Mon Sep 17 00:00:00 2001 From: linxianxi <47104575+linxianxi@users.noreply.github.com> Date: Thu, 2 Feb 2023 10:54:13 +0800 Subject: [PATCH 13/28] demo: add table drag sorting handler demo (#40346) * demo: add table drag sorting handler demo * update snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 308 +++++++++++++++++- .../__tests__/__snapshots__/demo.test.ts.snap | 308 +++++++++++++++++- components/table/demo/drag-sorting-handler.md | 7 + .../table/demo/drag-sorting-handler.tsx | 139 ++++++++ components/table/demo/drag-sorting.md | 14 +- components/table/demo/drag-sorting.tsx | 153 ++++----- components/table/index.en-US.md | 1 + components/table/index.zh-CN.md | 1 + package.json | 3 + 9 files changed, 825 insertions(+), 109 deletions(-) create mode 100644 components/table/demo/drag-sorting-handler.md create mode 100644 components/table/demo/drag-sorting-handler.tsx diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap index 0b568b4e11..0b09cc8033 100644 --- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -2000,9 +2000,14 @@ exports[`renders ./components/table/demo/drag-sorting.tsx extend context correct class="ant-table-tbody" > - New York No. 1 Lake Park + Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text - Sydney No. 1 Lake Park + Sidney No. 1 Lake Park + + + + + + + +
    +
  • + +
    • +
  • + + 1 + +
    • +
  • + +
    • +
+ + + +`; + +exports[`renders ./components/table/demo/drag-sorting-handler.tsx extend context correctly 1`] = ` +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap index 84bfb58ced..a022e7fc1e 100644 --- a/components/table/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap @@ -1470,9 +1470,14 @@ exports[`renders ./components/table/demo/drag-sorting.tsx correctly 1`] = ` class="ant-table-tbody" > + + +
+ + Name + + Age + + Address +
+ + + + + John Brown + + 32 + + Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text +
+ + + + + Jim Green + + 42 + + London No. 1 Lake Park +
+ + + + + Joe Black + + 32 + + Sidney No. 1 Lake Park
- New York No. 1 Lake Park + Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text
- Sydney No. 1 Lake Park + Sidney No. 1 Lake Park +
+
+
+
+
    +
  • + +
    • +
  • + + 1 + +
    • +
  • + +
    • +
+
+
+
+`; + +exports[`renders ./components/table/demo/drag-sorting-handler.tsx correctly 1`] = ` +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/table/demo/drag-sorting-handler.md b/components/table/demo/drag-sorting-handler.md new file mode 100644 index 0000000000..0da9ebe896 --- /dev/null +++ b/components/table/demo/drag-sorting-handler.md @@ -0,0 +1,7 @@ +## zh-CN + +使用 [dnd-kit](https://github.com/clauderic/dnd-kit) 来实现一个拖拽操作列。 + +## en-US + +Alternatively you can implement drag sorting with handler using [dnd-kit](https://github.com/clauderic/dnd-kit). diff --git a/components/table/demo/drag-sorting-handler.tsx b/components/table/demo/drag-sorting-handler.tsx new file mode 100644 index 0000000000..1f3754cb99 --- /dev/null +++ b/components/table/demo/drag-sorting-handler.tsx @@ -0,0 +1,139 @@ +import { MenuOutlined } from '@ant-design/icons'; +import type { DragEndEvent } from '@dnd-kit/core'; +import { DndContext } from '@dnd-kit/core'; +import { + arrayMove, + SortableContext, + useSortable, + verticalListSortingStrategy, +} from '@dnd-kit/sortable'; +import { CSS } from '@dnd-kit/utilities'; +import { Table } from 'antd'; +import type { ColumnsType } from 'antd/es/table'; +import React, { useState } from 'react'; + +interface DataType { + key: string; + name: string; + age: number; + address: string; +} + +const columns: ColumnsType = [ + { + key: 'sort', + }, + { + title: 'Name', + dataIndex: 'name', + }, + { + title: 'Age', + dataIndex: 'age', + }, + { + title: 'Address', + dataIndex: 'address', + }, +]; + +interface RowProps extends React.HTMLAttributes { + 'data-row-key': string; +} + +const Row = ({ children, ...props }: RowProps) => { + const { + attributes, + listeners, + setNodeRef, + setActivatorNodeRef, + transform, + transition, + isDragging, + } = useSortable({ + id: props['data-row-key'], + }); + + const style: React.CSSProperties = { + ...props.style, + transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 }), + transition, + ...(isDragging ? { position: 'relative', zIndex: 9999 } : {}), + }; + + return ( + + {React.Children.map(children, (child) => { + if ((child as React.ReactElement).key === 'sort') { + return React.cloneElement(child as React.ReactElement, { + children: ( + + ), + }); + } + return child; + })} + + ); +}; + +const App: React.FC = () => { + const [dataSource, setDataSource] = useState([ + { + key: '1', + name: 'John Brown', + age: 32, + address: + 'Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text', + }, + { + key: '2', + name: 'Jim Green', + age: 42, + address: 'London No. 1 Lake Park', + }, + { + key: '3', + name: 'Joe Black', + age: 32, + address: 'Sidney No. 1 Lake Park', + }, + ]); + + const onDragEnd = ({ active, over }: DragEndEvent) => { + if (active.id !== over?.id) { + setDataSource((previous) => { + const activeIndex = previous.findIndex((i) => i.key === active.id); + const overIndex = previous.findIndex((i) => i.key === over?.id); + return arrayMove(previous, activeIndex, overIndex); + }); + } + }; + + return ( + + i.key)} + strategy={verticalListSortingStrategy} + > +
+ + Name + + Age + + Address +
+ + + + + John Brown + + 32 + + Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text +
+ + + + + Jim Green + + 42 + + London No. 1 Lake Park +
+ + + + + Joe Black + + 32 + + Sidney No. 1 Lake Park
+ + + ); +}; + +export default App; diff --git a/components/table/demo/drag-sorting.md b/components/table/demo/drag-sorting.md index 2af0c3218e..ba6467b27a 100644 --- a/components/table/demo/drag-sorting.md +++ b/components/table/demo/drag-sorting.md @@ -1,17 +1,7 @@ ## zh-CN -使用自定义元素，我们可以集成 [react-dnd](https://github.com/react-dnd/react-dnd) 来实现拖拽排序。 +使用自定义元素，我们可以集成 [dnd-kit](https://github.com/clauderic/dnd-kit) 来实现拖拽排序。 ## en-US -By using `components`, we can integrate table with [react-dnd](https://github.com/react-dnd/react-dnd) to implement drag sorting function. - -```css -#components-table-demo-drag-sorting tr.drop-over-downward td { - border-bottom: 2px dashed #1677ff !important; -} - -#components-table-demo-drag-sorting tr.drop-over-upward td { - border-top: 2px dashed #1677ff !important; -} -``` +By using `components`, we can integrate table with [dnd-kit](https://github.com/clauderic/dnd-kit) to implement drag sorting function. diff --git a/components/table/demo/drag-sorting.tsx b/components/table/demo/drag-sorting.tsx index fe82b1e4e1..3a0e852988 100644 --- a/components/table/demo/drag-sorting.tsx +++ b/components/table/demo/drag-sorting.tsx @@ -1,9 +1,15 @@ -import React, { useCallback, useRef, useState } from 'react'; +import type { DragEndEvent } from '@dnd-kit/core'; +import { DndContext } from '@dnd-kit/core'; +import { + arrayMove, + SortableContext, + useSortable, + verticalListSortingStrategy, +} from '@dnd-kit/sortable'; +import { CSS } from '@dnd-kit/utilities'; import { Table } from 'antd'; import type { ColumnsType } from 'antd/es/table'; -import update from 'immutability-helper'; -import { DndProvider, useDrag, useDrop } from 'react-dnd'; -import { HTML5Backend } from 'react-dnd-html5-backend'; +import React, { useState } from 'react'; interface DataType { key: string; @@ -12,81 +18,49 @@ interface DataType { address: string; } -interface DraggableBodyRowProps extends React.HTMLAttributes { - index: number; - moveRow: (dragIndex: number, hoverIndex: number) => void; -} - -const type = 'DraggableBodyRow'; - -const DraggableBodyRow = ({ - index, - moveRow, - className, - style, - ...restProps -}: DraggableBodyRowProps) => { - const ref = useRef(null); - const [{ isOver, dropClassName }, drop] = useDrop({ - accept: type, - collect: (monitor) => { - const { index: dragIndex } = monitor.getItem() || {}; - if (dragIndex === index) { - return {}; - } - return { - isOver: monitor.isOver(), - dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward', - }; - }, - drop: (item: { index: number }) => { - moveRow(item.index, index); - }, - }); - const [, drag] = useDrag({ - type, - item: { index }, - collect: (monitor) => ({ - isDragging: monitor.isDragging(), - }), - }); - drop(drag(ref)); - - return ( - - ); -}; - const columns: ColumnsType = [ { title: 'Name', dataIndex: 'name', - key: 'name', }, { title: 'Age', dataIndex: 'age', - key: 'age', }, { title: 'Address', dataIndex: 'address', - key: 'address', }, ]; +interface RowProps extends React.HTMLAttributes { + 'data-row-key': string; +} + +const Row = (props: RowProps) => { + const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ + id: props['data-row-key'], + }); + + const style: React.CSSProperties = { + ...props.style, + transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 }), + transition, + cursor: 'move', + ...(isDragging ? { position: 'relative', zIndex: 9999 } : {}), + }; + + return ; +}; + const App: React.FC = () => { - const [data, setData] = useState([ + const [dataSource, setDataSource] = useState([ { key: '1', name: 'John Brown', age: 32, - address: 'New York No. 1 Lake Park', + address: + 'Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text', }, { key: '2', @@ -98,46 +72,39 @@ const App: React.FC = () => { key: '3', name: 'Joe Black', age: 32, - address: 'Sydney No. 1 Lake Park', + address: 'Sidney No. 1 Lake Park', }, ]); - const components = { - body: { - row: DraggableBodyRow, - }, + const onDragEnd = ({ active, over }: DragEndEvent) => { + if (active.id !== over?.id) { + setDataSource((prev) => { + const activeIndex = prev.findIndex((i) => i.key === active.id); + const overIndex = prev.findIndex((i) => i.key === over?.id); + return arrayMove(prev, activeIndex, overIndex); + }); + } }; - const moveRow = useCallback( - (dragIndex: number, hoverIndex: number) => { - const dragRow = data[dragIndex]; - setData( - update(data, { - $splice: [ - [dragIndex, 1], - [hoverIndex, 0, dragRow], - ], - }), - ); - }, - [data], - ); - return ( - -
{ - const attr = { - index, - moveRow, - }; - return attr as React.HTMLAttributes; - }} - /> - + + i.key)} + strategy={verticalListSortingStrategy} + > +
+ + ); }; diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index abcb943226..5cf1ef4173 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -91,6 +91,7 @@ const columns = [ Editable RowsNested tablesDrag sorting +Drag sorting with handlerResizable columnellipsis columnellipsis column custom tooltip diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index b50d7b9f8f..7b08e46e2a 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -92,6 +92,7 @@ const columns = [ 可编辑行嵌套子表格拖拽排序 +拖拽手柄列可伸缩列单元格自动省略自定义单元格省略提示 diff --git a/package.json b/package.json index d7e580f5fd..6ceb8558e3 100644 --- a/package.json +++ b/package.json @@ -158,6 +158,9 @@ "devDependencies": { "@ant-design/tools": "^17.0.0", "@babel/eslint-plugin": "^7.19.1", + "@dnd-kit/core": "^6.0.7", + "@dnd-kit/sortable": "^7.0.2", + "@dnd-kit/utilities": "^3.2.1", "@emotion/babel-preset-css-prop": "^11.10.0", "@emotion/css": "^11.10.5", "@emotion/react": "^11.10.4", From def02d74dc529404a696aa2130cae158195b8aa9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 2 Feb 2023 19:47:08 +0800 Subject: [PATCH 14/28] chore: remove Select hover undefined line width (#40446) * fix: Select hover undefined line width * Apply suggestions from code review * Update components/select/style/index.tsx --- components/select/style/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index 32cacfb6f3..0f1d19ccb9 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -64,7 +64,6 @@ const genStatusStyle = ( borderHoverColor: string; outlineColor: string; controlOutlineWidth: number; - controlLineWidth: number; }, overwriteDefaultBorder: boolean = false, ): CSSObject => { @@ -87,13 +86,11 @@ const genStatusStyle = ( [`${componentCls}-focused& ${componentCls}-selector`]: { borderColor: borderHoverColor, boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${outlineColor}`, - borderInlineEndWidth: `${token.controlLineWidth}px !important`, outline: 0, }, [`&:hover ${componentCls}-selector`]: { borderColor: borderHoverColor, - borderInlineEndWidth: `${token.controlLineWidth}px !important`, }, }, }, From 619814c0059035bdea88839137254b35fd37ba30 Mon Sep 17 00:00:00 2001 From: Roman Soroka <40a90@mail.ru> Date: Thu, 2 Feb 2023 14:52:10 +0300 Subject: [PATCH 15/28] fix: Table filter does not work if column has grouped header #40203 (#40463) * fix: Table filter does not work if column has grouped header #40203 * fix: Table filter does not work if column has grouped header #40203 * fix: Add test case * fix: Fix test 18 * fix: Fix tests --- .../table/__tests__/Table.filter.test.tsx | 39 +++++++++++++++++++ components/table/hooks/useFilter/index.tsx | 14 ++++++- 2 files changed, 52 insertions(+), 1 deletion(-) diff --git a/components/table/__tests__/Table.filter.test.tsx b/components/table/__tests__/Table.filter.test.tsx index 338698fa88..6fa54e7358 100644 --- a/components/table/__tests__/Table.filter.test.tsx +++ b/components/table/__tests__/Table.filter.test.tsx @@ -2738,4 +2738,43 @@ describe('Table.filter', () => { expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(2); expect(onFilter).toHaveBeenCalledTimes(0); }); + + it('works with grouping columns correctly', () => { + const columns = [ + { + title: 'group', + key: 'group', + children: [ + { + title: 'Name', + dataIndex: 'name', + key: 'name', + filters: [ + { text: 'Jack', value: 'Jack' }, + { text: 'Lucy', value: 'Lucy' }, + ], + onFilter: filterFn, + }, + { + title: 'Age', + dataIndex: 'age', + key: 'age', + }, + ], + }, + ]; + const testData = [ + { key: 0, name: 'Jack', age: 11 }, + { key: 1, name: 'Lucy', age: 20 }, + { key: 2, name: 'Tom', age: 21 }, + { key: 3, name: 'Jerry', age: 22 }, + ]; + const { container } = render(
); + + fireEvent.click(container.querySelector('.ant-dropdown-trigger')!); + fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[0]); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!); + + expect(renderedNames(container)).toEqual(['Jack']); + }); }); diff --git a/components/table/hooks/useFilter/index.tsx b/components/table/hooks/useFilter/index.tsx index 9f5be8cc25..b05dbf63df 100644 --- a/components/table/hooks/useFilter/index.tsx +++ b/components/table/hooks/useFilter/index.tsx @@ -193,10 +193,20 @@ interface FilterConfig { getPopupContainer?: GetPopupContainer; } +const getMergedColumns = ( + rawMergedColumns: ColumnsType, +): ColumnsType => + rawMergedColumns.flatMap((column) => { + if ('children' in column) { + return [column, ...getMergedColumns(column.children || [])]; + } + return [column]; + }); + function useFilter({ prefixCls, dropdownPrefixCls, - mergedColumns, + mergedColumns: rawMergedColumns, onFilterChange, getPopupContainer, locale: tableLocale, @@ -205,6 +215,8 @@ function useFilter({ FilterState[], Record, ] { + const mergedColumns = getMergedColumns(rawMergedColumns || []); + const [filterStates, setFilterStates] = React.useState[]>(() => collectFilterStates(mergedColumns, true), ); From 286a42b4e5439bfbc6a0897acd105cd0c940a950 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 3 Feb 2023 13:39:46 +0800 Subject: [PATCH 16/28] site style code optimization (#40524) * site style code optimization * site style code optimization * del trigger * revert --- .dumi/pages/index/components/Banner.tsx | 8 +- .../components/Theme/BackgroundImage.tsx | 72 ++++----- .dumi/pages/index/index.tsx | 38 ++--- .dumi/theme/builtins/Alert/index.tsx | 3 +- .../layouts/ResourceLayout/AffixTabs.tsx | 23 +-- .dumi/theme/layouts/ResourceLayout/index.tsx | 26 ++-- .dumi/theme/layouts/SidebarLayout/index.tsx | 31 ++-- .dumi/theme/slots/Footer/AdditionalInfo.tsx | 2 +- .dumi/theme/slots/Footer/index.tsx | 18 +-- .dumi/theme/slots/Header/Logo.tsx | 20 +-- .dumi/theme/slots/Header/More.tsx | 137 ++++++++++-------- .dumi/theme/slots/Header/SwitchBtn.tsx | 134 +++++++---------- .dumi/theme/slots/Header/index.tsx | 23 +-- 13 files changed, 266 insertions(+), 269 deletions(-) diff --git a/.dumi/pages/index/components/Banner.tsx b/.dumi/pages/index/components/Banner.tsx index 040b0d9566..781a09da45 100644 --- a/.dumi/pages/index/components/Banner.tsx +++ b/.dumi/pages/index/components/Banner.tsx @@ -1,12 +1,12 @@ -import * as React from 'react'; +import { css } from '@emotion/react'; import { Button, Space, Typography } from 'antd'; import { Link, useLocation } from 'dumi'; -import { css } from '@emotion/react'; +import * as React from 'react'; import useLocale from '../../../hooks/useLocale'; -import SiteContext from '../../../theme/slots/SiteContext'; import useSiteToken from '../../../hooks/useSiteToken'; -import { GroupMask } from './Group'; +import SiteContext from '../../../theme/slots/SiteContext'; import * as utils from '../../../theme/utils'; +import { GroupMask } from './Group'; const locales = { cn: { diff --git a/.dumi/pages/index/components/Theme/BackgroundImage.tsx b/.dumi/pages/index/components/Theme/BackgroundImage.tsx index bc99c8e14b..8881ec72e9 100644 --- a/.dumi/pages/index/components/Theme/BackgroundImage.tsx +++ b/.dumi/pages/index/components/Theme/BackgroundImage.tsx @@ -1,4 +1,5 @@ -import * as React from 'react'; +import { css } from '@emotion/react'; +import React, { useMemo } from 'react'; import useSiteToken from '../../../../hooks/useSiteToken'; import { COLOR_IMAGES, getClosetColor } from './colorUtil'; @@ -7,49 +8,40 @@ export interface BackgroundImageProps { isLight?: boolean; } -export default function BackgroundImage({ colorPrimary, isLight }: BackgroundImageProps) { +const useStyle = () => { const { token } = useSiteToken(); - - const activeColor = React.useMemo(() => getClosetColor(colorPrimary), [colorPrimary]); - - const sharedStyle: React.CSSProperties = { - transition: `all ${token.motionDurationSlow}`, - position: 'absolute', - left: 0, - top: 0, - height: '100%', - width: '100%', + return { + image: css` + transition: all ${token.motionDurationSlow}; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + object-fit: cover; + object-position: right top; + `, }; +}; + +const BackgroundImage: React.FC = ({ colorPrimary, isLight }) => { + const activeColor = useMemo(() => getClosetColor(colorPrimary), [colorPrimary]); + + const { image } = useStyle(); return ( <> - {COLOR_IMAGES.map(({ color, url }) => { - if (!url) { - return null; - } - - return ( - - ); - })} - - {/*
*/} + {COLOR_IMAGES.filter(({ url }) => url).map(({ color, url }) => ( + + ))} ); -} +}; + +export default BackgroundImage; diff --git a/.dumi/pages/index/index.tsx b/.dumi/pages/index/index.tsx index a64fa9ce83..e23bc54211 100644 --- a/.dumi/pages/index/index.tsx +++ b/.dumi/pages/index/index.tsx @@ -1,27 +1,35 @@ -import React from 'react'; -import { useLocale as useDumiLocale } from 'dumi'; +import { css } from '@emotion/react'; import { ConfigProvider } from 'antd'; +import { useLocale as useDumiLocale } from 'dumi'; +import React from 'react'; import useLocale from '../../hooks/useLocale'; import Banner from './components/Banner'; -import Group from './components/Group'; -import { useSiteData } from './components/util'; -import Theme from './components/Theme'; import BannerRecommends from './components/BannerRecommends'; import ComponentsList from './components/ComponentsList'; import DesignFramework from './components/DesignFramework'; +import Group from './components/Group'; +import Theme from './components/Theme'; +import { useSiteData } from './components/util'; + +const useStyle = () => ({ + image: css` + position: absolute; + left: 0; + top: -50px; + height: 160px; + `, +}); const locales = { cn: { assetsTitle: '组件丰富，选用自如', assetsDesc: '大量实用组件满足你的需求，灵活定制与拓展', - designTitle: '设计语言与研发框架', designDesc: '配套生态，让你快速搭建网站应用', }, en: { assetsTitle: 'Rich components', assetsDesc: 'Practical components to meet your needs, flexible customization and expansion', - designTitle: 'Design and framework', designDesc: 'Supporting ecology, allowing you to quickly build website applications', }, @@ -31,7 +39,7 @@ const Homepage: React.FC = () => { const [locale] = useLocale(locales); const { id: localeId } = useDumiLocale(); const localeStr = localeId === 'zh-CN' ? 'cn' : 'en'; - + const { image } = useStyle(); const [siteData] = useSiteData(); return ( @@ -40,7 +48,6 @@ const Homepage: React.FC = () => { -
{ description={locale.designDesc} background="#F5F8FF" decoration={ - <> - {/* Image Left Top */} - - + } > diff --git a/.dumi/theme/builtins/Alert/index.tsx b/.dumi/theme/builtins/Alert/index.tsx index 674697c092..c206aff27d 100644 --- a/.dumi/theme/builtins/Alert/index.tsx +++ b/.dumi/theme/builtins/Alert/index.tsx @@ -1,9 +1,8 @@ import type { AlertProps } from 'antd'; import { Alert } from 'antd'; -import type { FC } from 'react'; import React from 'react'; -const MdAlert: FC = ({ style, ...props }) => ( +const MdAlert: React.FC = ({ style, ...props }) => ( ); diff --git a/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx b/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx index 95dc207e66..5fc69f312b 100644 --- a/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx +++ b/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx @@ -1,7 +1,7 @@ -import * as React from 'react'; -import throttle from 'lodash/throttle'; -import { Tabs } from 'antd'; import { css } from '@emotion/react'; +import { Tabs } from 'antd'; +import throttle from 'lodash/throttle'; +import * as React from 'react'; import scrollTo from '../../../../components/_util/scrollTo'; import useSiteToken from '../../../hooks/useSiteToken'; @@ -45,18 +45,21 @@ const useStyle = () => { transform: translate3d(0, 0, 0); opacity: 1; `, + span: css` + text-transform: capitalize; + `, }; }; const VIEW_BALANCE = 32; -export default () => { +const AffixTabs: React.FC = () => { const containerRef = React.useRef(null); const idsRef = React.useRef([]); const [loaded, setLoaded] = React.useState(false); const [fixedId, setFixedId] = React.useState(null); - const styles = useStyle(); + const { affixTabs, affixTabsFixed, span } = useStyle(); function scrollToId(id: string) { const targetNode = document.getElementById(id); @@ -113,17 +116,17 @@ export default () => { }, []); return ( -
+
{ - scrollToId(key); - }} + onChange={scrollToId} items={idsRef.current.map((id) => ({ key: id, - label: {id.replace(/-/g, ' ')}, + label: {id.replace(/-/g, ' ')}, }))} />
); }; + +export default AffixTabs; diff --git a/.dumi/theme/layouts/ResourceLayout/index.tsx b/.dumi/theme/layouts/ResourceLayout/index.tsx index c0ce51bcc2..5d7fe91cbe 100644 --- a/.dumi/theme/layouts/ResourceLayout/index.tsx +++ b/.dumi/theme/layouts/ResourceLayout/index.tsx @@ -1,24 +1,23 @@ -import type { FC, PropsWithChildren } from 'react'; -import React from 'react'; -import { useRouteMeta, FormattedMessage } from 'dumi'; -import { Layout, Typography, ConfigProvider } from 'antd'; import { css } from '@emotion/react'; -import Footer from '../../slots/Footer'; -import AffixTabs from './AffixTabs'; -import EditButton from '../../common/EditButton'; +import { ConfigProvider, Layout, Typography } from 'antd'; +import { FormattedMessage, useRouteMeta } from 'dumi'; +import type { PropsWithChildren } from 'react'; +import React from 'react'; import useSiteToken from '../../../hooks/useSiteToken'; import CommonHelmet from '../../common/CommonHelmet'; +import EditButton from '../../common/EditButton'; +import Footer from '../../slots/Footer'; +import AffixTabs from './AffixTabs'; export type ResourceLayoutProps = PropsWithChildren<{}>; +const resourcePadding = 40; +const articleMaxWidth = 1208; +const resourcePaddingXS = 24; + const useStyle = () => { const { token } = useSiteToken(); const { antCls } = token; - - const resourcePadding = 40; - const articleMaxWidth = 1208; - const resourcePaddingXS = 24; - return { resourcePage: css` footer { @@ -110,10 +109,9 @@ const useStyle = () => { }; }; -const ResourceLayout: FC = ({ children }) => { +const ResourceLayout: React.FC = ({ children }) => { const styles = useStyle(); const meta = useRouteMeta(); - return ( diff --git a/.dumi/theme/layouts/SidebarLayout/index.tsx b/.dumi/theme/layouts/SidebarLayout/index.tsx index 24378604c7..1e0517ff60 100644 --- a/.dumi/theme/layouts/SidebarLayout/index.tsx +++ b/.dumi/theme/layouts/SidebarLayout/index.tsx @@ -1,15 +1,26 @@ -import type { FC, PropsWithChildren } from 'react'; +import { css } from '@emotion/react'; +import type { PropsWithChildren } from 'react'; import React from 'react'; -import Sidebar from '../../slots/Sidebar'; -import Content from '../../slots/Content'; import CommonHelmet from '../../common/CommonHelmet'; +import Content from '../../slots/Content'; +import Sidebar from '../../slots/Sidebar'; -const SidebarLayout: FC> = ({ children }) => ( -
- - - {children} -
-); +const useStyle = () => ({ + main: css` + display: flex; + margintop: 40; + `, +}); + +const SidebarLayout: React.FC> = ({ children }) => { + const { main } = useStyle(); + return ( +
+ + + {children} +
+ ); +}; export default SidebarLayout; diff --git a/.dumi/theme/slots/Footer/AdditionalInfo.tsx b/.dumi/theme/slots/Footer/AdditionalInfo.tsx index a0a204e2e5..447b4be308 100644 --- a/.dumi/theme/slots/Footer/AdditionalInfo.tsx +++ b/.dumi/theme/slots/Footer/AdditionalInfo.tsx @@ -1,5 +1,5 @@ +import { removeCSS, updateCSS } from 'rc-util/lib/Dom/dynamicCSS'; import * as React from 'react'; -import { updateCSS, removeCSS } from 'rc-util/lib/Dom/dynamicCSS'; import useLocale from '../../../hooks/useLocale'; const whereCls = 'ant-where-checker'; diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx index 6e67874cd4..1350673a4f 100644 --- a/.dumi/theme/slots/Footer/index.tsx +++ b/.dumi/theme/slots/Footer/index.tsx @@ -1,7 +1,3 @@ -import React, { useContext } from 'react'; -import RcFooter from 'rc-footer'; -import { Link, FormattedMessage } from 'dumi'; -import type { FooterColumn } from 'rc-footer/lib/column'; import { AntDesignOutlined, BgColorsOutlined, @@ -10,20 +6,24 @@ import { HistoryOutlined, IssuesCloseOutlined, MediumOutlined, + MessageOutlined, QuestionCircleOutlined, TwitterOutlined, UsergroupAddOutlined, ZhihuOutlined, - MessageOutlined, } from '@ant-design/icons'; -import { css } from '@emotion/react'; import { TinyColor } from '@ctrl/tinycolor'; +import { css } from '@emotion/react'; import getAlphaColor from 'antd/es/theme/util/getAlphaColor'; -import useLocation from '../../../hooks/useLocation'; +import { FormattedMessage, Link } from 'dumi'; +import RcFooter from 'rc-footer'; +import type { FooterColumn } from 'rc-footer/lib/column'; +import React, { useContext } from 'react'; import useLocale from '../../../hooks/useLocale'; +import useLocation from '../../../hooks/useLocation'; import useSiteToken from '../../../hooks/useSiteToken'; -import AdditionalInfo from './AdditionalInfo'; import SiteContext from '../SiteContext'; +import AdditionalInfo from './AdditionalInfo'; const locales = { cn: { @@ -87,7 +87,7 @@ const useStyle = () => { }; }; -const Footer = () => { +const Footer: React.FC = () => { const location = useLocation(); const [locale, lang] = useLocale(locales); const style = useStyle(); diff --git a/.dumi/theme/slots/Header/Logo.tsx b/.dumi/theme/slots/Header/Logo.tsx index 109d638a05..ac5cfa2dcf 100644 --- a/.dumi/theme/slots/Header/Logo.tsx +++ b/.dumi/theme/slots/Header/Logo.tsx @@ -1,8 +1,8 @@ -import * as React from 'react'; -import { Link, useLocation } from 'dumi'; import { css } from '@emotion/react'; -import * as utils from '../../utils'; +import { Link, useLocation } from 'dumi'; +import * as React from 'react'; import useSiteToken from '../../../hooks/useSiteToken'; +import * as utils from '../../utils'; const useStyle = () => { const { token } = useSiteToken(); @@ -31,8 +31,8 @@ const useStyle = () => { img { height: 32px; - margin-inline-end: 12px; vertical-align: middle; + margin-inline-end: 12px; } @media only screen and (max-width: ${mobileMaxWidth}px) { @@ -40,6 +40,9 @@ const useStyle = () => { padding-inline-end: 0; } `, + title: css` + line-height: 32px; + `, }; }; @@ -48,15 +51,14 @@ export interface LogoProps { location: any; } -const Logo = ({ isZhCN }: LogoProps) => { +const Logo: React.FC = ({ isZhCN }) => { const { search } = useLocation(); - const { logo } = useStyle(); - + const { logo, title } = useStyle(); return (

- logo - Ant Design + logo + Ant Design

); diff --git a/.dumi/theme/slots/Header/More.tsx b/.dumi/theme/slots/Header/More.tsx index cea60b863a..e9186f9afa 100644 --- a/.dumi/theme/slots/Header/More.tsx +++ b/.dumi/theme/slots/Header/More.tsx @@ -1,79 +1,88 @@ -import * as React from 'react'; +import { DownOutlined } from '@ant-design/icons'; +import { css } from '@emotion/react'; import type { MenuProps } from 'antd'; import { Button, Dropdown } from 'antd'; import { FormattedMessage } from 'dumi'; -import { DownOutlined } from '@ant-design/icons'; +import React from 'react'; import type { SharedProps } from './interface'; -const smallStyle = { fontSize: 12, color: '#777', marginLeft: '0.3em' }; +const useStyle = (rtl?: boolean) => ({ + smallStyle: css` + font-size: 12px; + color: #777; + margin-left: 0.3em; + `, + downOutlined: css` + font-size: 9px; + margin: ${rtl ? '-1px 2px 0 0' : '-1px 0 0 2px'}; + vertical-align: middle; + `, +}); -export function getEcosystemGroup(): Exclude { - return [ - { - label: ( - - - - ), - key: 'charts', - }, - { - label: ( - - - - ), - key: 'pro', - }, - { - label: ( - - - - ), - key: 'procomponents', - }, - { - label: ( - - Ant Design of Angular - - ( - ) - - - ), - key: 'ng', - }, - { - label: ( - - Ant Design of Vue - - ( - ) - - - ), - key: 'vue', - }, - ]; -} +const Community: React.FC = () => { + const { smallStyle } = useStyle(); + return ( + + () + + ); +}; -export default (props: SharedProps) => { - const downStyle = props.isRTL ? '-1px 2px 0 0' : '-1px 0 0 2px'; +export const getEcosystemGroup = (): MenuProps['items'] => [ + { + label: ( + + + + ), + key: 'charts', + }, + { + label: ( + + + + ), + key: 'pro', + }, + { + label: ( + + + + ), + key: 'procomponents', + }, + { + label: ( + + Ant Design of Angular + + + ), + key: 'ng', + }, + { + label: ( + + Ant Design of Vue + + + ), + key: 'vue', + }, +]; + +const More: React.FC = ({ isRTL }) => { + const { downOutlined } = useStyle(isRTL); return ( ); }; + +export default More; diff --git a/.dumi/theme/slots/Header/SwitchBtn.tsx b/.dumi/theme/slots/Header/SwitchBtn.tsx index 799392a65a..43704cde75 100644 --- a/.dumi/theme/slots/Header/SwitchBtn.tsx +++ b/.dumi/theme/slots/Header/SwitchBtn.tsx @@ -1,6 +1,6 @@ -import * as React from 'react'; -import { Tooltip } from 'antd'; import { css } from '@emotion/react'; +import { Tooltip } from 'antd'; +import React from 'react'; import useSiteToken from '../../../hooks/useSiteToken'; export interface LangBtnProps { @@ -17,12 +17,21 @@ const BASE_SIZE = '1.2em'; const useStyle = () => { const { token } = useSiteToken(); - const { controlHeight, motionDurationMid } = token; + + const { + colorText, + colorBorder, + colorBgContainer, + colorBgTextHover, + borderRadius, + controlHeight, + motionDurationMid, + } = token; return { btn: css` - color: ${token.colorText}; - border-color: ${token.colorBorder}; + color: ${colorText}; + border-color: ${colorBorder}; padding: 0 !important; width: ${controlHeight}px; height: ${controlHeight}px; @@ -31,100 +40,67 @@ const useStyle = () => { justify-content: center; border: none; background: transparent; - border-radius: ${token.borderRadius}px; + border-radius: ${borderRadius}px; transition: all ${motionDurationMid}; cursor: pointer; - .btn-inner { transition: all ${motionDurationMid}; } - &:hover { - background: ${token.colorBgTextHover}; + background: ${colorBgTextHover}; } - img { width: ${BASE_SIZE}; height: ${BASE_SIZE}; } - .anticon { font-size: ${BASE_SIZE}; } `, + innerDiv: css` + position: relative; + width: ${BASE_SIZE}; + height: ${BASE_SIZE}; + `, + labelStyle: css` + position: absolute; + font-size: ${BASE_SIZE}; + line-height: 1; + border: 1px solid ${colorText}; + color: ${colorText}; + `, + label1Style: css` + left: -5%; + top: 0; + z-index: 1; + background-color: ${colorText}; + color: ${colorBgContainer}; + transform: scale(0.7); + transform-origin: 0 0; + `, + label2Style: css` + right: -5%; + bottom: 0; + z-index: 0; + transform: scale(0.5); + transform-origin: 100% 100%; + `, }; }; -export default function LangBtn({ - label1, - label2, - tooltip1, - tooltip2, - value, - pure, - onClick, -}: LangBtnProps) { - const { token } = useSiteToken(); - const style = useStyle(); +const LangBtn: React.FC = (props) => { + const { label1, label2, tooltip1, tooltip2, value, pure, onClick } = props; - let label1Style: React.CSSProperties; - let label2Style: React.CSSProperties; + const { btn, innerDiv, labelStyle, label1Style, label2Style } = useStyle(); - const iconStyle: React.CSSProperties = { - position: 'absolute', - fontSize: BASE_SIZE, - lineHeight: 1, - border: `1px solid ${token.colorText}`, - color: token.colorText, - }; - - const fontStyle: React.CSSProperties = { - left: '-5%', - top: 0, - zIndex: 1, - background: token.colorText, - color: token.colorBgContainer, - transformOrigin: '0 0', - transform: `scale(0.7)`, - }; - const backStyle: React.CSSProperties = { - right: '-5%', - bottom: 0, - zIndex: 0, - transformOrigin: '100% 100%', - transform: `scale(0.5)`, - }; - - if (value === 1) { - label1Style = fontStyle; - label2Style = backStyle; - } else { - label1Style = backStyle; - label2Style = fontStyle; - } - - let node = ( - - +
+ +
+
+ +
+
diff --git a/components/mentions/__tests__/__snapshots__/demo.test.ts.snap b/components/mentions/__tests__/__snapshots__/demo.test.ts.snap index 389ccf6ff3..861bc82c83 100644 --- a/components/mentions/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/mentions/__tests__/__snapshots__/demo.test.ts.snap @@ -139,22 +139,37 @@ exports[`renders ./components/mentions/demo/form.tsx correctly 1`] = `
- - +
+ +
+
+ +
+
diff --git a/components/mentions/demo/form.tsx b/components/mentions/demo/form.tsx index 53879bbd0f..9ff5c17a33 100644 --- a/components/mentions/demo/form.tsx +++ b/components/mentions/demo/form.tsx @@ -1,5 +1,5 @@ +import { Button, Form, Mentions, Space } from 'antd'; import React from 'react'; -import { Button, Form, Mentions } from 'antd'; const { getMentions } = Mentions; @@ -81,13 +81,14 @@ const App: React.FC = () => { /> - -     - + + + + ); From e45a43e6a21c19eee6f62b8db68472c5d5b238ea Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sat, 4 Feb 2023 21:26:12 +0800 Subject: [PATCH 21/28] fix: fix site style (#40539) --- components/mentions/demo/async.md | 2 +- components/mentions/index.en-US.md | 33 ++++++++++++++---------------- components/mentions/index.zh-CN.md | 33 ++++++++++++++---------------- 3 files changed, 31 insertions(+), 37 deletions(-) diff --git a/components/mentions/demo/async.md b/components/mentions/demo/async.md index da9d1ffefe..d11a2b492e 100644 --- a/components/mentions/demo/async.md +++ b/components/mentions/demo/async.md @@ -4,7 +4,7 @@ ## en-US -async +async.