AnchorLink.js
3.17 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import * as React from 'react';
import classNames from 'classnames';
import { ConfigConsumer } from '../config-provider';
import AnchorContext from './context';
var AnchorLink = /*#__PURE__*/function (_React$Component) {
_inherits(AnchorLink, _React$Component);
var _super = _createSuper(AnchorLink);
function AnchorLink() {
var _this;
_classCallCheck(this, AnchorLink);
_this = _super.apply(this, arguments);
_this.handleClick = function (e) {
var _this$context = _this.context,
scrollTo = _this$context.scrollTo,
onClick = _this$context.onClick;
var _this$props = _this.props,
href = _this$props.href,
title = _this$props.title;
if (onClick) {
onClick(e, {
title: title,
href: href
});
}
scrollTo(href);
};
_this.renderAnchorLink = function (_ref) {
var getPrefixCls = _ref.getPrefixCls;
var _this$props2 = _this.props,
customizePrefixCls = _this$props2.prefixCls,
href = _this$props2.href,
title = _this$props2.title,
children = _this$props2.children,
className = _this$props2.className,
target = _this$props2.target;
var prefixCls = getPrefixCls('anchor', customizePrefixCls);
var active = _this.context.activeLink === href;
var wrapperClassName = classNames("".concat(prefixCls, "-link"), _defineProperty({}, "".concat(prefixCls, "-link-active"), active), className);
var titleClassName = classNames("".concat(prefixCls, "-link-title"), _defineProperty({}, "".concat(prefixCls, "-link-title-active"), active));
return /*#__PURE__*/React.createElement("div", {
className: wrapperClassName
}, /*#__PURE__*/React.createElement("a", {
className: titleClassName,
href: href,
title: typeof title === 'string' ? title : '',
target: target,
onClick: _this.handleClick
}, title), children);
};
return _this;
}
_createClass(AnchorLink, [{
key: "componentDidMount",
value: function componentDidMount() {
this.context.registerLink(this.props.href);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(_ref2) {
var prevHref = _ref2.href;
var href = this.props.href;
if (prevHref !== href) {
this.context.unregisterLink(prevHref);
this.context.registerLink(href);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.context.unregisterLink(this.props.href);
}
}, {
key: "render",
value: function render() {
return /*#__PURE__*/React.createElement(ConfigConsumer, null, this.renderAnchorLink);
}
}]);
return AnchorLink;
}(React.Component);
AnchorLink.defaultProps = {
href: '#'
};
AnchorLink.contextType = AnchorContext;
export default AnchorLink;