forked from alexkuz/redux-devtools-inspector
-
Notifications
You must be signed in to change notification settings - Fork 8
/
ActionPreview.jsx
97 lines (88 loc) · 2.62 KB
/
ActionPreview.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import React, { Component } from 'react';
import { DEFAULT_STATE } from './redux';
import ActionPreviewHeader from './ActionPreviewHeader';
import DiffTab from './tabs/DiffTab';
import StateTab from './tabs/StateTab';
import ActionTab from './tabs/ActionTab';
const DEFAULT_TABS = [{
name: 'Action',
component: ActionTab
}, {
name: 'Diff',
component: DiffTab
}, {
name: 'State',
component: StateTab
}]
class ActionPreview extends Component {
static defaultProps = {
tabName: DEFAULT_STATE.tabName
}
render() {
const {
styling, delta, error, nextState, onInspectPath, inspectedPath, tabName,
isWideLayout, onSelectTab, action, actions, selectedActionId, startActionId,
computedStates, base16Theme, invertTheme, tabs, dataTypeKey, monitorState, updateMonitorState
} = this.props;
const renderedTabs = (typeof tabs === 'function') ?
tabs(DEFAULT_TABS) :
(tabs ? tabs : DEFAULT_TABS);
const { component: TabComponent } = (
renderedTabs.find(tab => tab.name === tabName)
|| renderedTabs.find(tab => tab.name === DEFAULT_STATE.tabName)
);
return (
<div key='actionPreview' {...styling('actionPreview')}>
<ActionPreviewHeader
tabs={renderedTabs}
{...{ styling, inspectedPath, onInspectPath, tabName, onSelectTab }}
/>
{!error &&
<div key='actionPreviewContent' {...styling('actionPreviewContent')}>
<TabComponent
labelRenderer={this.labelRenderer}
{...{
styling,
computedStates,
actions,
selectedActionId,
startActionId,
base16Theme,
invertTheme,
isWideLayout,
dataTypeKey,
delta,
action,
nextState,
monitorState,
updateMonitorState
}}
/>
</div>
}
{error &&
<div {...styling('stateError')}>{error}</div>
}
</div>
);
}
labelRenderer = ([key, ...rest], nodeType, expanded) => {
const { styling, onInspectPath, inspectedPath } = this.props;
return (
<span>
<span {...styling('treeItemKey')}>
{key}
</span>
<span {...styling('treeItemPin')}
onClick={() => onInspectPath([
...inspectedPath.slice(0, inspectedPath.length - 1),
...[key, ...rest].reverse()
])}>
{'(pin)'}
</span>
{!expanded && ': '}
</span>
);
}
}
export default ActionPreview;