From 9ec402cfe1ca9213417ba55f875e4783760c72df Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 13 Sep 2023 09:31:22 +0800 Subject: [PATCH 01/24] docs: try to fix hydration error (#44797) --- .dumi/theme/layouts/GlobalLayout.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx index a28f602b3e..f1cbbab9b4 100644 --- a/.dumi/theme/layouts/GlobalLayout.tsx +++ b/.dumi/theme/layouts/GlobalLayout.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo } from 'react'; +import React, { useCallback, useEffect, useMemo, startTransition } from 'react'; import { createCache, extractStyle, @@ -84,7 +84,9 @@ const GlobalLayout: React.FC = () => { ...nextSearchParams, theme: _theme, }); - setPrefersColor(_theme.includes('dark') ? 'dark' : 'light'); + startTransition(() => { + setPrefersColor(_theme.includes('dark') ? 'dark' : 'light'); + }); } }); @@ -106,8 +108,6 @@ const GlobalLayout: React.FC = () => { setSiteState({ theme: _theme, direction: _direction === 'rtl' ? 'rtl' : 'ltr' }); // Handle isMobile updateMobileMode(); - // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme - setPrefersColor(_theme.includes('dark') ? 'dark' : 'light'); window.addEventListener('resize', updateMobileMode); return () => { From ceae7de9db62a348a5293d52fb3f5dab0b35deca Mon Sep 17 00:00:00 2001 From: Jason-huang66 <73976606+Jason-huang66@users.noreply.github.com> Date: Wed, 13 Sep 2023 11:15:20 +0800 Subject: [PATCH 02/24] fix: CardGrid style issue with left bottom corner (#44801) * fix: CardGrid style issue with left bottom corner * fix: CardGrid style issue with left bottom corner --- components/card/style/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/components/card/style/index.ts b/components/card/style/index.ts index 07ddc30b35..5825de419f 100644 --- a/components/card/style/index.ts +++ b/components/card/style/index.ts @@ -349,6 +349,7 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { }, [`${componentCls}-contain-grid`]: { + borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0 `, [`${componentCls}-body`]: { display: 'flex', flexWrap: 'wrap', From b2b961e058dfd942f276cfb5d21cd1f0fef6e9da Mon Sep 17 00:00:00 2001 From: Rinku Chaudhari <76877078+therealrinku@users.noreply.github.com> Date: Wed, 13 Sep 2023 09:17:58 +0545 Subject: [PATCH 03/24] docs: spelling and grammar fixes (#44807) * refactor: convertLegacyProps function moved to buttonHelpers * docs: spelling and grammar fixes --- docs/blog/contributor-development-maintenance-guide.en-US.md | 2 +- docs/blog/extract-ssr.en-US.md | 2 +- docs/blog/github-actions-workflow.en-US.md | 2 +- docs/blog/mock-project-build.en-US.md | 2 +- docs/blog/why-not-static.en-US.md | 4 ++-- docs/react/faq.en-US.md | 2 +- docs/react/i18n.en-US.md | 2 +- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/blog/contributor-development-maintenance-guide.en-US.md b/docs/blog/contributor-development-maintenance-guide.en-US.md index 2030d754fa..c0498a3deb 100644 --- a/docs/blog/contributor-development-maintenance-guide.en-US.md +++ b/docs/blog/contributor-development-maintenance-guide.en-US.md @@ -52,7 +52,7 @@ Back to the topic, what should we do if we find snapshot test failed after chang npm run test -u ``` -2. However, we should find what's going wrong if the diff of snapshot is not only cause by your modification this time. For example, you only modified the text, but found that classnames in snapshots have changed, which obviously does not meet expectations. +2. However, we should find what's going wrong if the diff of snapshot is not only caused by your modification this time. For example, you only modified the text, but found that classnames in snapshots have changed, which obviously does not meet expectations. The common causes are as follows: diff --git a/docs/blog/extract-ssr.en-US.md b/docs/blog/extract-ssr.en-US.md index a53ff5f6c7..b0e148e7df 100644 --- a/docs/blog/extract-ssr.en-US.md +++ b/docs/blog/extract-ssr.en-US.md @@ -25,7 +25,7 @@ In the v5 alpha version, in order to cover the SSR style rendering, we refer to This implementation is simple and effective, the only downside is style pollution for `:nth` selections. But considering that antd components rarely use this selector, the side effects can be ignored. -It worked well at the beginning, and the official website of antd directly supports the SSR style without modification and meet the SEO needs. But as our components gradually migrated to the CSS-in-JS version, we found that the site's buddle size became very large and slowly became unusable. After looking at the HTML, we found that the default inline method is not good, it will cause the style to be doubled inline, for example, if there are 3 Buttons in a page, then it will repeat the inline 3 times: +It worked well at the beginning, and the official website of antd directly supports the SSR style without modification and meet the SEO needs. But as our components gradually migrated to the CSS-in-JS version, we found that the site's bundle size became very large and slowly became unusable. After looking at the HTML, we found that the default inline method is not good, it will cause the style to be doubled inline, for example, if there are 3 Buttons in a page, then it will repeat the inline 3 times: ```html
diff --git a/docs/blog/github-actions-workflow.en-US.md b/docs/blog/github-actions-workflow.en-US.md index f59dff801d..6352d2d32a 100644 --- a/docs/blog/github-actions-workflow.en-US.md +++ b/docs/blog/github-actions-workflow.en-US.md @@ -40,7 +40,7 @@ As a feature on the GitHub platform, issues serve as a centralized information h ### Ensuring the Quality of Issues -Ensuring issues contain sufficient information helps us to analyze and prioritize. We provide an [issue assistant](http://new-issue.ant.design) to standardize the process of creating issues. Additionally, we use GitHub Actions to check the issues created to auto close if it not pass the assistant's checks. Which will be labeled as [Invalid](https://github.com/ant-design/ant-design/issues?q=label%3AInvalid), aand leaving comment to remind the creator how to ask a question proporly. +Ensuring issues contain sufficient information helps us to analyze and prioritize. We provide an [issue assistant](http://new-issue.ant.design) to standardize the process of creating issues. Additionally, we use GitHub Actions to check the issues created to auto close if it not pass the assistant's checks. Which will be labeled as [Invalid](https://github.com/ant-design/ant-design/issues?q=label%3AInvalid), and leaving comment to remind the creator how to ask a question properly. ![invalid-issue-preview](https://user-images.githubusercontent.com/32004925/231660945-509cf97c-43eb-4a1c-acd2-81eeedfe4a73.png) diff --git a/docs/blog/mock-project-build.en-US.md b/docs/blog/mock-project-build.en-US.md index 55a0e9d089..3f3186d509 100644 --- a/docs/blog/mock-project-build.en-US.md +++ b/docs/blog/mock-project-build.en-US.md @@ -30,7 +30,7 @@ When we find relevant updates, we will install the previous version for comparis ### Schedule build -As you see, the above troubleshooting method has a certain lag. We hope to reduce additional human labor by building regularly, and at the same time allow us to find problems faster. So we reused the [create-next-app-antd](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style) project as the base (in this way, if something goes wrong with the template project, we can also be detected in advance). Created a `mock-project-build.yml` CI that executes every half hour, which periodically pulls [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) repo to build: +As you can see, the above troubleshooting method has a certain lag. We hope to reduce additional human labor by building regularly, and at the same time allow us to find problems faster. So we reused the [create-next-app-antd](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style) project as the base (in this way, if something goes wrong with the template project, we can also be detected in advance). Created a `mock-project-build.yml` CI that executes every half hour, which periodically pulls [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) repo to build: ```yml on: diff --git a/docs/blog/why-not-static.en-US.md b/docs/blog/why-not-static.en-US.md index 80cc036cd5..f2fae092c0 100644 --- a/docs/blog/why-not-static.en-US.md +++ b/docs/blog/why-not-static.en-US.md @@ -8,7 +8,7 @@ yuque_url: https://www.yuque.com/ant-design/ant-design/gkkyx81eihftzzq7 > `message.success` is working well, why do you warn me to use hooks? antd is getting worse and worse, goodbye! -We've heard some complain about hooks replacement of static methods. We know it's painful, but after years of consideration, we still decide to do a cut in v5 (yes, this discussion is even older than hooks, but there was no simple way to implement it before hooks, so we just put it aside). +We've heard some complaints about hooks replacement of static methods. We know it's painful, but after years of consideration, we still decide to do a cut in v5 (yes, this discussion is even older than hooks, but there was no simple way to implement it before hooks, so we just put it aside). ## Static methods @@ -16,7 +16,7 @@ For the early JS, there already exists a simple and easy-to-use API `alert`. You Fetch Failed -But from the perspective of data flow, this actually couples UI and data layer. It's just look like it doesn't directly depend on the UI context when it's called, so it looks harmless. And for the perspective of testing, this kind of coupling also makes the test complicated. +But from the perspective of data flow, this actually couples UI and data layer. It just looks like it doesn't directly depend on the UI context when it's called, so it looks harmless. And for the perspective of testing, this kind of coupling also makes the test complicated. ### Pain of context lost diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md index 252c467ed2..2750ff0294 100644 --- a/docs/react/faq.en-US.md +++ b/docs/react/faq.en-US.md @@ -260,7 +260,7 @@ If you encounter the above error, please check the current project `tsconfig.jso } ``` -The above problem occurs if `strictNullChecks` is set to `true`, If you can determine the project don't need this configuration (see [strictNullChecks](https://www.typescriptlang.org/zh/tsconfig#strictNullChecks) to judge whether need the configuration). You can try changing to `false` to turn off the control strict check. However, if you do need to enable this feature, you can avoid this situation by using other types instead of `null` when designing types +The above problem occurs if `strictNullChecks` is set to `true`, If you can determine the project don't need this configuration (see [strictNullChecks](https://www.typescriptlang.org/zh/tsconfig#strictNullChecks) to judge whether need the configuration). You can try changing to `false` to turn off the control strict check. However, if you do need to enable this feature, you can avoid this situation by using other types instead of `null` when defining types ## The antd component reported an error when using the App Router of Next.js diff --git a/docs/react/i18n.en-US.md b/docs/react/i18n.en-US.md index 752e635905..68ca1630c6 100644 --- a/docs/react/i18n.en-US.md +++ b/docs/react/i18n.en-US.md @@ -77,7 +77,7 @@ The following languages are currently supported: | Malay (Malaysia) | ms_MY | | Burmese | my_MM | | Norwegian | nb_NO | -| Nepal | ne_NP | +| Nepali | ne_NP | | Dutch (Belgium) | nl_BE | | Dutch | nl_NL | | Polish | pl_PL | From 58f7221b93133891b2b71fbcd6f8440dd45c9046 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 13 Sep 2023 17:19:09 +0800 Subject: [PATCH 04/24] fix: tree checkbox should align top (#44827) --- .../__snapshots__/demo-extend.test.ts.snap | 320 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 318 +++++++++++++++++ components/tree/demo/multiple-line.md | 7 + components/tree/demo/multiple-line.tsx | 58 ++++ components/tree/index.en-US.md | 1 + components/tree/index.zh-CN.md | 1 + components/tree/style/index.ts | 2 + 7 files changed, 707 insertions(+) create mode 100644 components/tree/demo/multiple-line.md create mode 100644 components/tree/demo/multiple-line.tsx diff --git a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap index af6c209e58..b1d75173f1 100644 --- a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -3889,6 +3889,326 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = ` exports[`renders components/tree/demo/line.tsx extend context correctly 2`] = `[]`; +exports[`renders components/tree/demo/multiple-line.tsx extend context correctly 1`] = ` +
+
+ +
+ +`; + +exports[`renders components/tree/demo/multiple-line.tsx extend context correctly 2`] = `[]`; + exports[`renders components/tree/demo/search.tsx extend context correctly 1`] = `
`; +exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = ` +
+
+ +
+ +`; + exports[`renders components/tree/demo/search.tsx correctly 1`] = `
sss, key: '0-0-1-0' }], + }, + ], + }, +]; + +const App: React.FC = () => { + const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => { + console.log('selected', selectedKeys, info); + }; + + const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => { + console.log('onCheck', checkedKeys, info); + }; + + return ( + + ); +}; + +export default App; diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md index 77de6459e1..8d890db815 100644 --- a/components/tree/index.en-US.md +++ b/components/tree/index.en-US.md @@ -31,6 +31,7 @@ Almost anything can be represented in a tree structure. Examples include directo Big data Block Node Component Token +Multiple lines ## API diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index 20b066c177..c2812e6f76 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -32,6 +32,7 @@ demo: 大数据 占据整行 组件 Token +多行 ## API diff --git a/components/tree/style/index.ts b/components/tree/style/index.ts index e6c1e0a11f..0254877d5f 100644 --- a/components/tree/style/index.ts +++ b/components/tree/style/index.ts @@ -290,6 +290,8 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => [`${treeCls}-checkbox`]: { top: 'initial', marginInlineEnd: treeCheckBoxMarginHorizontal, + alignSelf: 'flex-start', + marginTop: token.marginXXS, }, // >>> Title From 5cf2a5d1d06ec221b05705760eab6a29c0832f33 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 13 Sep 2023 17:19:21 +0800 Subject: [PATCH 05/24] fix: wrong style of Select in Input addon (#44825) --- components/input/style/index.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/components/input/style/index.ts b/components/input/style/index.ts index bacb0d6fea..dc5d9da876 100644 --- a/components/input/style/index.ts +++ b/components/input/style/index.ts @@ -329,13 +329,14 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { [`${antCls}-select`]: { margin: `-${token.paddingBlock + 1}px -${token.paddingInline}px`, - [`&${antCls}-select-single:not(${antCls}-select-customize-input)`]: { - [`${antCls}-select-selector`]: { - backgroundColor: 'inherit', - border: `${token.lineWidth}px ${token.lineType} transparent`, - boxShadow: 'none', + [`&${antCls}-select-single:not(${antCls}-select-customize-input):not(${antCls}-pagination-size-changer)`]: + { + [`${antCls}-select-selector`]: { + backgroundColor: 'inherit', + border: `${token.lineWidth}px ${token.lineType} transparent`, + boxShadow: 'none', + }, }, - }, '&-open, &-focused': { [`${antCls}-select-selector`]: { From 23870913b1c9ad6776b2bf4ad3e6326090745acb 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: Wed, 13 Sep 2023 17:53:54 +0800 Subject: [PATCH 06/24] fix: Table virtual with narrow columns (#44818) * fix: resize & border logic * fix: auto width * chore: clean up * fix: lint * chore: cov * chore: lint --- components/table/InternalTable.tsx | 5 + .../table/__tests__/Table.virtual.test.tsx | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 189 ------------------ .../__tests__/__snapshots__/demo.test.ts.snap | 187 ----------------- components/table/__tests__/empty.test.tsx | 16 +- components/table/demo/virtual-list.tsx | 84 ++++++-- components/table/hooks/useContainerWidth.ts | 20 ++ components/table/style/index.ts | 23 +-- components/table/style/selection.ts | 23 +++ components/table/style/virtual.ts | 12 +- package.json | 2 +- 11 files changed, 143 insertions(+), 420 deletions(-) create mode 100644 components/table/hooks/useContainerWidth.ts diff --git a/components/table/InternalTable.tsx b/components/table/InternalTable.tsx index fc68fbf47b..da752012d4 100644 --- a/components/table/InternalTable.tsx +++ b/components/table/InternalTable.tsx @@ -21,6 +21,7 @@ import Spin from '../spin'; import { useToken } from '../theme/internal'; import type { TooltipProps } from '../tooltip'; import renderExpandIcon from './ExpandIcon'; +import useContainerWidth from './hooks/useContainerWidth'; import type { FilterState } from './hooks/useFilter'; import useFilter, { getFilterData } from './hooks/useFilter'; import useLazyKVMap from './hooks/useLazyKVMap'; @@ -219,6 +220,9 @@ const InternalTable = ( body: React.useRef(), }; + // ============================ Width ============================= + const getContainerWidth = useContainerWidth(prefixCls); + // ============================ RowKey ============================ const getRowKey = React.useMemo>(() => { if (typeof rowKey === 'function') { @@ -593,6 +597,7 @@ const InternalTable = ( internalHooks={INTERNAL_HOOKS} internalRefs={internalRefs as any} transformColumns={transformColumns as RcTableProps['transformColumns']} + getContainerWidth={getContainerWidth} /> {bottomPaginationNode} diff --git a/components/table/__tests__/Table.virtual.test.tsx b/components/table/__tests__/Table.virtual.test.tsx index 9ad1d94139..b669d97816 100644 --- a/components/table/__tests__/Table.virtual.test.tsx +++ b/components/table/__tests__/Table.virtual.test.tsx @@ -33,7 +33,7 @@ describe('Table.Virtual', () => { const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); render(); - expect(errSpy).toHaveBeenCalledWith('Warning: `scroll.x` in virtual table must be number.'); + expect(errSpy).toHaveBeenCalledWith('Warning: `scroll.y` in virtual table must be number.'); errSpy.mockRestore(); }); }); diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap index 5c773461a4..0b3ec7713a 100644 --- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -32209,192 +32209,3 @@ Array [ `; exports[`renders components/table/demo/tree-table-ellipsis.tsx extend context correctly 2`] = `[]`; - -exports[`renders components/table/demo/virtual-list.tsx extend context correctly 1`] = ` -
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - -
- A - - B - - C - - D - - E - - F -
-
-
-
-
- 0 -
-
- 0 -
-
- 1 -
-
- 1 -
-
- 2 -
-
- 2 -
-
- 3 -
-
- 3 -
-
- 4 -
-
- 4 -
-
- 5 -
-
- 5 -
-
- 6 -
-
- 6 -
-
-
-
-
-
-
- -`; - -exports[`renders components/table/demo/virtual-list.tsx extend context correctly 2`] = `[]`; diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap index e38f2a88be..1356e0214e 100644 --- a/components/table/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap @@ -26698,190 +26698,3 @@ Array [ , ] `; - -exports[`renders components/table/demo/virtual-list.tsx correctly 1`] = ` -
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - -
- A - - B - - C - - D - - E - - F -
-
-
-
-
- 0 -
-
- 0 -
-
- 1 -
-
- 1 -
-
- 2 -
-
- 2 -
-
- 3 -
-
- 3 -
-
- 4 -
-
- 4 -
-
- 5 -
-
- 5 -
-
- 6 -
-
- 6 -
-
-
-
-
-
-
-
-`; diff --git a/components/table/__tests__/empty.test.tsx b/components/table/__tests__/empty.test.tsx index 19b227b43e..41dd606263 100644 --- a/components/table/__tests__/empty.test.tsx +++ b/components/table/__tests__/empty.test.tsx @@ -1,8 +1,9 @@ import React from 'react'; import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; + import type { ColumnsType } from '..'; import Table from '..'; -import { render, triggerResize, waitFor } from '../../../tests/utils'; +import { render, triggerResize, waitFakeTimer } from '../../../tests/utils'; const columns: ColumnsType = [ { title: 'Column 1', dataIndex: 'address', key: '1' }, @@ -66,6 +67,14 @@ describe('Table', () => { domSpy.mockRestore(); }); + beforeEach(() => { + jest.useFakeTimers(); + }); + + afterEach(() => { + jest.useRealTimers(); + }); + it('should work', async () => { const { container, asFragment } = render( , @@ -73,9 +82,8 @@ describe('Table', () => { triggerResize(container.querySelector('.ant-table')!); - await waitFor(() => { - expect(container.querySelector('.ant-empty')).toBeTruthy(); - }); + await waitFakeTimer(); + expect(container.querySelector('.ant-empty')).toBeTruthy(); expect(asFragment().firstChild).toMatchSnapshot(); }); diff --git a/components/table/demo/virtual-list.tsx b/components/table/demo/virtual-list.tsx index 3c7ab71a79..c4b88e57d6 100644 --- a/components/table/demo/virtual-list.tsx +++ b/components/table/demo/virtual-list.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Space, Switch, Table, Typography } from 'antd'; +import { Segmented, Space, Switch, Table, Typography } from 'antd'; import type { TableProps } from 'antd'; interface RecordType { @@ -12,7 +12,7 @@ interface RecordType { address3: string; } -const columns: TableProps['columns'] = [ +const fixedColumns: TableProps['columns'] = [ { title: 'ID', dataIndex: 'id', @@ -75,28 +75,58 @@ const columns: TableProps['columns'] = [ }, ]; -const data: RecordType[] = new Array(10000).fill(null).map((_, index) => ({ - id: index, - firstName: `First_${index.toString(16)}`, - lastName: `Last_${index.toString(16)}`, - age: 25 + (index % 10), - address1: `New York No. ${index} Lake Park`, - address2: `London No. ${index} Lake Park`, - address3: `Sydney No. ${index} Lake Park`, -})); +const columns: TableProps['columns'] = [ + { + title: 'ID', + dataIndex: 'id', + width: 100, + }, + { + title: 'FistName', + dataIndex: 'firstName', + width: 120, + }, + { + title: 'LastName', + dataIndex: 'lastName', + width: 120, + }, +]; + +const getData = (count: number) => { + const data: RecordType[] = new Array(count).fill(null).map((_, index) => ({ + id: index, + firstName: `First_${index.toString(16)}`, + lastName: `Last_${index.toString(16)}`, + age: 25 + (index % 10), + address1: `New York No. ${index} Lake Park`, + address2: `London No. ${index} Lake Park`, + address3: `Sydney No. ${index} Lake Park`, + })); + + return data; +}; const App = () => { + const [fixed, setFixed] = React.useState(true); const [bordered, setBordered] = React.useState(true); const [expanded, setExpanded] = React.useState(false); const [empty, setEmpty] = React.useState(false); + const [count, setCount] = React.useState(10000); - const mergedColumns = React.useMemo(() => { - if (!expanded) { + const data = React.useMemo(() => getData(count), [count]); + + const mergedColumns = React.useMemo(() => { + if (!fixed) { return columns; } - return columns.map((col) => ({ ...col, onCell: undefined })); - }, [expanded]); + if (!expanded) { + return fixedColumns; + } + + return fixedColumns.map((col) => ({ ...col, onCell: undefined })); + }, [expanded, fixed]); const expandableProps = React.useMemo['expandable']>(() => { if (!expanded) { @@ -120,6 +150,12 @@ const App = () => { checkedChildren="Bordered" unCheckedChildren="Bordered" /> + setFixed(!fixed)} + checkedChildren="Fixed" + unCheckedChildren="Fixed" + /> setExpanded(!expanded)} @@ -132,6 +168,24 @@ const App = () => { checkedChildren="Empty" unCheckedChildren="Empty" /> + setCount(value)} + options={[ + { + label: 'None', + value: 0, + }, + { + label: 'Less', + value: 4, + }, + { + label: 'Lot', + value: 10000, + }, + ]} + />
{ + const container = ele.querySelector(`.${prefixCls}-container`); + let returnWidth = width; + + if (container) { + const style = getComputedStyle(container); + const borderLeft = parseInt(style.borderLeftWidth, 10); + const borderRight = parseInt(style.borderRightWidth, 10); + + returnWidth = width - borderLeft - borderRight; + } + + return returnWidth; + }; + + return getContainerWidth; +} diff --git a/components/table/style/index.ts b/components/table/style/index.ts index 8fd9eadba4..f6e1793869 100644 --- a/components/table/style/index.ts +++ b/components/table/style/index.ts @@ -1,5 +1,6 @@ import type { CSSObject } from '@ant-design/cssinjs'; import { TinyColor } from '@ctrl/tinycolor'; + import { clearFix, resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; @@ -242,9 +243,6 @@ const genTableStyle: GenerateStyle = (token) => { motionDurationMid, tableHeaderBg, tableHeaderCellSplitColor, - tableRowHoverBg, - tableSelectedRowBg, - tableSelectedRowHoverBg, tableFooterTextColor, tableFooterBg, paddingContentVerticalLG, @@ -363,25 +361,6 @@ const genTableStyle: GenerateStyle = (token) => { borderBottom: tableBorder, transition: `background ${motionDurationMid} ease`, }, - - [` - &${componentCls}-row:hover > th, - &${componentCls}-row:hover > td, - > th${componentCls}-cell-row-hover, - > td${componentCls}-cell-row-hover - `]: { - background: tableRowHoverBg, - }, - - [`&${componentCls}-row-selected`]: { - [`> th, > td`]: { - background: tableSelectedRowBg, - }, - - [`&:hover > th, &:hover > td`]: { - background: tableSelectedRowHoverBg, - }, - }, }, }, diff --git a/components/table/style/selection.ts b/components/table/style/selection.ts index a9d3ec26db..3c657686f7 100644 --- a/components/table/style/selection.ts +++ b/components/table/style/selection.ts @@ -1,4 +1,5 @@ import type { CSSObject } from '@ant-design/cssinjs'; + import type { GenerateStyle } from '../../theme/internal'; import type { TableToken } from './index'; @@ -13,6 +14,9 @@ const genSelectionStyle: GenerateStyle = (token) => { tableHeaderIconColor, tableHeaderIconColorHover, tableSelectionColumnWidth, + tableSelectedRowBg, + tableSelectedRowHoverBg, + tableRowHoverBg, } = token; return { @@ -79,6 +83,25 @@ const genSelectionStyle: GenerateStyle = (token) => { }, }, }, + + // ============================= Rows ============================= + [`${componentCls}-tbody`]: { + [`${componentCls}-row`]: { + [`&${componentCls}-row-selected`]: { + [`> ${componentCls}-cell`]: { + background: tableSelectedRowBg, + + '&-row-hover': { + background: tableSelectedRowHoverBg, + }, + }, + }, + + [`> ${componentCls}-cell-row-hover`]: { + background: tableRowHoverBg, + }, + }, + }, }, }; }; diff --git a/components/table/style/virtual.ts b/components/table/style/virtual.ts index 757ed9d98d..3094e1b0a1 100644 --- a/components/table/style/virtual.ts +++ b/components/table/style/virtual.ts @@ -1,9 +1,10 @@ import type { CSSObject } from '@ant-design/cssinjs'; + import type { GenerateStyle } from '../../theme/internal'; import type { TableToken } from './index'; const genVirtualStyle: GenerateStyle = (token) => { - const { componentCls } = token; + const { componentCls, motionDurationMid } = token; const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`; @@ -21,6 +22,7 @@ const genVirtualStyle: GenerateStyle = (token) => { [`${componentCls}-cell`]: { borderBottom: tableBorder, + transition: `background ${motionDurationMid}`, }, [`${componentCls}-expanded-row`]: { @@ -57,6 +59,14 @@ const genVirtualStyle: GenerateStyle = (token) => { }, }, }, + + // Empty placeholder + [`&${componentCls}-virtual`]: { + [`${componentCls}-placeholder ${componentCls}-cell`]: { + borderInlineEnd: tableBorder, + borderBottom: tableBorder, + }, + }, }, }, }; diff --git a/package.json b/package.json index e293e28638..ab51f22c5e 100644 --- a/package.json +++ b/package.json @@ -148,7 +148,7 @@ "rc-slider": "~10.2.1", "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", - "rc-table": "~7.33.1", + "rc-table": "~7.34.0", "rc-tabs": "~12.12.1", "rc-textarea": "~1.3.4", "rc-tooltip": "~6.0.1", From 10c78d3778d128ab8ef2e7a07fbdbd0fbe6082e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <7971419+crazyair@users.noreply.github.com> Date: Wed, 13 Sep 2023 18:48:01 +0800 Subject: [PATCH 07/24] chore: dumi init (#44834) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ab51f22c5e..7b9c8c3a25 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "unpkg": "dist/antd.min.js", "typings": "es/index.d.ts", "scripts": { - "prepare": "is-ci || husky install", + "prepare": "is-ci || husky install && dumi setup", "api-collection": "antd-tools run api-collection", "authors": "tsx scripts/generate-authors.ts", "build": "npm run compile && NODE_OPTIONS='--max-old-space-size=4096' npm run dist", From 72da2678aac10d3388c7d7139425233122a099e9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 13 Sep 2023 19:08:52 +0800 Subject: [PATCH 08/24] site: remove legacy code for hash jump (#44836) --- .dumi/theme/layouts/DocLayout/index.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/.dumi/theme/layouts/DocLayout/index.tsx b/.dumi/theme/layouts/DocLayout/index.tsx index 4e910e6edc..0e31d77966 100644 --- a/.dumi/theme/layouts/DocLayout/index.tsx +++ b/.dumi/theme/layouts/DocLayout/index.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; -import { Helmet, useOutlet, useSiteData } from 'dumi'; +import { Helmet, useOutlet } from 'dumi'; import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react'; import zhCN from 'antd/es/locale/zh_CN'; import ConfigProvider from 'antd/es/config-provider'; @@ -30,11 +30,10 @@ const locales = { const DocLayout: React.FC = () => { const outlet = useOutlet(); const location = useLocation(); - const { pathname, search, hash } = location; + const { pathname, search } = location; const [locale, lang] = useLocale(locales); const timerRef = useRef | null>(null); const { direction } = useContext(SiteContext); - const { loading } = useSiteData(); useLayoutEffect(() => { if (lang === 'cn') { @@ -53,20 +52,10 @@ const DocLayout: React.FC = () => { } }, []); - // handle hash change or visit page hash from Link component, and jump after async chunk loaded useEffect(() => { - const id = hash.replace('#', ''); - - if (id) document.getElementById(decodeURIComponent(id))?.scrollIntoView(); - }, [loading, hash]); - - React.useEffect(() => { if (typeof (window as any).ga !== 'undefined') { (window as any).ga('send', 'pageview', pathname + search); } - if (typeof (window as any)._hmt !== 'undefined') { - (window as any)._hmt.push(['_trackPageview', pathname + search]); - } }, [location]); const content = useMemo(() => { From d5abbad8f19b3f8a79e4f642f3ce33af67966caa 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: Wed, 13 Sep 2023 22:07:33 +0800 Subject: [PATCH 09/24] refactor: deprecatedWarning (#44791) * refactor: deprecatedWraning * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code --- .../{warning.test.ts => warning.test.tsx} | 50 +++++++++++++++++-- components/_util/warning.ts | 31 +++++++++--- components/alert/Alert.tsx | 11 ++-- components/anchor/Anchor.tsx | 10 +--- components/anchor/AnchorLink.tsx | 3 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../auto-complete/__tests__/index.test.tsx | 2 +- components/auto-complete/index.tsx | 17 ++----- components/avatar/avatar.tsx | 3 +- .../__snapshots__/demo-extend.test.ts.snap | 4 +- components/back-top/__tests__/index.test.tsx | 2 +- components/back-top/index.tsx | 9 +--- components/breadcrumb/Breadcrumb.tsx | 18 ++----- components/breadcrumb/BreadcrumbItem.tsx | 11 ++-- components/button/button-group.tsx | 9 +--- components/button/button.tsx | 4 +- components/calendar/generateCalendar.tsx | 30 ++--------- components/cascader/index.tsx | 10 +--- components/checkbox/Checkbox.tsx | 3 +- components/collapse/Collapse.tsx | 3 +- components/collapse/CollapsePanel.tsx | 9 +--- components/color-picker/ColorPicker.tsx | 3 +- components/config-provider/PropWarning.tsx | 9 ++-- .../generatePicker/generateRangePicker.tsx | 9 +--- .../generatePicker/generateSinglePicker.tsx | 10 +--- components/descriptions/hooks/useRow.ts | 9 +--- components/divider/index.tsx | 3 +- .../drawer/__tests__/DrawerEvent.test.tsx | 4 +- components/drawer/index.tsx | 10 +--- .../__snapshots__/demo-extend.test.ts.snap | 3 +- components/dropdown/__tests__/index.test.tsx | 4 +- components/dropdown/dropdown.tsx | 25 ++-------- components/float-button/FloatButton.tsx | 3 +- components/float-button/FloatButtonGroup.tsx | 3 +- components/form/FormItem/index.tsx | 11 +--- components/form/FormList.tsx | 3 +- components/form/hooks/useFormItemStatus.ts | 3 +- components/form/hooks/useFormWarning.ts | 4 +- components/icon/index.ts | 4 +- components/input/Group.tsx | 9 +--- components/input/Input.tsx | 3 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- components/input/__tests__/index.test.tsx | 2 +- components/locale/index.tsx | 3 +- components/mentions/index.tsx | 9 +--- components/menu/menu.tsx | 11 +--- components/message/useMessage.tsx | 3 +- components/modal/ConfirmDialog.tsx | 12 ++--- components/modal/Modal.tsx | 9 +--- components/modal/__tests__/Modal.test.tsx | 2 +- components/notification/useNotification.tsx | 3 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- components/progress/Line.tsx | 9 +--- components/progress/progress.tsx | 24 ++------- components/qr-code/index.tsx | 5 +- components/radio/radio.tsx | 9 +--- components/result/index.tsx | 3 +- components/select/index.tsx | 17 ++----- components/select/useIcons.tsx | 9 +--- components/slider/__tests__/index.test.tsx | 10 ++-- components/slider/index.tsx | 9 +--- components/spin/index.tsx | 4 +- components/steps/__tests__/index.test.tsx | 2 +- components/steps/useLegacyItems.ts | 4 +- components/switch/index.tsx | 3 +- components/table/InternalTable.tsx | 6 +-- .../table/hooks/useFilter/FilterDropdown.tsx | 9 ++-- components/table/hooks/useFilter/index.tsx | 3 +- components/table/hooks/useSelection.tsx | 13 +---- components/tabs/__tests__/index.test.tsx | 2 +- components/tabs/hooks/useLegacyItems.ts | 9 +--- components/tabs/index.tsx | 3 +- components/tag/__tests__/index.test.tsx | 2 +- components/tag/index.tsx | 9 +--- components/time-picker/index.tsx | 9 +--- components/timeline/Timeline.tsx | 9 +--- .../__snapshots__/demo-extend.test.ts.snap | 2 +- components/tooltip/__tests__/tooltip.test.tsx | 8 +-- components/tooltip/index.tsx | 20 ++------ components/transfer/index.tsx | 9 +--- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../tree-select/__tests__/index.test.tsx | 2 +- components/tree-select/index.tsx | 18 ++----- components/typography/Link.tsx | 9 +--- components/typography/Text.tsx | 3 +- components/typography/Title.tsx | 3 +- components/typography/Typography.tsx | 9 +--- components/upload/Upload.tsx | 10 +--- docs/blog/testing-migrate.en-US.md | 2 +- docs/blog/testing-migrate.zh-CN.md | 2 +- 90 files changed, 241 insertions(+), 471 deletions(-) rename components/_util/__tests__/{warning.test.ts => warning.test.tsx} (50%) diff --git a/components/_util/__tests__/warning.test.ts b/components/_util/__tests__/warning.test.tsx similarity index 50% rename from components/_util/__tests__/warning.test.ts rename to components/_util/__tests__/warning.test.tsx index 00a952bd49..9c85ae405b 100644 --- a/components/_util/__tests__/warning.test.ts +++ b/components/_util/__tests__/warning.test.tsx @@ -1,3 +1,7 @@ +import { render } from '@testing-library/react'; +import React from 'react'; +import { devUseWarning as useWarning } from '../warning'; + describe('Test warning', () => { let spy: jest.SpyInstance; @@ -40,13 +44,40 @@ describe('Test warning', () => { expect(spy).not.toHaveBeenCalled(); }); + it('should show warning when using devUseWarning', async () => { + const App = () => { + // Don't use dynamic import to fixed issue: TypeError: Cannot read properties of null (reading 'useContext') + const warning = useWarning('Test'); + warning(false, 'usage', 'test message'); + warning.deprecated(false, 'old prop', 'new prop'); + return null; + }; + render(); + + expect(spy).toHaveBeenCalledWith('Warning: [antd: Test] test message'); + expect(spy).toHaveBeenCalledWith( + 'Warning: [antd: Test] `old prop` is deprecated. Please use `new prop` instead.', + ); + expect(spy).toHaveBeenCalledTimes(2); + }); }); describe('process.env.NODE_ENV === "production"', () => { - it('Whether `true` or `false`, do not exec `console.error`', async () => { - const prevEnv = process.env.NODE_ENV; + let prevEnv: string | undefined; + const mockNodeEnv = () => { + prevEnv = process.env.NODE_ENV; process.env.NODE_ENV = 'production'; - + }; + const restoreNodeEnv = () => { + process.env.NODE_ENV = prevEnv; + }; + beforeEach(() => { + mockNodeEnv(); + }); + afterEach(() => { + restoreNodeEnv(); + }); + it('Whether `true` or `false`, do not exec `console.error`', async () => { const { default: warning, noop } = await import('../warning'); expect(warning).toEqual(noop); @@ -56,8 +87,19 @@ describe('Test warning', () => { warning(true, 'error message'); expect(spy).not.toHaveBeenCalled(); + }); - process.env.NODE_ENV = prevEnv; + it('should not show warning when using devUseWarning', async () => { + const { devUseWarning } = await import('../warning'); + const App = () => { + const warning = devUseWarning('Test'); + warning(false, 'usage', 'test message'); + warning.deprecated(false, 'old prop', 'new prop'); + return null; + }; + render(); + + expect(spy).toHaveBeenCalledTimes(0); }); }); }); diff --git a/components/_util/warning.ts b/components/_util/warning.ts index a201d7f61c..d5db8b9306 100644 --- a/components/_util/warning.ts +++ b/components/_util/warning.ts @@ -19,9 +19,8 @@ if (process.env.NODE_ENV !== 'production') { }; } -type TypeWarning = ( +type BaseTypeWarning = ( valid: boolean, - component: string, /** * - deprecated: Some API will be removed in future but still support now. * - usage: Some API usage is not correct. @@ -31,6 +30,10 @@ type TypeWarning = ( message?: string, ) => void; +type TypeWarning = BaseTypeWarning & { + deprecated: (valid: boolean, oldProp: string, newProp: string, message?: string) => void; +}; + export interface WarningContextProps { deprecated?: boolean; } @@ -42,19 +45,35 @@ export const WarningContext = React.createContext({}); * since this is only used in development. * We should always wrap this in `if (process.env.NODE_ENV !== 'production')` condition */ -export const devUseWarning: () => TypeWarning = +export const devUseWarning: (component: string) => TypeWarning = process.env.NODE_ENV !== 'production' - ? () => { + ? (component: string) => { const { deprecated } = React.useContext(WarningContext); - const typeWarning: TypeWarning = (valid, component, type, message) => { + const typeWarning: TypeWarning = (valid, type, message) => { if (deprecated !== false || type !== 'deprecated') { warning(valid, component, message); } }; + typeWarning.deprecated = (valid, oldProp, newProp, message) => { + typeWarning( + valid, + 'deprecated', + `\`${oldProp}\` is deprecated. Please use \`${newProp}\` instead.${ + message ? ` ${message}` : '' + }`, + ); + }; + return typeWarning; } - : () => noop; + : () => { + const noopWarning: TypeWarning = () => {}; + + noopWarning.deprecated = noop; + + return noopWarning; + }; export default warning; diff --git a/components/alert/Alert.tsx b/components/alert/Alert.tsx index 70e7e678b4..2a9bd543b5 100644 --- a/components/alert/Alert.tsx +++ b/components/alert/Alert.tsx @@ -120,15 +120,10 @@ const Alert: React.FC = (props) => { const [closed, setClosed] = React.useState(false); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); - - warning( - !closeText, - 'Alert', - 'deprecated', - '`closeText` is deprecated. Please use `closeIcon` instead.', - ); + const warning = devUseWarning('Alert'); + warning.deprecated(!closeText, 'closeText', 'closeIcon'); } + const ref = React.useRef(null); const { getPrefixCls, direction, alert } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('alert', customizePrefixCls); diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index 8719d69588..79b18e5567 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -132,18 +132,12 @@ const AnchorContent: React.FC = (props) => { // =================== Warning ===================== if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Anchor'); - warning( - !children, - 'Anchor', - 'deprecated', - '`Anchor children` is deprecated. Please use `items` instead.', - ); + warning.deprecated(!children, 'Anchor children', 'items'); warning( !(anchorDirection === 'horizontal' && items?.some((n) => 'children' in n)), - 'Anchor', 'usage', '`Anchor items#children` is not supported when `Anchor` direction is horizontal.', ); diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 612468949e..deb2968ceb 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -52,11 +52,10 @@ const AnchorLink: React.FC = (props) => { // =================== Warning ===================== if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Anchor.Link'); warning( !children || direction !== 'horizontal', - 'Anchor.Link', 'usage', '`Anchor.Link children` is not supported when `Anchor` direction is horizontal', ); diff --git a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap index 674c300037..437764d52e 100644 --- a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1887,7 +1887,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor exports[`renders components/auto-complete/demo/form-debug.tsx extend context correctly 2`] = ` [ - "Warning: [antd: Input.Group] 'Input.Group' is deprecated. Please use 'Space.Compact' instead.", + "Warning: [antd: Input.Group] \`Input.Group\` is deprecated. Please use \`Space.Compact\` instead.", ] `; diff --git a/components/auto-complete/__tests__/index.test.tsx b/components/auto-complete/__tests__/index.test.tsx index 711602535b..6dbb9c11b7 100644 --- a/components/auto-complete/__tests__/index.test.tsx +++ b/components/auto-complete/__tests__/index.test.tsx @@ -110,7 +110,7 @@ describe('AutoComplete', () => { />, ); expect(errSpy).toHaveBeenCalledWith( - 'Warning: [antd: AutoComplete] `dropdownClassName` is deprecated, please use `popupClassName` instead.', + 'Warning: [antd: AutoComplete] `dropdownClassName` is deprecated. Please use `popupClassName` instead.', ); expect(container.querySelector('.legacy')).toBeTruthy(); diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index 66463412b9..30a62f5017 100755 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -111,28 +111,17 @@ const AutoComplete: React.ForwardRefRenderFunction(ConfigContext); diff --git a/components/avatar/avatar.tsx b/components/avatar/avatar.tsx index 1e1aef5bd7..3b650d5239 100644 --- a/components/avatar/avatar.tsx +++ b/components/avatar/avatar.tsx @@ -134,11 +134,10 @@ const InternalAvatar: React.ForwardRefRenderFunction 2), - 'Avatar', 'deprecated', `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`, ); diff --git a/components/back-top/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/back-top/__tests__/__snapshots__/demo-extend.test.ts.snap index 3aa09ce95a..9692dcb13f 100644 --- a/components/back-top/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/back-top/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -17,7 +17,7 @@ Array [ exports[`renders components/back-top/demo/basic.tsx extend context correctly 2`] = ` [ - "Warning: [antd: BackTop] \`BackTop\` is deprecated, please use \`FloatButton.BackTop\` instead.", + "Warning: [antd: BackTop] \`BackTop\` is deprecated. Please use \`FloatButton.BackTop\` instead.", ] `; @@ -54,6 +54,6 @@ exports[`renders components/back-top/demo/custom.tsx extend context correctly 1` exports[`renders components/back-top/demo/custom.tsx extend context correctly 2`] = ` [ - "Warning: [antd: BackTop] \`BackTop\` is deprecated, please use \`FloatButton.BackTop\` instead.", + "Warning: [antd: BackTop] \`BackTop\` is deprecated. Please use \`FloatButton.BackTop\` instead.", ] `; diff --git a/components/back-top/__tests__/index.test.tsx b/components/back-top/__tests__/index.test.tsx index 66fa73a410..1f658f00fe 100644 --- a/components/back-top/__tests__/index.test.tsx +++ b/components/back-top/__tests__/index.test.tsx @@ -47,7 +47,7 @@ describe('BackTop', () => { const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); render(); expect(errSpy).toHaveBeenCalledWith( - 'Warning: [antd: BackTop] `BackTop` is deprecated, please use `FloatButton.BackTop` instead.', + 'Warning: [antd: BackTop] `BackTop` is deprecated. Please use `FloatButton.BackTop` instead.', ); errSpy.mockRestore(); }); diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx index 2fbcdee2f6..cefb155e0a 100644 --- a/components/back-top/index.tsx +++ b/components/back-top/index.tsx @@ -50,14 +50,9 @@ const BackTop: React.FC = (props) => { ); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('BackTop'); - warning( - false, - 'BackTop', - 'deprecated', - '`BackTop` is deprecated, please use `FloatButton.BackTop` instead.', - ); + warning.deprecated(false, 'BackTop', 'FloatButton.BackTop'); } React.useEffect(() => { diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index e2de8c06e4..7b755f9716 100755 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -99,24 +99,17 @@ const Breadcrumb = (props: BreadcrumbProps) const mergedItems = useItems(items, legacyRoutes); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); - - warning( - !legacyRoutes, - 'Breadcrumb', - 'deprecated', - '`routes` is deprecated. Please use `items` instead.', - ); + const warning = devUseWarning('Breadcrumb'); + warning.deprecated(!legacyRoutes, 'routes', 'items'); // Deprecated warning for breadcrumb children if (!mergedItems || mergedItems.length === 0) { const childList = toArray(children); - warning( + warning.deprecated( childList.length === 0, - 'Breadcrumb', - 'deprecated', - '`Breadcrumb.Item and Breadcrumb.Separator` is deprecated. Please use `items` instead.', + 'Breadcrumb.Item and Breadcrumb.Separator', + 'items', ); childList.forEach((element: any) => { @@ -125,7 +118,6 @@ const Breadcrumb = (props: BreadcrumbProps) element.type && (element.type.__ANT_BREADCRUMB_ITEM === true || element.type.__ANT_BREADCRUMB_SEPARATOR === true), - 'Breadcrumb', 'usage', "Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children", ); diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx index 0a34e205b4..80386901c7 100644 --- a/components/breadcrumb/BreadcrumbItem.tsx +++ b/components/breadcrumb/BreadcrumbItem.tsx @@ -1,12 +1,12 @@ import DownOutlined from '@ant-design/icons/DownOutlined'; import * as React from 'react'; -import { devUseWarning } from '../_util/warning'; import { ConfigContext } from '../config-provider'; import type { DropdownProps } from '../dropdown/dropdown'; import Dropdown from '../dropdown/dropdown'; import type { ItemType } from './Breadcrumb'; import BreadcrumbSeparator from './BreadcrumbSeparator'; import { renderItem } from './useItemRender'; +import { devUseWarning } from '../_util/warning'; export interface SeparatorType { separator?: React.ReactNode; @@ -42,14 +42,9 @@ export const InternalBreadcrumbItem: React.FC = (props) => // Warning for deprecated usage if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Breadcrumb.Item'); - warning( - !('overlay' in props), - 'Breadcrumb.Item', - 'deprecated', - '`overlay` is deprecated. Please use `menu` instead.', - ); + warning.deprecated(!('overlay' in props), 'overlay', 'menu'); } /** If overlay is have Wrap a Dropdown */ diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx index 55583f953a..5b10440e20 100644 --- a/components/button/button-group.tsx +++ b/components/button/button-group.tsx @@ -39,14 +39,9 @@ const ButtonGroup: React.FC = (props) => { } if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Button.Group'); - warning( - !size || ['large', 'small', 'middle'].includes(size), - 'Button.Group', - 'usage', - 'Invalid prop `size`.', - ); + warning(!size || ['large', 'small', 'middle'].includes(size), 'usage', 'Invalid prop `size`.'); } const classes = classNames( diff --git a/components/button/button.tsx b/components/button/button.tsx index 4468878069..c7d7879975 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -184,18 +184,16 @@ const InternalButton: React.ForwardRefRenderFunction< }; if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Button'); warning( !(typeof icon === 'string' && icon.length > 2), - 'Button', 'breaking', `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`, ); warning( !(ghost && isUnBorderedButtonType(type)), - 'Button', 'usage', "`link` or `text` button can't be a `ghost` button.", ); diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx index 2a5700fea9..04156a9b7c 100644 --- a/components/calendar/generateCalendar.tsx +++ b/components/calendar/generateCalendar.tsx @@ -125,32 +125,12 @@ function generateCalendar(generateConfig: GenerateConfig) { // ====================== Warning ======================= if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Calendar'); - warning( - !dateFullCellRender, - 'Calendar', - 'deprecated', - '`dateFullCellRender` is deprecated. Please use `fullCellRender` instead.', - ); - warning( - !dateCellRender, - 'Calendar', - 'deprecated', - '`dateCellRender` is deprecated. Please use `cellRender` instead.', - ); - warning( - !monthFullCellRender, - 'Calendar', - 'deprecated', - '`monthFullCellRender` is deprecated. Please use `fullCellRender` instead.', - ); - warning( - !monthCellRender, - 'Calendar', - 'deprecated', - '`monthCellRender` is deprecated. Please use `cellRender` instead.', - ); + warning.deprecated(!dateFullCellRender, 'dateFullCellRender', 'fullCellRender'); + warning.deprecated(!dateCellRender, 'dateCellRender', 'cellRender'); + warning.deprecated(!monthFullCellRender, 'monthFullCellRender', 'fullCellRender'); + warning.deprecated(!monthCellRender, 'monthCellRender', 'cellRender'); } // ====================== State ======================= diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index 223fd03111..ee85219d14 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -194,18 +194,12 @@ const Cascader = React.forwardRef>((props, ref) // =================== Warning ===================== if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Cascader'); - warning( - !dropdownClassName, - 'Cascader', - 'deprecated', - '`dropdownClassName` is deprecated. Please use `popupClassName` instead.', - ); + warning.deprecated(!dropdownClassName, 'dropdownClassName', 'popupClassName'); warning( !('showArrow' in props), - 'Cascader', 'deprecated', '`showArrow` is deprecated which will be removed in next major version. It will be a default behavior, you can hide it by setting `suffixIcon` to null.', ); diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx index c0341efa24..6e790d4f61 100644 --- a/components/checkbox/Checkbox.tsx +++ b/components/checkbox/Checkbox.tsx @@ -78,11 +78,10 @@ const InternalCheckbox: React.ForwardRefRenderFunction((props, ref) => const [wrapSSR, hashId] = useStyle(prefixCls); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Collapse'); // Warning if use legacy type `expandIconPosition` warning( expandIconPosition !== 'left' && expandIconPosition !== 'right', - 'Collapse', 'deprecated', '`expandIconPosition` with `left` or `right` is deprecated. Please use `start` or `end` instead.', ); diff --git a/components/collapse/CollapsePanel.tsx b/components/collapse/CollapsePanel.tsx index f1b36ad570..07b9159485 100644 --- a/components/collapse/CollapsePanel.tsx +++ b/components/collapse/CollapsePanel.tsx @@ -25,14 +25,9 @@ export interface CollapsePanelProps { const CollapsePanel = React.forwardRef((props, ref) => { if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Collapse.Panel'); - warning( - !('disabled' in props), - 'Collapse.Panel', - 'deprecated', - '`disabled` is deprecated. Please use `collapsible="disabled"` instead.', - ); + warning.deprecated(!('disabled' in props), 'disabled', 'collapsible="disabled"'); } const { getPrefixCls } = React.useContext(ConfigContext); diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index 7345061fd9..5ad3ad758d 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/components/color-picker/ColorPicker.tsx @@ -151,11 +151,10 @@ const ColorPicker: CompoundedComponent = (props) => { // ===================== Warning ====================== if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('ColorPicker'); warning( !(disabledAlpha && isAlphaColor), - 'ColorPicker', 'usage', '`disabledAlpha` will make the alpha to be 100% when use alpha color.', ); diff --git a/components/config-provider/PropWarning.tsx b/components/config-provider/PropWarning.tsx index dfc4ae2d84..5a8bde614f 100644 --- a/components/config-provider/PropWarning.tsx +++ b/components/config-provider/PropWarning.tsx @@ -11,13 +11,12 @@ export interface PropWarningProps { * This will be empty function in production. */ const PropWarning = React.memo(({ dropdownMatchSelectWidth }: PropWarningProps) => { - const warning = devUseWarning(); + const warning = devUseWarning('ConfigProvider'); - warning( + warning.deprecated( dropdownMatchSelectWidth === undefined, - 'ConfigProvider', - 'deprecated', - '`dropdownMatchSelectWidth` is deprecated. Please use `popupMatchSelectWidth` instead.', + 'dropdownMatchSelectWidth', + 'popupMatchSelectWidth', ); return null; diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index 2b18aa9a7b..7eb6c49a81 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -78,14 +78,9 @@ export default function generateRangePicker(generateConfig: GenerateCo // =================== Warning ===================== if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('DatePicker.RangePicker'); - warning( - !dropdownClassName, - 'DatePicker.RangePicker', - 'deprecated', - '`dropdownClassName` is deprecated. Please use `popupClassName` instead.', - ); + warning.deprecated(!dropdownClassName, 'dropdownClassName', 'popupClassName'); } // ===================== Size ===================== diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index 72185f4edc..5039f2733f 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -106,21 +106,15 @@ export default function generatePicker(generateConfig: GenerateConfig< // =================== Warning ===================== if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning(displayName! || 'DatePicker'); warning( picker !== 'quarter', - displayName!, 'deprecated', `DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`, ); - warning( - !dropdownClassName, - displayName || 'DatePicker', - 'deprecated', - '`dropdownClassName` is deprecated. Please use `popupClassName` instead.', - ); + warning.deprecated(!dropdownClassName, 'dropdownClassName', 'popupClassName'); } // ===================== Size ===================== diff --git a/components/descriptions/hooks/useRow.ts b/components/descriptions/hooks/useRow.ts index 823bca270c..b9c404c6c8 100644 --- a/components/descriptions/hooks/useRow.ts +++ b/components/descriptions/hooks/useRow.ts @@ -69,14 +69,9 @@ const useRow = (mergedColumn: number, items: InternalDescriptionsItemType[]) => const [rows, exceed] = useMemo(() => getCalcRows(items, mergedColumn), [items, mergedColumn]); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Descriptions'); - warning( - !exceed, - 'Descriptions', - 'usage', - 'Sum of column `span` in a line not match `column` of Descriptions.', - ); + warning(!exceed, 'usage', 'Sum of column `span` in a line not match `column` of Descriptions.'); } return rows; diff --git a/components/divider/index.tsx b/components/divider/index.tsx index 2b9b8df589..f5063eacd6 100644 --- a/components/divider/index.tsx +++ b/components/divider/index.tsx @@ -76,11 +76,10 @@ const Divider: React.FC = (props) => { // Warning children not work in vertical mode if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Divider'); warning( !children || type !== 'vertical', - 'Divider', 'usage', '`children` not working in `vertical` mode.', ); diff --git a/components/drawer/__tests__/DrawerEvent.test.tsx b/components/drawer/__tests__/DrawerEvent.test.tsx index dfab316120..ff2f07bded 100644 --- a/components/drawer/__tests__/DrawerEvent.test.tsx +++ b/components/drawer/__tests__/DrawerEvent.test.tsx @@ -135,10 +135,10 @@ describe('Drawer', () => { expect(afterVisibleChange).toHaveBeenCalledTimes(1); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Drawer] `visible` is deprecated, please use `open` instead.', + 'Warning: [antd: Drawer] `visible` is deprecated. Please use `open` instead.', ); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Drawer] `afterVisibleChange` is deprecated, please use `afterOpenChange` instead.', + 'Warning: [antd: Drawer] `afterVisibleChange` is deprecated. Please use `afterOpenChange` instead.', ); errorSpy.mockRestore(); diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index 6e2b0460a1..0d249154c6 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -88,24 +88,18 @@ const Drawer: React.FC & { // ========================== Warning =========================== if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Drawer'); [ ['visible', 'open'], ['afterVisibleChange', 'afterOpenChange'], ].forEach(([deprecatedName, newName]) => { - warning( - !(deprecatedName in props), - 'Drawer', - 'deprecated', - `\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`, - ); + warning.deprecated(!(deprecatedName in props), deprecatedName, newName); }); if (getContainer !== undefined && props.style?.position === 'absolute') { warning( false, - 'Drawer', 'breaking', '`style` is replaced by `rootStyle` in v5. Please check that `position: absolute` is necessary.', ); diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap index 57cfa9e16e..2fb57463ff 100644 --- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -8454,8 +8454,7 @@ exports[`renders components/dropdown/demo/render-panel.tsx extend context correc exports[`renders components/dropdown/demo/render-panel.tsx extend context correctly 2`] = ` [ - "Warning: [antd: Dropdown] \`visible\` is deprecated which will be removed in next major version, please use \`open\` instead.", - "Warning: [antd: Dropdown] \`visible\` is deprecated, please use \`open\` instead.", + "Warning: [antd: Dropdown] \`visible\` is deprecated. Please use \`open\` instead.", ] `; diff --git a/components/dropdown/__tests__/index.test.tsx b/components/dropdown/__tests__/index.test.tsx index 0af4b9fcac..9d1802e3c0 100644 --- a/components/dropdown/__tests__/index.test.tsx +++ b/components/dropdown/__tests__/index.test.tsx @@ -231,10 +231,10 @@ describe('Dropdown', () => { expect(document.querySelector('.bamboo')).toBeTruthy(); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Dropdown] `visible` is deprecated, please use `open` instead.', + 'Warning: [antd: Dropdown] `visible` is deprecated. Please use `open` instead.', ); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Dropdown] `onVisibleChange` is deprecated, please use `onOpenChange` instead.', + 'Warning: [antd: Dropdown] `onVisibleChange` is deprecated. Please use `onOpenChange` instead.', ); fireEvent.click(container.querySelector('.little')!); diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index acc93e5e77..e463b080a4 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -109,27 +109,17 @@ const Dropdown: CompoundedComponent = (props) => { } = React.useContext(ConfigContext); // Warning for deprecated usage - const warning = devUseWarning(); + const warning = devUseWarning('Dropdown'); if (process.env.NODE_ENV !== 'production') { [ ['visible', 'open'], ['onVisibleChange', 'onOpenChange'], ].forEach(([deprecatedName, newName]) => { - warning( - !(deprecatedName in props), - 'Dropdown', - 'deprecated', - `\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`${newName}\` instead.`, - ); + warning.deprecated(!(deprecatedName in props), deprecatedName, newName); }); - warning( - !('overlay' in props), - 'Dropdown', - 'deprecated', - '`overlay` is deprecated. Please use `menu` instead.', - ); + warning.deprecated(!('overlay' in props), 'overlay', 'menu'); } const memoTransitionName = React.useMemo(() => { @@ -161,7 +151,6 @@ const Dropdown: CompoundedComponent = (props) => { const newPlacement = placement.slice(0, placement.indexOf('Center')) as DropdownPlacement; warning( !placement.includes('Center'), - 'Dropdown', 'deprecated', `You are using '${placement}' placement in Dropdown, which is deprecated. Try to use '${newPlacement}' instead.`, ); @@ -171,12 +160,7 @@ const Dropdown: CompoundedComponent = (props) => { ['visible', 'open'], ['onVisibleChange', 'onOpenChange'], ].forEach(([deprecatedName, newName]) => { - warning( - !(deprecatedName in props), - 'Dropdown', - 'deprecated', - `\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`, - ); + warning.deprecated(!(deprecatedName in props), deprecatedName, newName); }); } @@ -266,7 +250,6 @@ const Dropdown: CompoundedComponent = (props) => { // Warning if use other mode warning( !mode || mode === 'vertical', - 'Dropdown', 'usage', `mode="${mode}" is not supported for Dropdown's Menu.`, ); diff --git a/components/float-button/FloatButton.tsx b/components/float-button/FloatButton.tsx index 06720b0e12..bb67bc678c 100644 --- a/components/float-button/FloatButton.tsx +++ b/components/float-button/FloatButton.tsx @@ -85,11 +85,10 @@ const FloatButton: React.ForwardRefRenderFunction< } if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('FloatButton'); warning( !(shape === 'circle' && description), - 'FloatButton', 'usage', 'supported only when `shape` is `square`. Due to narrow space for text, short sentence is recommended.', ); diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index 471257aa13..efa7ea7af9 100644 --- a/components/float-button/FloatButtonGroup.tsx +++ b/components/float-button/FloatButtonGroup.tsx @@ -94,11 +94,10 @@ const FloatButtonGroup: React.FC = (props) => { // =================== Warning ===================== if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('FloatButton.Group'); warning( !('open' in props) || !!trigger, - 'FloatButton.Group', 'usage', '`open` need to be used together with `trigger`', ); diff --git a/components/form/FormItem/index.tsx b/components/form/FormItem/index.tsx index 2fac0110dd..ad8c03b6ad 100644 --- a/components/form/FormItem/index.tsx +++ b/components/form/FormItem/index.tsx @@ -129,10 +129,10 @@ function InternalFormItem(props: FormItemProps): React.Rea const [wrapSSR, hashId] = useStyle(prefixCls); // ========================= Warn ========================= - const warning = devUseWarning(); + const warning = devUseWarning('Form.Item'); if (process.env.NODE_ENV !== 'production') { - warning(name !== null, 'Form.Item', 'usage', '`null` is passed as `name` property'); + warning(name !== null, 'usage', '`null` is passed as `name` property'); } // ========================= MISC ========================= @@ -307,14 +307,12 @@ function InternalFormItem(props: FormItemProps): React.Rea warning( !(shouldUpdate && dependencies), - 'Form.Item', 'usage', "`shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/form-deps.", ); if (Array.isArray(mergedChildren) && hasName) { warning( false, - 'Form.Item', 'usage', 'A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/complex-form-item.', ); @@ -322,27 +320,23 @@ function InternalFormItem(props: FormItemProps): React.Rea } else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) { warning( !!(shouldUpdate || dependencies), - 'Form.Item', 'usage', 'A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.', ); warning( !hasName, - 'Form.Item', 'usage', 'A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.', ); } else if (dependencies && !isRenderProps && !hasName) { warning( false, - 'Form.Item', 'usage', 'Must set `name` or use a render function when `dependencies` is set.', ); } else if (isValidElement(mergedChildren)) { warning( mergedChildren.props.defaultValue === undefined, - 'Form.Item', 'usage', '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.', ); @@ -409,7 +403,6 @@ function InternalFormItem(props: FormItemProps): React.Rea } else { warning( !mergedName.length, - 'Form.Item', 'usage', '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.', ); diff --git a/components/form/FormList.tsx b/components/form/FormList.tsx index 25bdf06b92..62cb535f88 100644 --- a/components/form/FormList.tsx +++ b/components/form/FormList.tsx @@ -37,12 +37,11 @@ const FormList: React.FC = ({ ...props }) => { if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Form.List'); warning( typeof props.name === 'number' || (Array.isArray(props.name) ? !!props.name.length : !!props.name), - 'Form.List', 'usage', 'Miss `name` prop.', ); diff --git a/components/form/hooks/useFormItemStatus.ts b/components/form/hooks/useFormItemStatus.ts index 803e32c367..bc43abe676 100644 --- a/components/form/hooks/useFormItemStatus.ts +++ b/components/form/hooks/useFormItemStatus.ts @@ -14,11 +14,10 @@ const useFormItemStatus: UseFormItemStatus = () => { const { status, errors = [], warnings = [] } = useContext(FormItemInputContext); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Form.Item'); warning( status !== undefined, - 'Form.Item', 'usage', 'Form.Item.useStatus should be used under Form.Item component. For more information: https://u.ant.design/form-item-usestatus', ); diff --git a/components/form/hooks/useFormWarning.ts b/components/form/hooks/useFormWarning.ts index 188ff422b2..31dbeddd3e 100644 --- a/components/form/hooks/useFormWarning.ts +++ b/components/form/hooks/useFormWarning.ts @@ -6,13 +6,13 @@ import type { FormProps } from '../Form'; const names: Record = {}; export default function useFormWarning({ name }: FormProps) { - const warning = devUseWarning(); + const warning = devUseWarning('Form'); useEffect(() => { if (name) { names[name] = (names[name] || 0) + 1; - warning(names[name] <= 1, 'Form', 'usage', 'There exist multiple Form with same `name`.'); + warning(names[name] <= 1, 'usage', 'There exist multiple Form with same `name`.'); return () => { names[name] -= 1; diff --git a/components/icon/index.ts b/components/icon/index.ts index b0042d9047..7bb12314c4 100755 --- a/components/icon/index.ts +++ b/components/icon/index.ts @@ -2,9 +2,9 @@ import { devUseWarning } from '../_util/warning'; const Icon: React.FC = () => { if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Icon'); - warning(false, 'Icon', 'usage', 'Empty Icon'); + warning(false, 'usage', 'Empty Icon'); } return null; }; diff --git a/components/input/Group.tsx b/components/input/Group.tsx index 96fc3e4cf6..c4a48fbc28 100644 --- a/components/input/Group.tsx +++ b/components/input/Group.tsx @@ -50,14 +50,9 @@ const Group: React.FC = (props) => { ); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Input.Group'); - warning( - false, - 'Input.Group', - 'deprecated', - `'Input.Group' is deprecated. Please use 'Space.Compact' instead.`, - ); + warning.deprecated(false, 'Input.Group', 'Space.Compact'); } return wrapSSR( diff --git a/components/input/Input.tsx b/components/input/Input.tsx index 580fcef2c0..3f4c4f4664 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -116,13 +116,12 @@ const Input = forwardRef((props, ref) => { /* eslint-disable react-hooks/rules-of-hooks */ if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Input'); useEffect(() => { if (inputHasPrefixSuffix && !prevHasPrefixSuffix.current) { warning( document.activeElement === inputRef.current?.input, - 'Input', 'usage', `When Input is focused, dynamic add or remove prefix / suffix will make it lose focus caused by dom structure change. Read more: https://ant.design/components/input/#FAQ`, ); diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap index 102be0880e..efc60b38e4 100644 --- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -9255,7 +9255,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] = exports[`renders components/input/demo/group.tsx extend context correctly 2`] = ` [ - "Warning: [antd: Input.Group] 'Input.Group' is deprecated. Please use 'Space.Compact' instead.", + "Warning: [antd: Input.Group] \`Input.Group\` is deprecated. Please use \`Space.Compact\` instead.", ] `; diff --git a/components/input/__tests__/index.test.tsx b/components/input/__tests__/index.test.tsx index 26557951c2..10d6d1e372 100644 --- a/components/input/__tests__/index.test.tsx +++ b/components/input/__tests__/index.test.tsx @@ -124,7 +124,7 @@ describe('Input', () => { render(); expect(errorSpy).toHaveBeenCalledWith( - "Warning: [antd: Input.Group] 'Input.Group' is deprecated. Please use 'Space.Compact' instead.", + 'Warning: [antd: Input.Group] `Input.Group` is deprecated. Please use `Space.Compact` instead.', ); }); }); diff --git a/components/locale/index.tsx b/components/locale/index.tsx index 12ce67cc7d..b1069c887c 100644 --- a/components/locale/index.tsx +++ b/components/locale/index.tsx @@ -69,11 +69,10 @@ const LocaleProvider: React.FC = (props) => { const { locale = {} as Locale, children, _ANT_MARK__ } = props; if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('LocaleProvider'); warning( _ANT_MARK__ === ANT_MARK, - 'LocaleProvider', 'deprecated', '`LocaleProvider` is deprecated. Please use `locale` with `ConfigProvider` instead: http://u.ant.design/locale', ); diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx index d37572cfb2..aadf4a8906 100644 --- a/components/mentions/index.tsx +++ b/components/mentions/index.tsx @@ -88,14 +88,9 @@ const InternalMentions: React.ForwardRefRenderFunction((props, ref) => { // ======================== Warning ========================== if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Menu'); warning( !('inlineCollapsed' in props && mode !== 'inline'), - 'Menu', 'usage', '`inlineCollapsed` should only be used when `mode` is inline.', ); warning( !(props.siderCollapsed !== undefined && 'inlineCollapsed' in props), - 'Menu', 'usage', '`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.', ); - warning( - 'items' in props && !children, - 'Menu', - 'deprecated', - '`children` will be removed in next major version. Please use `items` instead.', - ); + warning.deprecated('items' in props && !children, 'children', 'items'); } overrideObj.validator?.({ mode }); diff --git a/components/message/useMessage.tsx b/components/message/useMessage.tsx index 69f2bdb78d..787ac1ff5e 100644 --- a/components/message/useMessage.tsx +++ b/components/message/useMessage.tsx @@ -123,7 +123,7 @@ export function useInternalMessage( ): readonly [MessageInstance, React.ReactElement] { const holderRef = React.useRef(null); - const warning = devUseWarning(); + const warning = devUseWarning('Message'); // ================================ API ================================ const wrapAPI = React.useMemo(() => { @@ -139,7 +139,6 @@ export function useInternalMessage( if (!holderRef.current) { warning( false, - 'Message', 'usage', 'You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.', ); diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx index 1cc0a9c7f7..eb7d6046aa 100644 --- a/components/modal/ConfirmDialog.tsx +++ b/components/modal/ConfirmDialog.tsx @@ -62,11 +62,10 @@ export function ConfirmContent( } = props; if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Modal'); warning( !(typeof icon === 'string' && icon.length > 2), - 'Modal', 'breaking', `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`, ); @@ -190,14 +189,9 @@ const ConfirmDialog: React.FC = (props) => { } = props; if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Modal'); - warning( - visible === undefined, - 'Modal', - 'deprecated', - `\`visible\` is deprecated, please use \`open\` instead.`, - ); + warning.deprecated(visible === undefined, 'visible', 'open'); } const confirmPrefixCls = `${prefixCls}-confirm`; diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 5ddd75acff..131d6b898c 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -55,14 +55,9 @@ const Modal: React.FC = (props) => { }; if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Modal'); - warning( - !('visible' in props), - 'Modal', - 'deprecated', - `\`visible\` will be removed in next major version, please use \`open\` instead.`, - ); + warning.deprecated(!('visible' in props), 'visible', 'open'); } const { diff --git a/components/modal/__tests__/Modal.test.tsx b/components/modal/__tests__/Modal.test.tsx index c43a655953..e06fe977e6 100644 --- a/components/modal/__tests__/Modal.test.tsx +++ b/components/modal/__tests__/Modal.test.tsx @@ -117,7 +117,7 @@ describe('Modal', () => { render(); expect(errSpy).toHaveBeenCalledWith( - 'Warning: [antd: Modal] `visible` will be removed in next major version, please use `open` instead.', + 'Warning: [antd: Modal] `visible` is deprecated. Please use `open` instead.', ); expect(document.querySelector('.ant-modal')).toBeTruthy(); diff --git a/components/notification/useNotification.tsx b/components/notification/useNotification.tsx index 3c4f21e64e..b7f3fd90a6 100644 --- a/components/notification/useNotification.tsx +++ b/components/notification/useNotification.tsx @@ -110,7 +110,7 @@ export function useInternalNotification( ): readonly [NotificationInstance, React.ReactElement] { const holderRef = React.useRef(null); - const warning = devUseWarning(); + const warning = devUseWarning('Notification'); // ================================ API ================================ const wrapAPI = React.useMemo(() => { @@ -121,7 +121,6 @@ export function useInternalNotification( if (!holderRef.current) { warning( false, - 'Notification', 'usage', 'You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.', ); diff --git a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap index 9f0acae65c..7c842622b0 100644 --- a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -726,7 +726,7 @@ exports[`renders components/popover/demo/arrow-point-at-center.tsx extend contex exports[`renders components/popover/demo/arrow-point-at-center.tsx extend context correctly 2`] = ` [ - "Warning: [antd: Tooltip] \`arrowPointAtCenter\` is deprecated, please use \`arrow={{ pointAtCenter: true }}\` instead.", + "Warning: [antd: Tooltip] \`arrowPointAtCenter\` is deprecated. Please use \`arrow={{ pointAtCenter: true }}\` instead.", ] `; diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx index 6cbae69bd0..ce864997cd 100644 --- a/components/progress/Line.tsx +++ b/components/progress/Line.tsx @@ -99,14 +99,9 @@ const Line: React.FC = (props) => { const [width, height] = getSize(mergedSize, 'line', { strokeWidth }); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Progress'); - warning( - !('strokeWidth' in props), - 'Progress', - 'deprecated', - '`strokeWidth` is deprecated. Please use `size` instead.', - ); + warning.deprecated(!('strokeWidth' in props), 'strokeWidth', 'size'); } const percentStyle: React.CSSProperties = { diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index 62d0a2b938..de8f99d658 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -123,37 +123,21 @@ const Progress = React.forwardRef((props, ref) => }, [showInfo, percent, percentNumber, progressStatus, type, prefixCls, format]); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Progress'); - warning( - !('successPercent' in props), - 'Progress', - 'deprecated', - '`successPercent` is deprecated. Please use `success.percent` instead.', - ); - warning( - !('width' in props), - 'Progress', - 'deprecated', - '`width` is deprecated. Please use `size` instead.', - ); + warning.deprecated(!('successPercent' in props), 'successPercent', 'success.percent'); + warning.deprecated(!('width' in props), 'width', 'size'); if ((type === 'circle' || type === 'dashboard') && Array.isArray(size)) { warning( false, - 'Progress', 'usage', 'Type "circle" and "dashboard" do not accept array as `size`, please use number or preset size instead.', ); } if (props.success && 'progress' in props.success) { - warning( - false, - 'Progress', - 'deprecated', - '`success.progress` is deprecated. Please use `success.percent` instead.', - ); + warning.deprecated(false, 'success.progress', 'success.percent'); } } diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx index 1de68b85f0..10ef01b77b 100644 --- a/components/qr-code/index.tsx +++ b/components/qr-code/index.tsx @@ -57,13 +57,12 @@ const QRCode: React.FC = (props) => { const [locale] = useLocale('QRCode'); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('QRCode'); - warning(!!value, 'QRCode', 'usage', 'need to receive `value` props'); + warning(!!value, 'usage', 'need to receive `value` props'); warning( !(icon && errorLevel === 'L'), - 'QRCode', 'usage', 'ErrorLevel `L` is not recommended to be used with `icon`, for scanning result would be affected by low level.', ); diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx index 5dd9c40fe8..5aefc75385 100644 --- a/components/radio/radio.tsx +++ b/components/radio/radio.tsx @@ -23,14 +23,9 @@ const InternalRadio: React.ForwardRefRenderFunction = (pro const { isFormItemInput } = React.useContext(FormItemInputContext); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Radio'); - warning( - !('optionType' in props), - 'Radio', - 'usage', - '`optionType` is only support in Radio.Group.', - ); + warning(!('optionType' in props), 'usage', '`optionType` is only support in Radio.Group.'); } const onChange = (e: RadioChangeEvent) => { diff --git a/components/result/index.tsx b/components/result/index.tsx index 0a8be999e8..543025933d 100644 --- a/components/result/index.tsx +++ b/components/result/index.tsx @@ -61,11 +61,10 @@ const Icon: React.FC = ({ prefixCls, icon, status }) => { const className = classNames(`${prefixCls}-icon`); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Result'); warning( !(typeof icon === 'string' && icon.length > 2), - 'Result', 'breaking', `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`, ); diff --git a/components/select/index.tsx b/components/select/index.tsx index 94b7d298e8..f4e899230c 100755 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -223,25 +223,18 @@ const InternalSelect = < // ====================== Warning ====================== if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Select'); - warning( - !dropdownClassName, - 'Select', - 'deprecated', - '`dropdownClassName` is deprecated. Please use `popupClassName` instead.', - ); + warning.deprecated(!dropdownClassName, 'dropdownClassName', 'popupClassName'); - warning( + warning.deprecated( dropdownMatchSelectWidth === undefined, - 'Select', - 'deprecated', - '`dropdownMatchSelectWidth` is deprecated. Please use `popupMatchSelectWidth` instead.', + 'dropdownMatchSelectWidth', + 'popupMatchSelectWidth', ); warning( !('showArrow' in props), - 'Select', 'deprecated', '`showArrow` is deprecated which will be removed in next major version. It will be a default behavior, you can hide it by setting `suffixIcon` to null.', ); diff --git a/components/select/useIcons.tsx b/components/select/useIcons.tsx index 66b37694c6..067ff988b6 100644 --- a/components/select/useIcons.tsx +++ b/components/select/useIcons.tsx @@ -39,14 +39,9 @@ export default function useIcons({ componentName: string; }) { if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning(componentName); - warning( - !clearIcon, - componentName, - 'deprecated', - '`clearIcon` is deprecated, please use `allowClear={{ clearIcon: React.ReactNode }}` instead.', - ); + warning.deprecated(!clearIcon, 'clearIcon', 'allowClear={{ clearIcon: React.ReactNode }}'); } // Clear Icon diff --git a/components/slider/__tests__/index.test.tsx b/components/slider/__tests__/index.test.tsx index d990049b07..d10cdbc649 100644 --- a/components/slider/__tests__/index.test.tsx +++ b/components/slider/__tests__/index.test.tsx @@ -171,27 +171,27 @@ describe('Slider', () => { const { container, rerender } = render(); expect(errSpy).toHaveBeenCalledWith( - 'Warning: [antd: Slider] `tooltipPrefixCls` is deprecated, please use `tooltip.prefixCls` instead.', + 'Warning: [antd: Slider] `tooltipPrefixCls` is deprecated. Please use `tooltip.prefixCls` instead.', ); rerender( document.body} />); expect(errSpy).toHaveBeenCalledWith( - 'Warning: [antd: Slider] `getTooltipPopupContainer` is deprecated, please use `tooltip.getPopupContainer` instead.', + 'Warning: [antd: Slider] `getTooltipPopupContainer` is deprecated. Please use `tooltip.getPopupContainer` instead.', ); rerender( v} />); expect(errSpy).toHaveBeenCalledWith( - 'Warning: [antd: Slider] `tipFormatter` is deprecated, please use `tooltip.formatter` instead.', + 'Warning: [antd: Slider] `tipFormatter` is deprecated. Please use `tooltip.formatter` instead.', ); rerender(); expect(errSpy).toHaveBeenCalledWith( - 'Warning: [antd: Slider] `tooltipVisible` is deprecated, please use `tooltip.open` instead.', + 'Warning: [antd: Slider] `tooltipVisible` is deprecated. Please use `tooltip.open` instead.', ); rerender(); expect(errSpy).toHaveBeenCalledWith( - 'Warning: [antd: Slider] `tooltipPlacement` is deprecated, please use `tooltip.placement` instead.', + 'Warning: [antd: Slider] `tooltipPlacement` is deprecated. Please use `tooltip.placement` instead.', ); // All should work diff --git a/components/slider/index.tsx b/components/slider/index.tsx index aad03ba10d..2c4a61d93f 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -166,7 +166,7 @@ const Slider = React.forwardRef // Warning for deprecated usage if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Slider'); [ ['tooltipPrefixCls', 'prefixCls'], @@ -175,12 +175,7 @@ const Slider = React.forwardRef ['tooltipPlacement', 'placement'], ['tooltipVisible', 'open'], ].forEach(([deprecatedName, newName]) => { - warning( - !(deprecatedName in props), - 'Slider', - 'deprecated', - `\`${deprecatedName}\` is deprecated, please use \`tooltip.${newName}\` instead.`, - ); + warning.deprecated(!(deprecatedName in props), deprecatedName, `tooltip.${newName}`); }); } diff --git a/components/spin/index.tsx b/components/spin/index.tsx index 75782f038a..b7160e2e66 100644 --- a/components/spin/index.tsx +++ b/components/spin/index.tsx @@ -111,9 +111,9 @@ const Spin: React.FC = (props) => { const isNestedPattern = React.useMemo(() => typeof children !== 'undefined', [children]); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Spin'); - warning(!tip || isNestedPattern, 'Spin', 'usage', '`tip` only work in nest pattern.'); + warning(!tip || isNestedPattern, 'usage', '`tip` only work in nest pattern.'); } const { direction, spin } = React.useContext(ConfigContext); diff --git a/components/steps/__tests__/index.test.tsx b/components/steps/__tests__/index.test.tsx index 05305033de..1998b59b91 100644 --- a/components/steps/__tests__/index.test.tsx +++ b/components/steps/__tests__/index.test.tsx @@ -103,7 +103,7 @@ describe('Steps', () => { expect(container.querySelectorAll('.ant-steps-item')).toHaveLength(1); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Steps] Step is deprecated. Please use `items` directly.', + 'Warning: [antd: Menu] `Step` is deprecated. Please use `items` instead.', ); errorSpy.mockRestore(); }); diff --git a/components/steps/useLegacyItems.ts b/components/steps/useLegacyItems.ts index 9b50bd6804..f57408627c 100644 --- a/components/steps/useLegacyItems.ts +++ b/components/steps/useLegacyItems.ts @@ -10,8 +10,8 @@ function filter(items: (T | null)[]): T[] { export default function useLegacyItems(items?: StepProps[], children?: React.ReactNode) { if (process.env.NODE_ENV === 'test') { - const warning = devUseWarning(); - warning(!children, 'Steps', 'deprecated', 'Step is deprecated. Please use `items` directly.'); + const warning = devUseWarning('Menu'); + warning.deprecated(!children, 'Step', 'items'); } if (items) { diff --git a/components/switch/index.tsx b/components/switch/index.tsx index dcedb444d8..6eb53d0a40 100755 --- a/components/switch/index.tsx +++ b/components/switch/index.tsx @@ -57,11 +57,10 @@ const Switch = React.forwardRef((props, ref) => } = props; if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Switch'); warning( 'checked' in props || !('value' in props), - 'Switch', 'usage', '`value` is not a valid prop, do you mean `checked`?', ); diff --git a/components/table/InternalTable.tsx b/components/table/InternalTable.tsx index da752012d4..4c280df443 100644 --- a/components/table/InternalTable.tsx +++ b/components/table/InternalTable.tsx @@ -149,12 +149,11 @@ const InternalTable = ( virtual, } = props; - const warning = devUseWarning(); + const warning = devUseWarning('Table'); if (process.env.NODE_ENV !== 'production') { warning( !(typeof rowKey === 'function' && rowKey.length > 1), - 'Table', 'usage', '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.', ); @@ -385,14 +384,13 @@ const InternalTable = ( } const { current = 1, total, pageSize = DEFAULT_PAGE_SIZE } = mergedPagination; - warning(current > 0, 'Table', 'usage', '`current` should be positive number.'); + warning(current > 0, 'usage', '`current` should be positive number.'); // Dynamic table data if (mergedData.length < total!) { if (mergedData.length > pageSize) { warning( false, - 'Table', 'usage', '`dataSource` length is less than `pagination.total` but large than `pagination.pageSize`. Please make sure your config correct data with async mode.', ); diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx index 7608cc8feb..542df23511 100644 --- a/components/table/hooks/useFilter/FilterDropdown.tsx +++ b/components/table/hooks/useFilter/FilterDropdown.tsx @@ -174,7 +174,7 @@ function FilterDropdown(props: FilterDropdownProps) { }; if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Table'); [ ['filterDropdownVisible', 'filterDropdownOpen', filterDropdownVisible], @@ -184,11 +184,10 @@ function FilterDropdown(props: FilterDropdownProps) { onFilterDropdownVisibleChange, ], ].forEach(([deprecatedName, newName, prop]) => { - warning( + warning.deprecated( prop === undefined || prop === null, - 'Table', - 'deprecated', - `\`${deprecatedName}\` is deprecated. Please use \`${newName}\` instead.`, + deprecatedName as string, + newName as string, ); }); } diff --git a/components/table/hooks/useFilter/index.tsx b/components/table/hooks/useFilter/index.tsx index 39ae96f524..2338df6af3 100644 --- a/components/table/hooks/useFilter/index.tsx +++ b/components/table/hooks/useFilter/index.tsx @@ -204,7 +204,7 @@ function useFilter({ FilterState[], Record, ] { - const warning = devUseWarning(); + const warning = devUseWarning('Table'); const mergedColumns = React.useMemo( () => getMergedColumns(rawMergedColumns || []), @@ -253,7 +253,6 @@ function useFilter({ warning( filteredKeysIsAllControlled, - 'Table', 'usage', 'Columns should all contain `filteredValue` or not contain `filteredValue`.', ); diff --git a/components/table/hooks/useSelection.tsx b/components/table/hooks/useSelection.tsx index 8ae700e472..bc7630b61c 100644 --- a/components/table/hooks/useSelection.tsx +++ b/components/table/hooks/useSelection.tsx @@ -107,7 +107,7 @@ const useSelection = ( getPopupContainer, } = config; - const warning = devUseWarning(); + const warning = devUseWarning('Table'); // ========================= Keys ========================= const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState( @@ -182,7 +182,6 @@ const useSelection = ( warning( !('checked' in checkboxProps || 'defaultChecked' in checkboxProps), - 'Table', 'usage', 'Do not set `checked` or `defaultChecked` in `getCheckboxProps`. Please use `selectedRowKeys` instead.', ); @@ -321,12 +320,7 @@ const useSelection = ( const keys = Array.from(keySet); if (onSelectInvert) { - warning( - false, - 'Table', - 'deprecated', - '`onSelectInvert` will be removed in future. Please use `onChange` instead.', - ); + warning.deprecated(false, 'onSelectInvert', 'onChange'); onSelectInvert(keys); } @@ -368,7 +362,6 @@ const useSelection = ( if (!rowSelection) { warning( !columns.includes(SELECTION_COLUMN), - 'Table', 'usage', '`rowSelection` is not config but `SELECTION_COLUMN` exists in the `columns`.', ); @@ -522,7 +515,6 @@ const useSelection = ( mergedIndeterminate = indeterminate; warning( typeof checkboxProps?.indeterminate !== 'boolean', - 'Table', 'usage', 'set `indeterminate` using `rowSelection.getCheckboxProps` is not allowed with tree structured dataSource.', ); @@ -670,7 +662,6 @@ const useSelection = ( warning( cloneColumns.filter((col) => col === SELECTION_COLUMN).length <= 1, - 'Table', 'usage', 'Multiple `SELECTION_COLUMN` exist in `columns`.', ); diff --git a/components/tabs/__tests__/index.test.tsx b/components/tabs/__tests__/index.test.tsx index 267ef4e213..11f3cbbdf8 100644 --- a/components/tabs/__tests__/index.test.tsx +++ b/components/tabs/__tests__/index.test.tsx @@ -122,7 +122,7 @@ describe('Tabs', () => { expect(container.querySelectorAll('.ant-tabs-tab')).toHaveLength(1); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Tabs] Tabs.TabPane is deprecated. Please use `items` directly.', + 'Warning: [antd: Tabs] `Tabs.TabPane` is deprecated. Please use `items` instead.', ); errorSpy.mockRestore(); }); diff --git a/components/tabs/hooks/useLegacyItems.ts b/components/tabs/hooks/useLegacyItems.ts index f2bfba2c24..61e570a5a0 100644 --- a/components/tabs/hooks/useLegacyItems.ts +++ b/components/tabs/hooks/useLegacyItems.ts @@ -11,13 +11,8 @@ function filter(items: (T | null)[]): T[] { export default function useLegacyItems(items?: TabsProps['items'], children?: React.ReactNode) { if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); - warning( - !children, - 'Tabs', - 'deprecated', - 'Tabs.TabPane is deprecated. Please use `items` directly.', - ); + const warning = devUseWarning('Tabs'); + warning.deprecated(!children, 'Tabs.TabPane', 'items'); } if (items) { diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index af474df7da..1bf5727684 100755 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -69,11 +69,10 @@ const Tabs: React.FC & { TabPane: typeof TabPane } = (props) => { const rootPrefixCls = getPrefixCls(); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Tabs'); warning( !('onPrevClick' in props) && !('onNextClick' in props), - 'Tabs', 'breaking', '`onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead.', ); diff --git a/components/tag/__tests__/index.test.tsx b/components/tag/__tests__/index.test.tsx index 81ca509ade..bc7a0fbea3 100644 --- a/components/tag/__tests__/index.test.tsx +++ b/components/tag/__tests__/index.test.tsx @@ -147,7 +147,7 @@ describe('Tag', () => { const { container } = render(); expect(errSpy).toHaveBeenCalledWith( - 'Warning: [antd: Tag] `visible` is deprecated, please use `visible && ` instead.', + 'Warning: [antd: Tag] `visible` is deprecated. Please use `visible && ` instead.', ); expect(container.querySelector('.ant-tag-hidden')).toBeTruthy(); diff --git a/components/tag/index.tsx b/components/tag/index.tsx index 0a843db487..b84fe534bc 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -57,14 +57,9 @@ const InternalTag: React.ForwardRefRenderFunction = ( // Warning for deprecated usage if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Tag'); - warning( - !('visible' in props), - 'Tag', - 'deprecated', - '`visible` is deprecated, please use `visible && ` instead.', - ); + warning.deprecated(!('visible' in props), 'visible', 'visible && '); } React.useEffect(() => { diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index abb8e774c6..bc81c76b79 100644 --- a/components/time-picker/index.tsx +++ b/components/time-picker/index.tsx @@ -32,14 +32,9 @@ export interface TimePickerProps extends Omit, 'picker'> const TimePicker = React.forwardRef( ({ addon, renderExtraFooter, ...restProps }, ref) => { if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('TimePicker'); - warning( - !addon, - 'TimePicker', - 'deprecated', - '`addon` is deprecated. Please use `renderExtraFooter` instead.', - ); + warning.deprecated(!addon, 'addon', 'renderExtraFooter'); } const internalRenderExtraFooter = React.useMemo(() => { diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx index 4a64f1d6e0..9f9f623ef7 100644 --- a/components/timeline/Timeline.tsx +++ b/components/timeline/Timeline.tsx @@ -35,14 +35,9 @@ const Timeline: CompoundedComponent = (props) => { // =================== Warning ===================== if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Timeline'); - warning( - !children, - 'Timeline', - 'deprecated', - '`Timeline.Item` is deprecated. Please use `items` instead.', - ); + warning.deprecated(!children, 'Timeline.Item', 'items'); } // Style diff --git a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap index 2afa69a90a..ec89d9682d 100644 --- a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -511,7 +511,7 @@ exports[`renders components/tooltip/demo/arrow-point-at-center.tsx extend contex exports[`renders components/tooltip/demo/arrow-point-at-center.tsx extend context correctly 2`] = ` [ - "Warning: [antd: Tooltip] \`arrowPointAtCenter\` is deprecated, please use \`arrow={{ pointAtCenter: true }}\` instead.", + "Warning: [antd: Tooltip] \`arrowPointAtCenter\` is deprecated. Please use \`arrow={{ pointAtCenter: true }}\` instead.", ] `; diff --git a/components/tooltip/__tests__/tooltip.test.tsx b/components/tooltip/__tests__/tooltip.test.tsx index 326f6a6a1c..f726ae646a 100644 --- a/components/tooltip/__tests__/tooltip.test.tsx +++ b/components/tooltip/__tests__/tooltip.test.tsx @@ -495,7 +495,7 @@ describe('Tooltip', () => { await waitFakeTimer(); expect(errSpy).toHaveBeenCalledWith( - 'Warning: [antd: Tooltip] `defaultVisible` is deprecated, please use `defaultOpen` instead.', + 'Warning: [antd: Tooltip] `defaultVisible` is deprecated. Please use `defaultOpen` instead.', ); expect(isTooltipOpen()).toBeTruthy(); @@ -506,7 +506,7 @@ describe('Tooltip', () => { , ); expect(errSpy).toHaveBeenCalledWith( - 'Warning: [antd: Tooltip] `visible` is deprecated, please use `open` instead.', + 'Warning: [antd: Tooltip] `visible` is deprecated. Please use `open` instead.', ); rerender( @@ -527,7 +527,7 @@ describe('Tooltip', () => { , ); expect(errSpy).toHaveBeenCalledWith( - 'Warning: [antd: Tooltip] `onVisibleChange` is deprecated, please use `onOpenChange` instead.', + 'Warning: [antd: Tooltip] `onVisibleChange` is deprecated. Please use `onOpenChange` instead.', ); // afterVisibleChange @@ -537,7 +537,7 @@ describe('Tooltip', () => { , ); expect(errSpy).toHaveBeenCalledWith( - 'Warning: [antd: Tooltip] `afterVisibleChange` is deprecated, please use `afterOpenChange` instead.', + 'Warning: [antd: Tooltip] `afterVisibleChange` is deprecated. Please use `afterOpenChange` instead.', ); // Event Trigger diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index 080cc837c9..a6719ad6c0 100644 --- a/components/tooltip/index.tsx +++ b/components/tooltip/index.tsx @@ -216,7 +216,7 @@ const Tooltip = React.forwardRef((props, ref) => { } = React.useContext(ConfigContext); // ============================== Ref =============================== - const warning = devUseWarning(); + const warning = devUseWarning('Tooltip'); const tooltipRef = React.useRef(null); @@ -227,12 +227,7 @@ const Tooltip = React.forwardRef((props, ref) => { React.useImperativeHandle(ref, () => ({ forceAlign, forcePopupAlign: () => { - warning( - false, - 'Tooltip', - 'deprecated', - '`forcePopupAlign` is align to `forceAlign` instead.', - ); + warning.deprecated(false, 'forcePopupAlign', 'forceAlign'); forceAlign(); }, })); @@ -246,26 +241,19 @@ const Tooltip = React.forwardRef((props, ref) => { ['afterVisibleChange', 'afterOpenChange'], ['arrowPointAtCenter', 'arrow={{ pointAtCenter: true }}'], ].forEach(([deprecatedName, newName]) => { - warning( - !(deprecatedName in props), - 'Tooltip', - 'deprecated', - `\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`, - ); + warning.deprecated(!(deprecatedName in props), deprecatedName, newName); }); warning( !destroyTooltipOnHide || typeof destroyTooltipOnHide === 'boolean', - 'Tooltip', 'usage', '`destroyTooltipOnHide` no need config `keepParent` anymore. Please use `boolean` value directly.', ); warning( !arrow || typeof arrow === 'boolean' || !('arrowPointAtCenter' in arrow), - 'Tooltip', 'deprecated', - '`arrowPointAtCenter` in `arrow` is deprecated, please use `pointAtCenter` instead.', + '`arrowPointAtCenter` in `arrow` is deprecated. Please use `pointAtCenter` instead.', ); } diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 12f2300627..2282935d45 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -170,14 +170,9 @@ const Transfer = ( ] = useSelection(leftDataSource, rightDataSource, selectedKeys); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Transfer'); - warning( - !pagination || !children, - 'Transfer', - 'usage', - '`pagination` not support customize render list.', - ); + warning(!pagination || !children, 'usage', '`pagination` not support customize render list.'); } const setStateKeys = useCallback( diff --git a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap index 784e2440ed..12e3d5b8ea 100644 --- a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1637,7 +1637,7 @@ Array [ exports[`renders components/tree-select/demo/placement.tsx extend context correctly 2`] = ` [ - "Warning: [antd: Select] \`dropdownMatchSelectWidth\` is deprecated. Please use \`popupMatchSelectWidth\` instead.", + "Warning: [antd: TreeSelect] \`dropdownMatchSelectWidth\` is deprecated. Please use \`popupMatchSelectWidth\` instead.", ] `; diff --git a/components/tree-select/__tests__/index.test.tsx b/components/tree-select/__tests__/index.test.tsx index c5a626a152..3c0a879277 100644 --- a/components/tree-select/__tests__/index.test.tsx +++ b/components/tree-select/__tests__/index.test.tsx @@ -72,7 +72,7 @@ describe('TreeSelect', () => { const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); render(); expect(errSpy).toHaveBeenCalledWith( - 'Warning: [antd: Select] `dropdownMatchSelectWidth` is deprecated. Please use `popupMatchSelectWidth` instead.', + 'Warning: [antd: TreeSelect] `dropdownMatchSelectWidth` is deprecated. Please use `popupMatchSelectWidth` instead.', ); errSpy.mockRestore(); diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index dc48259936..4d00510d79 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -121,32 +121,24 @@ const InternalTreeSelect = < } = React.useContext(ConfigContext); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('TreeSelect'); warning( multiple !== false || !treeCheckable, - 'TreeSelect', 'usage', '`multiple` will always be `true` when `treeCheckable` is true', ); - warning( - !dropdownClassName, - 'TreeSelect', - 'deprecated', - '`dropdownClassName` is deprecated. Please use `popupClassName` instead.', - ); + warning.deprecated(!dropdownClassName, 'dropdownClassName', 'popupClassName'); - warning( + warning.deprecated( dropdownMatchSelectWidth === undefined, - 'Select', - 'deprecated', - '`dropdownMatchSelectWidth` is deprecated. Please use `popupMatchSelectWidth` instead.', + 'dropdownMatchSelectWidth', + 'popupMatchSelectWidth', ); warning( !('showArrow' in props), - 'TreeSelect', 'deprecated', '`showArrow` is deprecated which will be removed in next major version. It will be a default behavior, you can hide it by setting `suffixIcon` to null.', ); diff --git a/components/typography/Link.tsx b/components/typography/Link.tsx index cfd24e250a..1b9575dc42 100644 --- a/components/typography/Link.tsx +++ b/components/typography/Link.tsx @@ -12,14 +12,9 @@ export interface LinkProps const Link = React.forwardRef(({ ellipsis, rel, ...restProps }, ref) => { if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Typography.Link'); - warning( - typeof ellipsis !== 'object', - 'Typography.Link', - 'usage', - '`ellipsis` only supports boolean value.', - ); + warning(typeof ellipsis !== 'object', 'usage', '`ellipsis` only supports boolean value.'); } const mergedProps = { diff --git a/components/typography/Text.tsx b/components/typography/Text.tsx index 0638570501..eb1bf07521 100644 --- a/components/typography/Text.tsx +++ b/components/typography/Text.tsx @@ -24,13 +24,12 @@ const Text: React.ForwardRefRenderFunction = ( }, [ellipsis]); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Typography.Text'); warning( typeof ellipsis !== 'object' || !ellipsis || (!('expandable' in ellipsis) && !('rows' in ellipsis)), - 'Typography.Text', 'usage', '`ellipsis` do not support `expandable` or `rows` props.', ); diff --git a/components/typography/Title.tsx b/components/typography/Title.tsx index d818f17490..b58f13a6e9 100644 --- a/components/typography/Title.tsx +++ b/components/typography/Title.tsx @@ -20,11 +20,10 @@ const Title = React.forwardRef((props, ref) => { let component: keyof JSX.IntrinsicElements; if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Typography.Title'); warning( TITLE_ELE_LIST.includes(level), - 'Typography.Title', 'usage', 'Title only accept `1 | 2 | 3 | 4 | 5` as `level` value. And `5` need 4.6.0+ version.', ); diff --git a/components/typography/Typography.tsx b/components/typography/Typography.tsx index 1fd5661159..a180e867f0 100644 --- a/components/typography/Typography.tsx +++ b/components/typography/Typography.tsx @@ -56,14 +56,9 @@ const Typography = React.forwardRef< } if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Typography'); - warning( - !setContentRef, - 'Typography', - 'deprecated', - '`setContentRef` is deprecated. Please use `ref` instead.', - ); + warning.deprecated(!setContentRef, 'setContentRef', 'ref'); } const prefixCls = getPrefixCls('typography', customizePrefixCls); diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index 548dbd2032..07c1d8d897 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -80,21 +80,15 @@ const InternalUpload: React.ForwardRefRenderFunction = ( const upload = React.useRef(null); if (process.env.NODE_ENV !== 'production') { - const warning = devUseWarning(); + const warning = devUseWarning('Upload'); warning( 'fileList' in props || !('value' in props), - 'Upload', 'usage', '`value` is not a valid prop, do you mean `fileList`?', ); - warning( - !('transformFile' in props), - 'Upload', - 'deprecated', - '`transformFile` is deprecated. Please use `beforeUpload` directly.', - ); + warning.deprecated(!('transformFile' in props), 'transformFile', 'beforeUpload'); } // Control mode will auto fill file uid if not provided diff --git a/docs/blog/testing-migrate.en-US.md b/docs/blog/testing-migrate.en-US.md index 05e67af4b2..e454cbc325 100644 --- a/docs/blog/testing-migrate.en-US.md +++ b/docs/blog/testing-migrate.en-US.md @@ -102,7 +102,7 @@ While the major version is being upgraded, some components are discarded, but th ++ const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); ++ render(); ++ expect(errSpy).toHaveBeenCalledWith( -++ 'Warning: [antd: BackTop] `BackTop` is deprecated, please use `FloatButton.BackTop` instead.', +++ 'Warning: [antd: BackTop] `BackTop` is deprecated. Please use `FloatButton.BackTop` instead.', ++ ); ++ errSpy.mockRestore(); ++ }); diff --git a/docs/blog/testing-migrate.zh-CN.md b/docs/blog/testing-migrate.zh-CN.md index 82f4f10cf5..cb90b9ff88 100644 --- a/docs/blog/testing-migrate.zh-CN.md +++ b/docs/blog/testing-migrate.zh-CN.md @@ -102,7 +102,7 @@ author: li-jia-nan,zombieJ ++ const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); ++ render(); ++ expect(errSpy).toHaveBeenCalledWith( -++ 'Warning: [antd: BackTop] `BackTop` is deprecated, please use `FloatButton.BackTop` instead.', +++ 'Warning: [antd: BackTop] `BackTop` is deprecated. Please use `FloatButton.BackTop` instead.', ++ ); ++ errSpy.mockRestore(); ++ }); From b888c2ad68836a738d3e482fc5c1a16e1fc2df18 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 13 Sep 2023 22:46:23 +0800 Subject: [PATCH 10/24] chore: upgrade github action node version to 18 (#44835) * chore: upgrade github action node version * chore: upgrade github action node version * chore: upgrade github action node version * chore: upgrade github action node version --- .github/workflows/chatgpt-cr.yml | 24 ------------------------ .github/workflows/mock-project-build.yml | 2 +- .github/workflows/preview-build.yml | 2 +- .github/workflows/site-deploy.yml | 6 +++--- .github/workflows/size-limit.yml | 4 ++-- .github/workflows/test.yml | 21 +++++++++++---------- 6 files changed, 18 insertions(+), 41 deletions(-) delete mode 100644 .github/workflows/chatgpt-cr.yml diff --git a/.github/workflows/chatgpt-cr.yml b/.github/workflows/chatgpt-cr.yml deleted file mode 100644 index c849485054..0000000000 --- a/.github/workflows/chatgpt-cr.yml +++ /dev/null @@ -1,24 +0,0 @@ -name: 🤖 ChatGPT Code Review - -permissions: - contents: read - pull-requests: write - -on: - pull_request: - types: [opened, reopened, synchronize] - -jobs: - test: - runs-on: ubuntu-latest - if: github.event.pull_request.head.ref != 'feature' && github.event.pull_request.head.ref != 'master' && github.event.pull_request.head.ref != 'next' && github.event.pull_request.head.ref != 'master-merge-feature' && github.event.pull_request.head.ref != 'feature-merge-master' && github.event.pull_request.head.ref != 'next-merge-master' && github.event.pull_request.head.ref != 'next-merge-feature' - steps: - - uses: anc95/ChatGPT-CodeReview@main - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }} - # Optional - LANGUAGE: Chinese - MODEL: - top_p: 1 - temperature: 1 diff --git a/.github/workflows/mock-project-build.yml b/.github/workflows/mock-project-build.yml index e7e934a08f..c45e675af8 100644 --- a/.github/workflows/mock-project-build.yml +++ b/.github/workflows/mock-project-build.yml @@ -22,7 +22,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - uses: actions/cache@v3 with: diff --git a/.github/workflows/preview-build.yml b/.github/workflows/preview-build.yml index 65f37668f7..1a1a4c8589 100644 --- a/.github/workflows/preview-build.yml +++ b/.github/workflows/preview-build.yml @@ -74,7 +74,7 @@ jobs: run: npm run site env: SITE_ENV: development - NODE_OPTIONS: --max_old_space_size=4096 + NODE_OPTIONS: "--max_old_space_size=4096 --openssl-legacy-provider" - name: upload site artifact uses: actions/upload-artifact@v3 diff --git a/.github/workflows/site-deploy.yml b/.github/workflows/site-deploy.yml index 814563746a..d1152a8023 100644 --- a/.github/workflows/site-deploy.yml +++ b/.github/workflows/site-deploy.yml @@ -53,7 +53,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - name: restore cache from package-lock.json uses: actions/cache@v3 @@ -70,13 +70,13 @@ jobs: - name: build site run: npm run predeploy env: - NODE_OPTIONS: "--max_old_space_size=4096" + NODE_OPTIONS: "--max_old_space_size=4096 --openssl-legacy-provider" - name: build dist and bundle analyzer report run: npm run dist env: ANALYZER: 1 - NODE_OPTIONS: "--max_old_space_size=4096" + NODE_OPTIONS: "--max_old_space_size=4096 --openssl-legacy-provider" - name: Get version id: publish-version diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml index 73dc5bd683..89b0b50e00 100644 --- a/.github/workflows/size-limit.yml +++ b/.github/workflows/size-limit.yml @@ -27,7 +27,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - name: cache package-lock.json uses: actions/cache@v3 @@ -63,5 +63,5 @@ jobs: build_script: dist skip_step: install env: - NODE_OPTIONS: --max_old_space_size=4096 + NODE_OPTIONS: "--max_old_space_size=4096 --openssl-legacy-provider" PRODUCTION_ONLY: 1 diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 7dce9880a7..1c15128b37 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -21,7 +21,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - name: cache package-lock.json uses: actions/cache@v3 @@ -57,7 +57,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - name: restore cache from package-lock.json uses: actions/cache@v3 @@ -83,7 +83,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - name: restore cache from package-lock.json uses: actions/cache@v3 @@ -108,7 +108,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - name: restore cache from package-lock.json uses: actions/cache@v3 @@ -129,9 +129,10 @@ jobs: key: dist-${{ github.sha }} - name: dist - run: CI=1 npm run dist + run: npm run dist env: - NODE_OPTIONS: --max_old_space_size=4096 + NODE_OPTIONS: "--max_old_space_size=4096 --openssl-legacy-provider" + CI: 1 needs: setup ################################ Test ################################ @@ -151,7 +152,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - name: restore cache from package-lock.json uses: actions/cache@v3 @@ -235,7 +236,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - uses: actions/download-artifact@v3 with: @@ -261,7 +262,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - name: restore cache from package-lock.json uses: actions/cache@v3 @@ -316,7 +317,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - name: restore cache from package-lock.json # lib only run in master branch not in pull request From f3c1871b203f317275eb418b3e41786d4e7b2b1b Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Thu, 14 Sep 2023 14:56:57 +0800 Subject: [PATCH 11/24] chore: bump rc-picker (#44845) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: bump rc-picker * Update package.json * Update cell-render.tsx --------- Co-authored-by: 二货爱吃白萝卜 Co-authored-by: lijianan <574980606@qq.com> --- components/date-picker/demo/cell-render.tsx | 22 +++++++++++---------- package.json | 2 +- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/components/date-picker/demo/cell-render.tsx b/components/date-picker/demo/cell-render.tsx index da1a6ae21a..c4610ee23f 100644 --- a/components/date-picker/demo/cell-render.tsx +++ b/components/date-picker/demo/cell-render.tsx @@ -8,13 +8,14 @@ const App: React.FC = () => ( { if (info.type !== 'date') return info.originNode; - const style: React.CSSProperties = {}; - if (current.date() === 1) { - style.border = '1px solid #1677ff'; - style.borderRadius = '50%'; + if (typeof current === 'number') { + return
{current}
; } return ( -
+
{current.date()}
); @@ -23,13 +24,14 @@ const App: React.FC = () => ( { if (info.type !== 'date') return info.originNode; - const style: React.CSSProperties = {}; - if (current.date() === 1) { - style.border = '1px solid #1677ff'; - style.borderRadius = '50%'; + if (typeof current === 'number') { + return
{current}
; } return ( -
+
{current.date()}
); diff --git a/package.json b/package.json index 7b9c8c3a25..9f4c15a6d8 100644 --- a/package.json +++ b/package.json @@ -139,7 +139,7 @@ "rc-motion": "^2.9.0", "rc-notification": "~5.1.1", "rc-pagination": "~3.6.1", - "rc-picker": "~3.13.2", + "rc-picker": "~3.14.1", "rc-progress": "~3.5.1", "rc-rate": "~2.12.0", "rc-resize-observer": "^1.3.1", From d3469324c91bdc391287db9400b5861d562af01e Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 14 Sep 2023 16:32:54 +0800 Subject: [PATCH 12/24] fix: rate star transform origin (#44855) --- components/rate/style/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx index fb143a0581..57e9793744 100644 --- a/components/rate/style/index.tsx +++ b/components/rate/style/index.tsx @@ -108,7 +108,7 @@ const genRateStyle: GenerateStyle = (token) => { padding: 0, color: token.starColor, fontSize: token.starSize, - lineHeight: 'unset', + lineHeight: 1, listStyle: 'none', outline: 'none', From afcdc3fbe236534c4be858f183373787d8564d6a Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 14 Sep 2023 16:59:11 +0800 Subject: [PATCH 13/24] chore: try to fix screenshot (#44817) * chore: try to fix screenshot * chore: set small viewport * chore: rm wait until * chore: minimize demo * chore: support onlyViewPort * chore: better logic * chore: config demos * chore: update * refactor: rename * chore: update * chore: update * chore: update --- .../__snapshots__/demo-extend.test.ts.snap | 45 ------ .../__snapshots__/demo.test.tsx.snap | 45 ------ components/anchor/__tests__/image.test.ts | 2 +- components/anchor/demo/horizontal.tsx | 27 ---- components/back-top/__tests__/image.test.ts | 5 - .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- .../float-button/__tests__/image.test.ts | 2 +- components/float-button/demo/back-top.tsx | 2 +- components/layout/__tests__/image.test.ts | 5 +- components/select/__tests__/image.test.ts | 4 +- components/tooltip/__tests__/image.test.ts | 4 +- tests/shared/imageTest.tsx | 152 +++++++++++------- 13 files changed, 105 insertions(+), 192 deletions(-) delete mode 100644 components/back-top/__tests__/image.test.ts diff --git a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap index 15847162fd..f51fde5aca 100644 --- a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -288,39 +288,6 @@ Array [ Part 3
- - -
@@ -339,18 +306,6 @@ Array [ id="part-3" style="width: 100vw; height: 100vh; text-align: center; background: rgb(255, 251, 233);" /> -
-
-
, ] `; diff --git a/components/anchor/__tests__/__snapshots__/demo.test.tsx.snap b/components/anchor/__tests__/__snapshots__/demo.test.tsx.snap index 8ce2244fb6..d388bea819 100644 --- a/components/anchor/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/anchor/__tests__/__snapshots__/demo.test.tsx.snap @@ -278,39 +278,6 @@ Array [ Part 3
- - -
@@ -329,18 +296,6 @@ Array [ id="part-3" style="width:100vw;height:100vh;text-align:center;background:#FFFBE9" /> -
-
-
, ] `; diff --git a/components/anchor/__tests__/image.test.ts b/components/anchor/__tests__/image.test.ts index b071a85f4f..989bbfa490 100644 --- a/components/anchor/__tests__/image.test.ts +++ b/components/anchor/__tests__/image.test.ts @@ -1,5 +1,5 @@ import { imageDemoTest } from '../../../tests/shared/imageTest'; describe('Anchor image', () => { - imageDemoTest('anchor'); + imageDemoTest('anchor', { onlyViewport: true }); }); diff --git a/components/anchor/demo/horizontal.tsx b/components/anchor/demo/horizontal.tsx index dfb162ab28..7cde8cb5e7 100644 --- a/components/anchor/demo/horizontal.tsx +++ b/components/anchor/demo/horizontal.tsx @@ -22,21 +22,6 @@ const App: React.FC = () => ( href: '#part-3', title: 'Part 3', }, - { - key: 'part-4', - href: '#part-4', - title: 'Part 4', - }, - { - key: 'part-5', - href: '#part-5', - title: 'Part 5', - }, - { - key: 'part-6', - href: '#part-6', - title: 'Part 6', - }, ]} />
@@ -63,18 +48,6 @@ const App: React.FC = () => ( id="part-3" style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#FFFBE9' }} /> -
-
-
); diff --git a/components/back-top/__tests__/image.test.ts b/components/back-top/__tests__/image.test.ts deleted file mode 100644 index 2651ed880e..0000000000 --- a/components/back-top/__tests__/image.test.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { imageDemoTest } from '../../../tests/shared/imageTest'; - -describe('BackTop image', () => { - imageDemoTest('back-top'); -}); diff --git a/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap index 9140403575..68dcb4f51f 100644 --- a/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -2,7 +2,7 @@ exports[`renders components/float-button/demo/back-top.tsx extend context correctly 1`] = `
Scroll to bottom diff --git a/components/float-button/__tests__/__snapshots__/demo.test.ts.snap b/components/float-button/__tests__/__snapshots__/demo.test.ts.snap index 08e7e83ced..42dc22e59f 100644 --- a/components/float-button/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/float-button/__tests__/__snapshots__/demo.test.ts.snap @@ -2,7 +2,7 @@ exports[`renders components/float-button/demo/back-top.tsx correctly 1`] = `
Scroll to bottom diff --git a/components/float-button/__tests__/image.test.ts b/components/float-button/__tests__/image.test.ts index ef9b55aa6e..8f00fb5d62 100644 --- a/components/float-button/__tests__/image.test.ts +++ b/components/float-button/__tests__/image.test.ts @@ -1,5 +1,5 @@ import { imageDemoTest } from '../../../tests/shared/imageTest'; describe('float-button image', () => { - imageDemoTest('float-button'); + imageDemoTest('float-button', { splitTheme: true, onlyViewport: ['back-top.tsx'] }); }); diff --git a/components/float-button/demo/back-top.tsx b/components/float-button/demo/back-top.tsx index f359f93359..29b5958920 100644 --- a/components/float-button/demo/back-top.tsx +++ b/components/float-button/demo/back-top.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { FloatButton } from 'antd'; const App: React.FC = () => ( -
+
Scroll to bottom
Scroll to bottom
Scroll to bottom
diff --git a/components/layout/__tests__/image.test.ts b/components/layout/__tests__/image.test.ts index b495e17129..0d4d10fdaf 100644 --- a/components/layout/__tests__/image.test.ts +++ b/components/layout/__tests__/image.test.ts @@ -1,5 +1,8 @@ import { imageDemoTest } from '../../../tests/shared/imageTest'; describe('Layout image', () => { - imageDemoTest('layout', { skip: ['fixed-sider.tsx'] }); + imageDemoTest('layout', { + skip: ['fixed-sider.tsx'], + splitTheme: ['side.tsx'], + }); }); diff --git a/components/select/__tests__/image.test.ts b/components/select/__tests__/image.test.ts index d4e0b04fab..fff13695b5 100644 --- a/components/select/__tests__/image.test.ts +++ b/components/select/__tests__/image.test.ts @@ -1,5 +1,7 @@ import { imageDemoTest } from '../../../tests/shared/imageTest'; describe('Select image', () => { - imageDemoTest('select', { skip: ['basic.tsx'] }); + imageDemoTest('select', { + splitTheme: ['debug-flip-shift.tsx'], + }); }); diff --git a/components/tooltip/__tests__/image.test.ts b/components/tooltip/__tests__/image.test.ts index b3f04c9c40..cac71fc05f 100644 --- a/components/tooltip/__tests__/image.test.ts +++ b/components/tooltip/__tests__/image.test.ts @@ -1,5 +1,7 @@ import { imageDemoTest } from '../../../tests/shared/imageTest'; describe('Tooltip image', () => { - imageDemoTest('tooltip'); + imageDemoTest('tooltip', { + onlyViewport: ['shift.tsx'], + }); }); diff --git a/tests/shared/imageTest.tsx b/tests/shared/imageTest.tsx index ab723470fd..26c1fd782c 100644 --- a/tests/shared/imageTest.tsx +++ b/tests/shared/imageTest.tsx @@ -22,78 +22,98 @@ const themes = { compact: theme.compactAlgorithm, }; +interface ImageTestOptions { + onlyViewport?: boolean; + splitTheme?: boolean; +} + // eslint-disable-next-line jest/no-export -export default function imageTest(component: React.ReactElement) { - it(`component image screenshot should correct`, async () => { - await jestPuppeteer.resetPage(); - await page.setRequestInterception(true); - const onRequestHandle = (request: any) => { - if (['image'].includes(request.resourceType())) { - request.abort(); - } else { - request.continue(); +export default function imageTest(component: React.ReactElement, options: ImageTestOptions) { + function test(name: string, themedComponent: React.ReactElement) { + it(name, async () => { + await jestPuppeteer.resetPage(); + await page.setRequestInterception(true); + const onRequestHandle = (request: any) => { + if (['image'].includes(request.resourceType())) { + request.abort(); + } else { + request.continue(); + } + }; + + MockDate.set(dayjs('2016-11-22').valueOf()); + page.on('request', onRequestHandle); + await page.goto(`file://${process.cwd()}/tests/index.html`); + await page.addStyleTag({ path: `${process.cwd()}/components/style/reset.css` }); + await page.addStyleTag({ content: '*{animation: none!important;}' }); + + const cache = createCache(); + + const element = ( + + {themedComponent} + + ); + + const html = ReactDOMServer.renderToString(element); + const styleStr = extractStyle(cache); + + await page.evaluate( + (innerHTML, ssrStyle) => { + document.querySelector('#root')!.innerHTML = innerHTML; + + const head = document.querySelector('head')!; + head.innerHTML += ssrStyle; + }, + html, + styleStr, + ); + + if (!options.onlyViewport) { + // Get scroll height of the rendered page and set viewport + const bodyHeight = await page.evaluate(() => document.body.scrollHeight); + await page.setViewport({ width: 800, height: bodyHeight }); } - }; - MockDate.set(dayjs('2016-11-22').valueOf()); - page.on('request', onRequestHandle); - await page.goto(`file://${process.cwd()}/tests/index.html`); - await page.addStyleTag({ path: `${process.cwd()}/components/style/reset.css` }); - await page.addStyleTag({ content: '*{animation: none!important;}' }); + const image = await page.screenshot({ + fullPage: !options.onlyViewport, + optimizeForSpeed: true, + }); - const cache = createCache(); + expect(image).toMatchImageSnapshot(); - const element = ( - - - {Object.entries(themes).map(([key, algorithm]) => ( -
- {component} -
- ))} -
-
- end of screen -
-
- ); - - const html = ReactDOMServer.renderToString(element); - const styleStr = extractStyle(cache); - - await page.evaluate( - (innerHTML, ssrStyle) => { - document.querySelector('#root')!.innerHTML = innerHTML; - - const head = document.querySelector('head')!; - head.innerHTML += ssrStyle; - }, - html, - styleStr, - ); - - await page.waitForSelector('#end-of-screen', { - timeout: 0, + MockDate.reset(); + page.off('request', onRequestHandle); }); + } - const image = await page.screenshot({ - fullPage: true, - captureBeyondViewport: true, - optimizeForSpeed: true, + if (options.splitTheme) { + Object.entries(themes).forEach(([key, algorithm]) => { + test( + `component image screenshot should correct ${key}`, +
+ {component} +
, + ); }); - - expect(image).toMatchImageSnapshot(); - - MockDate.reset(); - page.off('request', onRequestHandle); - }); + } else { + test( + `component image screenshot should correct`, + <> + {Object.entries(themes).map(([key, algorithm]) => ( +
+ {component} +
+ ))} + , + ); + } } type Options = { skip?: boolean | string[]; + onlyViewport?: boolean | string[]; + splitTheme?: boolean | string[]; }; // eslint-disable-next-line jest/no-export @@ -102,7 +122,7 @@ export function imageDemoTest(component: string, options: Options = {}) { const files = globSync(`./components/${component}/demo/*.tsx`); files.forEach((file) => { - if (Array.isArray(options.skip) && options.skip.some((c) => file.includes(c))) { + if (Array.isArray(options.skip) && options.skip.some((c) => file.endsWith(c))) { describeMethod = describe.skip; } else { describeMethod = describe; @@ -113,7 +133,15 @@ export function imageDemoTest(component: string, options: Options = {}) { if (typeof Demo === 'function') { Demo = ; } - imageTest(Demo); + imageTest(Demo, { + onlyViewport: + options.onlyViewport === true || + (Array.isArray(options.onlyViewport) && + options.onlyViewport.some((c) => file.endsWith(c))), + splitTheme: + options.splitTheme === true || + (Array.isArray(options.splitTheme) && options.splitTheme.some((c) => file.endsWith(c))), + }); }); }); } From 102c4654e19bdb1cb4786fd6c6c406853698eb78 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 14 Sep 2023 19:12:17 +0800 Subject: [PATCH 14/24] fix: select small height (#44859) --- components/select/demo/component-token.tsx | 93 ++++++++++++++-------- components/select/style/index.tsx | 2 + components/select/style/multiple.tsx | 10 +-- 3 files changed, 69 insertions(+), 36 deletions(-) diff --git a/components/select/demo/component-token.tsx b/components/select/demo/component-token.tsx index f3d398fac6..d7c159cd96 100644 --- a/components/select/demo/component-token.tsx +++ b/components/select/demo/component-token.tsx @@ -16,38 +16,69 @@ const handleChange = (value: string[]) => { }; const App: React.FC = () => ( - + - - - - + }} + > + + + + + + + + + + ); export default App; diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index e2ced8d892..4f21e0820c 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -110,6 +110,7 @@ export interface SelectToken extends FullToken<'Select'> { rootPrefixCls: string; inputPaddingHorizontalBase: number; multipleSelectItemHeight: number; + selectHeight: number; } // ============================= Selector ============================= @@ -434,6 +435,7 @@ export default genComponentStyleHook( rootPrefixCls, inputPaddingHorizontalBase: token.paddingSM - 1, multipleSelectItemHeight: token.multipleItemHeight, + selectHeight: token.controlHeight, }); return [genSelectStyle(selectToken)]; diff --git a/components/select/style/multiple.tsx b/components/select/style/multiple.tsx index 703cf5e54b..126e5573ed 100644 --- a/components/select/style/multiple.tsx +++ b/components/select/style/multiple.tsx @@ -6,11 +6,11 @@ import { mergeToken } from '../../theme/internal'; const FIXED_ITEM_MARGIN = 2; const getSelectItemStyle = ({ - controlHeightSM, - controlHeight, + multipleSelectItemHeight, + selectHeight, lineWidth: borderWidth, }: SelectToken): readonly [number, number] => { - const selectItemDist = (controlHeight - controlHeightSM) / 2 - borderWidth; + const selectItemDist = (selectHeight - multipleSelectItemHeight) / 2 - borderWidth; const selectItemMargin = Math.ceil(selectItemDist / 2); return [selectItemDist, selectItemMargin] as const; }; @@ -202,7 +202,7 @@ const genMultipleStyle = (token: SelectToken): CSSInterpolation => { const { componentCls } = token; const smallToken = mergeToken(token, { - controlHeight: token.controlHeightSM, + selectHeight: token.controlHeightSM, multipleSelectItemHeight: token.controlHeightXS, borderRadius: token.borderRadiusSM, borderRadiusSM: token.borderRadiusXS, @@ -210,7 +210,7 @@ const genMultipleStyle = (token: SelectToken): CSSInterpolation => { const largeToken = mergeToken(token, { fontSize: token.fontSizeLG, - controlHeight: token.controlHeightLG, + selectHeight: token.controlHeightLG, multipleSelectItemHeight: token.multipleItemHeightLG, borderRadius: token.borderRadiusLG, borderRadiusSM: token.borderRadius, From 553754b4d2d14d52e4e8590e3d14ef5074b510f3 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Fri, 15 Sep 2023 09:51:50 +0800 Subject: [PATCH 15/24] fix: rate transform in mac screen (#44868) --- components/rate/style/index.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx index 57e9793744..25a34ed5ec 100644 --- a/components/rate/style/index.tsx +++ b/components/rate/style/index.tsx @@ -63,10 +63,6 @@ const genRateStarStyle: GenerateStyle = (token) => { color: token.starBg, transition: `all ${token.motionDurationMid}`, userSelect: 'none', - - [token.iconCls]: { - verticalAlign: 'middle', - }, }, '&-first': { From 56fb6178a48fcf7f9223e53f74f0806d94e4b7b0 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 15 Sep 2023 12:23:57 +0800 Subject: [PATCH 16/24] demo: update demo (#44864) * demo: update demo * fix: fix snap * update demo --- components/date-picker/demo/cell-render.tsx | 68 +++++++++------------ components/date-picker/index.ts | 1 + components/time-picker/index.en-US.md | 1 - components/time-picker/index.zh-CN.md | 1 - 4 files changed, 30 insertions(+), 41 deletions(-) diff --git a/components/date-picker/demo/cell-render.tsx b/components/date-picker/demo/cell-render.tsx index c4610ee23f..f54a60b293 100644 --- a/components/date-picker/demo/cell-render.tsx +++ b/components/date-picker/demo/cell-render.tsx @@ -1,43 +1,33 @@ import React from 'react'; -import { DatePicker, Space } from 'antd'; +import { DatePicker, Space, theme } from 'antd'; +import type { Dayjs } from 'dayjs'; +import type { CellRenderInfo } from 'rc-picker/es/interface'; -const { RangePicker } = DatePicker; - -const App: React.FC = () => ( - - { - if (info.type !== 'date') return info.originNode; - if (typeof current === 'number') { - return
{current}
; - } - return ( -
- {current.date()} -
- ); - }} - /> - { - if (info.type !== 'date') return info.originNode; - if (typeof current === 'number') { - return
{current}
; - } - return ( -
- {current.date()} -
- ); - }} - /> -
-); +const App: React.FC = () => { + const { token } = theme.useToken(); + const style: React.CSSProperties = { + border: `1px solid ${token.colorPrimary}`, + borderRadius: '50%', + }; + const cellRender = React.useCallback((current: number | Dayjs, info: CellRenderInfo) => { + if (info.type !== 'date') { + return info.originNode; + } + if (typeof current === 'number') { + return
{current}
; + } + return ( +
+ {current.date()} +
+ ); + }, []); + return ( + + + + + ); +}; export default App; diff --git a/components/date-picker/index.ts b/components/date-picker/index.ts index 08ff863589..46466df2c8 100755 --- a/components/date-picker/index.ts +++ b/components/date-picker/index.ts @@ -1,5 +1,6 @@ import type { Dayjs } from 'dayjs'; import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs'; + import genPurePanel from '../_util/PurePanel'; import type { RangePickerProps as BaseRangePickerProps, diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md index fb711ded88..787691d522 100644 --- a/components/time-picker/index.en-US.md +++ b/components/time-picker/index.en-US.md @@ -56,7 +56,6 @@ dayjs.extend(customParseFormat) | changeOnBlur | Trigger `change` when blur. e.g. datetime picker no need click confirm button | boolean | false | 5.5.0 | | className | The className of picker | string | - | | | clearIcon | The custom clear icon | ReactNode | - | | -| clearText | The clear tooltip of icon | string | clear | | | defaultValue | To set default time | [dayjs](http://day.js.org/) | - | | | disabled | Determine whether the TimePicker is disabled | boolean | false | | | disabledTime | To specify the time that cannot be selected | [DisabledTime](#disabledtime) | - | 4.19.0 | diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index 1702aae787..a89a479538 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -56,7 +56,6 @@ dayjs.extend(customParseFormat) | changeOnBlur | 失去焦点时触发 `change` 事件,例如 datetime 下不再需要点击确认按钮 | boolean | false | 5.5.0 | | className | 选择器类名 | string | - | | | clearIcon | 自定义的清除图标 | ReactNode | - | | -| clearText | 清除按钮的提示文案 | string | clear | | | defaultValue | 默认时间 | [dayjs](http://day.js.org/) | - | | | disabled | 禁用全部操作 | boolean | false | | | disabledTime | 不可选择的时间 | [DisabledTime](#disabledtime) | - | 4.19.0 | From 90bb52190bdfbd61fec5bd94b73ff429eff66e2d Mon Sep 17 00:00:00 2001 From: daisy <47104575+linxianxi@users.noreply.github.com> Date: Fri, 15 Sep 2023 12:24:16 +0800 Subject: [PATCH 17/24] demo(Table): add sticky offsetHeader (#44876) * demo(Table): add sticky offsetHeader * test: update snapshot * test: update snapshot --- .../table/__tests__/__snapshots__/demo-extend.test.ts.snap | 2 +- components/table/__tests__/__snapshots__/demo.test.ts.snap | 2 +- components/table/demo/sticky.tsx | 3 ++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap index 0b3ec7713a..7f8e040fd0 100644 --- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -29271,7 +29271,7 @@ exports[`renders components/table/demo/sticky.tsx extend context correctly 1`] = >
{ )} - sticky + // antd site header height + sticky={{ offsetHeader: 64 }} /> ); }; From 622e4325bf17ace48f10dbc9c6cb537686b8dade Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Fri, 15 Sep 2023 13:37:48 +0800 Subject: [PATCH 18/24] docs: changelog 5.9.1 (#44880) * docs: changelog 5.9.1 * Update CHANGELOG.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: lijianan <574980606@qq.com> --- CHANGELOG.en-US.md | 19 +++++++++++++++++++ CHANGELOG.zh-CN.md | 21 ++++++++++++++++++++- package.json | 2 +- 3 files changed, 40 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 9db3d53787..8029a93d05 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -16,6 +16,25 @@ tag: vVERSION --- +## 5.9.1 + +`2023-09-15` + +- 🐞 Fix Select that `controlHeightSM` not work in small size. [#44859](https://github.com/ant-design/ant-design/pull/44859) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix Rate that star transaform not at center. [#44855](https://github.com/ant-design/ant-design/pull/44855) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix DatePicker that in `dateTime` mode switching input didn't trigger `onCalendarChange`. [#44845](https://github.com/ant-design/ant-design/pull/44845) [@Yuiai01](https://github.com/Yuiai01) +- 🐞 Fix Table `virtual` selection checkbox or radio not align in center. [#44786](https://github.com/ant-design/ant-design/pull/44786) +- 🐞 Fix Select carbin align top bug when enable `maxTagCount`. [#44757](https://github.com/ant-design/ant-design/pull/44757) +- 🐞 Fix Select alignment issue when label is Typography. [#44756](https://github.com/ant-design/ant-design/pull/44756) +- 💄 Fix Table with `virtual` display issue about columns less than table size and some border & hover style missing. [#44818](https://github.com/ant-design/ant-design/pull/44818) +- 💄 Fix wrong style of Select in Input `addon`. [#44825](https://github.com/ant-design/ant-design/pull/44825) [@MadCcc](https://github.com/MadCcc) +- 💄 Fix Tree that Checkbox should be aligned with first line. [#44827](https://github.com/ant-design/ant-design/pull/44827) [@MadCcc](https://github.com/MadCcc) +- 💄 Fix Card that Card.Grid has wrong style with left bottom corner. [#44801](https://github.com/ant-design/ant-design/pull/44801) [@Jason-huang66](https://github.com/Jason-huang66) +- 💄 Fix Select/Cascader/TreeSelect style issue when customize their height. [#44753](https://github.com/ant-design/ant-design/pull/44753) +- TypeScript + - 🤖 Optimize `ref` type of Radio.Button. [#44747](https://github.com/ant-design/ant-design/pull/44747) [@LexiosAlex](https://github.com/LexiosAlex) + - 🤖 Optimize `ref` type of Checkbox. [#44746](https://github.com/ant-design/ant-design/pull/44746) [@LexiosAlex](https://github.com/LexiosAlex) + ## 5.9.0 `2023-09-08` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index f5377da947..7a10def108 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -16,6 +16,25 @@ tag: vVERSION --- +## 5.9.1 + +`2023-09-15` + +- 🐞 修复小尺寸 Select 组件 `controlHeightSM` token 配置无效的问题。[#44859](https://github.com/ant-design/ant-design/pull/44859) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Rate 组件星星变换中心不在正中心的问题。[#44855](https://github.com/ant-design/ant-design/pull/44855) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 DatePicker 组件 `dateTime` 模式切换输入框不会触发 `onCalendarChange` 的问题。[#44845](https://github.com/ant-design/ant-design/pull/44845) [@Yuiai01](https://github.com/Yuiai01) +- 🐞 修复 Table `virtual` 配置下,选择框没有居中对齐的问题。[#44786](https://github.com/ant-design/ant-design/pull/44786) +- 🐞 修复 Select 开启 `maxTagCount` 时搜索光标偏上的问题。[#44757](https://github.com/ant-design/ant-design/pull/44757) +- 🐞 修复 Select 的 label 为 Typography 组件时的选中文本对齐问题。[#44756](https://github.com/ant-design/ant-design/pull/44756) +- 💄 修复 Table `virtual` 开启虚拟滚动时,当 `columns` 小于表格宽度会显示异常的问题以及部分边框、悬浮样式丢失的问题。[#44818](https://github.com/ant-design/ant-design/pull/44818) +- 💄 修复 Select 组件在 Input `addon` 中使用时的样式错误。[#44825](https://github.com/ant-design/ant-design/pull/44825) [@MadCcc](https://github.com/MadCcc) +- 💄 修复 Tree 组件样式,使 Checkbox 与文字第一行对齐。[#44827](https://github.com/ant-design/ant-design/pull/44827) [@MadCcc](https://github.com/MadCcc) +- 💄 修复 Card 组件 Card.Grid 边缘样式问题。[#44801](https://github.com/ant-design/ant-design/pull/44801) [@Jason-huang66](https://github.com/Jason-huang66) +- 💄 修复 Select/Cascader/TreeSelect 自定义高度时的样式问题。[#44753](https://github.com/ant-design/ant-design/pull/44753) +- TypeScript + - 🤖 优化 Radio.Button 的 `ref` 类型。[#44747](https://github.com/ant-design/ant-design/pull/44747) [@LexiosAlex](https://github.com/LexiosAlex) + - 🤖 优化 Checkbox 的 `ref` 类型。[#44746](https://github.com/ant-design/ant-design/pull/44746) [@LexiosAlex](https://github.com/LexiosAlex) + ## 5.9.0 `2023-09-08` @@ -49,7 +68,7 @@ tag: vVERSION - 💄 修复 Select 配置的 `getPopupContainer` 容器有 `transform: scale` 样式时,弹出框宽度与输入框不一致的情况。[#44378](https://github.com/ant-design/ant-design/pull/44378) - 🐞 修复 Form.Item 配置 `noStyle` 时,被绑定的元素无法消费 `useStatus` 的问题。[#44576](https://github.com/ant-design/ant-design/pull/44576) - 🐞 修复 Tag 被 Popover/Popconfirm 包裹时,Hover 会导致 `font-size` 错误的问题。[#44663](https://github.com/ant-design/ant-design/pull/44663) -- 🐞 修复 Input.Search 组合中,搜索按钮会额外阴影的问题。[#44660](https://github.com/ant-design/ant-design/pull/44660) [@daledelv](https://github.com/daledelv) +- 🐞 修复 Input.Search 组合中,搜索按钮存在额外阴影的问题。[#44660](https://github.com/ant-design/ant-design/pull/44660) [@daledelv](https://github.com/daledelv) - 🐞 修复 Modal 的 hooks 调用通过按键 `esc` 关闭时无法正确触发 await 的问题。[#44646](https://github.com/ant-design/ant-design/pull/44646) - 🐞 修复 Space 的预设 `size` 不会跟随 Design Token 的问题,现在紧凑模式也会正确处理对应的间距数值。[#44598](https://github.com/ant-design/ant-design/pull/44598) [@li-jia-nan](https://github.com/li-jia-nan) - 🐞 修复 Upload 组件点击某文件的下载按钮后,鼠标移出该文件时仍展示下载按钮的问题。[#44594](https://github.com/ant-design/ant-design/pull/44594) [@zbw-zbw](https://github.com/zbw-zbw) diff --git a/package.json b/package.json index 9f4c15a6d8..835ed48377 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.9.0", + "version": "5.9.1", "packageManager": "^npm@9.0.0", "description": "An enterprise-class UI design language and React components implementation", "title": "Ant Design", From 64b649eaeedc0077e004ecb4080a98b74c1394f1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 15 Sep 2023 13:48:23 +0800 Subject: [PATCH 19/24] docs: fix Upload mocky api in demo and test (#44883) --- components/form/__tests__/index.test.tsx | 2 +- components/upload/__tests__/uploadlist.test.tsx | 2 +- components/upload/demo/avatar.tsx | 4 ++-- components/upload/demo/basic.tsx | 2 +- components/upload/demo/component-token.tsx | 2 +- components/upload/demo/crop-image.tsx | 2 +- components/upload/demo/customize-progress-bar.tsx | 2 +- components/upload/demo/defaultFileList.tsx | 2 +- components/upload/demo/directory.tsx | 2 +- components/upload/demo/drag-sorting.tsx | 2 +- components/upload/demo/drag.tsx | 2 +- components/upload/demo/file-type.tsx | 2 +- components/upload/demo/fileList.tsx | 2 +- components/upload/demo/max-count.tsx | 4 ++-- components/upload/demo/picture-card.tsx | 2 +- components/upload/demo/picture-circle.tsx | 2 +- components/upload/demo/picture-style.tsx | 4 ++-- components/upload/demo/transform-file.tsx | 2 +- components/upload/demo/upload-custom-action-icon.tsx | 2 +- components/upload/demo/upload-manually.tsx | 2 +- 20 files changed, 23 insertions(+), 23 deletions(-) diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx index 8acab71847..ecace00817 100644 --- a/components/form/__tests__/index.test.tsx +++ b/components/form/__tests__/index.test.tsx @@ -1662,7 +1662,7 @@ describe('Form', () => { it('form child components should be given priority to own disabled props when it in a disabled form', () => { const props = { name: 'file', - action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', + action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188', headers: { authorization: 'authorization-text', }, diff --git a/components/upload/__tests__/uploadlist.test.tsx b/components/upload/__tests__/uploadlist.test.tsx index 984472e35d..95c3f219b7 100644 --- a/components/upload/__tests__/uploadlist.test.tsx +++ b/components/upload/__tests__/uploadlist.test.tsx @@ -1254,7 +1254,7 @@ describe('Upload List', () => { { setTestFileList([...info.fileList]); diff --git a/components/upload/demo/avatar.tsx b/components/upload/demo/avatar.tsx index 2036a9727f..4f6b35861b 100644 --- a/components/upload/demo/avatar.tsx +++ b/components/upload/demo/avatar.tsx @@ -54,7 +54,7 @@ const App: React.FC = () => { listType="picture-card" className="avatar-uploader" showUploadList={false} - action="https://www.mocky.io/v2/5cc8019d300000980a055e76" + action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188" beforeUpload={beforeUpload} onChange={handleChange} > @@ -65,7 +65,7 @@ const App: React.FC = () => { listType="picture-circle" className="avatar-uploader" showUploadList={false} - action="https://www.mocky.io/v2/5cc8019d300000980a055e76" + action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188" beforeUpload={beforeUpload} onChange={handleChange} > diff --git a/components/upload/demo/basic.tsx b/components/upload/demo/basic.tsx index 3ca68acde3..3908dad9f8 100644 --- a/components/upload/demo/basic.tsx +++ b/components/upload/demo/basic.tsx @@ -5,7 +5,7 @@ import { Button, message, Upload } from 'antd'; const props: UploadProps = { name: 'file', - action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', + action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188', headers: { authorization: 'authorization-text', }, diff --git a/components/upload/demo/component-token.tsx b/components/upload/demo/component-token.tsx index 58b56e0665..0c8773a7db 100644 --- a/components/upload/demo/component-token.tsx +++ b/components/upload/demo/component-token.tsx @@ -4,7 +4,7 @@ import type { UploadProps } from 'antd'; import { Button, ConfigProvider, Upload } from 'antd'; const props: UploadProps = { - action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', + action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188', onChange({ file, fileList }) { if (file.status !== 'uploading') { console.log(file, fileList); diff --git a/components/upload/demo/crop-image.tsx b/components/upload/demo/crop-image.tsx index 4be59ccf5f..addd98792c 100644 --- a/components/upload/demo/crop-image.tsx +++ b/components/upload/demo/crop-image.tsx @@ -35,7 +35,7 @@ const App: React.FC = () => { return ( ( - + ); diff --git a/components/upload/demo/drag-sorting.tsx b/components/upload/demo/drag-sorting.tsx index bed625e4c3..22335cf74e 100644 --- a/components/upload/demo/drag-sorting.tsx +++ b/components/upload/demo/drag-sorting.tsx @@ -98,7 +98,7 @@ const App: React.FC = () => { i.uid)} strategy={verticalListSortingStrategy}> ( diff --git a/components/upload/demo/drag.tsx b/components/upload/demo/drag.tsx index f4d5dfda44..7c55a7c54f 100644 --- a/components/upload/demo/drag.tsx +++ b/components/upload/demo/drag.tsx @@ -8,7 +8,7 @@ const { Dragger } = Upload; const props: UploadProps = { name: 'file', multiple: true, - action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', + action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188', onChange(info) { const { status } = info.file; if (status !== 'uploading') { diff --git a/components/upload/demo/file-type.tsx b/components/upload/demo/file-type.tsx index 85a7f323af..1a58f1f139 100644 --- a/components/upload/demo/file-type.tsx +++ b/components/upload/demo/file-type.tsx @@ -102,7 +102,7 @@ const App: React.FC = () => { return ( <> { }; const props = { - action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', + action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188', onChange: handleChange, multiple: true, }; diff --git a/components/upload/demo/max-count.tsx b/components/upload/demo/max-count.tsx index 824253ea8f..ae1f4b97fa 100644 --- a/components/upload/demo/max-count.tsx +++ b/components/upload/demo/max-count.tsx @@ -5,14 +5,14 @@ import { Button, Space, Upload } from 'antd'; const App: React.FC = () => ( { return ( <> { return ( <> ( <> @@ -36,7 +36,7 @@ const App: React.FC = () => (

{ diff --git a/components/upload/demo/upload-custom-action-icon.tsx b/components/upload/demo/upload-custom-action-icon.tsx index 76e09792c4..14aa3576b7 100644 --- a/components/upload/demo/upload-custom-action-icon.tsx +++ b/components/upload/demo/upload-custom-action-icon.tsx @@ -4,7 +4,7 @@ import type { UploadProps } from 'antd'; import { Button, Upload } from 'antd'; const props: UploadProps = { - action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', + action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188', onChange({ file, fileList }) { if (file.status !== 'uploading') { console.log(file, fileList); diff --git a/components/upload/demo/upload-manually.tsx b/components/upload/demo/upload-manually.tsx index c11114fdb3..8169ea2451 100644 --- a/components/upload/demo/upload-manually.tsx +++ b/components/upload/demo/upload-manually.tsx @@ -14,7 +14,7 @@ const App: React.FC = () => { }); setUploading(true); // You can use any AJAX library you like - fetch('https://www.mocky.io/v2/5cc8019d300000980a055e76', { + fetch('https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188', { method: 'POST', body: formData, }) From 05e15c05d33c7ee20d60b15c426a13eb52147ece Mon Sep 17 00:00:00 2001 From: dingkang Date: Fri, 15 Sep 2023 14:21:50 +0800 Subject: [PATCH 20/24] chore: update pupperteer and sharp npmmirror (#44727) * chore: slove pupperteer download fail problem * chore: set npmmirror for windows --------- Co-authored-by: MadCcc <1075746765@qq.com> --- .npmrc | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/.npmrc b/.npmrc index 9cf9495031..020e8ceaa7 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1,5 @@ -package-lock=false \ No newline at end of file +package-lock=false + +PUPPETEER_DOWNLOAD_BASE_URL="https://cdn.npmmirror.com/binaries/chrome-for-testing" + +npm_config_sharp_libvips_binary_host="https://cdn.npmmirror.com/binaries/sharp-libvips" From fa61f81144398262d05e24a7904e021a8e214a6e Mon Sep 17 00:00:00 2001 From: cwg <1227646458@qq.com> Date: Fri, 15 Sep 2023 16:42:01 +0800 Subject: [PATCH 21/24] site: announce yuque welfare program (#44884) * site: announce yuque welfare program * chore: lint * feat: optimize code --------- Co-authored-by: MadCcc <1075746765@qq.com> --- .dumi/theme/slots/Header/index.tsx | 58 ++++++++++++++++++++++++++++-- 1 file changed, 56 insertions(+), 2 deletions(-) diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 4e68fe78ae..fd922a5cf4 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import { useLocation, useSiteData } from 'dumi'; import DumiSearchBar from 'dumi/theme-default/slots/SearchBar'; import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; -import { Col, Popover, Row, Select } from 'antd'; +import { Alert, Col, Popover, Row, Select } from 'antd'; import useLocale from '../../../hooks/useLocale'; import DirectionIcon from '../../common/DirectionIcon'; import * as utils from '../../utils'; @@ -20,6 +20,15 @@ import type { SharedProps } from './interface'; const RESPONSIVE_XS = 1120; const RESPONSIVE_SM = 1200; +const locales = { + cn: { + message: + '语雀公益计划:大学生认证教育邮箱,即可免费获得语雀会员。语雀,支付宝匠心打造的在线文档平台。', + shortMessage: '支付宝语雀 · 大学生公益计划火热进行中!', + more: '了解更多', + }, +}; + const useStyle = createStyles(({ token, css }) => { const searchIconColor = '#ced4d9'; @@ -106,6 +115,23 @@ const useStyle = createStyles(({ token, css }) => { padding: 0, }, }, + banner: css` + position: absolute; + bottom: 0; + left: 50%; + width: 100%; + background: #daf5eb; + text-align: center; + word-break: keep-all; + transform: translate(-50%, 100%); + `, + link: css` + margin-left: 10px; + + @media only screen and (max-width: ${token.mobileMaxWidth}px) { + margin-left: 0; + } + `, }; }); @@ -117,7 +143,7 @@ interface HeaderState { // ================================= Header ================================= const Header: React.FC = () => { - const [, lang] = useLocale(); + const [locale, lang] = useLocale(locales); const { pkg } = useSiteData(); @@ -322,6 +348,34 @@ const Header: React.FC = () => { )} + {isZhCN && ( + + {isMobile ? locale.shortMessage : locale.message} + { + window.gtag?.('event', '点击', { + event_category: 'top_banner', + event_label: 'https://www.yuque.com/yuque/blog/welfare-edu?source=antd', + }); + }} + > + {locale.more} + + + } + type="info" + banner + closable + showIcon={false} + /> + )}
From 4d3814478c6f440dae515b7bcaed6aa246916576 Mon Sep 17 00:00:00 2001 From: cwg <1227646458@qq.com> Date: Fri, 15 Sep 2023 18:48:34 +0800 Subject: [PATCH 22/24] site: optimize banner display (#44894) --- .dumi/theme/common/styles/Responsive.tsx | 2 +- .dumi/theme/slots/Header/index.tsx | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/.dumi/theme/common/styles/Responsive.tsx b/.dumi/theme/common/styles/Responsive.tsx index 2228b6550c..cf31359be3 100644 --- a/.dumi/theme/common/styles/Responsive.tsx +++ b/.dumi/theme/common/styles/Responsive.tsx @@ -10,7 +10,7 @@ export default () => { styles={css` .nav-phone-icon { position: absolute; - top: 25px; + bottom: 17px; right: 30px; z-index: 1; display: none; diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index fd922a5cf4..3b49f4036d 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -116,14 +116,10 @@ const useStyle = createStyles(({ token, css }) => { }, }, banner: css` - position: absolute; - bottom: 0; - left: 50%; width: 100%; background: #daf5eb; text-align: center; word-break: keep-all; - transform: translate(-50%, 100%); `, link: css` margin-left: 10px; From 2627caebb45c7e0877078e1408fdae5388ea1260 Mon Sep 17 00:00:00 2001 From: cwg <1227646458@qq.com> Date: Fri, 15 Sep 2023 22:03:53 +0800 Subject: [PATCH 23/24] fix: site style conflict (#44899) * fix: site style conflict * chore: lint * feat: optimize code --- .dumi/theme/SiteThemeProvider.tsx | 1 + .dumi/theme/builtins/ComponentOverview/index.tsx | 7 +++++-- .dumi/theme/builtins/IconSearch/IconSearch.tsx | 9 +++++++-- .dumi/theme/layouts/GlobalLayout.tsx | 15 +++++++++------ .dumi/theme/slots/Header/index.tsx | 14 ++++++++++++++ .dumi/theme/slots/SiteContext.ts | 2 ++ 6 files changed, 38 insertions(+), 10 deletions(-) diff --git a/.dumi/theme/SiteThemeProvider.tsx b/.dumi/theme/SiteThemeProvider.tsx index 609f44f4a1..62bfb7dd09 100644 --- a/.dumi/theme/SiteThemeProvider.tsx +++ b/.dumi/theme/SiteThemeProvider.tsx @@ -41,6 +41,7 @@ const SiteThemeProvider: FC = ({ children, theme, ...rest }) theme={theme} customToken={{ headerHeight: 64, + bannerHeight: 38, menuItemBorder: 2, mobileMaxWidth: 767.99, siteMarkdownCodeBg: token.colorFillTertiary, diff --git a/.dumi/theme/builtins/ComponentOverview/index.tsx b/.dumi/theme/builtins/ComponentOverview/index.tsx index 6582b05f5b..58c9ea50d9 100644 --- a/.dumi/theme/builtins/ComponentOverview/index.tsx +++ b/.dumi/theme/builtins/ComponentOverview/index.tsx @@ -80,7 +80,7 @@ const { Title } = Typography; const Overview: React.FC = () => { const { styles } = useStyle(); - const { theme } = useContext(SiteContext); + const { theme, bannerVisible } = useContext(SiteContext); const data = useSidebarData(); const [searchBarAffixed, setSearchBarAffixed] = useState(false); @@ -143,7 +143,10 @@ const Overview: React.FC = () => { return (
- +
{ theme: ThemeType.Outlined, }); const token = useTheme(); + const { bannerVisible } = useContext(SiteContext); const newIconNames: string[] = []; @@ -124,7 +126,10 @@ const IconSearch: React.FC = () => { return (
- +
{ const { pathname } = useLocation(); const [searchParams, setSearchParams] = useSearchParams(); const [, , setPrefersColor] = usePrefersColor(); - const [{ theme = [], direction, isMobile }, setSiteState] = useLayoutState({ - isMobile: false, - direction: 'ltr', - theme: [], - }); + const [{ theme = [], direction, isMobile, bannerVisible = true }, setSiteState] = + useLayoutState({ + isMobile: false, + direction: 'ltr', + theme: [], + bannerVisible: true, + }); const updateSiteConfig = useCallback( (props: SiteState) => { @@ -121,8 +123,9 @@ const GlobalLayout: React.FC = () => { updateSiteConfig, theme: theme!, isMobile: isMobile!, + bannerVisible, }), - [isMobile, direction, updateSiteConfig, theme], + [isMobile, direction, updateSiteConfig, theme, bannerVisible], ); const [styleCache] = React.useState(() => createCache()); diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 3b49f4036d..7bcd7faab7 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -128,6 +128,11 @@ const useStyle = createStyles(({ token, css }) => { margin-left: 0; } `, + icon: css` + margin-right: 10px; + width: 22px; + height: 22px; + `, }; }); @@ -171,6 +176,9 @@ const Header: React.FC = () => { const onDirectionChange = () => { updateSiteConfig({ direction: direction !== 'rtl' ? 'rtl' : 'ltr' }); }; + const onBannerClose = () => { + updateSiteConfig({ bannerVisible: false }); + }; useEffect(() => { handleHideMenu(); @@ -349,6 +357,11 @@ const Header: React.FC = () => { className={styles.banner} message={ <> + yuque {isMobile ? locale.shortMessage : locale.message} { banner closable showIcon={false} + onClose={onBannerClose} /> )} diff --git a/.dumi/theme/slots/SiteContext.ts b/.dumi/theme/slots/SiteContext.ts index 179aa6dc33..3878940d84 100644 --- a/.dumi/theme/slots/SiteContext.ts +++ b/.dumi/theme/slots/SiteContext.ts @@ -4,6 +4,7 @@ import type { ThemeName } from '../common/ThemeSwitch'; export interface SiteContextProps { isMobile: boolean; + bannerVisible: boolean; direction: DirectionType; theme: ThemeName[]; updateSiteConfig: (props: Partial) => void; @@ -11,6 +12,7 @@ export interface SiteContextProps { const SiteContext = React.createContext({ isMobile: false, + bannerVisible: true, direction: 'ltr', theme: ['light'], updateSiteConfig: () => {}, From 7eb93ad6574a3ed939d447bc031a5b7495855672 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=8B=87?= Date: Sat, 16 Sep 2023 02:16:53 +0800 Subject: [PATCH 24/24] type: to put the ts type into useMemo generics (#44904) --- components/upload/UploadList/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx index de71064a76..ccc4add1b9 100644 --- a/components/upload/UploadList/index.tsx +++ b/components/upload/UploadList/index.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import FileTwoTone from '@ant-design/icons/FileTwoTone'; import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; import PaperClipOutlined from '@ant-design/icons/PaperClipOutlined'; @@ -5,7 +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 * as React from 'react'; + import useForceUpdate from '../../_util/hooks/useForceUpdate'; import initCollapseMotion from '../../_util/motion'; import { cloneElement, isValidElement } from '../../_util/reactNode'; @@ -181,7 +182,7 @@ const InternalUploadList: React.ForwardRefRenderFunction = React.useMemo(() => { + const listItemMotion = React.useMemo>(() => { const motion = { ...initCollapseMotion(rootPrefixCls), };