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

The hackable and serializable IDE to make learning material

import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import FlatButton from 'material-ui/FlatButton';
import Popover from 'material-ui/Popover';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import Divider from 'material-ui/Divider';
import AVPlayCircleOutline from 'material-ui/svg-icons/av/play-circle-outline';
import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh';
import NavigationArrowDropDown from 'material-ui/svg-icons/navigation/arrow-drop-down';
import { fade } from 'material-ui/utils/colorManipulator';

var PlayMenu = function (_PureComponent) {
  _inherits(PlayMenu, _PureComponent);

  function PlayMenu() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, PlayMenu);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = PlayMenu.__proto__ || _Object$getPrototypeOf(PlayMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      open: false,
      anchorEl: null,
      // [...{ title, href(name) }]
      entries: []
    }, _this.handlePlay = function (event) {
      var files = _this.props.getFiles().filter(function (file) {
        return file.is('html');
      });

      if (files.length <= 1) {
        // 表示すべきリストがない
        _this.props.setLocation();
        return;
      }

      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
      });
    }, _this.handleItemTouchTap = function (event, menuItem) {
      _this.props.setLocation(menuItem.props.value);
      _this.setState({
        open: false
      });
    }, _this.handleRequestClose = function () {
      _this.setState({
        open: false
      });
    }, _this.renderMenu = function (entry) {
      var hrefStyle = {
        marginLeft: 8,
        fontSize: '.8rem',
        opacity: 0.6
      };

      return React.createElement(
        MenuItem,
        { key: entry.href, value: entry.href },
        React.createElement(
          'span',
          null,
          entry.title
        ),
        React.createElement(
          'span',
          { style: hrefStyle },
          entry.href
        )
      );
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(PlayMenu, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var localization = this.props.localization;
      var palette = this.context.muiTheme.palette;


      var styles = {
        button: {
          padding: 0,
          lineHeight: 2,
          color: palette.alternateTextColor,
          backgroundColor: palette.primary1Color,
          borderRadius: 0
        },
        dropDown: {
          marginLeft: -16,
          minWidth: 32,
          padding: 0,
          lineHeight: 2,
          color: palette.alternateTextColor,
          backgroundColor: palette.primary1Color,
          borderRadius: 0
        },
        current: {
          backgroundColor: fade(palette.primary1Color, 0.1),
          marginTop: -8,
          marginBottom: -8
        },
        currentSecondaryText: {
          marginLeft: 8,
          fontSize: '.8rem',
          opacity: 0.6
        },
        menu: {
          maxHeight: 300
        }
      };

      var current = this.state.entries.find(function (item) {
        return item.href === _this2.props.href;
      });

      return React.createElement(
        'div',
        null,
        React.createElement(FlatButton, {
          primary: true,
          label: localization.editorCard.play,
          style: styles.button,
          icon: React.createElement(AVPlayCircleOutline, null),
          onClick: function onClick() {
            return _this2.props.setLocation();
          }
        }),
        React.createElement(FlatButton, {
          primary: true,
          style: styles.dropDown,
          icon: React.createElement(NavigationArrowDropDown, null),
          onClick: this.handlePlay
        }),
        React.createElement(
          Popover,
          {
            open: this.state.open,
            anchorEl: this.state.anchorEl,
            anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
            targetOrigin: { horizontal: 'right', vertical: 'top' },
            onRequestClose: this.handleRequestClose
          },
          React.createElement(
            Menu,
            {
              value: this.state.href,
              style: styles.menu,
              onItemTouchTap: this.handleItemTouchTap
            },
            current && [React.createElement(MenuItem, {
              key: 'current',
              value: current.href,
              innerDivStyle: styles.current,
              leftIcon: React.createElement(NavigationRefresh, null),
              primaryText: current.title,
              secondaryText: React.createElement(
                'span',
                { style: styles.currentSecondaryText },
                'Ctrl + Space'
              )
            }), React.createElement(Divider, { key: 'divider' })],
            this.state.entries.map(this.renderMenu)
          )
        )
      );
    }
  }]);

  return PlayMenu;
}(PureComponent);

PlayMenu.propTypes = {
  getFiles: PropTypes.func.isRequired,
  setLocation: PropTypes.func.isRequired,
  href: PropTypes.string.isRequired,
  localization: PropTypes.object.isRequired
};
PlayMenu.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default PlayMenu;