AnchorLink.js 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. "use client";
  2. import * as React from 'react';
  3. import classNames from 'classnames';
  4. import { devUseWarning } from '../_util/warning';
  5. import { ConfigContext } from '../config-provider';
  6. import AnchorContext from './context';
  7. const AnchorLink = props => {
  8. const {
  9. href,
  10. title,
  11. prefixCls: customizePrefixCls,
  12. children,
  13. className,
  14. target,
  15. replace
  16. } = props;
  17. const context = React.useContext(AnchorContext);
  18. const {
  19. registerLink,
  20. unregisterLink,
  21. scrollTo,
  22. onClick,
  23. activeLink,
  24. direction
  25. } = context || {};
  26. React.useEffect(() => {
  27. registerLink === null || registerLink === void 0 ? void 0 : registerLink(href);
  28. return () => {
  29. unregisterLink === null || unregisterLink === void 0 ? void 0 : unregisterLink(href);
  30. };
  31. }, [href]);
  32. const handleClick = e => {
  33. onClick === null || onClick === void 0 ? void 0 : onClick(e, {
  34. title,
  35. href
  36. });
  37. scrollTo === null || scrollTo === void 0 ? void 0 : scrollTo(href);
  38. // Support clicking on an anchor does not record history.
  39. if (e.defaultPrevented) {
  40. return;
  41. }
  42. const isExternalLink = href.startsWith('http://') || href.startsWith('https://');
  43. // Support external link
  44. if (isExternalLink) {
  45. if (replace) {
  46. e.preventDefault();
  47. window.location.replace(href);
  48. }
  49. return;
  50. }
  51. // Handling internal anchor link
  52. e.preventDefault();
  53. const historyMethod = replace ? 'replaceState' : 'pushState';
  54. window.history[historyMethod](null, '', href);
  55. };
  56. // =================== Warning =====================
  57. if (process.env.NODE_ENV !== 'production') {
  58. const warning = devUseWarning('Anchor.Link');
  59. process.env.NODE_ENV !== "production" ? warning(!children || direction !== 'horizontal', 'usage', '`Anchor.Link children` is not supported when `Anchor` direction is horizontal') : void 0;
  60. }
  61. const {
  62. getPrefixCls
  63. } = React.useContext(ConfigContext);
  64. const prefixCls = getPrefixCls('anchor', customizePrefixCls);
  65. const active = activeLink === href;
  66. const wrapperClassName = classNames(`${prefixCls}-link`, className, {
  67. [`${prefixCls}-link-active`]: active
  68. });
  69. const titleClassName = classNames(`${prefixCls}-link-title`, {
  70. [`${prefixCls}-link-title-active`]: active
  71. });
  72. return /*#__PURE__*/React.createElement("div", {
  73. className: wrapperClassName
  74. }, /*#__PURE__*/React.createElement("a", {
  75. className: titleClassName,
  76. href: href,
  77. title: typeof title === 'string' ? title : '',
  78. target: target,
  79. onClick: handleClick
  80. }, title), direction !== 'horizontal' ? children : null);
  81. };
  82. export default AnchorLink;