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

The hackable and serializable IDE to make learning material

"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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 = _interopRequireWildcard(require("react"));

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

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

var _typestyle = require("typestyle");

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));

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

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

var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));

var _ListItemIcon = _interopRequireDefault(require("@material-ui/core/ListItemIcon"));

var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));

var _PlayCircleOutline = _interopRequireDefault(require("@material-ui/icons/PlayCircleOutline"));

var _Refresh = _interopRequireDefault(require("@material-ui/icons/Refresh"));

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

var _colorManipulator = require("@material-ui/core/styles/colorManipulator");

var _dec, _class, _class2, _temp;

var cn = {
  currentSecondaryText: (0, _typestyle.style)({
    marginLeft: 8,
    fontSize: '.8rem',
    opacity: 0.6
  }),
  menu: (0, _typestyle.style)({
    maxHeight: 300
  }),
  href: (0, _typestyle.style)({
    marginLeft: 8,
    fontSize: '.8rem',
    opacity: 0.6
  })
};

var getCn = function getCn(props) {
  return {
    dropDown: (0, _typestyle.style)({
      marginLeft: props.theme.spacing.unit,
      minWidth: 0,
      paddingLeft: 0,
      paddingRight: 0
    }),
    current: (0, _typestyle.style)({
      marginTop: -8,
      marginBottom: -8,
      backgroundColor: (0, _colorManipulator.fade)(props.theme.palette.primary.main, 0.1)
    })
  };
};

var PlayMenu = (_dec = (0, _styles.withTheme)(), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_PureComponent) {
  (0, _inherits2.default)(PlayMenu, _PureComponent);

  function PlayMenu() {
    var _getPrototypeOf2;

    var _this;

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

    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)(PlayMenu)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
      open: false,
      anchorEl: null,
      // [...{ title, href(name) }]
      entries: [],
      hasMultiEntry: false
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handlePlay", function (event) {
      var files = _this.props.getFiles().filter(function (file) {
        return file.is('html');
      });

      var parser = new DOMParser();
      var entries = files.map(function (file) {
        var doc = parser.parseFromString(file.text, 'text/html');
        var titleNode = doc.querySelector('title');
        var title = titleNode && titleNode.textContent;
        return {
          title: title || file.name,
          href: file.name
        };
      }).sort(function (a, b) {
        return a.title > b.title ? 1 : -1;
      });

      _this.setState({
        open: true,
        anchorEl: event.currentTarget,
        entries: entries
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleItemTouchTap", function (event, menuItem) {
      _this.props.runApp(menuItem.props.value);

      _this.setState({
        open: false
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleRequestClose", function () {
      _this.setState({
        open: false
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "renderMenu", function (entry) {
      return _react.default.createElement(_MenuItem.default, {
        key: entry.href,
        value: entry.href
      }, _react.default.createElement("span", null, entry.title), _react.default.createElement("span", {
        style: cn.href
      }, entry.href));
    });
    return _this;
  }

  (0, _createClass2.default)(PlayMenu, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.handleUpdate();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.handleUpdate();
    }
  }, {
    key: "handleUpdate",
    value: function handleUpdate() {
      var files = this.props.getFiles().filter(function (file) {
        return file.is('html');
      });
      this.setState({
        hasMultiEntry: files.length > 1
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var dcn = getCn(this.props);
      var localization = this.props.localization;
      var current = this.state.entries.find(function (item) {
        return item.href === _this2.props.href;
      });
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Button.default, {
        variant: "contained",
        color: this.props.hasChanged ? 'primary' : 'default',
        onClick: function onClick() {
          return _this2.props.runApp();
        }
      }, _react.default.createElement(_PlayCircleOutline.default, null), localization.editorCard.play), this.state.hasMultiEntry ? _react.default.createElement(_Button.default, {
        variant: "text",
        color: "primary",
        className: dcn.dropDown,
        onClick: this.handlePlay
      }, _react.default.createElement(_ArrowDropDown.default, null)) : null, _react.default.createElement(_Popover.default, {
        open: this.state.open,
        anchorEl: this.state.anchorEl,
        anchorOrigin: {
          horizontal: 'right',
          vertical: 'bottom'
        },
        targetOrigin: {
          horizontal: 'right',
          vertical: 'top'
        },
        onClose: this.handleRequestClose
      }, _react.default.createElement(_Menu.default, {
        value: this.state.href,
        className: cn.menu,
        onItemTouchTap: this.handleItemTouchTap
      }, current && [_react.default.createElement(_MenuItem.default, {
        key: "current",
        value: current.href
      }, _react.default.createElement(_ListItemIcon.default, null, _react.default.createElement(_Refresh.default, null)), _react.default.createElement(_ListItemText.default, {
        inset: true,
        primary: current.title,
        secondary: _react.default.createElement("span", {
          className: cn.currentSecondaryText
        }, "Ctrl + Space")
      }), current.title), _react.default.createElement(_Divider.default, {
        key: "divider"
      })], this.state.entries.map(this.renderMenu))));
    }
  }]);
  return PlayMenu;
}(_react.PureComponent), (0, _defineProperty2.default)(_class2, "propTypes", {
  theme: _propTypes.default.object.isRequired,
  getFiles: _propTypes.default.func.isRequired,
  runApp: _propTypes.default.func.isRequired,
  href: _propTypes.default.string.isRequired,
  localization: _propTypes.default.object.isRequired,
  hasChanged: _propTypes.default.bool.isRequired
}), _temp)) || _class);
exports.default = PlayMenu;