1 | import React, { Component } from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import LogMonitorEntry from './LogMonitorEntry';
|
4 | import shouldPureComponentUpdate from 'react-pure-render/function';
|
5 |
|
6 | export default class LogMonitorEntryList extends Component {
|
7 | static propTypes = {
|
8 | actionsById: PropTypes.object,
|
9 | computedStates: PropTypes.array,
|
10 | stagedActionIds: PropTypes.array,
|
11 | skippedActionIds: PropTypes.array,
|
12 | currentStateIndex: PropTypes.number,
|
13 | consecutiveToggleStartId: PropTypes.number,
|
14 |
|
15 | select: PropTypes.func.isRequired,
|
16 | onActionClick: PropTypes.func.isRequired,
|
17 | theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
|
18 | expandActionRoot: PropTypes.bool,
|
19 | expandStateRoot: PropTypes.bool
|
20 | };
|
21 |
|
22 | shouldComponentUpdate = shouldPureComponentUpdate;
|
23 |
|
24 | render() {
|
25 | const elements = [];
|
26 | const {
|
27 | theme,
|
28 | actionsById,
|
29 | computedStates,
|
30 | currentStateIndex,
|
31 | consecutiveToggleStartId,
|
32 | select,
|
33 | skippedActionIds,
|
34 | stagedActionIds,
|
35 | expandActionRoot,
|
36 | expandStateRoot,
|
37 | markStateDiff,
|
38 | onActionClick,
|
39 | onActionShiftClick
|
40 | } = this.props;
|
41 |
|
42 | for (let i = 0; i < stagedActionIds.length; i++) {
|
43 | const actionId = stagedActionIds[i];
|
44 | const action = actionsById[actionId].action;
|
45 | const { state, error } = computedStates[i];
|
46 | let previousState;
|
47 | if (i > 0) {
|
48 | previousState = computedStates[i - 1].state;
|
49 | }
|
50 | elements.push(
|
51 | <LogMonitorEntry
|
52 | key={actionId}
|
53 | theme={theme}
|
54 | select={select}
|
55 | action={action}
|
56 | actionId={actionId}
|
57 | state={state}
|
58 | previousState={previousState}
|
59 | collapsed={skippedActionIds.indexOf(actionId) > -1}
|
60 | inFuture={i > currentStateIndex}
|
61 | selected={consecutiveToggleStartId === i}
|
62 | error={error}
|
63 | expandActionRoot={expandActionRoot}
|
64 | expandStateRoot={expandStateRoot}
|
65 | markStateDiff={markStateDiff}
|
66 | onActionClick={onActionClick}
|
67 | onActionShiftClick={onActionShiftClick}
|
68 | />
|
69 | );
|
70 | }
|
71 |
|
72 | return <div>{elements}</div>;
|
73 | }
|
74 | }
|