dm-web-react
Version:
The DM web client with React.
160 lines • 6.95 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 __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
import * as React from "react";
import NodeResolver from "./NodeResolver";
var ScrollCaptor = /** @class */ (function (_super) {
__extends(ScrollCaptor, _super);
function ScrollCaptor() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.isBottom = false;
_this.isTop = false;
_this.cancelScroll = function (event) {
event.preventDefault();
event.stopPropagation();
};
_this.handleEventDelta = function (event, delta) {
var _a = _this.props, onBottomArrive = _a.onBottomArrive, onBottomLeave = _a.onBottomLeave, onTopArrive = _a.onTopArrive, onTopLeave = _a.onTopLeave;
var _b = _this.scrollTarget, scrollTop = _b.scrollTop, scrollHeight = _b.scrollHeight, clientHeight = _b.clientHeight;
var target = _this.scrollTarget;
var isDeltaPositive = delta > 0;
var availableScroll = scrollHeight - clientHeight - scrollTop;
var shouldCancelScroll = false;
// reset bottom/top flags
if (availableScroll > delta && _this.isBottom) {
if (onBottomLeave)
onBottomLeave(event);
_this.isBottom = false;
}
if (isDeltaPositive && _this.isTop) {
if (onTopLeave)
onTopLeave(event);
_this.isTop = false;
}
// bottom limit
if (isDeltaPositive && delta > availableScroll) {
if (onBottomArrive && !_this.isBottom) {
onBottomArrive(event);
}
target.scrollTop = scrollHeight;
shouldCancelScroll = true;
_this.isBottom = true;
// top limit
}
else if (!isDeltaPositive && -delta > scrollTop) {
if (onTopArrive && !_this.isTop) {
onTopArrive(event);
}
target.scrollTop = 0;
shouldCancelScroll = true;
_this.isTop = true;
}
// cancel scroll
if (shouldCancelScroll) {
_this.cancelScroll(event);
}
};
_this.onWheel = function (event) {
// React.WheelEvent<HTMLElement>
_this.handleEventDelta(event, event.deltaY);
};
_this.onTouchStart = function (event) {
// React.TouchEvent<HTMLElement>
// set touch start so we can calculate touchmove delta
_this.touchStart = event.changedTouches[0].clientY;
};
_this.onTouchMove = function (event) {
// React.TouchEvent<HTMLElement>
var deltaY = _this.touchStart - event.changedTouches[0].clientY;
_this.handleEventDelta(event, deltaY);
};
_this.getScrollTarget = function (ref) {
_this.scrollTarget = ref;
};
return _this;
}
ScrollCaptor.prototype.componentDidMount = function () {
this.startListening(this.scrollTarget);
};
ScrollCaptor.prototype.componentWillUnmount = function () {
this.stopListening(this.scrollTarget);
};
ScrollCaptor.prototype.startListening = function (el) {
// bail early if no scroll available
if (el.scrollHeight <= el.clientHeight)
return;
// all the if statements are to appease Flow 😢
if (typeof el.addEventListener === "function") {
el.addEventListener("wheel", this.onWheel, false);
}
if (typeof el.addEventListener === "function") {
el.addEventListener("touchstart", this.onTouchStart, false);
}
if (typeof el.addEventListener === "function") {
el.addEventListener("touchmove", this.onTouchMove, false);
}
};
ScrollCaptor.prototype.stopListening = function (el) {
// bail early if no scroll available
if (el.scrollHeight <= el.clientHeight)
return;
// all the if statements are to appease Flow 😢
if (typeof el.removeEventListener === "function") {
el.removeEventListener("wheel", this.onWheel, false);
}
if (typeof el.removeEventListener === "function") {
el.removeEventListener("touchstart", this.onTouchStart, false);
}
if (typeof el.removeEventListener === "function") {
el.removeEventListener("touchmove", this.onTouchMove, false);
}
};
ScrollCaptor.prototype.render = function () {
return React.createElement(NodeResolver, { innerRef: this.getScrollTarget }, this.props.children);
};
return ScrollCaptor;
}(React.Component));
var ScrollCaptorSwitch = /** @class */ (function (_super) {
__extends(ScrollCaptorSwitch, _super);
function ScrollCaptorSwitch() {
return _super !== null && _super.apply(this, arguments) || this;
}
ScrollCaptorSwitch.prototype.render = function () {
var _a = this.props, isEnabled = _a.isEnabled, props = __rest(_a, ["isEnabled"]);
return isEnabled ? React.createElement(ScrollCaptor, __assign({}, props)) : this.props.children;
};
ScrollCaptorSwitch.defaultProps = { isEnabled: true };
return ScrollCaptorSwitch;
}(React.Component));
export default ScrollCaptorSwitch;
//# sourceMappingURL=ScrollCaptor.js.map