114 lines
3.1 KiB
TypeScript
114 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import style from './DynamicContentContainer.module.css';
|
|
|
|
interface Props<T> {
|
|
renderElement: (elem: T) => JSX.Element;
|
|
data: T[];
|
|
initialLoadNr?: number;
|
|
}
|
|
|
|
interface state<T> {
|
|
loadeditems: T[];
|
|
}
|
|
|
|
/**
|
|
* A videocontainer storing lots of Preview elements
|
|
* includes scroll handling and loading of preview infos
|
|
*/
|
|
class DynamicContentContainer<T> extends React.Component<Props<T>, state<T>> {
|
|
// stores current index of loaded elements
|
|
loadindex: number = 0;
|
|
|
|
readonly InitialLoadNR = this.props.initialLoadNr
|
|
? this.props.initialLoadNr === -1
|
|
? this.props.data.length
|
|
: this.props.initialLoadNr
|
|
: 16;
|
|
|
|
constructor(props: Props<T>) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
loadeditems: []
|
|
};
|
|
}
|
|
|
|
componentDidMount(): void {
|
|
document.addEventListener('scroll', this.trackScrolling);
|
|
|
|
this.loadPreviewBlock(this.InitialLoadNR);
|
|
}
|
|
|
|
componentDidUpdate(prevProps: Props<T>): void {
|
|
// when source props change force update!
|
|
if (
|
|
// diff the two arrays
|
|
this.props.data
|
|
.filter((x) => !prevProps.data.includes(x))
|
|
.concat(prevProps.data.filter((x) => !this.props.data.includes(x))).length !== 0
|
|
) {
|
|
this.clean((): void => {
|
|
this.loadPreviewBlock(this.InitialLoadNR);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* clear all elements rendered...
|
|
*/
|
|
clean(callback: () => void): void {
|
|
this.loadindex = 0;
|
|
this.setState({loadeditems: []}, callback);
|
|
}
|
|
|
|
render(): JSX.Element {
|
|
return (
|
|
<div className={style.maincontent}>
|
|
{this.state.loadeditems.map((elem) => {
|
|
return this.props.renderElement(elem);
|
|
})}
|
|
{/*todo css for no items to show*/}
|
|
{this.state.loadeditems.length === 0 ? 'no items to show!' : null}
|
|
{this.props.children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
componentWillUnmount(): void {
|
|
// unbind scroll listener when unmounting component
|
|
document.removeEventListener('scroll', this.trackScrolling);
|
|
}
|
|
|
|
/**
|
|
* load previews to the container
|
|
* @param nr number of previews to load
|
|
*/
|
|
loadPreviewBlock(nr: number): void {
|
|
let ret = [];
|
|
for (let i = 0; i < nr; i++) {
|
|
// only add if not end
|
|
if (this.props.data.length > this.loadindex + i) {
|
|
ret.push(this.props.data[this.loadindex + i]);
|
|
}
|
|
}
|
|
|
|
this.setState({
|
|
loadeditems: [...this.state.loadeditems, ...ret]
|
|
});
|
|
|
|
this.loadindex += nr;
|
|
}
|
|
|
|
/**
|
|
* scroll event handler -> load new previews if on bottom
|
|
*/
|
|
trackScrolling = (): void => {
|
|
// comparison if current scroll position is on bottom --> 200 is bottom offset to trigger load
|
|
if (window.innerHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
|
|
this.loadPreviewBlock(8);
|
|
}
|
|
};
|
|
}
|
|
|
|
export default DynamicContentContainer;
|