react-virtualized
Version:
React components for efficiently rendering large, scrollable lists and tabular data
104 lines (88 loc) • 3.49 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var React = _interopRequireWildcard(require("react"));
/**
* HOC that simplifies the process of synchronizing scrolling between two or more virtualized components.
*/
var ScrollSync =
/*#__PURE__*/
function (_React$PureComponent) {
(0, _inherits2["default"])(ScrollSync, _React$PureComponent);
function ScrollSync(props, context) {
var _this;
(0, _classCallCheck2["default"])(this, ScrollSync);
_this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ScrollSync).call(this, props, context));
_this.state = {
clientHeight: 0,
clientWidth: 0,
scrollHeight: 0,
scrollLeft: 0,
scrollTop: 0,
scrollWidth: 0
};
_this._onScroll = _this._onScroll.bind((0, _assertThisInitialized2["default"])(_this));
return _this;
}
(0, _createClass2["default"])(ScrollSync, [{
key: "render",
value: function render() {
var children = this.props.children;
var _this$state = this.state,
clientHeight = _this$state.clientHeight,
clientWidth = _this$state.clientWidth,
scrollHeight = _this$state.scrollHeight,
scrollLeft = _this$state.scrollLeft,
scrollTop = _this$state.scrollTop,
scrollWidth = _this$state.scrollWidth;
return children({
clientHeight: clientHeight,
clientWidth: clientWidth,
onScroll: this._onScroll,
scrollHeight: scrollHeight,
scrollLeft: scrollLeft,
scrollTop: scrollTop,
scrollWidth: scrollWidth
});
}
}, {
key: "_onScroll",
value: function _onScroll(_ref) {
var clientHeight = _ref.clientHeight,
clientWidth = _ref.clientWidth,
scrollHeight = _ref.scrollHeight,
scrollLeft = _ref.scrollLeft,
scrollTop = _ref.scrollTop,
scrollWidth = _ref.scrollWidth;
this.setState({
clientHeight: clientHeight,
clientWidth: clientWidth,
scrollHeight: scrollHeight,
scrollLeft: scrollLeft,
scrollTop: scrollTop,
scrollWidth: scrollWidth
});
}
}]);
return ScrollSync;
}(React.PureComponent);
exports["default"] = ScrollSync;
ScrollSync.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Function responsible for rendering 2 or more virtualized components.
* This function should implement the following signature:
* ({ onScroll, scrollLeft, scrollTop }) => PropTypes.element
*/
children: _propTypes["default"].func.isRequired
} : {};