diff --git a/packages/redux-devtools-inspector-monitor/src/ActionList.tsx b/packages/redux-devtools-inspector-monitor/src/ActionList.tsx
index c0cf6aff..a4a13fcf 100644
--- a/packages/redux-devtools-inspector-monitor/src/ActionList.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/ActionList.tsx
@@ -1,11 +1,4 @@
-import React, {
- forwardRef,
- ReactNode,
- useCallback,
- useLayoutEffect,
- useRef,
- useState,
-} from 'react';
+import React, { ReactNode, useCallback, useLayoutEffect, useRef } from 'react';
import { Action } from 'redux';
import { PerformAction } from '@redux-devtools/core';
import { StylingFunction } from 'react-base16-styling';
@@ -13,8 +6,6 @@ import {
closestCenter,
DndContext,
DragEndEvent,
- DragOverlay,
- DragStartEvent,
KeyboardSensor,
PointerSensor,
useSensor,
@@ -94,9 +85,6 @@ export default function ActionListFunction>({
}: Props) {
const nodeRef = useRef(null);
const prevLastActionId = useRef();
- const [activeDragActionId, setActiveDragActionId] = useState(
- null,
- );
useLayoutEffect(() => {
if (nodeRef.current && prevLastActionId.current !== lastActionId) {
@@ -124,17 +112,11 @@ export default function ActionListFunction>({
}),
);
- const handleDragStart = useCallback(({ active }: DragStartEvent) => {
- setActiveDragActionId(active.id as number);
- }, []);
-
const handleDragEnd = useCallback(
({ active, over }: DragEndEvent) => {
if (over && active.id !== over.id) {
onReorderAction(active.id as number, over.id as number);
}
-
- setActiveDragActionId(null);
},
[onReorderAction],
);
@@ -149,35 +131,6 @@ export default function ActionListFunction>({
)
: actionIds;
- function renderActionListRow(actionId: number) {
- return (
- = startActionId &&
- actionId <= (selectedActionId as number)) ||
- actionId === selectedActionId
- }
- isInFuture={
- actionIds.indexOf(actionId) > actionIds.indexOf(currentActionId)
- }
- onSelect={(e: React.MouseEvent) =>
- onSelect(e, actionId)
- }
- timestamps={getTimestamps(actions, actionIds, actionId)}
- action={actions[actionId].action}
- onToggleClick={() => onToggleAction(actionId)}
- onJumpClick={() => onJumpToState(actionId)}
- onCommitClick={() => onCommit()}
- hideActionButtons={hideActionButtons}
- isSkipped={skippedActionIds.indexOf(actionId) !== -1}
- />
- );
- }
-
return (
>({
>({
>
{filteredActionIds.map((actionId) => (
- {renderActionListRow(actionId)}
+ = startActionId &&
+ actionId <= (selectedActionId as number)) ||
+ actionId === selectedActionId
+ }
+ isInFuture={
+ actionIds.indexOf(actionId) >
+ actionIds.indexOf(currentActionId)
+ }
+ onSelect={(e: React.MouseEvent) =>
+ onSelect(e, actionId)
+ }
+ timestamps={getTimestamps(actions, actionIds, actionId)}
+ action={actions[actionId].action}
+ onToggleClick={() => onToggleAction(actionId)}
+ onJumpClick={() => onJumpToState(actionId)}
+ onCommitClick={() => onCommit()}
+ hideActionButtons={hideActionButtons}
+ isSkipped={skippedActionIds.indexOf(actionId) !== -1}
+ />
))}
-
- {activeDragActionId ? (
- - {renderActionListRow(activeDragActionId)}
- ) : null}
-
@@ -244,15 +215,8 @@ function SortableItem({ children, actionId }: SortableItemProps) {
};
return (
- -
+
{children}
-
+
);
}
-
-const Item = forwardRef<
- HTMLDivElement,
- React.DetailedHTMLProps, HTMLDivElement>
->(function Item({ ...props }, ref) {
- return ;
-});