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);