feeles-ide/lib/Cards/EditorCard/MenuBar.js

The hackable and serializable IDE to make learning material

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

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

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _typestyle = require("typestyle");

var _core = require("@material-ui/core");

var _icons = require("@material-ui/icons");

var _PlayMenu = _interopRequireDefault(require("./PlayMenu"));

var _CardFloatingBar = _interopRequireDefault(require("../CardFloatingBar"));

var _SelectTab = _interopRequireDefault(require("./SelectTab"));

var _dec, _class, _class2, _temp;

var cn = {
  blank: (0, _typestyle.style)({
    flex: '1 1 auto'
  }),
  icon: (0, _typestyle.style)({
    width: 44,
    alignSelf: 'center'
  })
};

var getCn = function getCn(props) {
  return {
    icon: (0, _typestyle.style)({
      color: props.theme.typography.button.color
    }),
    button: (0, _typestyle.style)({
      marginRight: props.theme.spacing.unit,
      minWidth: 40 // 縦長にはならないように

    })
  };
};

var MenuBar = (_dec = (0, _core.withTheme)(), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(MenuBar, _React$Component);

  function MenuBar() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, MenuBar);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(MenuBar)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "toggleLineWidget", function () {
      var showLineWidget = _this.props.showLineWidget;

      _this.props.setShowLineWidget(!showLineWidget);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleBack", function () {
      _this.props.runApp();

      _this.props.globalEvent.emit('message.editor', {
        data: {
          value: _this.props.filePathToBack
        }
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "toggleExpandingEditorCard", function () {
      _this.props.setExpandingEditorCard(!_this.props.isExpandingEditorCard);
    });
    return _this;
  }

  (0, _createClass2.default)(MenuBar, [{
    key: "render",
    value: function render() {
      var dcn = getCn(this.props);
      var _this$props = this.props,
          filePath = _this$props.filePath,
          filePathToBack = _this$props.filePathToBack,
          iconUrl = _this$props.iconUrl,
          isExpandingEditorCard = _this$props.isExpandingEditorCard;
      var showBackButton = filePath !== filePathToBack;
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_CardFloatingBar.default, null, this.props.localization.editorCard.title, iconUrl ? _react.default.createElement("img", {
        src: iconUrl,
        alt: "",
        className: cn.icon
      }) : !showBackButton ? _react.default.createElement(_icons.Home, {
        fontSize: "large",
        className: cn.icon
      }) : null, _react.default.createElement("div", {
        className: cn.blank
      }), _react.default.createElement(_core.Button, {
        variant: "outlined",
        size: "small",
        disabled: !this.props.hasHistory,
        onClick: this.props.handleUndo,
        className: dcn.button
      }, _react.default.createElement(_icons.KeyboardBackspace, null), this.props.localization.editorCard.undo), _react.default.createElement(_core.Button, {
        variant: "outlined",
        size: "small",
        className: dcn.button,
        onClick: this.toggleLineWidget
      }, this.props.showLineWidget ? _react.default.createElement(_icons.Layers, {
        className: dcn.icon,
        fontSize: "small"
      }) : _react.default.createElement(_icons.LayersClear, {
        fontSize: "small"
      })), _react.default.createElement(_core.Button, {
        variant: isExpandingEditorCard ? 'contained' : 'outlined',
        color: "primary",
        size: "small",
        className: dcn.button,
        onClick: this.toggleExpandingEditorCard
      }, isExpandingEditorCard ? _react.default.createElement(_icons.FullscreenExit, null) : _react.default.createElement(_icons.Fullscreen, null)), showBackButton ? null : _react.default.createElement(_SelectTab.default, {
        filePath: filePath,
        tabs: this.props.tabs,
        globalEvent: this.props.globalEvent,
        localization: this.props.localization,
        className: dcn.button
      }), _react.default.createElement(_PlayMenu.default, {
        getFiles: this.props.getFiles,
        runApp: this.props.runApp,
        href: this.props.href,
        localization: this.props.localization,
        hasChanged: this.props.hasChanged
      })));
    }
  }]);
  return MenuBar;
}(_react.default.Component), (0, _defineProperty2.default)(_class2, "propTypes", {
  theme: _propTypes.default.object.isRequired,
  localization: _propTypes.default.object.isRequired,
  getFiles: _propTypes.default.func.isRequired,
  href: _propTypes.default.string.isRequired,
  handleUndo: _propTypes.default.func.isRequired,
  runApp: _propTypes.default.func.isRequired,
  hasChanged: _propTypes.default.bool.isRequired,
  hasHistory: _propTypes.default.bool.isRequired,
  tabs: _propTypes.default.array.isRequired,
  filePath: _propTypes.default.string.isRequired,
  showLineWidget: _propTypes.default.bool.isRequired,
  setShowLineWidget: _propTypes.default.func.isRequired,
  label: _propTypes.default.string.isRequired,
  iconUrl: _propTypes.default.string.isRequired,
  filePathToBack: _propTypes.default.string.isRequired,
  globalEvent: _propTypes.default.object.isRequired,
  isExpandingEditorCard: _propTypes.default.bool.isRequired,
  setExpandingEditorCard: _propTypes.default.func.isRequired
}), _temp)) || _class);
exports.default = MenuBar;