diff --git a/src/components/DomEvents.js b/src/components/DomEvents.js index f5cd6634..ca9794fe 100644 --- a/src/components/DomEvents.js +++ b/src/components/DomEvents.js @@ -6,12 +6,12 @@ import usePlayground from '../hooks/usePlayground'; import state from '../lib/state'; import { eventMap } from '@testing-library/dom/dist/event-map'; import { VirtualScrollable } from './Scrollable'; -import { FixedSizeList as List } from 'react-window'; import throttle from 'lodash.throttle'; import AutoSizer from 'react-virtualized-auto-sizer'; import IconButton from './IconButton'; import TrashcanIcon from './TrashcanIcon'; import EmptyStreetImg from '../images/EmptyStreetImg'; +import StickyList from './StickyList'; function onStateChange({ markup, query, result }) { state.save({ markup, query }); @@ -137,9 +137,8 @@ function DomEvents() { if (node) { previewRef.current = node; const eventListeners = addLoggingEvents(node, (event) => { - // insert at index 0 event.id = buffer.current.length; - buffer.current.splice(0, 0, event); + buffer.current.push(event); setTimeout(flush, 0); }); setEventListeners(eventListeners); @@ -196,7 +195,9 @@ function DomEvents() { ) : ( {({ width, height }) => ( - {EventRecord} - + )} )} diff --git a/src/components/StickyList.js b/src/components/StickyList.js new file mode 100644 index 00000000..b4e60d2b --- /dev/null +++ b/src/components/StickyList.js @@ -0,0 +1,48 @@ +import React, { forwardRef, useEffect, useRef } from 'react'; +import { FixedSizeList as List } from 'react-window'; + +function StickyList( + { + follow = false, + mode = 'bottom', + height, + itemCount, + itemData, + itemSize, + width, + outerElementType, + children, + }, + ref, +) { + const innerRef = useRef(); + useEffect(() => { + if (ref.current && follow && innerRef.current) { + if ( + mode === 'bottom' && + innerRef.current.offsetHeight > ref.current.props.height + ) { + ref.current.scrollTo(innerRef.current.offsetHeight); + } else if (mode === 'top') { + ref.current.scrollTo(0); + } + } + }, [itemCount, follow]); + + return ( + + {children} + + ); +} + +export default forwardRef(StickyList);