reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-27 00:19:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

Ditch DragOverlay

Browse Source
This commit is contained in:
Nathan Bierema 2023-08-07 11:43:56 -04:00
parent 968e6c9e35
commit 90dd6ee6bc
1 changed files with 28 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
packages/redux-devtools-inspector-monitor/src/ActionList.tsx
View File

@ -1,11 +1,4 @@
import React, { import React, { ReactNode, useCallback, useLayoutEffect, useRef } from 'react';
forwardRef,
ReactNode,
useCallback,
useLayoutEffect,
useRef,
useState,
} from 'react';
import { Action } from 'redux'; import { Action } from 'redux';
import { PerformAction } from '@redux-devtools/core'; import { PerformAction } from '@redux-devtools/core';
import { StylingFunction } from 'react-base16-styling'; import { StylingFunction } from 'react-base16-styling';
@ -13,8 +6,6 @@ import {
closestCenter, closestCenter,
DndContext, DndContext,
DragEndEvent, DragEndEvent,
DragOverlay,
DragStartEvent,
KeyboardSensor, KeyboardSensor,
PointerSensor, PointerSensor,
useSensor, useSensor,
@ -94,9 +85,6 @@ export default function ActionListFunction<A extends Action<unknown>>({
}: Props<A>) { }: Props<A>) {
const nodeRef = useRef<HTMLDivElement | null>(null); const nodeRef = useRef<HTMLDivElement | null>(null);
const prevLastActionId = useRef<number | undefined>(); const prevLastActionId = useRef<number | undefined>();
const [activeDragActionId, setActiveDragActionId] = useState<number | null>(
null,
);
useLayoutEffect(() => { useLayoutEffect(() => {
if (nodeRef.current && prevLastActionId.current !== lastActionId) { if (nodeRef.current && prevLastActionId.current !== lastActionId) {
@ -124,17 +112,11 @@ export default function ActionListFunction<A extends Action<unknown>>({
}), }),
); );
const handleDragStart = useCallback(({ active }: DragStartEvent) => {
setActiveDragActionId(active.id as number);
}, []);
const handleDragEnd = useCallback( const handleDragEnd = useCallback(
({ active, over }: DragEndEvent) => { ({ active, over }: DragEndEvent) => {
if (over && active.id !== over.id) { if (over && active.id !== over.id) {
onReorderAction(active.id as number, over.id as number); onReorderAction(active.id as number, over.id as number);
} }
setActiveDragActionId(null);
}, },
[onReorderAction], [onReorderAction],
); );
@ -149,35 +131,6 @@ export default function ActionListFunction<A extends Action<unknown>>({
) )
: actionIds; : actionIds;
function renderActionListRow(actionId: number) {
return (
<ActionListRow
styling={styling}
actionId={actionId}
isInitAction={!actionId}
isSelected={
(startActionId !== null &&
actionId >= startActionId &&
actionId <= (selectedActionId as number)) ||
actionId === selectedActionId
}
isInFuture={
actionIds.indexOf(actionId) > actionIds.indexOf(currentActionId)
}
onSelect={(e: React.MouseEvent<HTMLDivElement>) =>
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 ( return (
<div <div
key="actionList" key="actionList"
@ -205,7 +158,6 @@ export default function ActionListFunction<A extends Action<unknown>>({
<DndContext <DndContext
sensors={sensors} sensors={sensors}
collisionDetection={closestCenter} collisionDetection={closestCenter}
onDragStart={handleDragStart}
onDragEnd={handleDragEnd} onDragEnd={handleDragEnd}
> >
<SortableContext <SortableContext
@ -214,15 +166,34 @@ export default function ActionListFunction<A extends Action<unknown>>({
> >
{filteredActionIds.map((actionId) => ( {filteredActionIds.map((actionId) => (
<SortableItem key={actionId} actionId={actionId}> <SortableItem key={actionId} actionId={actionId}>
{renderActionListRow(actionId)} <ActionListRow
styling={styling}
actionId={actionId}
isInitAction={!actionId}
isSelected={
(startActionId !== null &&
actionId >= startActionId &&
actionId <= (selectedActionId as number)) ||
actionId === selectedActionId
}
isInFuture={
actionIds.indexOf(actionId) >
actionIds.indexOf(currentActionId)
}
onSelect={(e: React.MouseEvent<HTMLDivElement>) =>
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}
/>
</SortableItem> </SortableItem>
))} ))}
</SortableContext> </SortableContext>
<DragOverlay>
{activeDragActionId ? (
<Item>{renderActionListRow(activeDragActionId)}</Item>
) : null}
</DragOverlay>
</DndContext> </DndContext>
</div> </div>
</div> </div>
@ -244,15 +215,8 @@ function SortableItem({ children, actionId }: SortableItemProps) {
}; };
return ( return (
<Item ref={setNodeRef} style={style} {...attributes} {...listeners}> <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
{children} {children}
</Item> </div>
); );
} }
const Item = forwardRef<
HTMLDivElement,
React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
>(function Item({ ...props }, ref) {
return <div {...props} ref={ref} />;
});