mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
Merge branch 'master' into master-merge-feature
This commit is contained in:
afc163
commit
8b38815283
@ -1,5 +1,4 @@
|
||||
import classNames from 'classnames';
|
||||
import memoizeOne from 'memoize-one';
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
import * as React from 'react';
|
||||
import Affix from '../affix';
|
||||
@ -88,87 +87,68 @@ export interface AntAnchor {
|
||||
) => void;
|
||||
}
|
||||
|
||||
class Anchor extends React.Component<InternalAnchorProps, AnchorState, ConfigConsumerProps> {
|
||||
static contextType = ConfigContext;
|
||||
const AnchorContent: React.FC<InternalAnchorProps> = props => {
|
||||
const {
|
||||
anchorPrefixCls: prefixCls,
|
||||
className = '',
|
||||
style,
|
||||
offsetTop,
|
||||
affix = true,
|
||||
showInkInFixed = false,
|
||||
children,
|
||||
bounds,
|
||||
targetOffset,
|
||||
onClick,
|
||||
onChange,
|
||||
getContainer,
|
||||
getCurrentAnchor,
|
||||
} = props;
|
||||
|
||||
state = {
|
||||
activeLink: null,
|
||||
};
|
||||
const [links, setLinks] = React.useState<string[]>([]);
|
||||
const [activeLink, setActiveLink] = React.useState<string | null>(null);
|
||||
const activeLinkRef = React.useRef<string | null>(activeLink);
|
||||
|
||||
context: ConfigConsumerProps;
|
||||
const wrapperRef = React.useRef<HTMLDivElement>(null);
|
||||
const spanLinkNode = React.useRef<HTMLSpanElement>(null);
|
||||
const animating = React.useRef<boolean>(false);
|
||||
|
||||
private wrapperRef = React.createRef<HTMLDivElement>();
|
||||
const { direction, getTargetContainer } = React.useContext<ConfigConsumerProps>(ConfigContext);
|
||||
|
||||
private inkNode: HTMLSpanElement;
|
||||
const getCurrentContainer = getContainer ?? getTargetContainer ?? getDefaultContainer;
|
||||
|
||||
// scroll scope's container
|
||||
private scrollContainer: HTMLElement | Window;
|
||||
const dependencyListItem: React.DependencyList[number] = JSON.stringify(links);
|
||||
|
||||
private links: string[] = [];
|
||||
|
||||
private scrollEvent: ReturnType<typeof addEventListener>;
|
||||
|
||||
private animating: boolean;
|
||||
|
||||
private prefixCls?: string;
|
||||
|
||||
// Context
|
||||
registerLink: AntAnchor['registerLink'] = link => {
|
||||
if (!this.links.includes(link)) {
|
||||
this.links.push(link);
|
||||
}
|
||||
};
|
||||
|
||||
unregisterLink: AntAnchor['unregisterLink'] = link => {
|
||||
const index = this.links.indexOf(link);
|
||||
if (index !== -1) {
|
||||
this.links.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
getContainer = () => {
|
||||
const { getTargetContainer } = this.context;
|
||||
const { getContainer } = this.props;
|
||||
|
||||
const getFunc = getContainer ?? getTargetContainer ?? getDefaultContainer;
|
||||
|
||||
return getFunc();
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.scrollContainer = this.getContainer();
|
||||
this.scrollEvent = addEventListener(this.scrollContainer, 'scroll', this.handleScroll);
|
||||
this.handleScroll();
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
const { getCurrentAnchor } = this.props;
|
||||
const { activeLink } = this.state;
|
||||
if (this.scrollEvent) {
|
||||
const currentContainer = this.getContainer();
|
||||
if (this.scrollContainer !== currentContainer) {
|
||||
this.scrollContainer = currentContainer;
|
||||
this.scrollEvent.remove();
|
||||
this.scrollEvent = addEventListener(this.scrollContainer, 'scroll', this.handleScroll);
|
||||
this.handleScroll();
|
||||
const registerLink = React.useCallback<AntAnchor['registerLink']>(
|
||||
link => {
|
||||
if (!links.includes(link)) {
|
||||
setLinks(prev => [...prev, link]);
|
||||
}
|
||||
}
|
||||
if (typeof getCurrentAnchor === 'function') {
|
||||
this.setCurrentActiveLink(getCurrentAnchor(activeLink || ''), false);
|
||||
}
|
||||
this.updateInk();
|
||||
}
|
||||
},
|
||||
[dependencyListItem],
|
||||
);
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.scrollEvent) {
|
||||
this.scrollEvent.remove();
|
||||
}
|
||||
}
|
||||
const unregisterLink = React.useCallback<AntAnchor['unregisterLink']>(
|
||||
link => {
|
||||
if (links.includes(link)) {
|
||||
setLinks(prev => prev.filter(i => i !== link));
|
||||
}
|
||||
},
|
||||
[dependencyListItem],
|
||||
);
|
||||
|
||||
getCurrentAnchor(offsetTop = 0, bounds = 5): string {
|
||||
const linkSections: Array<Section> = [];
|
||||
const container = this.getContainer();
|
||||
this.links.forEach(link => {
|
||||
const updateInk = () => {
|
||||
const linkNode = wrapperRef.current?.querySelector<HTMLElement>(
|
||||
`.${prefixCls}-link-title-active`,
|
||||
);
|
||||
if (linkNode && spanLinkNode.current) {
|
||||
spanLinkNode.current.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
|
||||
}
|
||||
};
|
||||
|
||||
const getInternalCurrentAnchor = (_links: string[], _offsetTop = 0, _bounds = 5): string => {
|
||||
const linkSections: Section[] = [];
|
||||
const container = getCurrentContainer();
|
||||
_links.forEach(link => {
|
||||
const sharpLinkMatch = sharpMatcherRegx.exec(link?.toString());
|
||||
if (!sharpLinkMatch) {
|
||||
return;
|
||||
@ -176,7 +156,7 @@ class Anchor extends React.Component<InternalAnchorProps, AnchorState, ConfigCon
|
||||
const target = document.getElementById(sharpLinkMatch[1]);
|
||||
if (target) {
|
||||
const top = getOffsetTop(target, container);
|
||||
if (top < offsetTop + bounds) {
|
||||
if (top < _offsetTop + _bounds) {
|
||||
linkSections.push({ link, top });
|
||||
}
|
||||
}
|
||||
@ -187,161 +167,149 @@ class Anchor extends React.Component<InternalAnchorProps, AnchorState, ConfigCon
|
||||
return maxSection.link;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
handleScrollTo = (link: string) => {
|
||||
const { offsetTop, targetOffset } = this.props;
|
||||
|
||||
this.setCurrentActiveLink(link);
|
||||
const container = this.getContainer();
|
||||
const scrollTop = getScroll(container, true);
|
||||
const sharpLinkMatch = sharpMatcherRegx.exec(link);
|
||||
if (!sharpLinkMatch) {
|
||||
return;
|
||||
}
|
||||
const targetElement = document.getElementById(sharpLinkMatch[1]);
|
||||
if (!targetElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
const eleOffsetTop = getOffsetTop(targetElement, container);
|
||||
let y = scrollTop + eleOffsetTop;
|
||||
y -= targetOffset !== undefined ? targetOffset : offsetTop || 0;
|
||||
this.animating = true;
|
||||
|
||||
scrollTo(y, {
|
||||
callback: () => {
|
||||
this.animating = false;
|
||||
},
|
||||
getContainer: this.getContainer,
|
||||
});
|
||||
};
|
||||
|
||||
saveInkNode = (node: HTMLSpanElement) => {
|
||||
this.inkNode = node;
|
||||
};
|
||||
|
||||
setCurrentActiveLink = (link: string, triggerChange = true) => {
|
||||
const { activeLink } = this.state;
|
||||
const { onChange, getCurrentAnchor } = this.props;
|
||||
if (activeLink === link) {
|
||||
const setCurrentActiveLink = (link: string) => {
|
||||
if (activeLinkRef.current === link) {
|
||||
return;
|
||||
}
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/30584
|
||||
this.setState({
|
||||
activeLink: typeof getCurrentAnchor === 'function' ? getCurrentAnchor(link) : link,
|
||||
});
|
||||
if (triggerChange) {
|
||||
onChange?.(link);
|
||||
}
|
||||
const newLink = typeof getCurrentAnchor === 'function' ? getCurrentAnchor(link) : link;
|
||||
setActiveLink(newLink);
|
||||
activeLinkRef.current = newLink;
|
||||
|
||||
// onChange should respect the original link (which may caused by
|
||||
// window scroll or user click), not the new link
|
||||
onChange?.(link);
|
||||
};
|
||||
|
||||
handleScroll = () => {
|
||||
if (this.animating) {
|
||||
const handleScroll = React.useCallback(() => {
|
||||
if (animating.current) {
|
||||
return;
|
||||
}
|
||||
const { offsetTop, bounds, targetOffset } = this.props;
|
||||
const currentActiveLink = this.getCurrentAnchor(
|
||||
if (typeof getCurrentAnchor === 'function') {
|
||||
return;
|
||||
}
|
||||
const currentActiveLink = getInternalCurrentAnchor(
|
||||
links,
|
||||
targetOffset !== undefined ? targetOffset : offsetTop || 0,
|
||||
bounds,
|
||||
);
|
||||
this.setCurrentActiveLink(currentActiveLink);
|
||||
};
|
||||
setCurrentActiveLink(currentActiveLink);
|
||||
}, [dependencyListItem, targetOffset, offsetTop]);
|
||||
|
||||
updateInk = () => {
|
||||
const { prefixCls, wrapperRef } = this;
|
||||
const anchorNode = wrapperRef.current;
|
||||
const linkNode = anchorNode?.querySelector<HTMLElement>(`.${prefixCls}-link-title-active`);
|
||||
if (linkNode) {
|
||||
this.inkNode.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
|
||||
}
|
||||
};
|
||||
const handleScrollTo = React.useCallback<(link: string) => void>(
|
||||
link => {
|
||||
setCurrentActiveLink(link);
|
||||
const container = getCurrentContainer();
|
||||
const scrollTop = getScroll(container, true);
|
||||
const sharpLinkMatch = sharpMatcherRegx.exec(link);
|
||||
if (!sharpLinkMatch) {
|
||||
return;
|
||||
}
|
||||
const targetElement = document.getElementById(sharpLinkMatch[1]);
|
||||
if (!targetElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
getMemoizedContextValue = memoizeOne(
|
||||
(link: AntAnchor['activeLink'], onClickFn: AnchorProps['onClick']): AntAnchor => ({
|
||||
registerLink: this.registerLink,
|
||||
unregisterLink: this.unregisterLink,
|
||||
scrollTo: this.handleScrollTo,
|
||||
activeLink: link,
|
||||
onClick: onClickFn,
|
||||
}),
|
||||
const eleOffsetTop = getOffsetTop(targetElement, container);
|
||||
let y = scrollTop + eleOffsetTop;
|
||||
y -= targetOffset !== undefined ? targetOffset : offsetTop || 0;
|
||||
animating.current = true;
|
||||
scrollTo(y, {
|
||||
getContainer: getCurrentContainer,
|
||||
callback() {
|
||||
animating.current = false;
|
||||
},
|
||||
});
|
||||
},
|
||||
[targetOffset, offsetTop],
|
||||
);
|
||||
|
||||
render() {
|
||||
const { direction } = this.context;
|
||||
const {
|
||||
anchorPrefixCls: prefixCls,
|
||||
className = '',
|
||||
style,
|
||||
offsetTop,
|
||||
affix = true,
|
||||
showInkInFixed = false,
|
||||
children,
|
||||
onClick,
|
||||
} = this.props;
|
||||
const { activeLink } = this.state;
|
||||
const inkClass = classNames(
|
||||
{
|
||||
[`${prefixCls}-ink-ball-visible`]: activeLink,
|
||||
},
|
||||
`${prefixCls}-ink-ball`,
|
||||
);
|
||||
|
||||
// To support old version react.
|
||||
// Have to add prefixCls on the instance.
|
||||
// https://github.com/facebook/react/issues/12397
|
||||
this.prefixCls = prefixCls;
|
||||
const wrapperClass = classNames(
|
||||
`${prefixCls}-wrapper`,
|
||||
{
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
className,
|
||||
);
|
||||
|
||||
const inkClass = classNames(`${prefixCls}-ink-ball`, {
|
||||
visible: activeLink,
|
||||
});
|
||||
const anchorClass = classNames(prefixCls, {
|
||||
[`${prefixCls}-fixed`]: !affix && !showInkInFixed,
|
||||
});
|
||||
|
||||
const wrapperClass = classNames(
|
||||
`${prefixCls}-wrapper`,
|
||||
{
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
className,
|
||||
);
|
||||
const wrapperStyle: React.CSSProperties = {
|
||||
maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
|
||||
...style,
|
||||
};
|
||||
|
||||
const anchorClass = classNames(prefixCls, {
|
||||
[`${prefixCls}-fixed`]: !affix && !showInkInFixed,
|
||||
});
|
||||
|
||||
const wrapperStyle: React.CSSProperties = {
|
||||
maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
|
||||
...style,
|
||||
};
|
||||
|
||||
const anchorContent = (
|
||||
<div ref={this.wrapperRef} className={wrapperClass} style={wrapperStyle}>
|
||||
<div className={anchorClass}>
|
||||
<div className={`${prefixCls}-ink`}>
|
||||
<span className={inkClass} ref={this.saveInkNode} />
|
||||
</div>
|
||||
{children}
|
||||
const anchorContent = (
|
||||
<div ref={wrapperRef} className={wrapperClass} style={wrapperStyle}>
|
||||
<div className={anchorClass}>
|
||||
<div className={`${prefixCls}-ink`}>
|
||||
<span className={inkClass} ref={spanLinkNode} />
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
);
|
||||
|
||||
const contextValue = this.getMemoizedContextValue(activeLink, onClick);
|
||||
React.useEffect(() => {
|
||||
const scrollContainer = getCurrentContainer();
|
||||
const scrollEvent = addEventListener(scrollContainer, 'scroll', handleScroll);
|
||||
handleScroll();
|
||||
return () => {
|
||||
scrollEvent?.remove();
|
||||
};
|
||||
}, [dependencyListItem]);
|
||||
|
||||
return (
|
||||
<AnchorContext.Provider value={contextValue}>
|
||||
{affix ? (
|
||||
<Affix offsetTop={offsetTop} target={this.getContainer}>
|
||||
{anchorContent}
|
||||
</Affix>
|
||||
) : (
|
||||
anchorContent
|
||||
)}
|
||||
</AnchorContext.Provider>
|
||||
);
|
||||
}
|
||||
}
|
||||
React.useEffect(() => {
|
||||
if (typeof getCurrentAnchor === 'function') {
|
||||
setCurrentActiveLink(getCurrentAnchor(activeLinkRef.current || ''));
|
||||
}
|
||||
}, [getCurrentAnchor]);
|
||||
|
||||
// just use in test
|
||||
export type InternalAnchorClass = Anchor;
|
||||
React.useEffect(() => {
|
||||
updateInk();
|
||||
}, [getCurrentAnchor, dependencyListItem, activeLink]);
|
||||
|
||||
const AnchorFC = React.forwardRef<Anchor, AnchorProps>((props, ref) => {
|
||||
const memoizedContextValue = React.useMemo<AntAnchor>(
|
||||
() => ({
|
||||
registerLink,
|
||||
unregisterLink,
|
||||
scrollTo: handleScrollTo,
|
||||
activeLink,
|
||||
onClick,
|
||||
}),
|
||||
[activeLink, onClick, handleScrollTo],
|
||||
);
|
||||
|
||||
return (
|
||||
<AnchorContext.Provider value={memoizedContextValue}>
|
||||
{affix ? (
|
||||
<Affix offsetTop={offsetTop} target={getCurrentContainer}>
|
||||
{anchorContent}
|
||||
</Affix>
|
||||
) : (
|
||||
anchorContent
|
||||
)}
|
||||
</AnchorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
const Anchor: React.FC<AnchorProps> = props => {
|
||||
const { prefixCls: customizePrefixCls } = props;
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
const { getPrefixCls } = React.useContext<ConfigConsumerProps>(ConfigContext);
|
||||
const anchorPrefixCls = getPrefixCls('anchor', customizePrefixCls);
|
||||
return <Anchor {...props} ref={ref} anchorPrefixCls={anchorPrefixCls} />;
|
||||
});
|
||||
return <AnchorContent {...props} anchorPrefixCls={anchorPrefixCls} />;
|
||||
};
|
||||
|
||||
export default AnchorFC;
|
||||
export default Anchor;
|
||||
|
||||
@ -26,7 +26,7 @@ const AnchorLink: React.FC<AnchorLinkProps> = props => {
|
||||
return () => {
|
||||
unregisterLink?.(href);
|
||||
};
|
||||
}, [href]);
|
||||
}, [href, registerLink, unregisterLink]);
|
||||
|
||||
const handleClick = (e: React.MouseEvent<HTMLElement>) => {
|
||||
onClick?.(e, { title, href });
|
||||
|
||||
@ -1,20 +1,9 @@
|
||||
import React from 'react';
|
||||
import Anchor from '..';
|
||||
import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
|
||||
import type { InternalAnchorClass } from '../Anchor';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
function createGetContainer(id: string) {
|
||||
return () => {
|
||||
const container = document.getElementById(id);
|
||||
if (container == null) {
|
||||
throw new Error();
|
||||
}
|
||||
return container;
|
||||
};
|
||||
}
|
||||
|
||||
function createDiv() {
|
||||
const root = document.createElement('div');
|
||||
document.body.appendChild(root);
|
||||
@ -57,122 +46,77 @@ describe('Anchor Render', () => {
|
||||
getClientRectsMock.mockRestore();
|
||||
});
|
||||
|
||||
it('Anchor render perfectly', () => {
|
||||
it('renders correctly', () => {
|
||||
const hash = getHashUrl();
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
const { container } = render(
|
||||
<Anchor
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
<Anchor>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
||||
anchorInstance!.handleScroll();
|
||||
expect(anchorInstance!.state).not.toBe(null);
|
||||
expect(container.querySelector(`a[href="#${hash}"]`)).not.toBe(null);
|
||||
});
|
||||
|
||||
it('Anchor render perfectly for complete href - click', async () => {
|
||||
it('actives the target when clicking a link', async () => {
|
||||
const hash = getHashUrl();
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
const { container } = render(
|
||||
<Anchor
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
<Anchor prefixCls="ant-anchor">
|
||||
<Link href={`http://www.example.com/#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
fireEvent.click(container.querySelector(`a[href="http://www.example.com/#${hash}"]`)!);
|
||||
const link = container.querySelector(`a[href="http://www.example.com/#${hash}"]`)!;
|
||||
fireEvent.click(link);
|
||||
await waitFakeTimer();
|
||||
expect(anchorInstance!.state!.activeLink).toBe(`http://www.example.com/#${hash}`);
|
||||
expect(link.classList).toContain('ant-anchor-link-title-active');
|
||||
});
|
||||
|
||||
it('Anchor render perfectly for complete href - hash router', async () => {
|
||||
it('scrolls the page when clicking a link', async () => {
|
||||
const root = createDiv();
|
||||
const scrollToSpy = jest.spyOn(window, 'scrollTo');
|
||||
render(<div id="/faq?locale=en#Q1">Q1</div>, { container: root });
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
render(
|
||||
<Anchor
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
const { container } = render(
|
||||
<Anchor>
|
||||
<Link href="/#/faq?locale=en#Q1" title="Q1" />
|
||||
</Anchor>,
|
||||
);
|
||||
anchorInstance!.handleScrollTo('/#/faq?locale=en#Q1');
|
||||
const link = container.querySelector(`a[href="/#/faq?locale=en#Q1"]`)!;
|
||||
fireEvent.click(link);
|
||||
await waitFakeTimer();
|
||||
expect(anchorInstance!.state.activeLink).toBe('/#/faq?locale=en#Q1');
|
||||
expect(scrollToSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Anchor render perfectly for complete href - scroll', async () => {
|
||||
const hash = getHashUrl();
|
||||
it('handleScroll should not be triggered when scrolling caused by clicking a link', async () => {
|
||||
const hash1 = getHashUrl();
|
||||
const hash2 = getHashUrl();
|
||||
const root = createDiv();
|
||||
render(<div id={hash}>Hello</div>, { container: root });
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
const onChange = jest.fn();
|
||||
render(
|
||||
<Anchor
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
<Link href={`http://www.example.com/#${hash}`} title={hash} />
|
||||
<div>
|
||||
<div id={hash1}>Hello</div>
|
||||
<div id={hash2}>World</div>
|
||||
</div>,
|
||||
{ container: root },
|
||||
);
|
||||
const { container } = render(
|
||||
<Anchor onChange={onChange}>
|
||||
<Link href={`#${hash1}`} title={hash1} />
|
||||
<Link href={`#${hash2}`} title={hash2} />
|
||||
</Anchor>,
|
||||
);
|
||||
anchorInstance!.handleScroll();
|
||||
onChange.mockClear();
|
||||
|
||||
const link = container.querySelector(`a[href="#${hash2}"]`)!;
|
||||
// this will trigger 1 onChange
|
||||
fireEvent.click(link);
|
||||
// smooth scroll caused by clicking needs time to finish.
|
||||
// we scroll the window before it finish, the scroll listener should not be triggered,
|
||||
fireEvent.scroll(window);
|
||||
|
||||
await waitFakeTimer();
|
||||
expect(anchorInstance!.state!.activeLink).toBe(`http://www.example.com/#${hash}`);
|
||||
// if the scroll listener is triggered, we will get 2 onChange, now we expect only 1.
|
||||
expect(onChange).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('Anchor render perfectly for complete href - scrollTo', async () => {
|
||||
const hash = getHashUrl();
|
||||
const scrollToSpy = jest.spyOn(window, 'scrollTo');
|
||||
const root = createDiv();
|
||||
render(<div id={`#${hash}`}>Hello</div>, { container: root });
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
render(
|
||||
<Anchor
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
<Link href={`##${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
anchorInstance!.handleScrollTo(`##${hash}`);
|
||||
await waitFakeTimer();
|
||||
expect(anchorInstance!.state.activeLink).toBe(`##${hash}`);
|
||||
const calls = scrollToSpy.mock.calls.length;
|
||||
expect(scrollToSpy.mock.calls.length).toBe(calls);
|
||||
});
|
||||
|
||||
it('should remove listener when unmount', async () => {
|
||||
const hash = getHashUrl();
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
const { unmount } = render(
|
||||
<Anchor
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
const removeListenerSpy = jest.spyOn((anchorInstance! as any).scrollEvent, 'remove');
|
||||
unmount();
|
||||
expect(removeListenerSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should unregister link when unmount children', () => {
|
||||
it('should update DOM when children are unmounted', () => {
|
||||
const hash = getHashUrl();
|
||||
const { container, rerender } = render(
|
||||
<Anchor>
|
||||
@ -187,32 +131,94 @@ describe('Anchor Render', () => {
|
||||
expect(container.querySelector('.ant-anchor-link-title')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should update links when link href update', async () => {
|
||||
it('should update DOM when link href is changed', async () => {
|
||||
const hash = getHashUrl();
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
function AnchorUpdate({ href }: { href: string }) {
|
||||
return (
|
||||
<Anchor
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
<Anchor>
|
||||
<Link href={href} title={hash} />
|
||||
</Anchor>
|
||||
);
|
||||
}
|
||||
const { rerender } = render(<AnchorUpdate href={`#${hash}`} />);
|
||||
const { container, rerender } = render(<AnchorUpdate href={`#${hash}`} />);
|
||||
|
||||
if (anchorInstance! == null) {
|
||||
throw new Error('anchorInstance should not be null');
|
||||
}
|
||||
|
||||
expect((anchorInstance as any)!.links).toEqual([`#${hash}`]);
|
||||
expect(container.querySelector(`a[href="#${hash}"]`)).toBeTruthy();
|
||||
rerender(<AnchorUpdate href={`#${hash}_1`} />);
|
||||
expect((anchorInstance as any)!.links).toEqual([`#${hash}_1`]);
|
||||
expect(container.querySelector(`a[href="#${hash}_1"]`)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('Anchor onClick event', () => {
|
||||
it('targetOffset prop', async () => {
|
||||
const hash = getHashUrl();
|
||||
|
||||
const scrollToSpy = jest.spyOn(window, 'scrollTo');
|
||||
const root = createDiv();
|
||||
render(<h1 id={hash}>Hello</h1>, { container: root });
|
||||
const { container, rerender } = render(
|
||||
<Anchor>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
const setProps = (props: Record<string, any>) =>
|
||||
rerender(
|
||||
<Anchor {...props}>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
|
||||
|
||||
setProps({ offsetTop: 100 });
|
||||
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
|
||||
|
||||
setProps({ targetOffset: 200 });
|
||||
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/31941
|
||||
it('targetOffset prop when contain spaces', async () => {
|
||||
const hash = `${getHashUrl()} s p a c e s`;
|
||||
|
||||
const scrollToSpy = jest.spyOn(window, 'scrollTo');
|
||||
const root = createDiv();
|
||||
render(<h1 id={hash}>Hello</h1>, { container: root });
|
||||
const { container, rerender } = render(
|
||||
<Anchor>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
const setProps = (props: Record<string, any>) =>
|
||||
rerender(
|
||||
<Anchor {...props}>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
|
||||
|
||||
setProps({ offsetTop: 100 });
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
|
||||
|
||||
setProps({ targetOffset: 200 });
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
||||
});
|
||||
|
||||
it('onClick event', () => {
|
||||
const hash = getHashUrl();
|
||||
let event;
|
||||
let link;
|
||||
@ -226,297 +232,23 @@ describe('Anchor Render', () => {
|
||||
|
||||
const href = `#${hash}`;
|
||||
const title = hash;
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
const { container } = render(
|
||||
<Anchor
|
||||
onClick={handleClick}
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
<Anchor onClick={handleClick}>
|
||||
<Link href={href} title={title} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
fireEvent.click(container.querySelector(`a[href="${href}"]`)!);
|
||||
anchorInstance!.handleScroll();
|
||||
expect(event).not.toBe(undefined);
|
||||
expect(link).toEqual({ href, title });
|
||||
});
|
||||
|
||||
it('Different function returns the same DOM', async () => {
|
||||
const hash = getHashUrl();
|
||||
const root = createDiv();
|
||||
render(<div id={hash}>Hello</div>, { container: root });
|
||||
const getContainerA = createGetContainer(hash);
|
||||
const getContainerB = createGetContainer(hash);
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
const { rerender } = render(
|
||||
<Anchor
|
||||
getContainer={getContainerA}
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
const removeListenerSpy = jest.spyOn((anchorInstance! as any).scrollEvent, 'remove');
|
||||
await waitFakeTimer();
|
||||
rerender(
|
||||
<Anchor getContainer={getContainerB}>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
expect(removeListenerSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Different function returns different DOM', async () => {
|
||||
const hash1 = getHashUrl();
|
||||
const hash2 = getHashUrl();
|
||||
const root = createDiv();
|
||||
render(
|
||||
<div>
|
||||
<div id={hash1}>Hello</div>
|
||||
<div id={hash2}>World</div>
|
||||
</div>,
|
||||
{ container: root },
|
||||
);
|
||||
const getContainerA = createGetContainer(hash1);
|
||||
const getContainerB = createGetContainer(hash2);
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
const { rerender } = render(
|
||||
<Anchor
|
||||
getContainer={getContainerA}
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
<Link href={`#${hash1}`} title={hash1} />
|
||||
<Link href={`#${hash2}`} title={hash2} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
const removeListenerSpy = jest.spyOn((anchorInstance! as any).scrollEvent, 'remove');
|
||||
expect(removeListenerSpy).not.toHaveBeenCalled();
|
||||
await waitFakeTimer();
|
||||
rerender(
|
||||
<Anchor getContainer={getContainerB}>
|
||||
<Link href={`#${hash1}`} title={hash1} />
|
||||
<Link href={`#${hash2}`} title={hash2} />
|
||||
</Anchor>,
|
||||
);
|
||||
expect(removeListenerSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Same function returns the same DOM', () => {
|
||||
const hash = getHashUrl();
|
||||
const root = createDiv();
|
||||
render(<div id={hash}>Hello</div>, { container: root });
|
||||
const getContainer = createGetContainer(hash);
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
const { container } = render(
|
||||
<Anchor
|
||||
getContainer={getContainer}
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
||||
|
||||
anchorInstance!.handleScroll();
|
||||
expect(anchorInstance!.state).not.toBe(null);
|
||||
});
|
||||
|
||||
it('Same function returns different DOM', async () => {
|
||||
const hash1 = getHashUrl();
|
||||
const hash2 = getHashUrl();
|
||||
const root = createDiv();
|
||||
render(
|
||||
<div>
|
||||
<div id={hash1}>Hello</div>
|
||||
<div id={hash2}>World</div>
|
||||
</div>,
|
||||
{ container: root },
|
||||
);
|
||||
const holdContainer = {
|
||||
container: document.getElementById(hash1),
|
||||
};
|
||||
const getContainer = () => {
|
||||
if (holdContainer.container == null) {
|
||||
throw new Error('container should not be null');
|
||||
}
|
||||
return holdContainer.container;
|
||||
};
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
const { rerender } = render(
|
||||
<Anchor
|
||||
getContainer={getContainer}
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
<Link href={`#${hash1}`} title={hash1} />
|
||||
<Link href={`#${hash2}`} title={hash2} />
|
||||
</Anchor>,
|
||||
);
|
||||
const removeListenerSpy = jest.spyOn((anchorInstance! as any).scrollEvent, 'remove');
|
||||
expect(removeListenerSpy).not.toHaveBeenCalled();
|
||||
await waitFakeTimer();
|
||||
holdContainer.container = document.getElementById(hash2);
|
||||
rerender(
|
||||
<Anchor getContainer={getContainer}>
|
||||
<Link href={`#${hash1}`} title={hash1} />
|
||||
<Link href={`#${hash2}`} title={hash2} />
|
||||
</Anchor>,
|
||||
);
|
||||
expect(removeListenerSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Anchor targetOffset prop', async () => {
|
||||
const hash = getHashUrl();
|
||||
let dateNowMock: jest.SpyInstance;
|
||||
|
||||
function dataNowMockFn() {
|
||||
let start = 0;
|
||||
|
||||
const handler = () => {
|
||||
start += 1000;
|
||||
return start;
|
||||
};
|
||||
|
||||
return jest.spyOn(Date, 'now').mockImplementation(handler);
|
||||
}
|
||||
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
const scrollToSpy = jest.spyOn(window, 'scrollTo');
|
||||
const root = createDiv();
|
||||
render(<h1 id={hash}>Hello</h1>, { container: root });
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
const { rerender } = render(
|
||||
<Anchor
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
const setProps = (props: Record<string, any>) =>
|
||||
rerender(
|
||||
<Anchor
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
anchorInstance!.handleScrollTo(`#${hash}`);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
setProps({ offsetTop: 100 });
|
||||
|
||||
anchorInstance!.handleScrollTo(`#${hash}`);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
setProps({ targetOffset: 200 });
|
||||
|
||||
anchorInstance!.handleScrollTo(`#${hash}`);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
||||
|
||||
dateNowMock.mockRestore();
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/31941
|
||||
it('Anchor targetOffset prop when contain spaces', async () => {
|
||||
const hash = `${getHashUrl()} s p a c e s`;
|
||||
let dateNowMock: jest.SpyInstance;
|
||||
|
||||
function dataNowMockFn() {
|
||||
let start = 0;
|
||||
|
||||
const handler = () => {
|
||||
start += 1000;
|
||||
return start;
|
||||
};
|
||||
|
||||
return jest.spyOn(Date, 'now').mockImplementation(handler);
|
||||
}
|
||||
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
const scrollToSpy = jest.spyOn(window, 'scrollTo');
|
||||
const root = createDiv();
|
||||
render(<h1 id={hash}>Hello</h1>, { container: root });
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
const { rerender } = render(
|
||||
<Anchor
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
const setProps = (props: Record<string, any>) =>
|
||||
rerender(
|
||||
<Anchor
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
anchorInstance!.handleScrollTo(`#${hash}`);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
setProps({ offsetTop: 100 });
|
||||
anchorInstance!.handleScrollTo(`#${hash}`);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
setProps({ targetOffset: 200 });
|
||||
anchorInstance!.handleScrollTo(`#${hash}`);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
||||
|
||||
dateNowMock.mockRestore();
|
||||
});
|
||||
|
||||
it('Anchor onChange prop', async () => {
|
||||
it('onChange event', () => {
|
||||
const hash1 = getHashUrl();
|
||||
const hash2 = getHashUrl();
|
||||
const onChange = jest.fn();
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
render(
|
||||
<Anchor
|
||||
onChange={onChange}
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
const { container } = render(
|
||||
<Anchor onChange={onChange}>
|
||||
<Link href={`#${hash1}`} title={hash1} />
|
||||
<Link href={`#${hash2}`} title={hash2} />
|
||||
</Anchor>,
|
||||
@ -526,89 +258,57 @@ describe('Anchor Render', () => {
|
||||
);
|
||||
|
||||
expect(onChange).toHaveBeenCalledTimes(1);
|
||||
anchorInstance!.handleScrollTo(hash2);
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash2}"]`)!);
|
||||
expect(onChange).toHaveBeenCalledTimes(2);
|
||||
expect(onChange).toHaveBeenCalledWith(hash2);
|
||||
expect(onChange).toHaveBeenLastCalledWith(`#${hash2}`);
|
||||
});
|
||||
|
||||
it('invalid hash', async () => {
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
it('handles invalid hash correctly', () => {
|
||||
const { container } = render(
|
||||
<Anchor
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
<Anchor>
|
||||
<Link href="notexsited" title="title" />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
fireEvent.click(container.querySelector(`a[href="notexsited"]`)!);
|
||||
|
||||
anchorInstance!.handleScrollTo('notexsited');
|
||||
expect(anchorInstance!.state).not.toBe(null);
|
||||
const link = container.querySelector(`a[href="notexsited"]`)!;
|
||||
fireEvent.click(link);
|
||||
expect(container.querySelector(`.ant-anchor-link-title-active`)?.textContent).toBe('title');
|
||||
});
|
||||
|
||||
it('test edge case when getBoundingClientRect return zero size', async () => {
|
||||
getBoundingClientRectMock.mockReturnValue({ width: 0, height: 0, top: 1000 } as DOMRect);
|
||||
const hash = getHashUrl();
|
||||
let dateNowMock: jest.SpyInstance;
|
||||
|
||||
function dataNowMockFn() {
|
||||
let start = 0;
|
||||
|
||||
const handler = () => {
|
||||
start += 1000;
|
||||
return start;
|
||||
};
|
||||
|
||||
return jest.spyOn(Date, 'now').mockImplementation(handler);
|
||||
}
|
||||
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
const scrollToSpy = jest.spyOn(window, 'scrollTo');
|
||||
const root = createDiv();
|
||||
render(<h1 id={hash}>Hello</h1>, { container: root });
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
const { rerender } = render(
|
||||
<Anchor
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
const { container, rerender } = render(
|
||||
<Anchor>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
const setProps = (props: Record<string, any>) =>
|
||||
rerender(
|
||||
<Anchor
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<Anchor {...props}>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
anchorInstance!.handleScrollTo(`#${hash}`);
|
||||
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
setProps({ offsetTop: 100 });
|
||||
anchorInstance!.handleScrollTo(`#${hash}`);
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
setProps({ targetOffset: 200 });
|
||||
anchorInstance!.handleScrollTo(`#${hash}`);
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
||||
|
||||
dateNowMock.mockRestore();
|
||||
getBoundingClientRectMock.mockReturnValue({
|
||||
width: 100,
|
||||
height: 100,
|
||||
@ -618,102 +318,61 @@ describe('Anchor Render', () => {
|
||||
|
||||
it('test edge case when container is not windows', async () => {
|
||||
const hash = getHashUrl();
|
||||
let dateNowMock: jest.SpyInstance;
|
||||
|
||||
function dataNowMockFn() {
|
||||
let start = 0;
|
||||
|
||||
const handler = () => {
|
||||
start += 1000;
|
||||
return start;
|
||||
};
|
||||
|
||||
return jest.spyOn(Date, 'now').mockImplementation(handler);
|
||||
}
|
||||
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
const scrollToSpy = jest.spyOn(window, 'scrollTo');
|
||||
const root = createDiv();
|
||||
render(<h1 id={hash}>Hello</h1>, { container: root });
|
||||
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
const { rerender } = render(
|
||||
<Anchor
|
||||
getContainer={() => document.body}
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
const { container, rerender } = render(
|
||||
<Anchor getContainer={() => document.body}>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
const setProps = (props: Record<string, any>) =>
|
||||
rerender(
|
||||
<Anchor
|
||||
getContainer={() => document.body}
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<Anchor getContainer={() => document.body} {...props}>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
anchorInstance!.handleScrollTo(`#${hash}`);
|
||||
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
setProps({ offsetTop: 100 });
|
||||
anchorInstance!.handleScrollTo(`#${hash}`);
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
setProps({ targetOffset: 200 });
|
||||
anchorInstance!.handleScrollTo(`#${hash}`);
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
|
||||
await waitFakeTimer();
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
||||
|
||||
dateNowMock.mockRestore();
|
||||
});
|
||||
|
||||
describe('getCurrentAnchor', () => {
|
||||
it('Anchor getCurrentAnchor prop', () => {
|
||||
it('getCurrentAnchor prop', () => {
|
||||
const hash1 = getHashUrl();
|
||||
const hash2 = getHashUrl();
|
||||
const getCurrentAnchor = () => `#${hash2}`;
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
render(
|
||||
<Anchor
|
||||
getCurrentAnchor={getCurrentAnchor}
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
const { container } = render(
|
||||
<Anchor getCurrentAnchor={getCurrentAnchor}>
|
||||
<Link href={`#${hash1}`} title={hash1} />
|
||||
<Link href={`#${hash2}`} title={hash2} />
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
expect(anchorInstance!.state.activeLink).toBe(`#${hash2}`);
|
||||
expect(container.querySelector(`.ant-anchor-link-title-active`)?.textContent).toBe(hash2);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/30584
|
||||
it('should trigger onChange when have getCurrentAnchor', async () => {
|
||||
it('should trigger onChange when have getCurrentAnchor', () => {
|
||||
const hash1 = getHashUrl();
|
||||
const hash2 = getHashUrl();
|
||||
const onChange = jest.fn();
|
||||
let anchorInstance: InternalAnchorClass;
|
||||
render(
|
||||
<Anchor
|
||||
onChange={onChange}
|
||||
getCurrentAnchor={() => hash1}
|
||||
ref={node => {
|
||||
anchorInstance = node as InternalAnchorClass;
|
||||
}}
|
||||
>
|
||||
const { container } = render(
|
||||
<Anchor onChange={onChange} getCurrentAnchor={() => hash1}>
|
||||
<Link href={`#${hash1}`} title={hash1} />
|
||||
<Link href={`#${hash2}`} title={hash2} />
|
||||
</Anchor>,
|
||||
@ -723,13 +382,13 @@ describe('Anchor Render', () => {
|
||||
);
|
||||
|
||||
expect(onChange).toHaveBeenCalledTimes(1);
|
||||
anchorInstance!.handleScrollTo(hash2);
|
||||
fireEvent.click(container.querySelector(`a[href="#${hash2}"]`)!);
|
||||
expect(onChange).toHaveBeenCalledTimes(2);
|
||||
expect(onChange).toHaveBeenCalledWith(hash2);
|
||||
expect(onChange).toHaveBeenLastCalledWith(`#${hash2}`);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/34784
|
||||
it('getCurrentAnchor have default link as argument', async () => {
|
||||
it('getCurrentAnchor have default link as argument', () => {
|
||||
const hash1 = getHashUrl();
|
||||
const hash2 = getHashUrl();
|
||||
const getCurrentAnchor = jest.fn();
|
||||
@ -747,7 +406,7 @@ describe('Anchor Render', () => {
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/37627
|
||||
it('should update anchorLink when component is rerender', async () => {
|
||||
it('should update active link when getCurrentAnchor changes', async () => {
|
||||
const hash1 = getHashUrl();
|
||||
const hash2 = getHashUrl();
|
||||
const Demo: React.FC<{ current: string }> = ({ current }) => (
|
||||
@ -761,7 +420,8 @@ describe('Anchor Render', () => {
|
||||
rerender(<Demo current={hash2} />);
|
||||
expect(container.querySelector(`.ant-anchor-link-title-active`)?.textContent).toBe(hash2);
|
||||
});
|
||||
it('should correct render when href is null', () => {
|
||||
|
||||
it('should render correctly when href is null', () => {
|
||||
expect(() => {
|
||||
render(
|
||||
<Anchor>
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
transform: translateX(-50%);
|
||||
transition: top 0.3s ease-in-out;
|
||||
|
||||
&.visible {
|
||||
&.@{ant-prefix}-ink-ball-visible {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@carousel-prefix-cls: ~'@{ant-prefix}-carousel';
|
||||
@carousel-dot-margin: 4px;
|
||||
|
||||
.@{carousel-prefix-cls} {
|
||||
.reset-component();
|
||||
@ -201,9 +202,7 @@
|
||||
box-sizing: content-box;
|
||||
width: @carousel-dot-width;
|
||||
height: @carousel-dot-height;
|
||||
margin: 0 2px;
|
||||
margin-right: 3px;
|
||||
margin-left: 3px;
|
||||
margin: 0 @carousel-dot-margin;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
text-indent: -999px;
|
||||
@ -211,6 +210,7 @@
|
||||
transition: all 0.5s;
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: @carousel-dot-height;
|
||||
@ -229,6 +229,15 @@
|
||||
&:focus {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -@carousel-dot-margin;
|
||||
right: -@carousel-dot-margin;
|
||||
bottom: -@carousel-dot-margin;
|
||||
left: -@carousel-dot-margin;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&.slick-active {
|
||||
@ -271,7 +280,7 @@
|
||||
li {
|
||||
width: @carousel-dot-height;
|
||||
height: @carousel-dot-width;
|
||||
margin: 4px 2px;
|
||||
margin: @carousel-dot-margin 0;
|
||||
vertical-align: baseline;
|
||||
|
||||
button {
|
||||
|
||||
@ -665,8 +665,8 @@
|
||||
|
||||
a {
|
||||
color: @disabled-color !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
> .@{menu-prefix-cls}-submenu-title {
|
||||
color: @disabled-color !important;
|
||||
cursor: not-allowed;
|
||||
|
||||
@ -122,7 +122,6 @@
|
||||
"classnames": "^2.2.6",
|
||||
"copy-to-clipboard": "^3.2.0",
|
||||
"lodash": "^4.17.21",
|
||||
"memoize-one": "^6.0.0",
|
||||
"moment": "^2.29.2",
|
||||
"rc-cascader": "~3.7.0",
|
||||
"rc-checkbox": "~2.3.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user