mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

feat: anchor ink ball style (#38616)

Browse Source 
* feat: anchor ink ball style

* chore: code clean

* chore: code clean

* chore: code clean

* chore: update snapshot

* chore: change cover
This commit is contained in:
MadCcc 2022-11-17 16:49:09 +08:00 committed by GitHub
parent 7ec5ee2a58
commit de555912c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 83 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.dumi/theme/slots/Content/index.tsx
View File

@ -35,16 +35,6 @@ const useStyle = () => {
${antCls}-anchor-link-title {
font-size: 12px;
}
${antCls}-anchor-ink-ball {
left: 0;
width: ${token.lineWidthBold}px;
height: ${token.fontSizeSM * token.lineHeightSM}px;
margin-top: ${token.marginXXS}px;
background-color: ${token.colorPrimary};
border: none;
transform: translateY(-50%);
}
}
`,
tocWrapper: css`

4
components/affix/index.en-US.md
View File

@ -5,8 +5,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
demo:
cols: 2
group:
title: Navigation
order: 3
title: Other
order:
---
Wrap Affix around another component to make it stick the viewport.

4
components/affix/index.zh-CN.md
View File

@ -6,8 +6,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
demo:
cols: 2
group:
title: 导航
order: 3
title: 其他
order: 7
---
将页面元素钉在可视范围。

19
components/anchor/Anchor.tsx
View File

@ -90,7 +90,7 @@ export interface AntAnchor {
) => void;
}
const AnchorContent: React.FC<InternalAnchorProps> = props => {
const AnchorContent: React.FC<InternalAnchorProps> = (props) => {
const {
rootClassName,
anchorPrefixCls: prefixCls,
@ -123,18 +123,18 @@ const AnchorContent: React.FC<InternalAnchorProps> = props => {
const dependencyListItem: React.DependencyList[number] = JSON.stringify(links);
const registerLink = React.useCallback<AntAnchor['registerLink']>(
link => {
(link) => {
if (!links.includes(link)) {
setLinks(prev => [...prev, link]);
setLinks((prev) => [...prev, link]);
}
},
[dependencyListItem],
);
const unregisterLink = React.useCallback<AntAnchor['unregisterLink']>(
link => {
(link) => {
if (links.includes(link)) {
setLinks(prev => prev.filter(i => i !== link));
setLinks((prev) => prev.filter((i) => i !== link));
}
},
[dependencyListItem],
@ -145,14 +145,15 @@ const AnchorContent: React.FC<InternalAnchorProps> = props => {
`.${prefixCls}-link-title-active`,
);
if (linkNode && spanLinkNode.current) {
spanLinkNode.current.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
spanLinkNode.current.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2}px`;
spanLinkNode.current.style.height = `${linkNode.clientHeight}px`;
}
};
const getInternalCurrentAnchor = (_links: string[], _offsetTop = 0, _bounds = 5): string => {
const linkSections: Section[] = [];
const container = getCurrentContainer();
_links.forEach(link => {
_links.forEach((link) => {
const sharpLinkMatch = sharpMatcherRegx.exec(link?.toString());
if (!sharpLinkMatch) {
return;
@ -204,7 +205,7 @@ const AnchorContent: React.FC<InternalAnchorProps> = props => {
}, [dependencyListItem, targetOffset, offsetTop]);
const handleScrollTo = React.useCallback<(link: string) => void>(
link => {
(link) => {
setCurrentActiveLink(link);
const container = getCurrentContainer();
const scrollTop = getScroll(container, true);
@ -310,7 +311,7 @@ const AnchorContent: React.FC<InternalAnchorProps> = props => {
);
};
const Anchor: React.FC<AnchorProps> = props => {
const Anchor: React.FC<AnchorProps> = (props) => {
const { prefixCls: customizePrefixCls } = props;
const { getPrefixCls } = React.useContext<ConfigConsumerProps>(ConfigContext);
const anchorPrefixCls = getPrefixCls('anchor', customizePrefixCls);

36
components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -46,7 +46,7 @@ exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`]
>
<a
class="ant-anchor-link-title"
href="#API"
href="#api"
title="API"
>
API
@ -56,7 +56,7 @@ exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`]
>
<a
class="ant-anchor-link-title"
href="#Anchor-Props"
href="#anchor-props"
title="Anchor Props"
>
Anchor Props
@ -67,7 +67,7 @@ exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`]
>
<a
class="ant-anchor-link-title"
href="#Link-Props"
href="#link-props"
title="Link Props"
>
Link Props
@ -122,7 +122,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx extend context
>
<a
class="ant-anchor-link-title"
href="#API"
href="#api"
title="API"
>
API
@ -132,7 +132,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx extend context
>
<a
class="ant-anchor-link-title"
href="#Anchor-Props"
href="#anchor-props"
title="Anchor Props"
>
Anchor Props
@ -143,7 +143,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx extend context
>
<a
class="ant-anchor-link-title"
href="#Link-Props"
href="#link-props"
title="Link Props"
>
Link Props
@ -196,7 +196,7 @@ exports[`renders ./components/anchor/demo/onChange.tsx extend context correctly
>
<a
class="ant-anchor-link-title"
href="#API"
href="#api"
title="API"
>
API
@ -206,7 +206,7 @@ exports[`renders ./components/anchor/demo/onChange.tsx extend context correctly
>
<a
class="ant-anchor-link-title"
href="#Anchor-Props"
href="#anchor-props"
title="Anchor Props"
>
Anchor Props
@ -217,7 +217,7 @@ exports[`renders ./components/anchor/demo/onChange.tsx extend context correctly
>
<a
class="ant-anchor-link-title"
href="#Link-Props"
href="#link-props"
title="Link Props"
>
Link Props
@ -270,7 +270,7 @@ exports[`renders ./components/anchor/demo/onClick.tsx extend context correctly 1
>
<a
class="ant-anchor-link-title"
href="#API"
href="#api"
title="API"
>
API
@ -280,7 +280,7 @@ exports[`renders ./components/anchor/demo/onClick.tsx extend context correctly 1
>
<a
class="ant-anchor-link-title"
href="#Anchor-Props"
href="#anchor-props"
title="Anchor Props"
>
Anchor Props
@ -291,7 +291,7 @@ exports[`renders ./components/anchor/demo/onClick.tsx extend context correctly 1
>
<a
class="ant-anchor-link-title"
href="#Link-Props"
href="#link-props"
title="Link Props"
>
Link Props
@ -344,7 +344,7 @@ exports[`renders ./components/anchor/demo/static.tsx extend context correctly 1`
>
<a
class="ant-anchor-link-title"
href="#API"
href="#api"
title="API"
>
API
@ -354,7 +354,7 @@ exports[`renders ./components/anchor/demo/static.tsx extend context correctly 1`
>
<a
class="ant-anchor-link-title"
href="#Anchor-Props"
href="#anchor-props"
title="Anchor Props"
>
Anchor Props
@ -365,7 +365,7 @@ exports[`renders ./components/anchor/demo/static.tsx extend context correctly 1`
>
<a
class="ant-anchor-link-title"
href="#Link-Props"
href="#link-props"
title="Link Props"
>
Link Props
@ -422,7 +422,7 @@ exports[`renders ./components/anchor/demo/targetOffset.tsx extend context correc
>
<a
class="ant-anchor-link-title"
href="#API"
href="#api"
title="API"
>
API
@ -432,7 +432,7 @@ exports[`renders ./components/anchor/demo/targetOffset.tsx extend context correc
>
<a
class="ant-anchor-link-title"
href="#Anchor-Props"
href="#anchor-props"
title="Anchor Props"
>
Anchor Props
@ -443,7 +443,7 @@ exports[`renders ./components/anchor/demo/targetOffset.tsx extend context correc
>
<a
class="ant-anchor-link-title"
href="#Link-Props"
href="#link-props"
title="Link Props"
>
Link Props

36
components/anchor/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -46,7 +46,7 @@ exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = `
>
<a
class="ant-anchor-link-title"
href="#API"
href="#api"
title="API"
>
API
@ -56,7 +56,7 @@ exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = `
>
<a
class="ant-anchor-link-title"
href="#Anchor-Props"
href="#anchor-props"
title="Anchor Props"
>
Anchor Props
@ -67,7 +67,7 @@ exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = `
>
<a
class="ant-anchor-link-title"
href="#Link-Props"
href="#link-props"
title="Link Props"
>
Link Props
@ -122,7 +122,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx correctly 1`] =
>
<a
class="ant-anchor-link-title"
href="#API"
href="#api"
title="API"
>
API
@ -132,7 +132,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx correctly 1`] =
>
<a
class="ant-anchor-link-title"
href="#Anchor-Props"
href="#anchor-props"
title="Anchor Props"
>
Anchor Props
@ -143,7 +143,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx correctly 1`] =
>
<a
class="ant-anchor-link-title"
href="#Link-Props"
href="#link-props"
title="Link Props"
>
Link Props
@ -196,7 +196,7 @@ exports[`renders ./components/anchor/demo/onChange.tsx correctly 1`] = `
>
<a
class="ant-anchor-link-title"
href="#API"
href="#api"
title="API"
>
API
@ -206,7 +206,7 @@ exports[`renders ./components/anchor/demo/onChange.tsx correctly 1`] = `
>
<a
class="ant-anchor-link-title"
href="#Anchor-Props"
href="#anchor-props"
title="Anchor Props"
>
Anchor Props
@ -217,7 +217,7 @@ exports[`renders ./components/anchor/demo/onChange.tsx correctly 1`] = `
>
<a
class="ant-anchor-link-title"
href="#Link-Props"
href="#link-props"
title="Link Props"
>
Link Props
@ -270,7 +270,7 @@ exports[`renders ./components/anchor/demo/onClick.tsx correctly 1`] = `
>
<a
class="ant-anchor-link-title"
href="#API"
href="#api"
title="API"
>
API
@ -280,7 +280,7 @@ exports[`renders ./components/anchor/demo/onClick.tsx correctly 1`] = `
>
<a
class="ant-anchor-link-title"
href="#Anchor-Props"
href="#anchor-props"
title="Anchor Props"
>
Anchor Props
@ -291,7 +291,7 @@ exports[`renders ./components/anchor/demo/onClick.tsx correctly 1`] = `
>
<a
class="ant-anchor-link-title"
href="#Link-Props"
href="#link-props"
title="Link Props"
>
Link Props
@ -344,7 +344,7 @@ exports[`renders ./components/anchor/demo/static.tsx correctly 1`] = `
>
<a
class="ant-anchor-link-title"
href="#API"
href="#api"
title="API"
>
API
@ -354,7 +354,7 @@ exports[`renders ./components/anchor/demo/static.tsx correctly 1`] = `
>
<a
class="ant-anchor-link-title"
href="#Anchor-Props"
href="#anchor-props"
title="Anchor Props"
>
Anchor Props
@ -365,7 +365,7 @@ exports[`renders ./components/anchor/demo/static.tsx correctly 1`] = `
>
<a
class="ant-anchor-link-title"
href="#Link-Props"
href="#link-props"
title="Link Props"
>
Link Props
@ -422,7 +422,7 @@ exports[`renders ./components/anchor/demo/targetOffset.tsx correctly 1`] = `
>
<a
class="ant-anchor-link-title"
href="#API"
href="#api"
title="API"
>
API
@ -432,7 +432,7 @@ exports[`renders ./components/anchor/demo/targetOffset.tsx correctly 1`] = `
>
<a
class="ant-anchor-link-title"
href="#Anchor-Props"
href="#anchor-props"
title="Anchor Props"
>
Anchor Props
@ -443,7 +443,7 @@ exports[`renders ./components/anchor/demo/targetOffset.tsx correctly 1`] = `
>
<a
class="ant-anchor-link-title"
href="#Link-Props"
href="#link-props"
title="Link Props"
>
Link Props

6
components/anchor/demo/basic.tsx
View File

@ -7,9 +7,9 @@ const App: React.FC = () => (
<Anchor>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
<Link href="#api" title="API">
<Link href="#anchor-props" title="Anchor Props" />
<Link href="#link-props" title="Link Props" />
</Link>
</Anchor>
);

6
components/anchor/demo/customizeHighlight.tsx
View File

@ -9,9 +9,9 @@ const App: React.FC = () => (
<Anchor affix={false} getCurrentAnchor={getCurrentAnchor}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
<Link href="#api" title="API">
<Link href="#anchor-props" title="Anchor Props" />
<Link href="#link-props" title="Link Props" />
</Link>
</Anchor>
);

6
components/anchor/demo/onChange.tsx
View File

@ -11,9 +11,9 @@ const App: React.FC = () => (
<Anchor affix={false} onChange={onChange}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
<Link href="#api" title="API">
<Link href="#anchor-props" title="Anchor Props" />
<Link href="#link-props" title="Link Props" />
</Link>
</Anchor>
);

6
components/anchor/demo/onClick.tsx
View File

@ -18,9 +18,9 @@ const App: React.FC = () => (
<Anchor affix={false} onClick={handleClick}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
<Link href="#api" title="API">
<Link href="#anchor-props" title="Anchor Props" />
<Link href="#link-props" title="Link Props" />
</Link>
</Anchor>
);

6
components/anchor/demo/static.tsx
View File

@ -7,9 +7,9 @@ const App: React.FC = () => (
<Anchor affix={false}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
<Link href="#api" title="API">
<Link href="#anchor-props" title="Anchor Props" />
<Link href="#link-props" title="Link Props" />
</Link>
</Anchor>
);

6
components/anchor/demo/targetOffset.tsx
View File

@ -14,9 +14,9 @@ const App: React.FC = () => {
<Anchor targetOffset={targetOffset}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
<Link href="#api" title="API">
<Link href="#anchor-props" title="Anchor Props" />
<Link href="#link-props" title="Link Props" />
</Link>
</Anchor>
);

6
components/anchor/index.en-US.md
View File

@ -1,10 +1,10 @@
---
category: Components
title: Anchor
cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
cover: https://gw.alipayobjects.com/zos/bmw-prod/669b87c5-7b44-4c99-a5ea-4c38f8004788.svg
group:
title: Other
order: 7
title: Navigation
order: 3
demo:
cols: 2
---

9
components/anchor/index.zh-CN.md
View File

@ -1,14 +1,13 @@
---
category: Components
subtitle: 锚点
cols: 2
title: Anchor
cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
group:
title: 其他
order: 7
cover: https://gw.alipayobjects.com/zos/bmw-prod/669b87c5-7b44-4c99-a5ea-4c38f8004788.svg
demo:
cols: 2
group:
title: 导航
order: 3
---
用于跳转到页面指定位置。

18
components/anchor/style/index.tsx
View File

@ -16,7 +16,8 @@ interface AnchorToken extends FullToken<'Anchor'> {
// ============================== Shared ==============================
const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
const { componentCls, holderOffsetBlock, anchorBallSize, lineWidthBold } = token;
const { componentCls, holderOffsetBlock, motionDurationSlow, lineWidthBold, colorPrimary } =
token;
return {
[`${componentCls}-wrapper`]: {
@ -54,16 +55,13 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
position: 'absolute',
left: {
_skip_check_: true,
value: '50%',
value: 0,
},
display: 'none',
width: anchorBallSize,
height: anchorBallSize,
backgroundColor: token.colorBgContainer,
border: `${lineWidthBold}px solid ${token.colorPrimary}`,
borderRadius: anchorBallSize,
transform: 'translateX(-50%)',
transition: `top ${token.motionDurationSlow} ease-in-out`,
transform: 'translateY(-50%)',
transition: `top ${motionDurationSlow} ease-in-out`,
width: lineWidthBold,
backgroundColor: colorPrimary,
[`&${componentCls}-ink-ball-visible`]: {
display: 'inline-block',
@ -106,7 +104,7 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
};
// ============================== Export ==============================
export default genComponentStyleHook('Anchor', token => {
export default genComponentStyleHook('Anchor', (token) => {
const { fontSize, fontSizeLG, padding, paddingXXS } = token;
const anchorToken = mergeToken<AnchorToken>(token, {