ant-design/components/anchor/Anchor.tsx

381 lines
11 KiB
TypeScript
Raw Normal View History

import classNames from 'classnames';
import useEvent from 'rc-util/lib/hooks/useEvent';
import * as React from 'react';
import scrollIntoView from 'scroll-into-view-if-needed';
import getScroll from '../_util/getScroll';
2022-06-22 14:57:09 +08:00
import scrollTo from '../_util/scrollTo';
import warning from '../_util/warning';
import Affix from '../affix';
import type { ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
import type { AnchorLinkBaseProps } from './AnchorLink';
import AnchorLink from './AnchorLink';
import AnchorContext from './context';
import useStyle from './style';
export interface AnchorLinkItemProps extends AnchorLinkBaseProps {
key: React.Key;
children?: AnchorLinkItemProps[];
}
export type AnchorContainer = HTMLElement | Window;
2018-03-30 15:55:54 +08:00
function getDefaultContainer() {
return window;
}
2018-03-30 15:55:54 +08:00
function getOffsetTop(element: HTMLElement, container: AnchorContainer): number {
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;
}
return rect.top;
}
const sharpMatcherRegex = /#([\S ]+)$/;
interface Section {
link: string;
top: number;
}
export interface AnchorProps {
prefixCls?: string;
className?: string;
rootClassName?: string;
style?: React.CSSProperties;
/**
* @deprecated Please use `items` instead.
*/
children?: React.ReactNode;
offsetTop?: number;
bounds?: number;
affix?: boolean;
showInkInFixed?: boolean;
2018-03-30 15:55:54 +08:00
getContainer?: () => AnchorContainer;
/** Return customize highlight anchor */
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;
/** Listening event when scrolling change active link */
onChange?: (currentActiveLink: string) => void;
items?: AnchorLinkItemProps[];
direction?: AnchorDirection;
replace?: boolean;
}
interface InternalAnchorProps extends AnchorProps {
anchorPrefixCls: string;
rootClassName: string;
}
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;
}
export type AnchorDirection = 'vertical' | 'horizontal';
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;
direction: AnchorDirection;
}
const AnchorContent: React.FC<InternalAnchorProps> = (props) => {
const {
2022-11-07 23:32:46 +08:00
rootClassName,
anchorPrefixCls: prefixCls,
className = '',
style,
offsetTop,
affix = true,
showInkInFixed = false,
children,
items,
direction: anchorDirection = 'vertical',
bounds,
targetOffset,
onClick,
onChange,
getContainer,
getCurrentAnchor,
replace,
} = props;
// =================== Warning =====================
if (process.env.NODE_ENV !== 'production') {
warning(!children, 'Anchor', '`Anchor children` is deprecated. Please use `items` instead.');
}
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.',
);
}
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);
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));
}
});
const updateInk = () => {
const linkNode = wrapperRef.current?.querySelector<HTMLElement>(
`.${prefixCls}-link-title-active`,
);
if (linkNode && spanLinkNode.current) {
const { style: inkStyle } = spanLinkNode.current;
2023-03-19 23:20:16 +08:00
const horizontalAnchor = anchorDirection === 'horizontal';
inkStyle.top = horizontalAnchor ? '' : `${linkNode.offsetTop + linkNode.clientHeight / 2}px`;
inkStyle.height = horizontalAnchor ? '' : `${linkNode.clientHeight}px`;
inkStyle.left = horizontalAnchor ? `${linkNode.offsetLeft}px` : '';
inkStyle.width = horizontalAnchor ? `${linkNode.clientWidth}px` : '';
if (horizontalAnchor) {
scrollIntoView(linkNode, {
scrollMode: 'if-needed',
block: 'nearest',
});
}
}
};
const getInternalCurrentAnchor = (_links: string[], _offsetTop = 0, _bounds = 5): string => {
const linkSections: Section[] = [];
const container = getCurrentContainer();
_links.forEach((link) => {
const sharpLinkMatch = sharpMatcherRegex.exec(link?.toString());
2018-12-07 20:02:01 +08:00
if (!sharpLinkMatch) {
return;
}
const target = document.getElementById(sharpLinkMatch[1]);
2018-03-30 15:55:54 +08:00
if (target) {
const top = getOffsetTop(target, container);
if (top < _offsetTop + _bounds) {
linkSections.push({ link, top });
2018-03-30 15:55:54 +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));
return maxSection.link;
}
return '';
};
2019-08-14 17:07:58 +08:00
const setCurrentActiveLink = useEvent((link: string) => {
if (activeLinkRef.current === link) {
2019-08-14 17:07:58 +08:00
return;
}
// 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
// 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
const handleScroll = React.useCallback(() => {
if (animating.current) {
return;
}
if (typeof getCurrentAnchor === 'function') {
2019-08-05 18:38:10 +08:00
return;
}
const currentActiveLink = getInternalCurrentAnchor(
links,
targetOffset !== undefined ? targetOffset : offsetTop || 0,
bounds,
);
setCurrentActiveLink(currentActiveLink);
}, [dependencyListItem, targetOffset, offsetTop]);
const handleScrollTo = React.useCallback<(link: string) => void>(
(link) => {
setCurrentActiveLink(link);
const sharpLinkMatch = sharpMatcherRegex.exec(link);
if (!sharpLinkMatch) {
return;
}
const targetElement = document.getElementById(sharpLinkMatch[1]);
if (!targetElement) {
return;
}
const container = getCurrentContainer();
const scrollTop = getScroll(container, true);
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],
);
const wrapperClass = classNames(
2022-11-07 23:32:46 +08:00
rootClassName,
`${prefixCls}-wrapper`,
{
[`${prefixCls}-wrapper-horizontal`]: anchorDirection === 'horizontal',
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
);
const anchorClass = classNames(prefixCls, {
[`${prefixCls}-fixed`]: !affix && !showInkInFixed,
});
const inkClass = classNames(`${prefixCls}-ink`, {
[`${prefixCls}-ink-visible`]: activeLink,
});
const wrapperStyle: React.CSSProperties = {
maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
...style,
};
const createNestedLink = (options?: AnchorLinkItemProps[]) =>
Array.isArray(options)
? options.map((item) => (
<AnchorLink replace={replace} {...item} key={item.key}>
{anchorDirection === 'vertical' && createNestedLink(item.children)}
</AnchorLink>
))
: null;
const anchorContent = (
<div ref={wrapperRef} className={wrapperClass} style={wrapperStyle}>
<div className={anchorClass}>
<span className={inkClass} ref={spanLinkNode} />
{'items' in props ? createNestedLink(items) : children}
</div>
</div>
);
React.useEffect(() => {
const scrollContainer = getCurrentContainer();
handleScroll();
scrollContainer?.addEventListener('scroll', handleScroll);
return () => {
scrollContainer?.removeEventListener('scroll', handleScroll);
};
}, [dependencyListItem]);
React.useEffect(() => {
if (typeof getCurrentAnchor === 'function') {
setCurrentActiveLink(getCurrentAnchor(activeLinkRef.current || ''));
}
}, [getCurrentAnchor]);
React.useEffect(() => {
updateInk();
}, [anchorDirection, getCurrentAnchor, dependencyListItem, activeLink]);
const memoizedContextValue = React.useMemo<AntAnchor>(
() => ({
registerLink,
unregisterLink,
scrollTo: handleScrollTo,
activeLink,
onClick,
direction: anchorDirection,
}),
[activeLink, onClick, handleScrollTo, anchorDirection],
);
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, rootClassName } = props;
const { getPrefixCls } = React.useContext<ConfigConsumerProps>(ConfigContext);
const anchorPrefixCls = getPrefixCls('anchor', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(anchorPrefixCls);
2022-11-07 23:32:46 +08:00
return wrapSSR(
<AnchorContent
{...props}
rootClassName={classNames(hashId, rootClassName)}
anchorPrefixCls={anchorPrefixCls}
/>,
2022-11-07 23:32:46 +08:00
);
};
if (process.env.NODE_ENV !== 'production') {
Anchor.displayName = 'Anchor';
}
export default Anchor;