@raona/components
Version:
React components used at Raona to work with SPFx
95 lines (94 loc) • 4.65 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 __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_1 = require("react");
var Bind_1 = require("@raona/sp/dist/decorators/Bind");
var Style_1 = require("@raona/sp/dist/functions/Style");
var AnchorMenu = /** @class */ (function (_super) {
__extends(AnchorMenu, _super);
function AnchorMenu(props, context) {
var _this = _super.call(this, props, context) || this;
_this.state = {
selected: props.selectFirstByDefaultOnStart ? Object.keys(props.refs)[0] : '',
};
return _this;
}
AnchorMenu.prototype.componentDidMount = function () {
this.scrollContainer = document.getElementById(this.props.scrollContainerId);
this.offsetTop = this.scrollContainer.getBoundingClientRect().top;
this.scrollContainer.addEventListener('scroll', this.onScroll);
};
AnchorMenu.prototype.componentWillUnmount = function () {
this.scrollContainer.removeEventListener('scroll', this.onScroll);
};
AnchorMenu.prototype.goToRef = function (refObject) {
if (!!!refObject.current)
return;
// refObject.current.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
this.scrollContainer.scrollTo({
top: refObject.current.offsetTop + (this.props.offsetTolerance || 0),
behavior: 'smooth'
});
};
AnchorMenu.prototype.onScroll = function () {
var element = this.getFirstElementNameOnViewPort(this.props.refs, this.props.offsetTolerance);
if (typeof element !== 'undefined' && element !== this.state.selected) {
this.setState({ selected: element });
}
};
AnchorMenu.prototype.getFirstElementNameOnViewPort = function (elements, offsetTolerance) {
if (offsetTolerance === void 0) { offsetTolerance = 0; }
var keys = Object.keys(elements);
var elementOnViewPort = keys[0];
for (var i = 0, stopOnNext = false; i < keys.length; i++) {
var e = elements[keys[i]];
if (!!!e.current)
continue;
var rect = e.current.getBoundingClientRect();
if ((rect.top + offsetTolerance + -10) < this.offsetTop) {
stopOnNext = true;
elementOnViewPort = keys[i];
}
else if (stopOnNext) {
return elementOnViewPort;
}
}
return elementOnViewPort;
};
AnchorMenu.prototype.render = function () {
var _this = this;
var _a = this.props, refs = _a.refs, className = _a.className, menuItemClassName = _a.menuItemClassName, selectedClassName = _a.selectedClassName;
var selected = this.state.selected;
return (React.createElement("ul", { className: className }, Object.keys(refs).map(function (k, index) {
var _a;
return (React.createElement("li", { className: Style_1.Style.classNames((_a = {},
_a[menuItemClassName] = true,
_a[selectedClassName] = k === selected,
_a)), onClick: function () { return _this.goToRef(refs[k]); }, key: index }, k));
})));
};
__decorate([
Bind_1.Bind()
], AnchorMenu.prototype, "onScroll", null);
return AnchorMenu;
}(react_1.Component));
exports.AnchorMenu = AnchorMenu;