react-life-design
Version:
Life Design UI components
77 lines • 3.51 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Anchor_styled_1 = require("./Anchor.styled");
var Anchor = (function (_super) {
__extends(Anchor, _super);
function Anchor() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
active: null,
axisZ: false,
};
_this.ref = React.createRef();
_this.setAxisZ = function () {
var top = _this.ref.current.getBoundingClientRect().top;
if (top === 0) {
_this.setState({ axisZ: true });
}
else {
_this.setState({ axisZ: false });
}
};
_this.activeAnchor = function (index) { return _this.setState(({ active: index })); };
_this.render = function () {
var anchors = _this.props.anchors;
var _a = _this.state, active = _a.active, axisZ = _a.axisZ;
return (React.createElement(React.Fragment, null,
React.createElement(Anchor_styled_1.Smooth, null),
React.createElement(Anchor_styled_1.Navigation, { ref: _this.ref, axisZ: axisZ },
React.createElement("ul", null, anchors.map(function (anchor, index) { return (React.createElement("li", { key: anchor.id },
React.createElement("a", { href: "#" + anchor.id, onClick: function () { return _this.activeAnchor(index); }, className: active === index ? 'active' : '' }, anchor.text))); })))));
};
return _this;
}
Anchor.prototype.componentDidMount = function () {
var _this = this;
var elements = this.props.anchors.map(function (anchor, index) { return ({
id: anchor.id,
elementPosition: document.getElementById(anchor.id).offsetTop,
index: index,
}); });
document.addEventListener('scroll', function () {
var hasActive = elements.filter(function (element) { return element.elementPosition <= window.scrollY; });
var lengthHasActive = hasActive.length;
if (window.scrollY >= elements[0].elementPosition) {
var lastValue = lengthHasActive >= 0 ? hasActive[lengthHasActive - 1].index : null;
_this.setState({ active: lastValue });
}
else {
_this.setState({ active: null });
}
if (document.body.offsetHeight < (scrollY * 2) + 10) {
_this.setState({ active: elements[elements.length - 1].index });
}
_this.setAxisZ();
});
};
Anchor.prototype.componentWillUnmount = function () {
document.removeEventListener('scroll', function () { return null; });
};
return Anchor;
}(React.PureComponent));
exports.default = Anchor;
//# sourceMappingURL=Anchor.js.map