12332143232324324342

123123132231321231

import React, { Component } from "react";
import {Divider, Icon, Image, Input, Menu, Segment} from "semantic-ui-react";

/**
 * This class is used to render the active circuit feed in the console view
 */
export default class ActiveCircuitFeed extends Component {
  /**
   * builds the active circuit chat component for the circuit feed
   * @param props
   */
  constructor(props) {
    super(props);
    this.imageEmojiSrc = "./assets/images/emoji_cool.png";
  }

  handleClick = (e, { name }) => {
    console.log("clicked on -> " + name);
  };

  /**
   * renders the active circuit chat panel for the feed
   * @returns {*}
   */
  render() {
    return (
      <div id="component" className="activeCircuitChat">
        <Segment inverted>
          <Menu className="controls" inverted icon compact borderless fluid>
            <Menu.Item name="font-color" onClick={this.handleClick}>
              <Icon name="font" />
            </Menu.Item>
            <Menu.Item name="font-bgColor" onClick={this.handleClick}>
              <Icon bordered inverted color="violet" name="font" />
            </Menu.Item>
            <Menu.Item name="font-smaller" onClick={this.handleClick}>
              <Icon.Group>
                <Icon name="font" />
                <Icon name="angle double down" />
              </Icon.Group>
            </Menu.Item>
            <Menu.Item name="font-medium" onClick={this.handleClick}>
              <Icon name="font" />
            </Menu.Item>
            <Menu.Item name="font-larger" onClick={this.handleClick}>
              <Icon.Group>
                <Icon name="font" />
                <Icon name="angle double up" />
              </Icon.Group>
            </Menu.Item>
            <Menu.Item name="font-bold" onClick={this.handleClick}>
              <Icon name="bold" />
            </Menu.Item>
            <Menu.Item name="font-italic" onClick={this.handleClick}>
              <Icon name="italic" />
            </Menu.Item>
            <Menu.Item name="font-underline" onClick={this.handleClick}>
              <Icon name="underline" />
            </Menu.Item>
            <Menu.Item name="font-link" onClick={this.handleClick}>
              link
            </Menu.Item>
            <Menu.Item name="emoji" onClick={this.handleClick}>
              <Image src={this.imageEmojiSrc} verticalAlign="top" />
            </Menu.Item>
          </Menu>
          <div>formated text</div>
          <Input transparent placeholder="Search..." />
        </Segment>
      </div>
    );
  }
}