1 | import React, { Component } from 'react';
|
2 | import JSONTree from 'react-json-tree';
|
3 |
|
4 | const styles = {
|
5 | actionBar: {
|
6 | paddingTop: 8,
|
7 | paddingBottom: 7,
|
8 | paddingLeft: 16
|
9 | },
|
10 | payload: {
|
11 | margin: 0,
|
12 | paddingLeft: 16,
|
13 | overflow: 'auto'
|
14 | }
|
15 | };
|
16 |
|
17 | export default class LogMonitorAction extends Component {
|
18 | constructor(props) {
|
19 | super(props);
|
20 | this.shouldExpandNode = this.shouldExpandNode.bind(this);
|
21 | }
|
22 |
|
23 | renderPayload(payload) {
|
24 | return (
|
25 | <div
|
26 | style={{
|
27 | ...styles.payload,
|
28 | backgroundColor: this.props.theme.base00
|
29 | }}
|
30 | >
|
31 | {Object.keys(payload).length > 0 ? (
|
32 | <JSONTree
|
33 | theme={this.props.theme}
|
34 | invertTheme={false}
|
35 | keyPath={['action']}
|
36 | data={payload}
|
37 | shouldExpandNode={this.shouldExpandNode}
|
38 | />
|
39 | ) : (
|
40 | ''
|
41 | )}
|
42 | </div>
|
43 | );
|
44 | }
|
45 |
|
46 | shouldExpandNode(keyName, data, level) {
|
47 | return this.props.expandActionRoot && level === 0;
|
48 | }
|
49 |
|
50 | render() {
|
51 | const { type, ...payload } = this.props.action;
|
52 | return (
|
53 | <div
|
54 | style={{
|
55 | backgroundColor: this.props.theme.base02,
|
56 | color: this.props.theme.base06,
|
57 | ...this.props.style
|
58 | }}
|
59 | >
|
60 | <div style={styles.actionBar} onClick={this.props.onClick}>
|
61 | {type !== null && type.toString()}
|
62 | </div>
|
63 | {!this.props.collapsed ? this.renderPayload(payload) : ''}
|
64 | </div>
|
65 | );
|
66 | }
|
67 | }
|