1 | import React, { PureComponent } from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import { Action } from 'redux';
|
4 | import { PerformAction } from 'redux-devtools';
|
5 | import { Base16Theme } from 'redux-devtools-themes';
|
6 | import LogMonitorEntry from './LogMonitorEntry';
|
7 |
|
8 | interface Props<S, A extends Action<unknown>> {
|
9 | actionsById: { [actionId: number]: PerformAction<A> };
|
10 | computedStates: { state: S; error?: string }[];
|
11 | stagedActionIds: number[];
|
12 | skippedActionIds: number[];
|
13 | currentStateIndex: number;
|
14 | consecutiveToggleStartId: number | null | undefined;
|
15 |
|
16 | select: (state: S) => unknown;
|
17 | onActionClick: (id: number) => void;
|
18 | theme: Base16Theme;
|
19 | expandActionRoot: boolean;
|
20 | expandStateRoot: boolean;
|
21 | markStateDiff: boolean;
|
22 | onActionShiftClick: (id: number) => void;
|
23 | }
|
24 |
|
25 | export default class LogMonitorEntryList<
|
26 | S,
|
27 | A extends Action<unknown>
|
28 | > extends PureComponent<Props<S, A>> {
|
29 | static propTypes = {
|
30 | actionsById: PropTypes.object,
|
31 | computedStates: PropTypes.array,
|
32 | stagedActionIds: PropTypes.array,
|
33 | skippedActionIds: PropTypes.array,
|
34 | currentStateIndex: PropTypes.number,
|
35 | consecutiveToggleStartId: PropTypes.number,
|
36 |
|
37 | select: PropTypes.func.isRequired,
|
38 | onActionClick: PropTypes.func.isRequired,
|
39 | theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
|
40 | expandActionRoot: PropTypes.bool,
|
41 | expandStateRoot: PropTypes.bool,
|
42 | };
|
43 |
|
44 | render() {
|
45 | const elements = [];
|
46 | const {
|
47 | theme,
|
48 | actionsById,
|
49 | computedStates,
|
50 | currentStateIndex,
|
51 | consecutiveToggleStartId,
|
52 | select,
|
53 | skippedActionIds,
|
54 | stagedActionIds,
|
55 | expandActionRoot,
|
56 | expandStateRoot,
|
57 | markStateDiff,
|
58 | onActionClick,
|
59 | onActionShiftClick,
|
60 | } = this.props;
|
61 |
|
62 | for (let i = 0; i < stagedActionIds.length; i++) {
|
63 | const actionId = stagedActionIds[i];
|
64 | const action = actionsById[actionId].action;
|
65 | const { state, error } = computedStates[i];
|
66 | let previousState;
|
67 | if (i > 0) {
|
68 | previousState = computedStates[i - 1].state;
|
69 | }
|
70 | elements.push(
|
71 | <LogMonitorEntry
|
72 | key={actionId}
|
73 | theme={theme}
|
74 | select={select}
|
75 | action={action}
|
76 | actionId={actionId}
|
77 | state={state}
|
78 | previousState={previousState}
|
79 | collapsed={skippedActionIds.indexOf(actionId) > -1}
|
80 | inFuture={i > currentStateIndex}
|
81 | selected={consecutiveToggleStartId === i}
|
82 | error={error}
|
83 | expandActionRoot={expandActionRoot}
|
84 | expandStateRoot={expandStateRoot}
|
85 | markStateDiff={markStateDiff}
|
86 | onActionClick={onActionClick}
|
87 | onActionShiftClick={onActionShiftClick}
|
88 | />
|
89 | );
|
90 | }
|
91 |
|
92 | return <div>{elements}</div>;
|
93 | }
|
94 | }
|