const React = require("react");
const { DOM: dom, PropTypes } = React;
const { div } = dom;
const { bindActionCreators } = require("redux");
const { connect } = require("react-redux");
const ImPropTypes = require("react-immutable-proptypes");
const actions = require("../actions");
const { getEventListeners } = require("../selectors");

require("./EventListeners.css");

function renderListener({ type, selector }, selectSource) {
  return dom.div({
    className: "listener",
    key: `${type}`
  },
    dom.span({ className: "type" }, type),
    dom.span({ className: "selector" }, selector),
  );
}

function EventListeners({ selectSource, listeners }) {
  return dom.div({
    className: "pane event-listeners"
  },
    listeners.map((l) => renderListener(l, selectSource))
  );
}

EventListeners.propTypes = {
  listeners: PropTypes.array
};

module.exports = connect(
  state => ({ listeners: getEventListeners(state) }),
  dispatch => bindActionCreators(actions, dispatch)
)(EventListeners);

@@ -405,16 +405,32 @@
 selector
+, line, sourceId
  %7D, sele
@@ -487,16 +487,69 @@
 tener%22,%0A
+    onClick: () =%3E selectSource(sourceId, %7B line %7D),%0A
     key:

add onclick