forked from Gitlink/forgeplus-react
287 lines
10 KiB
JavaScript
287 lines
10 KiB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
|
var _class, _temp;
|
|
|
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
|
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
|
|
import * as React from 'react';
|
|
import * as ReactDOM from 'react-dom';
|
|
import { registerScrollListener, unregisterScrollListener } from './utils/onScroll';
|
|
import { getDimensions, getPositionOffset, getScrollOffset } from './utils/dimensions';
|
|
import createDetectElementResize from '../vendor/detectElementResize';
|
|
|
|
/**
|
|
* Specifies the number of miliseconds during which to disable pointer events while a scroll is in progress.
|
|
* This improves performance and makes scrolling smoother.
|
|
*/
|
|
export var IS_SCROLLING_TIMEOUT = 150;
|
|
|
|
var getWindow = function getWindow() {
|
|
return typeof window !== 'undefined' ? window : undefined;
|
|
};
|
|
|
|
var WindowScroller = (_temp = _class =
|
|
/*#__PURE__*/
|
|
function (_React$PureComponent) {
|
|
_inherits(WindowScroller, _React$PureComponent);
|
|
|
|
function WindowScroller() {
|
|
var _getPrototypeOf2;
|
|
|
|
var _this;
|
|
|
|
_classCallCheck(this, WindowScroller);
|
|
|
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(WindowScroller)).call.apply(_getPrototypeOf2, [this].concat(args)));
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "_window", getWindow());
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "_isMounted", false);
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "_positionFromTop", 0);
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "_positionFromLeft", 0);
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "_detectElementResize", void 0);
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "_child", void 0);
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "state", _objectSpread({}, getDimensions(_this.props.scrollElement, _this.props), {
|
|
isScrolling: false,
|
|
scrollLeft: 0,
|
|
scrollTop: 0
|
|
}));
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "_registerChild", function (element) {
|
|
if (element && !(element instanceof Element)) {
|
|
console.warn('WindowScroller registerChild expects to be passed Element or null');
|
|
}
|
|
|
|
_this._child = element;
|
|
|
|
_this.updatePosition();
|
|
});
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "_onChildScroll", function (_ref) {
|
|
var scrollTop = _ref.scrollTop;
|
|
|
|
if (_this.state.scrollTop === scrollTop) {
|
|
return;
|
|
}
|
|
|
|
var scrollElement = _this.props.scrollElement;
|
|
|
|
if (scrollElement) {
|
|
if (typeof scrollElement.scrollTo === 'function') {
|
|
scrollElement.scrollTo(0, scrollTop + _this._positionFromTop);
|
|
} else {
|
|
scrollElement.scrollTop = scrollTop + _this._positionFromTop;
|
|
}
|
|
}
|
|
});
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "_registerResizeListener", function (element) {
|
|
if (element === window) {
|
|
window.addEventListener('resize', _this._onResize, false);
|
|
} else {
|
|
_this._detectElementResize.addResizeListener(element, _this._onResize);
|
|
}
|
|
});
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "_unregisterResizeListener", function (element) {
|
|
if (element === window) {
|
|
window.removeEventListener('resize', _this._onResize, false);
|
|
} else if (element) {
|
|
_this._detectElementResize.removeResizeListener(element, _this._onResize);
|
|
}
|
|
});
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "_onResize", function () {
|
|
_this.updatePosition();
|
|
});
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "__handleWindowScrollEvent", function () {
|
|
if (!_this._isMounted) {
|
|
return;
|
|
}
|
|
|
|
var onScroll = _this.props.onScroll;
|
|
var scrollElement = _this.props.scrollElement;
|
|
|
|
if (scrollElement) {
|
|
var scrollOffset = getScrollOffset(scrollElement);
|
|
var scrollLeft = Math.max(0, scrollOffset.left - _this._positionFromLeft);
|
|
var scrollTop = Math.max(0, scrollOffset.top - _this._positionFromTop);
|
|
|
|
_this.setState({
|
|
isScrolling: true,
|
|
scrollLeft: scrollLeft,
|
|
scrollTop: scrollTop
|
|
});
|
|
|
|
onScroll({
|
|
scrollLeft: scrollLeft,
|
|
scrollTop: scrollTop
|
|
});
|
|
}
|
|
});
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "__resetIsScrolling", function () {
|
|
_this.setState({
|
|
isScrolling: false
|
|
});
|
|
});
|
|
|
|
return _this;
|
|
}
|
|
|
|
_createClass(WindowScroller, [{
|
|
key: "updatePosition",
|
|
value: function updatePosition() {
|
|
var scrollElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.scrollElement;
|
|
var onResize = this.props.onResize;
|
|
var _this$state = this.state,
|
|
height = _this$state.height,
|
|
width = _this$state.width;
|
|
var thisNode = this._child || ReactDOM.findDOMNode(this);
|
|
|
|
if (thisNode instanceof Element && scrollElement) {
|
|
var offset = getPositionOffset(thisNode, scrollElement);
|
|
this._positionFromTop = offset.top;
|
|
this._positionFromLeft = offset.left;
|
|
}
|
|
|
|
var dimensions = getDimensions(scrollElement, this.props);
|
|
|
|
if (height !== dimensions.height || width !== dimensions.width) {
|
|
this.setState({
|
|
height: dimensions.height,
|
|
width: dimensions.width
|
|
});
|
|
onResize({
|
|
height: dimensions.height,
|
|
width: dimensions.width
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var scrollElement = this.props.scrollElement;
|
|
this._detectElementResize = createDetectElementResize();
|
|
this.updatePosition(scrollElement);
|
|
|
|
if (scrollElement) {
|
|
registerScrollListener(this, scrollElement);
|
|
|
|
this._registerResizeListener(scrollElement);
|
|
}
|
|
|
|
this._isMounted = true;
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
var scrollElement = this.props.scrollElement;
|
|
var prevScrollElement = prevProps.scrollElement;
|
|
|
|
if (prevScrollElement !== scrollElement && prevScrollElement != null && scrollElement != null) {
|
|
this.updatePosition(scrollElement);
|
|
unregisterScrollListener(this, prevScrollElement);
|
|
registerScrollListener(this, scrollElement);
|
|
|
|
this._unregisterResizeListener(prevScrollElement);
|
|
|
|
this._registerResizeListener(scrollElement);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
var scrollElement = this.props.scrollElement;
|
|
|
|
if (scrollElement) {
|
|
unregisterScrollListener(this, scrollElement);
|
|
|
|
this._unregisterResizeListener(scrollElement);
|
|
}
|
|
|
|
this._isMounted = false;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var children = this.props.children;
|
|
var _this$state2 = this.state,
|
|
isScrolling = _this$state2.isScrolling,
|
|
scrollTop = _this$state2.scrollTop,
|
|
scrollLeft = _this$state2.scrollLeft,
|
|
height = _this$state2.height,
|
|
width = _this$state2.width;
|
|
return children({
|
|
onChildScroll: this._onChildScroll,
|
|
registerChild: this._registerChild,
|
|
height: height,
|
|
isScrolling: isScrolling,
|
|
scrollLeft: scrollLeft,
|
|
scrollTop: scrollTop,
|
|
width: width
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return WindowScroller;
|
|
}(React.PureComponent), _defineProperty(_class, "propTypes", process.env.NODE_ENV === 'production' ? null : {
|
|
/**
|
|
* Function responsible for rendering children.
|
|
* This function should implement the following signature:
|
|
* ({ height, isScrolling, scrollLeft, scrollTop, width }) => PropTypes.element
|
|
*/
|
|
"children": PropTypes.func.isRequired,
|
|
|
|
/** Callback to be invoked on-resize: ({ height, width }) */
|
|
"onResize": PropTypes.func.isRequired,
|
|
|
|
/** Callback to be invoked on-scroll: ({ scrollLeft, scrollTop }) */
|
|
"onScroll": PropTypes.func.isRequired,
|
|
|
|
/** Element to attach scroll event listeners. Defaults to window. */
|
|
"scrollElement": PropTypes.oneOfType([PropTypes.any, function () {
|
|
return (typeof Element === "function" ? PropTypes.instanceOf(Element) : PropTypes.any).apply(this, arguments);
|
|
}]),
|
|
|
|
/**
|
|
* Wait this amount of time after the last scroll event before resetting child `pointer-events`.
|
|
*/
|
|
"scrollingResetTimeInterval": PropTypes.number.isRequired,
|
|
|
|
/** Height used for server-side rendering */
|
|
"serverHeight": PropTypes.number.isRequired,
|
|
|
|
/** Width used for server-side rendering */
|
|
"serverWidth": PropTypes.number.isRequired
|
|
}), _temp);
|
|
|
|
_defineProperty(WindowScroller, "defaultProps", {
|
|
onResize: function onResize() {},
|
|
onScroll: function onScroll() {},
|
|
scrollingResetTimeInterval: IS_SCROLLING_TIMEOUT,
|
|
scrollElement: getWindow(),
|
|
serverHeight: 0,
|
|
serverWidth: 0
|
|
});
|
|
|
|
export { WindowScroller as default };
|
|
import PropTypes from "prop-types"; |