electrode-electrify-react-component/lib/components/sub-components/modules.js

electrode-electrify-react-component

"use strict";

exports.__esModule = true;

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _electrify = require("./electrify");

var _electrify2 = _interopRequireDefault(_electrify);

var _modulesByPkg = require("./modules-by-pkg");

var _modulesByPkg2 = _interopRequireDefault(_modulesByPkg);

var _IconButton = require("material-ui/IconButton");

var _IconButton2 = _interopRequireDefault(_IconButton);

var _IconMenu = require("material-ui/IconMenu");

var _IconMenu2 = _interopRequireDefault(_IconMenu);

var _MenuItem = require("material-ui/MenuItem");

var _MenuItem2 = _interopRequireDefault(_MenuItem);

var _filterList = require("material-ui/svg-icons/content/filter-list");

var _filterList2 = _interopRequireDefault(_filterList);

var _base = require("../../../src/styles/base.css");

var _base2 = _interopRequireDefault(_base);

var _bind = require("classnames/bind");

var _bind2 = _interopRequireDefault(_bind);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// import {bundle} from "../../helpers/modules-helpers/parsing-utils";
// import createD3Visualization from "../../helpers/modules-helpers/d3visualization";
var cx = _bind2.default.bind(_base2.default);

var _ref = _react2.default.createElement(
  "h4",
  null,
  "Electrify"
);

var _ref2 = _react2.default.createElement(
  "h4",
  null,
  "Modules by Package"
);

var Modules = function (_Component) {
  (0, _inherits3.default)(Modules, _Component);

  function Modules(props) {
    (0, _classCallCheck3.default)(this, Modules);

    var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));

    _this.state = { moduleMode: "electrify" };
    return _this;
  }

  //TODO: Link MUI MenuItem buttons to D3
  /*
  componentDidMount(){
    const root = this.parseModules();
    const domElements = {
      svg: this.refs.svg,
      modeSelectors: this.refs.iconMenu
    }
    createD3Visualization(root, this.refs.svg, "size", true);
  }
   parseModules() {
    return bundle(this.props.modules, (data) => {
      return JSON.parse(data.data);
    });
  }
   createElectrifyContainer() {
    return (
      <div style={{width: 700}}>
        <div className={styles.electrifyChartContainer}>
          <div className ={styles.electrifyChart} ref="svg" />
        </div>
      </div>)
  }
  */

  Modules.prototype.createModuleTitle = function createModuleTitle() {
    return _react2.default.createElement(
      "div",
      { className: _base2.default.title },
      _react2.default.createElement(
        "div",
        { className: _base2.default.iconContainer },
        _react2.default.createElement(
          "i",
          { className: cx([{ modulesIcon: true }, "material-icons", "md-36", "md-light"]) },
          "group_work"
        )
      ),
      _react2.default.createElement(
        "h2",
        { className: _base2.default.titleText },
        "Modules"
      )
    );
  };

  Modules.prototype.createModuleNavBar = function createModuleNavBar() {
    var _this2 = this;

    return _react2.default.createElement(
      "div",
      { className: _base2.default.modulesNavBar },
      _react2.default.createElement(
        "div",
        null,
        _react2.default.createElement(
          "div",
          {
            onClick: function onClick() {
              return _this2.setState({ moduleMode: "electrify" });
            },
            className: this.state.moduleMode === "electrify" ? _base2.default.modulesTab : _base2.default.modulesTabSelected },
          _ref
        ),
        _react2.default.createElement(
          "div",
          {
            onClick: function onClick() {
              return _this2.setState({ moduleMode: "byPkg" });
            },
            className: this.state.moduleMode === "byPkg" ? _base2.default.modulesTab : _base2.default.modulesTabSelected },
          _ref2
        )
      )
    );
  };

  Modules.prototype.createModules = function createModules() {
    switch (this.state.moduleMode) {
      case "electrify":
        //note: if Electrify is not a separate component
        //switching between module tabs will not trigger D3 to re-render
        return _react2.default.createElement(_electrify2.default, { modules: this.props.modules });
      // return this.createElectrifyContainer()
      case "byPkg":
        return _react2.default.createElement(_modulesByPkg2.default, {
          modulesByPkg: this.props.modulesByPkg,
          totalSize: this.props.totalSize
        });
      // case "duplicates":
      //   return;
      default:
        return _react2.default.createElement(_electrify2.default, { modules: this.props.modules });
      // return this.createElectrifyContainer()
    }
  };

  Modules.prototype.render = function render() {
    return _react2.default.createElement(
      "div",
      null,
      this.createModuleTitle(),
      this.createModuleNavBar(),
      _react2.default.createElement(
        "div",
        { className: _base2.default.modulesContainer },
        this.createModules()
      )
    );
  };

  return Modules;
}(_react.Component);

Modules.propTypes = {
  modules: _react.PropTypes.array,
  modulesByPkg: _react.PropTypes.object,
  totalSize: _react.PropTypes.number
};

exports.default = Modules;