mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 13:37:52 +08:00
4eff22497d
* feat: AnchorInk * feat: update * feat: update ink * test: add test * feat: handle with nested link * feat: improve * fix: lint * feat: get direction from context in AnchorLink * docs: update demo * test: update snapshot * test: update snapshot * test: update snapshot * test: update test cases * test: update snapshot * test: update snapshots * test: update snapshots * test: update test cases * test: update test cases * docs: update * test: improve * docs: update demo * doc: update demos * doc: update demos again * feat: use scroll-into-view-if-needed * fix: hide scrollbar * docs: update demos * fix: active transition for horizontal anchor * chore: fix terser (#39617) * chore: fix terser * chore: clean up * test: update snapshot * feat: improve code style * feat: anchor ink improvement * feat: improve code style * fix: lint issue * test: update snapshots * docs: simplified the demo * feat: Merge the AnchorInk component back into the Anchor component * feat: Adjust DOM order * test: update snapshots * docs: Improve the document * feat: simplify css classnames * test: update snapshots Co-authored-by: 二货爱吃白萝卜 <smith3816@gmail.com>
80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import classNames from 'classnames';
|
|
import * as React from 'react';
|
|
import type { ConfigConsumerProps } from '../config-provider';
|
|
import { ConfigConsumer } from '../config-provider';
|
|
import warning from '../_util/warning';
|
|
import type { AntAnchor } from './Anchor';
|
|
import AnchorContext from './context';
|
|
|
|
export interface AnchorLinkBaseProps {
|
|
prefixCls?: string;
|
|
href: string;
|
|
target?: string;
|
|
title: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export interface AnchorLinkProps extends AnchorLinkBaseProps {
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
const AnchorLink: React.FC<AnchorLinkProps> = (props) => {
|
|
const { href = '#', title, prefixCls: customizePrefixCls, children, className, target } = props;
|
|
|
|
const context = React.useContext<AntAnchor | undefined>(AnchorContext);
|
|
|
|
const { registerLink, unregisterLink, scrollTo, onClick, activeLink, direction } = context || {};
|
|
|
|
React.useEffect(() => {
|
|
registerLink?.(href);
|
|
return () => {
|
|
unregisterLink?.(href);
|
|
};
|
|
}, [href, registerLink, unregisterLink]);
|
|
|
|
const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
|
|
onClick?.(e, { title, href });
|
|
scrollTo?.(href);
|
|
};
|
|
|
|
// =================== Warning =====================
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
warning(
|
|
!children || direction !== 'horizontal',
|
|
'Anchor.Link',
|
|
'`Anchor.Link children` is not supported when `Anchor` direction is horizontal',
|
|
);
|
|
}
|
|
|
|
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>
|
|
{direction !== 'horizontal' ? children : null}
|
|
</div>
|
|
);
|
|
}}
|
|
</ConfigConsumer>
|
|
);
|
|
};
|
|
|
|
export default AnchorLink;
|