2017-07-18 18:04:48 +08:00
|
|
|
import classNames from 'classnames';
|
2023-03-10 15:54:05 +08:00
|
|
|
import useEvent from 'rc-util/lib/hooks/useEvent';
|
2022-06-22 14:57:09 +08:00
|
|
|
import * as React from 'react';
|
2022-12-27 17:14:35 +08:00
|
|
|
import scrollIntoView from 'scroll-into-view-if-needed';
|
|
|
|
|
2017-07-18 18:04:48 +08:00
|
|
|
import Affix from '../affix';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { ConfigConsumerProps } from '../config-provider';
|
|
|
|
import { ConfigContext } from '../config-provider';
|
2017-07-18 18:04:48 +08:00
|
|
|
import getScroll from '../_util/getScroll';
|
2022-06-22 14:57:09 +08:00
|
|
|
import scrollTo from '../_util/scrollTo';
|
2022-11-30 15:55:43 +08:00
|
|
|
import warning from '../_util/warning';
|
|
|
|
import type { AnchorLinkBaseProps } from './AnchorLink';
|
|
|
|
import AnchorLink from './AnchorLink';
|
2023-01-20 11:03:50 +08:00
|
|
|
import AnchorContext from './context';
|
2017-07-18 18:04:48 +08:00
|
|
|
|
2022-04-29 17:23:23 +08:00
|
|
|
import useStyle from './style';
|
|
|
|
|
2022-11-30 15:55:43 +08:00
|
|
|
export interface AnchorLinkItemProps extends AnchorLinkBaseProps {
|
|
|
|
key: React.Key;
|
|
|
|
children?: AnchorLinkItemProps[];
|
|
|
|
}
|
|
|
|
|
2020-09-16 11:43:55 +08:00
|
|
|
export type AnchorContainer = HTMLElement | Window;
|
|
|
|
|
2018-03-30 15:55:54 +08:00
|
|
|
function getDefaultContainer() {
|
2017-07-24 09:58:56 +08:00
|
|
|
return window;
|
2017-07-18 18:04:48 +08:00
|
|
|
}
|
|
|
|
|
2018-03-30 15:55:54 +08:00
|
|
|
function getOffsetTop(element: HTMLElement, container: AnchorContainer): number {
|
2017-07-18 18:04:48 +08:00
|
|
|
if (!element.getClientRects().length) {
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
const rect = element.getBoundingClientRect();
|
|
|
|
|
|
|
|
if (rect.width || rect.height) {
|
2018-03-30 15:55:54 +08:00
|
|
|
if (container === window) {
|
2018-09-30 16:07:01 +08:00
|
|
|
container = element.ownerDocument!.documentElement!;
|
2018-03-30 15:55:54 +08:00
|
|
|
return rect.top - container.clientTop;
|
|
|
|
}
|
|
|
|
return rect.top - (container as HTMLElement).getBoundingClientRect().top;
|
2017-07-18 18:04:48 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
return rect.top;
|
|
|
|
}
|
|
|
|
|
2023-02-23 21:56:43 +08:00
|
|
|
const sharpMatcherRegex = /#([\S ]+)$/;
|
2017-07-18 18:04:48 +08:00
|
|
|
|
2022-10-17 21:36:56 +08:00
|
|
|
interface Section {
|
2018-08-28 20:20:46 +08:00
|
|
|
link: string;
|
2017-07-18 18:04:48 +08:00
|
|
|
top: number;
|
2022-10-17 21:36:56 +08:00
|
|
|
}
|
2017-07-18 18:04:48 +08:00
|
|
|
|
|
|
|
export interface AnchorProps {
|
|
|
|
prefixCls?: string;
|
|
|
|
className?: string;
|
2023-01-20 11:03:50 +08:00
|
|
|
rootClassName?: string;
|
2017-07-18 18:04:48 +08:00
|
|
|
style?: React.CSSProperties;
|
2022-11-30 15:55:43 +08:00
|
|
|
/**
|
|
|
|
* @deprecated Please use `items` instead.
|
|
|
|
*/
|
2017-07-18 18:04:48 +08:00
|
|
|
children?: React.ReactNode;
|
|
|
|
offsetTop?: number;
|
|
|
|
bounds?: number;
|
|
|
|
affix?: boolean;
|
|
|
|
showInkInFixed?: boolean;
|
2018-03-30 15:55:54 +08:00
|
|
|
getContainer?: () => AnchorContainer;
|
2019-07-23 19:37:32 +08:00
|
|
|
/** Return customize highlight anchor */
|
2022-03-31 11:17:17 +08:00
|
|
|
getCurrentAnchor?: (activeLink: string) => string;
|
2018-12-07 20:02:01 +08:00
|
|
|
onClick?: (
|
|
|
|
e: React.MouseEvent<HTMLElement>,
|
|
|
|
link: { title: React.ReactNode; href: string },
|
|
|
|
) => void;
|
2019-07-23 20:02:40 +08:00
|
|
|
/** Scroll to target offset value, if none, it's offsetTop prop value or 0. */
|
|
|
|
targetOffset?: number;
|
2019-09-06 19:54:13 +08:00
|
|
|
/** Listening event when scrolling change active link */
|
|
|
|
onChange?: (currentActiveLink: string) => void;
|
2022-11-30 15:55:43 +08:00
|
|
|
items?: AnchorLinkItemProps[];
|
2022-12-27 17:14:35 +08:00
|
|
|
direction?: AnchorDirection;
|
2018-08-28 20:20:46 +08:00
|
|
|
}
|
|
|
|
|
2022-04-19 16:44:47 +08:00
|
|
|
interface InternalAnchorProps extends AnchorProps {
|
|
|
|
anchorPrefixCls: string;
|
2022-04-29 17:23:23 +08:00
|
|
|
rootClassName: string;
|
2022-04-19 16:44:47 +08:00
|
|
|
}
|
|
|
|
|
2018-08-28 20:20:46 +08:00
|
|
|
export interface AnchorState {
|
|
|
|
activeLink: null | string;
|
2018-03-30 15:55:54 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface AnchorDefaultProps extends AnchorProps {
|
|
|
|
prefixCls: string;
|
|
|
|
affix: boolean;
|
|
|
|
showInkInFixed: boolean;
|
|
|
|
getContainer: () => AnchorContainer;
|
2017-07-18 18:04:48 +08:00
|
|
|
}
|
|
|
|
|
2022-12-27 17:14:35 +08:00
|
|
|
export type AnchorDirection = 'vertical' | 'horizontal';
|
|
|
|
|
2018-08-28 20:20:46 +08:00
|
|
|
export interface AntAnchor {
|
|
|
|
registerLink: (link: string) => void;
|
|
|
|
unregisterLink: (link: string) => void;
|
|
|
|
activeLink: string | null;
|
|
|
|
scrollTo: (link: string) => void;
|
2018-12-07 20:02:01 +08:00
|
|
|
onClick?: (
|
2022-12-06 18:18:38 +08:00
|
|
|
e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
|
2018-12-07 20:02:01 +08:00
|
|
|
link: { title: React.ReactNode; href: string },
|
|
|
|
) => void;
|
2022-12-27 17:14:35 +08:00
|
|
|
direction: AnchorDirection;
|
2018-08-28 20:20:46 +08:00
|
|
|
}
|
|
|
|
|
2022-11-17 16:49:09 +08:00
|
|
|
const AnchorContent: React.FC<InternalAnchorProps> = (props) => {
|
2022-10-30 14:35:45 +08:00
|
|
|
const {
|
2022-11-07 23:32:46 +08:00
|
|
|
rootClassName,
|
2022-10-30 14:35:45 +08:00
|
|
|
anchorPrefixCls: prefixCls,
|
|
|
|
className = '',
|
|
|
|
style,
|
|
|
|
offsetTop,
|
|
|
|
affix = true,
|
|
|
|
showInkInFixed = false,
|
|
|
|
children,
|
2022-11-30 15:55:43 +08:00
|
|
|
items,
|
2022-12-27 17:14:35 +08:00
|
|
|
direction: anchorDirection = 'vertical',
|
2022-10-30 14:35:45 +08:00
|
|
|
bounds,
|
|
|
|
targetOffset,
|
|
|
|
onClick,
|
|
|
|
onChange,
|
|
|
|
getContainer,
|
|
|
|
getCurrentAnchor,
|
|
|
|
} = props;
|
|
|
|
|
2022-11-30 15:55:43 +08:00
|
|
|
// =================== Warning =====================
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
warning(!children, 'Anchor', '`Anchor children` is deprecated. Please use `items` instead.');
|
|
|
|
}
|
|
|
|
|
2022-12-27 17:14:35 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
warning(
|
|
|
|
!(anchorDirection === 'horizontal' && items?.some((n) => 'children' in n)),
|
|
|
|
'Anchor',
|
|
|
|
'`Anchor items#children` is not supported when `Anchor` direction is horizontal.',
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
const [links, setLinks] = React.useState<string[]>([]);
|
|
|
|
const [activeLink, setActiveLink] = React.useState<string | null>(null);
|
|
|
|
const activeLinkRef = React.useRef<string | null>(activeLink);
|
|
|
|
|
|
|
|
const wrapperRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
const spanLinkNode = React.useRef<HTMLSpanElement>(null);
|
|
|
|
const animating = React.useRef<boolean>(false);
|
|
|
|
|
|
|
|
const { direction, getTargetContainer } = React.useContext<ConfigConsumerProps>(ConfigContext);
|
|
|
|
|
|
|
|
const getCurrentContainer = getContainer ?? getTargetContainer ?? getDefaultContainer;
|
|
|
|
|
|
|
|
const dependencyListItem: React.DependencyList[number] = JSON.stringify(links);
|
|
|
|
|
2023-03-10 15:54:05 +08:00
|
|
|
const registerLink = useEvent<AntAnchor['registerLink']>((link) => {
|
|
|
|
if (!links.includes(link)) {
|
|
|
|
setLinks((prev) => [...prev, link]);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
const unregisterLink = useEvent<AntAnchor['unregisterLink']>((link) => {
|
|
|
|
if (links.includes(link)) {
|
|
|
|
setLinks((prev) => prev.filter((i) => i !== link));
|
|
|
|
}
|
|
|
|
});
|
2017-07-18 18:04:48 +08:00
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
const updateInk = () => {
|
|
|
|
const linkNode = wrapperRef.current?.querySelector<HTMLElement>(
|
|
|
|
`.${prefixCls}-link-title-active`,
|
|
|
|
);
|
|
|
|
if (linkNode && spanLinkNode.current) {
|
2022-12-27 17:14:35 +08:00
|
|
|
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`;
|
|
|
|
scrollIntoView(linkNode, {
|
|
|
|
scrollMode: 'if-needed',
|
|
|
|
block: 'nearest',
|
|
|
|
});
|
|
|
|
}
|
2019-07-13 10:43:35 +08:00
|
|
|
}
|
2022-10-30 14:35:45 +08:00
|
|
|
};
|
2019-07-24 22:56:20 +08:00
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
const getInternalCurrentAnchor = (_links: string[], _offsetTop = 0, _bounds = 5): string => {
|
|
|
|
const linkSections: Section[] = [];
|
|
|
|
const container = getCurrentContainer();
|
2022-11-17 16:49:09 +08:00
|
|
|
_links.forEach((link) => {
|
2023-02-23 21:56:43 +08:00
|
|
|
const sharpLinkMatch = sharpMatcherRegex.exec(link?.toString());
|
2018-12-07 20:02:01 +08:00
|
|
|
if (!sharpLinkMatch) {
|
|
|
|
return;
|
|
|
|
}
|
2018-01-03 14:32:32 +08:00
|
|
|
const target = document.getElementById(sharpLinkMatch[1]);
|
2018-03-30 15:55:54 +08:00
|
|
|
if (target) {
|
|
|
|
const top = getOffsetTop(target, container);
|
2022-10-30 14:35:45 +08:00
|
|
|
if (top < _offsetTop + _bounds) {
|
2022-10-17 21:36:56 +08:00
|
|
|
linkSections.push({ link, top });
|
2018-03-30 15:55:54 +08:00
|
|
|
}
|
2017-07-18 18:04:48 +08:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
if (linkSections.length) {
|
2018-12-07 20:02:01 +08:00
|
|
|
const maxSection = linkSections.reduce((prev, curr) => (curr.top > prev.top ? curr : prev));
|
2017-07-18 18:04:48 +08:00
|
|
|
return maxSection.link;
|
|
|
|
}
|
|
|
|
return '';
|
2022-10-30 14:35:45 +08:00
|
|
|
};
|
2019-08-14 17:07:58 +08:00
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
const setCurrentActiveLink = (link: string) => {
|
|
|
|
if (activeLinkRef.current === link) {
|
2019-08-14 17:07:58 +08:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/30584
|
|
|
|
const newLink = typeof getCurrentAnchor === 'function' ? getCurrentAnchor(link) : link;
|
|
|
|
setActiveLink(newLink);
|
|
|
|
activeLinkRef.current = newLink;
|
2019-08-14 17:07:58 +08:00
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
// onChange should respect the original link (which may caused by
|
|
|
|
// window scroll or user click), not the new link
|
|
|
|
onChange?.(link);
|
2019-08-05 18:38:10 +08:00
|
|
|
};
|
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
const handleScroll = React.useCallback(() => {
|
|
|
|
if (animating.current) {
|
2021-05-20 21:36:53 +08:00
|
|
|
return;
|
2019-09-06 19:54:13 +08:00
|
|
|
}
|
2022-10-30 14:35:45 +08:00
|
|
|
if (typeof getCurrentAnchor === 'function') {
|
2019-08-05 18:38:10 +08:00
|
|
|
return;
|
|
|
|
}
|
2022-10-30 14:35:45 +08:00
|
|
|
const currentActiveLink = getInternalCurrentAnchor(
|
|
|
|
links,
|
2019-08-04 14:32:31 +08:00
|
|
|
targetOffset !== undefined ? targetOffset : offsetTop || 0,
|
|
|
|
bounds,
|
|
|
|
);
|
2022-10-30 14:35:45 +08:00
|
|
|
setCurrentActiveLink(currentActiveLink);
|
|
|
|
}, [dependencyListItem, targetOffset, offsetTop]);
|
|
|
|
|
|
|
|
const handleScrollTo = React.useCallback<(link: string) => void>(
|
2022-11-17 16:49:09 +08:00
|
|
|
(link) => {
|
2022-10-30 14:35:45 +08:00
|
|
|
setCurrentActiveLink(link);
|
|
|
|
const container = getCurrentContainer();
|
|
|
|
const scrollTop = getScroll(container, true);
|
2023-02-23 21:56:43 +08:00
|
|
|
const sharpLinkMatch = sharpMatcherRegex.exec(link);
|
2022-10-30 14:35:45 +08:00
|
|
|
if (!sharpLinkMatch) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const targetElement = document.getElementById(sharpLinkMatch[1]);
|
|
|
|
if (!targetElement) {
|
|
|
|
return;
|
|
|
|
}
|
2017-07-18 18:04:48 +08:00
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
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],
|
2022-01-14 18:34:27 +08:00
|
|
|
);
|
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
const wrapperClass = classNames(
|
2022-11-07 23:32:46 +08:00
|
|
|
rootClassName,
|
2022-10-30 14:35:45 +08:00
|
|
|
`${prefixCls}-wrapper`,
|
|
|
|
{
|
2022-12-27 17:14:35 +08:00
|
|
|
[`${prefixCls}-wrapper-horizontal`]: anchorDirection === 'horizontal',
|
2022-10-30 14:35:45 +08:00
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
|
|
},
|
|
|
|
className,
|
|
|
|
);
|
2017-07-18 18:04:48 +08:00
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
const anchorClass = classNames(prefixCls, {
|
|
|
|
[`${prefixCls}-fixed`]: !affix && !showInkInFixed,
|
|
|
|
});
|
2017-07-18 18:04:48 +08:00
|
|
|
|
2022-12-27 17:14:35 +08:00
|
|
|
const inkClass = classNames(`${prefixCls}-ink`, {
|
|
|
|
[`${prefixCls}-ink-visible`]: activeLink,
|
|
|
|
});
|
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
const wrapperStyle: React.CSSProperties = {
|
|
|
|
maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
|
|
|
|
...style,
|
|
|
|
};
|
2017-12-28 13:13:27 +08:00
|
|
|
|
2022-11-30 15:55:43 +08:00
|
|
|
const createNestedLink = (options?: AnchorLinkItemProps[]) =>
|
|
|
|
Array.isArray(options)
|
|
|
|
? options.map((item) => (
|
|
|
|
<AnchorLink {...item} key={item.key}>
|
2022-12-27 17:14:35 +08:00
|
|
|
{anchorDirection === 'vertical' && createNestedLink(item.children)}
|
2022-11-30 15:55:43 +08:00
|
|
|
</AnchorLink>
|
|
|
|
))
|
|
|
|
: null;
|
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
const anchorContent = (
|
|
|
|
<div ref={wrapperRef} className={wrapperClass} style={wrapperStyle}>
|
|
|
|
<div className={anchorClass}>
|
2022-12-27 17:14:35 +08:00
|
|
|
<span className={inkClass} ref={spanLinkNode} />
|
2022-11-30 15:55:43 +08:00
|
|
|
{'items' in props ? createNestedLink(items) : children}
|
2017-07-18 18:04:48 +08:00
|
|
|
</div>
|
2022-10-30 14:35:45 +08:00
|
|
|
</div>
|
|
|
|
);
|
2017-07-18 18:04:48 +08:00
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
React.useEffect(() => {
|
|
|
|
const scrollContainer = getCurrentContainer();
|
|
|
|
handleScroll();
|
2022-12-30 17:15:54 +08:00
|
|
|
scrollContainer?.addEventListener('scroll', handleScroll);
|
2022-10-30 14:35:45 +08:00
|
|
|
return () => {
|
2022-12-30 17:15:54 +08:00
|
|
|
scrollContainer?.removeEventListener('scroll', handleScroll);
|
2022-10-30 14:35:45 +08:00
|
|
|
};
|
|
|
|
}, [dependencyListItem]);
|
2022-10-17 21:36:56 +08:00
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
React.useEffect(() => {
|
|
|
|
if (typeof getCurrentAnchor === 'function') {
|
|
|
|
setCurrentActiveLink(getCurrentAnchor(activeLinkRef.current || ''));
|
|
|
|
}
|
|
|
|
}, [getCurrentAnchor]);
|
|
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
|
updateInk();
|
2022-12-27 17:14:35 +08:00
|
|
|
}, [anchorDirection, getCurrentAnchor, dependencyListItem, activeLink]);
|
2022-10-30 14:35:45 +08:00
|
|
|
|
|
|
|
const memoizedContextValue = React.useMemo<AntAnchor>(
|
|
|
|
() => ({
|
|
|
|
registerLink,
|
|
|
|
unregisterLink,
|
|
|
|
scrollTo: handleScrollTo,
|
|
|
|
activeLink,
|
|
|
|
onClick,
|
2022-12-27 17:14:35 +08:00
|
|
|
direction: anchorDirection,
|
2022-10-30 14:35:45 +08:00
|
|
|
}),
|
2022-12-27 17:14:35 +08:00
|
|
|
[activeLink, onClick, handleScrollTo, anchorDirection],
|
2022-10-30 14:35:45 +08:00
|
|
|
);
|
2022-10-17 21:36:56 +08:00
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
return (
|
|
|
|
<AnchorContext.Provider value={memoizedContextValue}>
|
|
|
|
{affix ? (
|
|
|
|
<Affix offsetTop={offsetTop} target={getCurrentContainer}>
|
|
|
|
{anchorContent}
|
|
|
|
</Affix>
|
|
|
|
) : (
|
|
|
|
anchorContent
|
|
|
|
)}
|
|
|
|
</AnchorContext.Provider>
|
|
|
|
);
|
|
|
|
};
|
2022-04-19 16:44:47 +08:00
|
|
|
|
2022-11-17 16:49:09 +08:00
|
|
|
const Anchor: React.FC<AnchorProps> = (props) => {
|
2023-01-20 11:03:50 +08:00
|
|
|
const { prefixCls: customizePrefixCls, rootClassName } = props;
|
2022-10-30 14:35:45 +08:00
|
|
|
const { getPrefixCls } = React.useContext<ConfigConsumerProps>(ConfigContext);
|
2022-04-19 16:44:47 +08:00
|
|
|
const anchorPrefixCls = getPrefixCls('anchor', customizePrefixCls);
|
|
|
|
|
2022-04-29 17:23:23 +08:00
|
|
|
const [wrapSSR, hashId] = useStyle(anchorPrefixCls);
|
|
|
|
|
2022-11-07 23:32:46 +08:00
|
|
|
return wrapSSR(
|
2023-01-20 11:03:50 +08:00
|
|
|
<AnchorContent
|
|
|
|
{...props}
|
|
|
|
rootClassName={classNames(hashId, rootClassName)}
|
|
|
|
anchorPrefixCls={anchorPrefixCls}
|
|
|
|
/>,
|
2022-11-07 23:32:46 +08:00
|
|
|
);
|
2022-10-30 14:35:45 +08:00
|
|
|
};
|
2022-04-19 16:44:47 +08:00
|
|
|
|
2023-01-08 21:30:41 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
Anchor.displayName = 'Anchor';
|
|
|
|
}
|
|
|
|
|
2022-10-30 14:35:45 +08:00
|
|
|
export default Anchor;
|