mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-07-25 07:56:54 +08:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

fix(anchor): ink correct switch direction (#41317)

Browse Source 
* fix(anchor): ink correct switch direction

* chore(anchor): fix test error

* chore(anchor): fix test error

* chore: test

* chore: test

* chore: test

* chore: update
This commit is contained in:
acyza 2023-03-19 16:17:08 +08:00 committed by GitHub
parent 00bbd66064
commit 16f0b576a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/anchor/Anchor.tsx
View File

@ -173,12 +173,15 @@ const AnchorContent: React.FC<InternalAnchorProps> = (props) => {
`.${prefixCls}-link-title-active`,
);
if (linkNode && spanLinkNode.current) {
if (anchorDirection !== 'horizontal') {
spanLinkNode.current.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2}px`;
spanLinkNode.current.style.height = `${linkNode.clientHeight}px`;
} else {
spanLinkNode.current.style.left = `${linkNode.offsetLeft}px`;
spanLinkNode.current.style.width = `${linkNode.clientWidth}px`;
const { style: inkStyle } = spanLinkNode.current;
inkStyle.top =
anchorDirection !== 'horizontal'
? `${linkNode.offsetTop + linkNode.clientHeight / 2}px`
: '';
inkStyle.height = anchorDirection !== 'horizontal' ? `${linkNode.clientHeight}px` : '';
inkStyle.left = anchorDirection === 'horizontal' ? `${linkNode.offsetLeft}px` : '';
inkStyle.width = anchorDirection === 'horizontal' ? `${linkNode.clientWidth}px` : '';
if (anchorDirection === 'horizontal') {
scrollIntoView(linkNode, {
scrollMode: 'if-needed',
block: 'nearest',

54
components/anchor/__tests__/Anchor.test.tsx
View File

@ -1,9 +1,10 @@
import React from 'react';
import React, { useState } from 'react';
import { resetWarned } from 'rc-util/lib/warning';
import scrollIntoView from 'scroll-into-view-if-needed';
import Anchor from '..';
import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
import type { AnchorDirection } from '../Anchor';
const { Link } = Anchor;
@ -886,5 +887,54 @@ describe('Anchor Render', () => {
'Warning: [antd: Anchor.Link] `Anchor.Link children` is not supported when `Anchor` direction is horizontal',
);
});
it('switch direction', async () => {
const Foo: React.FC = () => {
const [direction, setDirection] = useState<AnchorDirection>('vertical');
const toggle = () => {
setDirection(direction === 'vertical' ? 'horizontal' : 'vertical');
};
return (
<div>
<button onClick={toggle} type="button">
toggle
</button>
<Anchor
direction={direction}
items={[
{
title: 'part-1',
href: 'part-1',
key: 'part-1',
},
{
title: 'part-2',
href: 'part-2',
key: 'part-2',
},
]}
/>
</div>
);
};
const wrapper = await render(<Foo />);
(await wrapper.findByText('part-1')).click();
await waitFakeTimer();
const ink = wrapper.container.querySelector<HTMLSpanElement>('.ant-anchor-ink')!;
const toggleButton = wrapper.container.querySelector('button')!;
fireEvent.click(toggleButton);
act(() => jest.runAllTimers());
expect(!!ink.style.left).toBe(true);
expect(!!ink.style.width).toBe(true);
expect(ink.style.top).toBe('');
expect(ink.style.height).toBe('');
fireEvent.click(toggleButton);
act(() => jest.runAllTimers());
expect(!!ink.style.top).toBe(true);
expect(!!ink.style.height).toBe(true);
expect(ink.style.left).toBe('');
expect(ink.style.width).toBe('');
});
});
});