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

Refactor to function component

Browse Source
This commit is contained in:
Nathan Bierema 2023-08-07 10:30:21 -04:00
parent c3e7e8cf56
commit 5cb48ed15a
1 changed files with 111 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,4 @@
import React, { PureComponent, RefCallback } from 'react';
import { Drake } from 'dragula';
import dragula from 'react-dragula';
import React, { useCallback, useLayoutEffect, useRef } from 'react';
import { Action } from 'redux';
import { PerformAction } from '@redux-devtools/core';
import { StylingFunction } from 'react-base16-styling';
@ -44,152 +42,114 @@ interface Props<A extends Action<unknown>> {
lastActionId: number;
}
export default class ActionList<
A extends Action<unknown>,
> extends PureComponent<Props<A>> {
node?: HTMLDivElement | null;
scrollDown?: boolean;
drake?: Drake;
UNSAFE_componentWillReceiveProps(nextProps: Props<A>) {
const node = this.node;
if (!node) {
this.scrollDown = true;
} else if (this.props.lastActionId !== nextProps.lastActionId) {
const { scrollTop, offsetHeight, scrollHeight } = node;
this.scrollDown =
Math.abs(scrollHeight - (scrollTop + offsetHeight)) < 50;
} else {
this.scrollDown = false;
}
}
componentDidMount() {
this.scrollDown = true;
this.scrollToBottom();
if (!this.props.draggableActions) return;
const container = this.node!;
this.drake = dragula([container], {
copy: false,
copySortSource: false,
mirrorContainer: container,
accepts: (el, target, source, sibling) =>
!sibling || !!parseInt(sibling.getAttribute('data-id')!),
moves: (el, source, handle) =>
!!parseInt(el!.getAttribute('data-id')!) &&
handle!.className.indexOf('selectorButton') !== 0,
}).on('drop', (el, target, source, sibling) => {
let beforeActionId = this.props.actionIds.length;
if (sibling && sibling.className.indexOf('gu-mirror') === -1) {
beforeActionId = parseInt(sibling.getAttribute('data-id')!);
}
const actionId = parseInt(el.getAttribute('data-id')!);
this.props.onReorderAction(actionId, beforeActionId);
});
}
componentWillUnmount() {
if (this.drake) this.drake.destroy();
}
componentDidUpdate() {
this.scrollToBottom();
}
scrollToBottom() {
if (this.scrollDown && this.node) {
this.node.scrollTop = this.node.scrollHeight;
}
}
getRef: RefCallback<HTMLDivElement> = (node) => {
this.node = node;
};
render() {
const {
styling,
actions,
actionIds,
isWideLayout,
onToggleAction,
skippedActionIds,
selectedActionId,
startActionId,
onSelect,
onSearch,
searchValue,
currentActionId,
hideMainButtons,
hideActionButtons,
onCommit,
onSweep,
onJumpToState,
} = this.props;
const lowerSearchValue = searchValue && searchValue.toLowerCase();
const filteredActionIds = searchValue
? actionIds.filter(
(id) =>
(actions[id].action.type as string)
.toLowerCase()
.indexOf(lowerSearchValue as string) !== -1,
)
: actionIds;
return (
<div
key="actionList"
data-testid="actionList"
{...styling(
['actionList', isWideLayout && 'actionListWide'],
isWideLayout,
)}
>
<ActionListHeader
styling={styling}
onSearch={onSearch}
onCommit={onCommit}
onSweep={onSweep}
hideMainButtons={hideMainButtons}
hasSkippedActions={skippedActionIds.length > 0}
hasStagedActions={actionIds.length > 1}
searchValue={searchValue}
/>
<div
data-testid="actionListRows"
{...styling('actionListRows')}
ref={this.getRef}
>
{filteredActionIds.map((actionId) => (
<ActionListRow
key={actionId}
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}
/>
))}
</div>
</div>
);
}
function scrollToBottom(node: HTMLDivElement) {
node.scrollTop = node.scrollHeight;
}
export default function ActionListFunction<A extends Action<unknown>>({
styling,
actions,
actionIds,
isWideLayout,
onToggleAction,
skippedActionIds,
selectedActionId,
startActionId,
onSelect,
onSearch,
searchValue,
currentActionId,
hideMainButtons,
hideActionButtons,
onCommit,
onSweep,
onJumpToState,
lastActionId,
}: Props<A>) {
const nodeRef = useRef<HTMLDivElement | null>(null);
const prevLastActionId = useRef<number | undefined>();
useLayoutEffect(() => {
if (nodeRef.current && prevLastActionId.current !== lastActionId) {
const { scrollTop, offsetHeight, scrollHeight } = nodeRef.current;
if (Math.abs(scrollHeight - (scrollTop + offsetHeight)) < 50) {
scrollToBottom(nodeRef.current);
}
}
prevLastActionId.current = lastActionId;
}, [lastActionId]);
const setNodeRef = useCallback((node: HTMLDivElement | null) => {
if (node && !nodeRef.current) {
scrollToBottom(node);
}
nodeRef.current = node;
}, []);
const lowerSearchValue = searchValue && searchValue.toLowerCase();
const filteredActionIds = searchValue
? actionIds.filter(
(id) =>
(actions[id].action.type as string)
.toLowerCase()
.indexOf(lowerSearchValue as string) !== -1,
)
: actionIds;
return (
<div
key="actionList"
data-testid="actionList"
{...styling(
['actionList', isWideLayout && 'actionListWide'],
isWideLayout,
)}
>
<ActionListHeader
styling={styling}
onSearch={onSearch}
onCommit={onCommit}
onSweep={onSweep}
hideMainButtons={hideMainButtons}
hasSkippedActions={skippedActionIds.length > 0}
hasStagedActions={actionIds.length > 1}
searchValue={searchValue}
/>
<div
data-testid="actionListRows"
{...styling('actionListRows')}
ref={setNodeRef}
>
{filteredActionIds.map((actionId) => (
<ActionListRow
key={actionId}
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}
/>
))}
</div>
</div>
);
}