2016-11-09 14:43:12 +08:00
|
|
|
import classNames from 'classnames';
|
2022-06-22 14:57:09 +08:00
|
|
|
import * as React from 'react';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { ConfigConsumerProps } from '../config-provider';
|
|
|
|
import { ConfigConsumer } from '../config-provider';
|
2022-06-22 14:57:09 +08:00
|
|
|
import type { AntAnchor } from './Anchor';
|
2020-04-29 20:22:16 +08:00
|
|
|
import AnchorContext from './context';
|
2016-10-28 14:02:55 +08:00
|
|
|
|
|
|
|
export interface AnchorLinkProps {
|
2016-11-03 16:45:13 +08:00
|
|
|
prefixCls?: string;
|
2017-07-18 18:04:48 +08:00
|
|
|
href: string;
|
2019-09-03 20:40:39 +08:00
|
|
|
target?: string;
|
2017-03-29 10:29:43 +08:00
|
|
|
title: React.ReactNode;
|
2019-06-16 20:51:47 +08:00
|
|
|
children?: React.ReactNode;
|
2019-01-10 15:22:54 +08:00
|
|
|
className?: string;
|
2016-10-28 14:02:55 +08:00
|
|
|
}
|
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const AnchorLink: React.FC<AnchorLinkProps> = (props) => {
|
2022-10-17 21:36:56 +08:00
|
|
|
const { href = '#', title, prefixCls: customizePrefixCls, children, className, target } = props;
|
2016-11-14 15:43:55 +08:00
|
|
|
|
2022-10-17 21:36:56 +08:00
|
|
|
const context = React.useContext<AntAnchor | undefined>(AnchorContext);
|
2016-11-14 15:43:55 +08:00
|
|
|
|
2022-10-17 21:36:56 +08:00
|
|
|
const { registerLink, unregisterLink, scrollTo, onClick, activeLink } = context || {};
|
2018-07-16 14:20:41 +08:00
|
|
|
|
2022-10-17 21:36:56 +08:00
|
|
|
React.useEffect(() => {
|
|
|
|
registerLink?.(href);
|
|
|
|
return () => {
|
|
|
|
unregisterLink?.(href);
|
|
|
|
};
|
2022-10-30 14:35:45 +08:00
|
|
|
}, [href, registerLink, unregisterLink]);
|
2016-11-09 14:22:38 +08:00
|
|
|
|
2022-12-06 18:18:38 +08:00
|
|
|
const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
|
2021-02-19 18:26:53 +08:00
|
|
|
onClick?.(e, { title, href });
|
2022-10-17 21:36:56 +08:00
|
|
|
scrollTo?.(href);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2016-11-09 14:40:31 +08:00
|
|
|
|
2022-10-17 21:36:56 +08:00
|
|
|
return (
|
|
|
|
<ConfigConsumer>
|
|
|
|
{({ getPrefixCls }: ConfigConsumerProps) => {
|
|
|
|
const prefixCls = getPrefixCls('anchor', customizePrefixCls);
|
|
|
|
const active = activeLink === href;
|
|
|
|
const wrapperClassName = classNames(`${prefixCls}-link`, className, {
|
|
|
|
[`${prefixCls}-link-active`]: active,
|
|
|
|
});
|
|
|
|
const titleClassName = classNames(`${prefixCls}-link-title`, {
|
|
|
|
[`${prefixCls}-link-title-active`]: active,
|
|
|
|
});
|
|
|
|
return (
|
|
|
|
<div className={wrapperClassName}>
|
|
|
|
<a
|
|
|
|
className={titleClassName}
|
|
|
|
href={href}
|
|
|
|
title={typeof title === 'string' ? title : ''}
|
|
|
|
target={target}
|
|
|
|
onClick={handleClick}
|
|
|
|
>
|
|
|
|
{title}
|
|
|
|
</a>
|
|
|
|
{children}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
</ConfigConsumer>
|
|
|
|
);
|
|
|
|
};
|
2019-02-02 18:30:40 +08:00
|
|
|
|
|
|
|
export default AnchorLink;
|