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

The hackable and serializable IDE to make learning material

import _getIterator from 'babel-runtime/core-js/get-iterator';
import _extends from 'babel-runtime/helpers/extends';
import _defineProperty from 'babel-runtime/helpers/defineProperty';
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 IconButton from 'material-ui/IconButton';
import ContentCreate from 'material-ui/svg-icons/content/create';
import AVPlayCircleOutline from 'material-ui/svg-icons/av/play-circle-outline';

import Card from '../CardWindow';
import SourceEditor from './SourceEditor';
import ChromeTab, { Tab } from '../../ChromeTab/';

var MAX_TAB = 5;

var getStyles = function getStyles(props, context) {
  var palette = context.muiTheme.palette;


  return {
    tabContainer: {
      position: 'absolute',
      top: 0,
      width: 'calc(100% - 48px)',
      boxSizing: 'border-box',
      display: 'flex',
      alignItems: 'flex-end',
      height: 32,
      paddingRight: 7,
      paddingLeft: 40,
      zIndex: 10
    },
    tabContentContainer: {
      flex: 1,
      position: 'relative',
      borderTop: '1px solid ' + palette.primary1Color
    }
  };
};

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

  function EditorCard() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, EditorCard);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = EditorCard.__proto__ || _Object$getPrototypeOf(EditorCard)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      // { [Tab.file.key]: Doc }
      currentDoc: {}
    }, _this.setLocation = function (href) {
      _this.props.setLocation(href);
      _this.props.scrollToCard('MonitorCard');
    }, _this.handleEditor = function (event) {
      var value = event.data.value;

      if (value) {
        // feeles.openEditor()
        var getFile = function getFile() {
          return _this.props.findFile(value);
        };
        _this.props.selectTab(new Tab({ getFile: getFile }));
        _this.props.updateCard('EditorCard', { visible: true });
      } else {
        // feeles.closeEditor()
        _this.props.updateCard('EditorCard', { visible: false });
      }
    }, _this.getFiles = function () {
      return _this.props.files;
    }, _this.handleCloseSelectedTab = function () {
      _this.props.tabs.filter(function (item) {
        return item.isSelected;
      }).forEach(function (item) {
        return _this.props.closeTab(item);
      });
    }, _this.handleSelectTabFromFile = function (file) {
      _this.props.tabs.filter(function (item) {
        return item.file.key === file.key;
      }).forEach(function (item) {
        return _this.props.selectTab(item);
      });
    }, _this.handleDocChanged = function (next) {
      if (next) {
        _this.setState({ currentDoc: _defineProperty({}, next.id, next.doc) });
      } else {
        _this.setState({ currentDoc: {} });
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(EditorCard, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      var globalEvent = this.props.globalEvent;

      globalEvent.on('message.editor', this.handleEditor);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.tabs !== nextProps.tabs) {
        var prevSelected = this.props.tabs.find(function (t) {
          return t.isSelected;
        });
        var nextSelected = nextProps.tabs.find(function (t) {
          return t.isSelected;
        });
        if (prevSelected !== nextSelected) {
          // タブの選択が変化したら EditorCard にスクロールする
          this.props.scrollToCard('EditorCard');
        }
      }
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      // init.fileName があるとき Mount 後に selectTab しておく
      try {
        var init = this.props.cards.EditorCard.init;

        if (init && init.fileName) {
          var getFile = function getFile() {
            return _this2.props.findFile(init.fileName);
          };
          this.props.selectTab(new Tab({ getFile: getFile }));
        }
      } catch (e) {
        // continue regardless of error
      }
    }
  }, {
    key: 'renderBackground',
    value: function renderBackground() {
      var _this3 = this;

      var palette = this.context.muiTheme.palette;


      var styles = {
        noFileBg: {
          flex: '1 1 auto',
          backgroundColor: palette.primary1Color,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        },
        logo: {
          color: palette.secondaryTextColor
        },
        largeIcon: {
          width: 40,
          height: 40
        },
        large: {
          width: 80,
          height: 80,
          padding: 20
        }
      };

      return React.createElement(
        'div',
        { style: styles.noFileBg },
        React.createElement(
          'h1',
          { style: styles.logo },
          'Feeles'
        ),
        React.createElement(
          IconButton,
          {
            iconStyle: styles.largeIcon,
            style: styles.large,
            onClick: function onClick() {
              return _this3.setLocation();
            }
          },
          React.createElement(AVPlayCircleOutline, { color: palette.alternateTextColor })
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      if (!this.props.tabs.length) {
        return React.createElement(
          Card,
          _extends({ icon: EditorCard.icon() }, this.props.cardPropsBag, { fit: true }),
          this.renderBackground()
        );
      }

      var _props = this.props,
          putFile = _props.putFile,
          selectTab = _props.selectTab,
          openFileDialog = _props.openFileDialog,
          localization = _props.localization,
          findFile = _props.findFile,
          getConfig = _props.getConfig,
          reboot = _props.reboot,
          cardPropsBag = _props.cardPropsBag;

      var styles = getStyles(this.props, this.context);

      var tabs = [];
      var containerWidth = this.tabContainer ? this.tabContainer.getBoundingClientRect().width - styles.tabContainer.paddingLeft - styles.tabContainer.paddingRight : 0;
      var _iteratorNormalCompletion = true;
      var _didIteratorError = false;
      var _iteratorError = undefined;

      try {
        for (var _iterator = _getIterator(this.props.tabs), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
          var tab = _step.value;

          if (tabs.length < MAX_TAB) {
            // current tab でなければ undefined
            var doc = this.state.currentDoc[tab.file.key];
            tabs.push(React.createElement(ChromeTab, {
              key: tab.key,
              tab: tab,
              file: tab.file,
              tabs: tabs,
              isSelected: tab.isSelected,
              localization: localization,
              handleSelect: selectTab,
              handleClose: this.props.closeTab,
              containerWidth: containerWidth,
              doc: doc
            }));
          }
        }
      } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion && _iterator.return) {
            _iterator.return();
          }
        } finally {
          if (_didIteratorError) {
            throw _iteratorError;
          }
        }
      }

      var selectedTab = this.props.tabs.find(function (item) {
        return item.isSelected;
      });

      return React.createElement(
        Card,
        _extends({ icon: EditorCard.icon() }, cardPropsBag, { fit: true, width: 640 }),
        React.createElement(
          'div',
          { style: styles.tabContainer, ref: function ref(_ref2) {
              return _this4.tabContainer = _ref2;
            } },
          tabs
        ),
        React.createElement(
          'div',
          { style: styles.tabContentContainer },
          React.createElement(SourceEditor, {
            fileView: this.props.fileView,
            file: selectedTab.file,
            files: this.props.files,
            getFiles: this.getFiles,
            closeSelectedTab: this.handleCloseSelectedTab,
            selectTabFromFile: this.handleSelectTabFromFile,
            setLocation: this.setLocation,
            href: this.props.href,
            getConfig: getConfig,
            loadConfig: this.props.loadConfig,
            findFile: findFile,
            localization: localization,
            reboot: reboot,
            openFileDialog: openFileDialog,
            putFile: putFile,
            onDocChanged: this.handleDocChanged
          })
        )
      );
    }
  }], [{
    key: 'icon',
    value: function icon() {
      return React.createElement(ContentCreate, null);
    }
  }]);

  return EditorCard;
}(PureComponent);

EditorCard.propTypes = {
  fileView: PropTypes.object.isRequired,
  cardPropsBag: PropTypes.object.isRequired,
  files: PropTypes.array.isRequired,
  tabs: PropTypes.array.isRequired,
  putFile: PropTypes.func.isRequired,
  selectTab: PropTypes.func.isRequired,
  closeTab: PropTypes.func.isRequired,
  setLocation: PropTypes.func.isRequired,
  openFileDialog: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired,
  findFile: PropTypes.func.isRequired,
  getConfig: PropTypes.func.isRequired,
  setConfig: PropTypes.func.isRequired,
  loadConfig: PropTypes.func.isRequired,
  reboot: PropTypes.bool.isRequired,
  href: PropTypes.string.isRequired,
  scrollToCard: PropTypes.func.isRequired,
  cards: PropTypes.object.isRequired,
  updateCard: PropTypes.func.isRequired,
  globalEvent: PropTypes.object.isRequired
};
EditorCard.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default EditorCard;


export { default as Preview } from './Preview';
export { default as SourceEditor } from './SourceEditor';