feeles-ide/lib/Cards/EditorCard/SelectTab.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 _getPrototypeOf4 = _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 _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));

var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));

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

var _Description = _interopRequireDefault(require("@material-ui/icons/Description"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _ArrowRight = _interopRequireDefault(require("@material-ui/icons/ArrowRight"));

var _ = require("./");

var cn = {
  blank: (0, _typestyle.style)({
    flex: '1 1 auto'
  }),
  menuSize: {
    paper: (0, _typestyle.style)({
      width: 200
    })
  },
  menuItem: (0, _typestyle.style)({
    paddingTop: 4,
    paddingBottom: 4
  }),
  icon: (0, _typestyle.style)({
    width: 24,
    height: 24,
    marginRight: 4
  })
};

var Icon = function Icon(props) {
  return props.iconUrl ? _react.default.createElement("img", {
    src: props.iconUrl,
    alt: "",
    className: cn.icon
  }) : _react.default.createElement(_Description.default, null);
};

Icon.propTypes = {
  iconUrl: _propTypes.default.string
};

var SelectTab =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(SelectTab, _React$Component);

  function SelectTab() {
    var _getPrototypeOf2;

    var _this;

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

    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, _getPrototypeOf4.default)(SelectTab)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
      anchorEl: null
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleClick", function (event) {
      _this.setState({
        anchorEl: event.currentTarget
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleClose", function () {
      _this.setState({
        anchorEl: null
      });
    });
    return _this;
  }

  (0, _createClass2.default)(SelectTab, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (prevProps.filePath !== this.props.filePath) {
        // ファイルが選択されたので Popout は閉じる
        this.handleClose();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var anchorEl = this.state.anchorEl; // 現在選択中のタブの情報を filePath (ファイル名) から調べる. tabs の中にはない(nullになる)こともある

      var selected = _.Tab.find(this.props.tabs, this.props.filePath);

      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Button.default, {
        variant: "text",
        onClick: this.handleClick,
        className: this.props.className
      }, selected ? _react.default.createElement(Icon, {
        iconUrl: selected.iconUrl
      }) : null, _react.default.createElement(_ArrowDropDown.default, null)), _react.default.createElement(_Menu.default, {
        id: "file-select-menu",
        anchorEl: anchorEl,
        open: Boolean(anchorEl),
        classes: cn.menuSize,
        onClose: this.handleClose
      }, _react.default.createElement(NestedMenus, {
        tabs: this.props.tabs,
        localization: this.props.localization,
        filePath: this.props.filePath,
        globalEvent: this.props.globalEvent
      })));
    }
  }]);
  return SelectTab;
}(_react.default.Component);

exports.default = SelectTab;
(0, _defineProperty2.default)(SelectTab, "propTypes", {
  className: _propTypes.default.string.isRequired,
  localization: _propTypes.default.object.isRequired,
  tabs: _propTypes.default.array.isRequired,
  filePath: _propTypes.default.string.isRequired,
  globalEvent: _propTypes.default.object.isRequired
});

var NestedMenus =
/*#__PURE__*/
function (_React$Component2) {
  (0, _inherits2.default)(NestedMenus, _React$Component2);

  function NestedMenus() {
    var _getPrototypeOf3;

    var _this2;

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

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

    _this2 = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf3 = (0, _getPrototypeOf4.default)(NestedMenus)).call.apply(_getPrototypeOf3, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this2)), "state", {
      anchorEl: null,
      selectedIndex: -1
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this2)), "handleMenuItemClick", function (filePath) {
      _this2.props.globalEvent.emit('message.editor', {
        data: {
          value: filePath
        }
      });

      _this2.handleClose();
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this2)), "handleOpen", function (event, index) {
      _this2.setState({
        anchorEl: event.currentTarget,
        selectedIndex: index
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this2)), "handleClose", function () {
      _this2.setState({
        anchorEl: null,
        selectedIndex: -1
      });
    });
    return _this2;
  }

  (0, _createClass2.default)(NestedMenus, [{
    key: "render",
    value: function render() {
      var _this3 = this;

      var anchorEl = this.state.anchorEl;
      return _react.default.createElement(_react.default.Fragment, null, this.props.tabs.map(function (tab, index) {
        return tab.filePath ? _react.default.createElement(_MenuItem.default, {
          key: index,
          selected: tab.filePath === _this3.props.filePath,
          className: cn.menuItem,
          onClick: function onClick() {
            return _this3.handleMenuItemClick(tab.filePath);
          }
        }, _react.default.createElement(Icon, {
          iconUrl: tab.iconUrl
        }), _react.default.createElement(_Typography.default, {
          variant: "body2"
        }, tab.label)) : tab.tabs ? _react.default.createElement(_react.default.Fragment, {
          key: index
        }, _react.default.createElement(_MenuItem.default, {
          selected: index === _this3.state.selectedIndex,
          className: cn.menuItem,
          onClick: function onClick(event) {
            return _this3.handleOpen(event, index);
          }
        }, _react.default.createElement(Icon, {
          iconUrl: tab.iconUrl
        }), _react.default.createElement(_Typography.default, {
          variant: "body2"
        }, tab.label), _react.default.createElement("div", {
          className: cn.blank
        }), _react.default.createElement(_ArrowRight.default, null)), _react.default.createElement(_Menu.default, {
          id: "file-select-menu-".concat(tab.label),
          classes: cn.menuSize,
          open: index === _this3.state.selectedIndex,
          anchorEl: anchorEl,
          onClose: _this3.handleClose,
          anchorOrigin: {
            horizontal: 'right',
            vertical: 'top'
          }
        }, _react.default.createElement(NestedMenus, {
          tabs: tab.tabs,
          localization: _this3.props.localization,
          filePath: _this3.props.filePath,
          globalEvent: _this3.props.globalEvent
        }))) : null;
      }));
    }
  }]);
  return NestedMenus;
}(_react.default.Component);

(0, _defineProperty2.default)(NestedMenus, "propTypes", {
  tabs: _propTypes.default.array.isRequired,
  localization: _propTypes.default.object.isRequired,
  filePath: _propTypes.default.string.isRequired,
  globalEvent: _propTypes.default.object.isRequired
});