move events table to a new component to improve readability (#171)

testing-library · Jun 19, 2020 · e9e915f · e9e915f
1 parent c3aa223
commit e9e915f
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 86 deletions.
diff --git a/src/components/DomEvents.js b/src/components/DomEvents.js
@@ -5,14 +5,8 @@ import MarkupEditor from './MarkupEditor';
 import usePlayground from '../hooks/usePlayground';
 import state from '../lib/state';
 import { eventMap } from '@testing-library/dom/dist/event-map';
-import { VirtualScrollable } from './Scrollable';
 import throttle from 'lodash.throttle';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import IconButton from './IconButton';
-import TrashcanIcon from './icons/TrashcanIcon';
-import CopyButton from './CopyButton';
-import EmptyStreetImg from '../images/EmptyStreetImg';
-import StickyList from './StickyList';
+import DomEventsTable from './DomEventsTable';
 
 function onStateChange({ markup, query, result }) {
   state.save({ markup, query });
@@ -85,29 +79,6 @@ function addLoggingEvents(node, log) {
   return eventListeners;
 }
 
-function EventRecord({ index, style, data }) {
-  const { id, event, target } = data[index];
-
-  return (
-    <div
-      className={`w-full h-8 flex items-center text-sm ${
-        index % 2 ? 'bg-gray-100' : ''
-      }`}
-      style={style}
-    >
-      <div className="p-2 flex-none w-16">{id}</div>
-
-      <div className="p-2 flex-none w-32">{event.EventType}</div>
-      <div className="p-2 flex-none w-32">{event.name}</div>
-
-      <div className="p-2 flex-none w-40">{target.tagName}</div>
-      <div className="p-2 flex-auto whitespace-no-wrap">
-        {target.toString()}
-      </div>
-    </div>
-  );
-}
-
 const noop = () => {};
 function DomEvents() {
   const [{ markup, result }, dispatch] = usePlayground({
@@ -117,7 +88,6 @@ function DomEvents() {
 
   const buffer = useRef([]);
   const previewRef = useRef();
-  const listRef = useRef();
 
   const [eventCount, setEventCount] = useState(0);
   const [eventListeners, setEventListeners] = useState([]);
@@ -127,11 +97,6 @@ function DomEvents() {
     setEventCount(0);
   };
 
-  const getTextToCopy = () =>
-    buffer.current
-      .map((log) => `${log.target.toString()} - ${log.event.EventType}`)
-      .join('\n');
-
   const flush = useCallback(
     throttle(() => setEventCount(buffer.current.length), 16, {
       leading: false,
@@ -177,56 +142,11 @@ function DomEvents() {
 
       <div className="flex-none h-8" />
 
-      <div className="editor md:h-56 flex-auto overflow-hidden">
-        <div className="h-56 md:h-full w-full flex flex-col">
-          <div className="h-8 flex items-center w-full text-sm font-bold">
-            <div className="p-2 w-16">#</div>
-
-            <div className="p-2 w-32">type</div>
-            <div className="p-2 w-32">name</div>
-
-            <div className="p-2 w-40">element</div>
-            <div className="flex-auto p-2 flex justify-between">
-              <span>selector</span>
-              <div>
-                <CopyButton
-                  text={getTextToCopy}
-                  title="copy log"
-                  className="mr-5"
-                />
-                <IconButton title="clear event log" onClick={reset}>
-                  <TrashcanIcon />
-                </IconButton>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex-auto relative overflow-hidden">
-            {eventCount === 0 ? (
-              <div className="flex w-full h-full opacity-50 items-end justify-center">
-                <EmptyStreetImg height="80%" />
-              </div>
-            ) : (
-              <AutoSizer>
-                {({ width, height }) => (
-                  <StickyList
-                    mode="bottom"
-                    ref={listRef}
-                    height={height}
-                    itemCount={eventCount}
-                    itemData={buffer.current}
-                    itemSize={32}
-                    width={width}
-                    outerElementType={VirtualScrollable}
-                  >
-                    {EventRecord}
-                  </StickyList>
-                )}
-              </AutoSizer>
-            )}
-          </div>
-        </div>
-      </div>
+      <DomEventsTable
+        eventCount={eventCount}
+        reset={reset}
+        data={buffer.current}
+      />
     </div>
   );
 }

diff --git a/src/components/DomEventsTable.js b/src/components/DomEventsTable.js
@@ -0,0 +1,95 @@
+import React, { useRef } from 'react';
+import IconButton from './IconButton';
+import TrashcanIcon from './icons/TrashcanIcon';
+import EmptyStreetImg from '../images/EmptyStreetImg';
+import StickyList from './StickyList';
+import { VirtualScrollable } from './Scrollable';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import CopyButton from './CopyButton';
+
+
+function EventRecord({ index, style, data }) {
+  const { id, event, target } = data[index];
+
+  return (
+    <div
+      className={`w-full h-8 flex items-center text-sm ${
+        index % 2 ? 'bg-gray-100' : ''
+      }`}
+      style={style}
+    >
+      <div className="p-2 flex-none w-16">{id}</div>
+
+      <div className="p-2 flex-none w-40">{event.EventType}</div>
+      <div className="p-2 flex-none w-40">{event.name}</div>
+
+      <div className="p-2 flex-none w-40">{target.tagName}</div>
+      <div className="p-2 flex-auto whitespace-no-wrap">
+        {target.toString()}
+      </div>
+    </div>
+  );
+}
+
+const DomEventsTable = ({ reset, data, eventCount }) => {
+  const listRef = useRef();
+
+  const getTextToCopy = () =>
+    data
+      .map((log) => `${log.target.toString()} - ${log.event.EventType}`)
+      .join('\n');
+
+  return (
+    <div className="editor md:h-56 flex-auto overflow-hidden">
+      <div className="h-56 md:h-full w-full flex flex-col">
+        <div className="h-8 flex items-center w-full text-sm font-bold">
+          <div className="p-2 w-16">#</div>
+
+          <div className="p-2 w-40">type</div>
+          <div className="p-2 w-40">name</div>
+
+          <div className="p-2 w-40">element</div>
+          <div className="flex-auto p-2 flex justify-between">
+            <span>selector</span>
+            <div>
+              <CopyButton
+                text={getTextToCopy}
+                title="copy log"
+                className="mr-5"
+              />
+              <IconButton title="clear event log" onClick={reset}>
+                <TrashcanIcon />
+              </IconButton>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex-auto relative overflow-hidden">
+          {eventCount === 0 ? (
+            <div className="flex w-full h-full opacity-50 items-end justify-center">
+              <EmptyStreetImg height="80%" />
+            </div>
+          ) : (
+            <AutoSizer>
+              {({ width, height }) => (
+                <StickyList
+                  mode="bottom"
+                  ref={listRef}
+                  height={height}
+                  itemCount={eventCount}
+                  itemData={data}
+                  itemSize={32}
+                  width={width}
+                  outerElementType={VirtualScrollable}
+                >
+                  {EventRecord}
+                </StickyList>
+              )}
+            </AutoSizer>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default DomEventsTable;