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

Automatically show more on scroll

Browse Source
This commit is contained in:
Marco van Dijk 2022-03-11 15:51:13 +01:00
parent 02969a634e
commit 320d216b3c
1 changed files with 31 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/eventViewer.js
View File

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState, useRef } from "react";
import EventButton from "./eventButton";
import ScrollContainer from 'react-indiana-drag-scroll';
import ReactPaginate from 'react-paginate';
@ -18,6 +18,7 @@ const defaultMaxShown = 100;
const defaultIncrementMaxShown = 100;
const EventViewer = (obj) => {
const listInnerRef = useRef();
const [filterActivated, setFilterActivated] = useState(true);
const [rewardActivated, setRewardActivated] = useState(true);
const [updateActivated, setUpdateActivated] = useState(true);
@ -28,6 +29,7 @@ const EventViewer = (obj) => {
const [unbondActivated, setUnbondActivated] = useState(true);
console.log("Rendering EventViewer");
let unfiltered = 0;
let prevBlock = 0;
let limitShown = obj.events.length;
let filterActivatedColour;
@ -47,24 +49,13 @@ const EventViewer = (obj) => {
let unbondActivatedColour;
unbondActivatedColour = unbondActivated ? unbondColour : greyColour;
let prevBlock = 0;
let showMoreBlock;
if (obj.maxAmount < limitShown) {
showMoreBlock = <button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
const updateOnScroll = () => {
if (listInnerRef.current) {
const { scrollTop, scrollHeight, clientHeight } = listInnerRef.current.container.current;
if (scrollTop + clientHeight === scrollHeight) {
obj.setMaxAmount(obj.maxAmount + defaultIncrementMaxShown);
}}>
<h3>Show more</h3>
</button>
}
let showLessBlock;
if (defaultMaxShown < obj.maxAmount) {
showLessBlock = <button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
obj.setMaxAmount(defaultMaxShown);
}}>
<h3>Show {defaultMaxShown}</h3>
</button>
} else {
showLessBlock = <div className="strokeSmollLeft" style={{ margin: 0, padding: 0, width: '5em' }}></div>
}
}
let searchTermText;
@ -85,21 +76,21 @@ const EventViewer = (obj) => {
while (eventIdx >= 0 || ticketIdx >= 0) {
const latestEvent = obj.events[eventIdx];
let latestEventTime = 0;
if (eventIdx >= 0){
if (eventIdx >= 0) {
latestEventTime = latestEvent.transactionTime;
}
const latestTicket = obj.tickets[ticketIdx];
let latestTicketTime = 0;
if (ticketIdx >= 0){
if (ticketIdx >= 0) {
latestTicketTime = latestTicket.transactionTime;
}
if (latestEventTime > latestTicketTime){
if (latestEventTime > latestTicketTime) {
thisEvent = latestEvent;
eventIdx -= 1;
}else if (latestTicketTime){
} else if (latestTicketTime) {
thisEvent = latestTicket;
ticketIdx -= 1;
}else{
} else {
console.log("error, breaky breaky");
break;
}
@ -206,39 +197,24 @@ const EventViewer = (obj) => {
let filterBit;
if (obj.showFilter) {
filterBit = <div className="flexContainer roundedOpaque" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 0, margin: 0, width: '100%' }}>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 1 }}>
<div className="stroke" style={{ margin: "0", padding: 0 }}>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
<h3>Showing max {obj.maxAmount} results</h3>
</div>
<div className="row" style={{ margin: 0, padding: 0 }}>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
{showLessBlock}
</div>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
{showMoreBlock}
</div>
</div>
</div>
</div>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}>
<div className="row" style={{ margin: 0, padding: 0 }}>
{searchTermText}
</div>
<div className="row" style={{ margin: 0, padding: 0 }}>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
obj.setSearchTerm("");
}}>
<h3>Clear</h3>
</button>
</div>
<input className="searchField" style={{ width: '80%', paddingLeft: '1em', paddingRight: '1em' }}
value={obj.searchTerm}
onChange={(evt) => obj.setSearchTerm(evt.target.value)}
placeholder='Filter by Orchestrator address'
type="text"
/>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '6em' }} onClick={() => {
obj.setSearchTerm("");
}}>
<h3>Clear</h3>
</button>
</div>
</div>
</div>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}>
@ -286,10 +262,18 @@ const EventViewer = (obj) => {
<div className="row" style={{ padding: 0, margin: 0, width: '100%', height: '100%' }}>
<div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, width: 'unset', height: '100%', marginRight: '1em', overflow: 'hidden', marginTop: '1em', overflowX: 'scroll' }}>
<div className="content-wrapper" style={{ width: '100%' }}>
<ScrollContainer className="overflow-container" hideScrollbars={false}>
<ScrollContainer activationDistance={1} className="overflow-container"
hideScrollbars={false} onEndScroll={updateOnScroll} ref={listInnerRef}>
<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' }}>
{eventList}
<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>
</div>
</div>
</ScrollContainer>