stronk/LivepeerEvents
1
0
Fork 0
mirror of https://github.com/stronk-dev/LivepeerEvents.git synced 2025-07-05 10:45:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added a reached end of results button as well

Browse Source
This commit is contained in:
Marco van Dijk 2022-03-11 16:05:08 +01:00
parent 320d216b3c
commit f3ff42d8ed
1 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/eventViewer.js
View File

@ -30,7 +30,8 @@ const EventViewer = (obj) => {
console.log("Rendering EventViewer"); console.log("Rendering EventViewer");
let unfiltered = 0; let unfiltered = 0;
let prevBlock = 0; let prevBlock = 0;
let limitShown = obj.events.length; let limitShown = obj.events.length + obj.tickets.length;
let hasLimited = false;
let filterActivatedColour; let filterActivatedColour;
filterActivatedColour = filterActivated ? activationColour : greyColour; filterActivatedColour = filterActivated ? activationColour : greyColour;
@ -50,6 +51,9 @@ const EventViewer = (obj) => {
unbondActivatedColour = unbondActivated ? unbondColour : greyColour; unbondActivatedColour = unbondActivated ? unbondColour : greyColour;
const updateOnScroll = () => { const updateOnScroll = () => {
if (!hasLimited) {
return;
}
if (listInnerRef.current) { if (listInnerRef.current) {
const { scrollTop, scrollHeight, clientHeight } = listInnerRef.current.container.current; const { scrollTop, scrollHeight, clientHeight } = listInnerRef.current.container.current;
if (scrollTop + clientHeight === scrollHeight) { if (scrollTop + clientHeight === scrollHeight) {
@ -95,6 +99,7 @@ const EventViewer = (obj) => {
break; break;
} }
if (unfiltered > obj.maxAmount) { if (unfiltered > obj.maxAmount) {
hasLimited = true;
break; break;
} }
// Filter by minimum value // Filter by minimum value
@ -191,9 +196,32 @@ const EventViewer = (obj) => {
setSearchTerm={obj.setSearchTerm} setSearchTerm={obj.setSearchTerm}
/>); />);
} }
} else {
hasLimited = true;
} }
} }
let showMoreButton;
if (!hasLimited) {
showMoreButton =
<div className="stroke" style={{ width: '100%', padding: 0, margin: 0, marginBottom: '2em', marginTop: '2em' }}>
<div className="strokeSmollLeft" style={{ borderRadius: "1.2em", backgroundColor: greyColour, padding: 0, margin: 0, width: '100%' }}>
<p className="row withWrap" style={{ maxWidth: '600px' }}>
☑️ Reached end of results
</p>
</div>
</div>
} else {
showMoreButton =
<div className="stroke" style={{ width: '100%', padding: 0, margin: 0, marginBottom: '2em', marginTop: '2em' }}>
<div className="strokeSmollLeft" style={{ borderRadius: "1.2em", backgroundColor: greyColour, padding: 0, margin: 0, width: '100%' }}>
<p className="row withWrap" style={{ maxWidth: '600px' }}>
🔄 Scroll to bottom for more
</p>
</div>
</div>
}
let filterBit; let filterBit;
if (obj.showFilter) { if (obj.showFilter) {
filterBit = <div className="flexContainer roundedOpaque" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 0, margin: 0, width: '100%' }}> filterBit = <div className="flexContainer roundedOpaque" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 0, margin: 0, width: '100%' }}>
@ -267,13 +295,7 @@ const EventViewer = (obj) => {
<div className="overflow-content" style={{ cursor: 'grab', paddingTop: 0 }}> <div className="overflow-content" style={{ cursor: 'grab', paddingTop: 0 }}>
<div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} style={{ margin: 0, textAlign: 'center', alignItems: 'center', justifyContent: 'center' }}> <div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} style={{ margin: 0, textAlign: 'center', alignItems: 'center', justifyContent: 'center' }}>
{eventList} {eventList}
<div className="stroke" style={{ width: '100%', padding: 0, margin: 0, marginBottom: '2em', marginTop: '2em' }}> {showMoreButton}
<div className="strokeSmollLeft" style={{ borderRadius: "1.2em", backgroundColor: greyColour, padding: 0, margin: 0, width: '100%' }}>
<p className="row withWrap" style={{ maxWidth: '600px' }}>
🔄 Scroll to bottom for more
</p>
</div>
</div>
</div> </div>
</div> </div>
</ScrollContainer> </ScrollContainer>