@scion-scxml/redux-devtools-scion-monitor/src/LogMonitorEntryAction.js

Redux monitor to visualize SCXML state

import React, { Component } from 'react';
import JSONTree from 'react-json-tree';

const styles = {
  actionBar: {
    paddingTop: 8,
    paddingBottom: 7,
    paddingLeft: 16
  },
  payload: {
    margin: 0,
    paddingLeft: 16,
    overflow: 'auto'
  }
};

export default class LogMonitorAction extends Component {
  constructor(props) {
    super(props);
    this.shouldExpandNode = this.shouldExpandNode.bind(this);
  }

  renderPayload(payload) {
    return (
      <div style={{
        ...styles.payload,
        backgroundColor: this.props.theme.base00
      }}>
        { Object.keys(payload).length > 0 ?
          <JSONTree theme={this.props.theme}
                    invertTheme={false}
                    keyPath={['action']}
                    data={payload}
                    shouldExpandNode={this.shouldExpandNode} /> : '' }
      </div>
    );
  }

  shouldExpandNode(keyName, data, level) {
    return this.props.expandActionRoot && level === 0;
  }

  render() {
    const { type, ...payload } = this.props.action;
    return (
      <div style={{
        backgroundColor: this.props.theme.base02,
        color: this.props.theme.base06,
        ...this.props.style
      }}>
        <div style={styles.actionBar}
          onClick={this.props.onClick}>
          {type !== null && type.toString()}
        </div>
        {!this.props.collapsed ? this.renderPayload(payload) : ''}
      </div>
    );
  }
}