stitch-ui/src/push/components/Message.js

import React from "react"; // eslint-disable-line no-unused-vars
import PropTypes from "prop-types";
import DropdownMenu from "react-dd-menu";
import { Button } from "../../core";

class Message extends React.Component {
  constructor(props) {
    super(props);
    this.state = { dropdownOpen: false };
  }
  render() {
    const { message } = this.props;
    const menuOptions = {
      isOpen: this.state.dropdownOpen,
      close: () => {
        this.setState({ dropdownOpen: false });
      },
      toggle: (
        <Button
          small
          onClick={() => {
            this.setState({ dropdownOpen: !this.state.dropdownOpen });
          }}
        >
          <b>
            {"…"}
          </b>
        </Button>
      )
    };

    return (
      <tr className="push-message">
        <td className="push-message-label">
          {message.label}
        </td>
        <td className="push-message-text">
          {message.message}
        </td>
        <td className="push-message-topic">
          {message.topic}
        </td>
        <td className="push-message-actions">
          <DropdownMenu {...menuOptions}>
            {this.props.children}
          </DropdownMenu>
        </td>
      </tr>
    );
  }
}

Message.propTypes = {
  message: PropTypes.shape({
    _id: PropTypes.string.isRequired,
    message: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    topic: PropTypes.string.isRequired
  }).isRequired,
  children: PropTypes.element.isRequired
};

export default Message;