From ecf7b6169187fc219be04448b439793eef8e9589 Mon Sep 17 00:00:00 2001 From: foryuki Date: Sun, 27 Nov 2022 19:59:49 +0800 Subject: [PATCH 1/8] feat: Anchor component changed to data-driven --- components/anchor/Anchor.tsx | 26 ++++++++++++++++++- components/anchor/AnchorLink.tsx | 7 ++++-- components/anchor/demo/basic.tsx | 43 ++++++++++++++++++++++++-------- 3 files changed, 63 insertions(+), 13 deletions(-) diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index 9c377a332414..b7e193441bc4 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -6,10 +6,18 @@ import type { ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider'; import getScroll from '../_util/getScroll'; import scrollTo from '../_util/scrollTo'; +import warning from '../_util/warning'; import AnchorContext from './context'; +import type { AnchorLinkBaseProps } from './AnchorLink'; +import AnchorLink from './AnchorLink'; import useStyle from './style'; +export interface AnchorLinkItemProps extends AnchorLinkBaseProps { + key: React.Key; + children?: AnchorLinkItemProps[]; +} + export type AnchorContainer = HTMLElement | Window; function getDefaultContainer() { @@ -61,6 +69,7 @@ export interface AnchorProps { targetOffset?: number; /** Listening event when scrolling change active link */ onChange?: (currentActiveLink: string) => void; + items: AnchorLinkItemProps[]; } interface InternalAnchorProps extends AnchorProps { @@ -100,6 +109,7 @@ const AnchorContent: React.FC = (props) => { affix = true, showInkInFixed = false, children, + items, bounds, targetOffset, onClick, @@ -108,6 +118,11 @@ const AnchorContent: React.FC = (props) => { getCurrentAnchor, } = props; + // =================== Warning ===================== + if (process.env.NODE_ENV !== 'production') { + warning(!children, 'Anchor', '`Anchor children` is deprecated. Please use `items` instead.'); + } + const [links, setLinks] = React.useState([]); const [activeLink, setActiveLink] = React.useState(null); const activeLinkRef = React.useRef(activeLink); @@ -257,13 +272,22 @@ const AnchorContent: React.FC = (props) => { ...style, }; + const createNestedLink = (options?: AnchorLinkItemProps[]) => + Array.isArray(options) + ? options.map((item) => ( + + {createNestedLink(item.children)} + + )) + : null; + const anchorContent = (
- {children} + {'items' in props ? createNestedLink(items) : children}
); diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 6d2c87fa2c08..5e7c4aa611f8 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -5,15 +5,18 @@ import { ConfigConsumer } from '../config-provider'; import type { AntAnchor } from './Anchor'; import AnchorContext from './context'; -export interface AnchorLinkProps { +export interface AnchorLinkBaseProps { prefixCls?: string; href: string; target?: string; title: React.ReactNode; - children?: React.ReactNode; className?: string; } +export interface AnchorLinkProps extends AnchorLinkBaseProps { + children?: React.ReactNode; +} + const AnchorLink: React.FC = (props) => { const { href = '#', title, prefixCls: customizePrefixCls, children, className, target } = props; diff --git a/components/anchor/demo/basic.tsx b/components/anchor/demo/basic.tsx index 2280a74ec90f..ad3b2fb7c02b 100644 --- a/components/anchor/demo/basic.tsx +++ b/components/anchor/demo/basic.tsx @@ -1,17 +1,40 @@ import React from 'react'; import { Anchor } from 'antd'; -const { Link } = Anchor; - const App: React.FC = () => ( - - - - - - - - + ); export default App; From 87d552198c1e4053d9848454054eb295a99b2ae7 Mon Sep 17 00:00:00 2001 From: foryuki Date: Mon, 28 Nov 2022 17:47:16 +0800 Subject: [PATCH 2/8] test: add test cases for data driven items --- components/anchor/__tests__/Anchor.test.tsx | 60 ++++++++++++++ .../__snapshots__/Anchor.test.tsx.snap | 81 +++++++++++++++++++ 2 files changed, 141 insertions(+) create mode 100644 components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap diff --git a/components/anchor/__tests__/Anchor.test.tsx b/components/anchor/__tests__/Anchor.test.tsx index aa47e56c3c9a..c4468742d522 100644 --- a/components/anchor/__tests__/Anchor.test.tsx +++ b/components/anchor/__tests__/Anchor.test.tsx @@ -432,4 +432,64 @@ describe('Anchor Render', () => { }).not.toThrow(); }); }); + + it('renders items correctly', () => { + const { container, asFragment } = render( + , + ); + expect(container.querySelectorAll('.ant-anchor .ant-anchor-link').length).toBe(5); + const linkTitles = Array.from(container.querySelector('.ant-anchor')?.childNodes!) + .slice(1) + .map((n) => (n as HTMLElement).querySelector('.ant-anchor-link-title')); + expect((linkTitles[0] as HTMLAnchorElement).href).toContain('#components-anchor-demo-basic'); + expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#components-anchor-demo-static'); + expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#api'); + expect(asFragment().firstChild).toMatchSnapshot(); + expect( + ( + container.querySelector( + '.ant-anchor .ant-anchor-link .ant-anchor-link .ant-anchor-link-title', + ) as HTMLAnchorElement + )?.href, + ).toContain('#anchor-props'); + expect( + ( + container.querySelector( + '.ant-anchor .ant-anchor-link .ant-anchor-link .ant-anchor-link .ant-anchor-link-title', + ) as HTMLAnchorElement + )?.href, + ).toContain('#link-props'); + }); }); diff --git a/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap b/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap new file mode 100644 index 000000000000..9fddec286671 --- /dev/null +++ b/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap @@ -0,0 +1,81 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Anchor Render renders items correctly 1`] = ` + +`; From 738deaef0d457523a0fc2b0ec5da93f21a50eefe Mon Sep 17 00:00:00 2001 From: foryuki Date: Mon, 28 Nov 2022 19:35:53 +0800 Subject: [PATCH 3/8] fix: type --- components/anchor/Anchor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index b7e193441bc4..8280cc206b66 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -69,7 +69,7 @@ export interface AnchorProps { targetOffset?: number; /** Listening event when scrolling change active link */ onChange?: (currentActiveLink: string) => void; - items: AnchorLinkItemProps[]; + items?: AnchorLinkItemProps[]; } interface InternalAnchorProps extends AnchorProps { From 20feaf39154a5e2d240f11a0e758d4ab1330317e Mon Sep 17 00:00:00 2001 From: foryuki Date: Mon, 28 Nov 2022 21:10:44 +0800 Subject: [PATCH 4/8] chore: mark deprecated for anchor children prop --- components/anchor/Anchor.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index 8280cc206b66..e555e5445f2f 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -53,6 +53,9 @@ export interface AnchorProps { prefixCls?: string; className?: string; style?: React.CSSProperties; + /** + * @deprecated Please use `items` instead. + */ children?: React.ReactNode; offsetTop?: number; bounds?: number; From f925e1cfc530645c3390dd6fd7d0626def6d3a18 Mon Sep 17 00:00:00 2001 From: foryuki Date: Mon, 28 Nov 2022 21:42:37 +0800 Subject: [PATCH 5/8] docs: add items description --- components/anchor/index.en-US.md | 1 + components/anchor/index.zh-CN.md | 1 + 2 files changed, 2 insertions(+) diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index d018320775a0..f4896810b33d 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -44,6 +44,7 @@ For displaying anchor hyperlinks on page and jumping between them. | targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | - | | | onChange | Listening for anchor link change | (currentActiveLink: string) => void | | | | onClick | Set the handler to handle `click` event | function(e: Event, link: Object) | - | | +| items | Data configuration option content, support nesting through children | { href, title, target, children }\[] | - | | ### Link Props diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index b6e9bbf083cd..8074a561f4bc 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -45,6 +45,7 @@ group: | targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | - | | | onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | | | onClick | `click` 事件的 handler | function(e: Event, link: Object) | - | | +| items | 数据化配置选项内容，支持通过 children 嵌套 | { href, title, target, children }\[] | - | | ### Link Props From 48799196c9be37c46ec7ce33f3c96a60013f8f08 Mon Sep 17 00:00:00 2001 From: foryuki Date: Tue, 29 Nov 2022 14:53:50 +0800 Subject: [PATCH 6/8] test: update snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 24 +++++++++---------- .../__tests__/__snapshots__/demo.test.ts.snap | 24 +++++++++---------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap index 582b236f7746..a615b7372ff9 100644 --- a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -25,9 +25,9 @@ exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`] - Basic demo + item Basic demo
Anchor Props -
-
- - Link Props - + + Link Props + +
diff --git a/components/anchor/__tests__/__snapshots__/demo.test.ts.snap b/components/anchor/__tests__/__snapshots__/demo.test.ts.snap index 2b3a5ebb0f74..d8a5368f09de 100644 --- a/components/anchor/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/anchor/__tests__/__snapshots__/demo.test.ts.snap @@ -25,9 +25,9 @@ exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = ` - Basic demo + item Basic demo
Anchor Props -
-
- - Link Props - + + Link Props + +
From 28f07f2bcb3a35731a649ea4793215af7320fff7 Mon Sep 17 00:00:00 2001 From: foryuki Date: Tue, 29 Nov 2022 22:13:43 +0800 Subject: [PATCH 7/8] docs: demos changed to data-driven --- .../__snapshots__/demo-extend.test.ts.snap | 24 +++++------ .../__tests__/__snapshots__/demo.test.ts.snap | 24 +++++------ components/anchor/demo/basic.tsx | 14 +++--- components/anchor/demo/customizeHighlight.tsx | 43 ++++++++++++++----- components/anchor/demo/onChange.tsx | 43 ++++++++++++++----- components/anchor/demo/onClick.tsx | 43 ++++++++++++++----- components/anchor/demo/static.tsx | 42 +++++++++++++----- components/anchor/demo/targetOffset.tsx | 42 +++++++++++++----- 8 files changed, 193 insertions(+), 82 deletions(-) diff --git a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap index a615b7372ff9..582b236f7746 100644 --- a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -25,9 +25,9 @@ exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`] - item Basic demo + Basic demo
Anchor Props -
+
+ - - Link Props - -
+ Link Props +
diff --git a/components/anchor/__tests__/__snapshots__/demo.test.ts.snap b/components/anchor/__tests__/__snapshots__/demo.test.ts.snap index d8a5368f09de..2b3a5ebb0f74 100644 --- a/components/anchor/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/anchor/__tests__/__snapshots__/demo.test.ts.snap @@ -25,9 +25,9 @@ exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = ` - item Basic demo + Basic demo
Anchor Props -
+
+ - - Link Props - -
+ Link Props +
diff --git a/components/anchor/demo/basic.tsx b/components/anchor/demo/basic.tsx index ad3b2fb7c02b..2304490e9352 100644 --- a/components/anchor/demo/basic.tsx +++ b/components/anchor/demo/basic.tsx @@ -7,7 +7,7 @@ const App: React.FC = () => ( { key: '1', href: '#components-anchor-demo-basic', - title: 'item Basic demo', + title: 'Basic demo', }, { key: '2', @@ -23,13 +23,11 @@ const App: React.FC = () => ( key: '4', href: '#anchor-props', title: 'Anchor Props', - children: [ - { - key: '5', - href: '#link-props', - title: 'Link Props', - }, - ], + }, + { + key: '5', + href: '#link-props', + title: 'Link Props', }, ], }, diff --git a/components/anchor/demo/customizeHighlight.tsx b/components/anchor/demo/customizeHighlight.tsx index e746c2518dba..fed1ebb93213 100644 --- a/components/anchor/demo/customizeHighlight.tsx +++ b/components/anchor/demo/customizeHighlight.tsx @@ -1,19 +1,42 @@ import React from 'react'; import { Anchor } from 'antd'; -const { Link } = Anchor; - const getCurrentAnchor = () => '#components-anchor-demo-static'; const App: React.FC = () => ( - - - - - - - - + ); export default App; diff --git a/components/anchor/demo/onChange.tsx b/components/anchor/demo/onChange.tsx index f87d1703bb5c..da2f7b587e6b 100644 --- a/components/anchor/demo/onChange.tsx +++ b/components/anchor/demo/onChange.tsx @@ -1,21 +1,44 @@ import React from 'react'; import { Anchor } from 'antd'; -const { Link } = Anchor; - const onChange = (link: string) => { console.log('Anchor:OnChange', link); }; const App: React.FC = () => ( - - - - - - - - + ); export default App; diff --git a/components/anchor/demo/onClick.tsx b/components/anchor/demo/onClick.tsx index ddf88d865fcb..4f9866572db8 100644 --- a/components/anchor/demo/onClick.tsx +++ b/components/anchor/demo/onClick.tsx @@ -1,8 +1,6 @@ import React from 'react'; import { Anchor } from 'antd'; -const { Link } = Anchor; - const handleClick = ( e: React.MouseEvent, link: { @@ -15,14 +13,39 @@ const handleClick = ( }; const App: React.FC = () => ( - - - - - - - - + ); export default App; diff --git a/components/anchor/demo/static.tsx b/components/anchor/demo/static.tsx index a5dabdc510cd..be2d34c05303 100644 --- a/components/anchor/demo/static.tsx +++ b/components/anchor/demo/static.tsx @@ -1,17 +1,39 @@ import React from 'react'; import { Anchor } from 'antd'; -const { Link } = Anchor; - const App: React.FC = () => ( - - - - - - - - + ); export default App; diff --git a/components/anchor/demo/targetOffset.tsx b/components/anchor/demo/targetOffset.tsx index aaf022726718..fd69e252d3e8 100644 --- a/components/anchor/demo/targetOffset.tsx +++ b/components/anchor/demo/targetOffset.tsx @@ -1,8 +1,6 @@ import React, { useEffect, useState } from 'react'; import { Anchor } from 'antd'; -const { Link } = Anchor; - const App: React.FC = () => { const [targetOffset, setTargetOffset] = useState(undefined); @@ -11,14 +9,38 @@ const App: React.FC = () => { }, []); return ( - - - - - - - - + ); }; From c9eb779190f1f2799a63ad1374f407994fa3af98 Mon Sep 17 00:00:00 2001 From: foryuki Date: Wed, 30 Nov 2022 10:22:27 +0800 Subject: [PATCH 8/8] docs: Keep the old jsx syntax demo for debugging --- .../__snapshots__/demo-extend.test.ts.snap | 80 +++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 80 +++++++++++++++++++ components/anchor/demo/legacy-anchor.md | 7 ++ components/anchor/demo/legacy-anchor.tsx | 17 ++++ components/anchor/index.en-US.md | 1 + components/anchor/index.zh-CN.md | 1 + 6 files changed, 186 insertions(+) create mode 100644 components/anchor/demo/legacy-anchor.md create mode 100644 components/anchor/demo/legacy-anchor.tsx diff --git a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap index 582b236f7746..fe72574f59fe 100644 --- a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -154,6 +154,86 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx extend context `; +exports[`renders ./components/anchor/demo/legacy-anchor.tsx extend context correctly 1`] = ` + +`; + exports[`renders ./components/anchor/demo/onChange.tsx extend context correctly 1`] = `
`; +exports[`renders ./components/anchor/demo/legacy-anchor.tsx correctly 1`] = ` + +`; + exports[`renders ./components/anchor/demo/onChange.tsx correctly 1`] = `
( + + + + + + + + +); + +export default App; diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index f4896810b33d..440c18335665 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -28,6 +28,7 @@ For displaying anchor hyperlinks on page and jumping between them. Customize the anchor highlight Set Anchor scroll offset Listening for anchor link change +Deprecated JSX demo ## API diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index 8074a561f4bc..9c1b47a99f22 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -29,6 +29,7 @@ group: 自定义锚点高亮 设置锚点滚动偏移量 监听锚点链接改变 +废弃的 JSX 示例 ## API