@git-temporal/git-temporal-react
Version:
<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
63 lines (62 loc) • 2.69 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const styles_1 = require("app/styles");
const SpinnerImage_1 = require("app/components/SpinnerImage");
const outerStyle = {
display: 'flex',
flexDirection: 'column',
overflow: 'auto',
};
const innerStyle = {
display: 'flex',
flexDirection: 'column',
};
const itemStyle = {
flexShrink: 0,
};
const PAGE_SIZE = 20;
class ExtendingList extends react_1.default.Component {
constructor(props) {
super(props);
this.state = { itemsToRender: PAGE_SIZE };
this.onScroll = () => {
const innerEl = this.innerContainerRef.current;
const outerEl = this.outerContainerRef.current;
if (this.rowsRendered >= this.props.rowCount) {
return;
}
const innerBoundingRect = innerEl.getBoundingClientRect();
if (innerEl.scrollHeight > outerEl.clientHeight &&
outerEl.scrollTop + outerEl.clientHeight > innerEl.scrollHeight - 200) {
this.setState({
itemsToRender: this.state.itemsToRender + PAGE_SIZE,
});
}
};
this.innerContainerRef = react_1.default.createRef();
this.outerContainerRef = react_1.default.createRef();
this.onScroll = this.onScroll.bind(this);
}
render() {
return (react_1.default.createElement("div", { style: styles_1.style(outerStyle, this.props.style), ref: this.outerContainerRef, onScroll: this.onScroll },
react_1.default.createElement("div", { style: styles_1.style(innerStyle), ref: this.innerContainerRef }, this.renderRows())));
}
renderRows() {
this.rowsRendered = 0;
const rows = [];
for (; this.rowsRendered < this.state.itemsToRender &&
this.rowsRendered < this.props.rowCount; this.rowsRendered++) {
rows.push(react_1.default.createElement("div", { style: styles_1.style(itemStyle), key: this.rowsRendered }, this.props.rowRenderer(this.rowsRendered, `row${this.rowsRendered}`)));
}
if (this.rowsRendered < this.props.rowCount) {
rows.push(react_1.default.createElement("div", { style: { flexShrink: 0, textAlign: 'center', padding: 10 }, key: this.rowsRendered + 1 },
react_1.default.createElement(SpinnerImage_1.SpinnerImage, { height: 40, width: 40 })));
}
return rows;
}
}
exports.ExtendingList = ExtendingList;