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

The hackable and serializable IDE to make learning material

import _extends from 'babel-runtime/helpers/extends';
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 Card from '../CardWindow';
import { CardText, CardActions } from 'material-ui/Card';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import MapsMap from 'material-ui/svg-icons/maps/map';

import Readme from './Readme';
import EditFile from '../EditFile';
import shallowEqual from '../../utils/shallowEqual';

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

  function ReadmeCard() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, ReadmeCard);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ReadmeCard.__proto__ || _Object$getPrototypeOf(ReadmeCard)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      selectedFile: null,
      completes: []
    }, _this.handleComplete = function (event) {
      var value = event.data.value;

      if (!shallowEqual(value, _this.state.completes)) {
        _this.setState({
          completes: value
        });
      }
    }, _this.handleReadme = function (event) {
      var value = event.data.value;

      if (value) {
        // feeles.openReamde()
        var selectedFile = _this.props.findFile(value);
        if (!selectedFile) {
          throw new Error('Not Found Error: feeles.openReamde("' + value + '")');
        }
        _this.setState({ selectedFile: selectedFile });
        _this.props.updateCard('ReadmeCard', { visible: true });
      } else {
        // feeles.closeReadme()
        _this.props.updateCard('ReadmeCard', { visible: false });
      }
    }, _this.handleSelect = function (event, index, value) {
      _this.setState({
        selectedFile: _this.resolveFile(value)
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

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

      globalEvent.on('message.complete', this.handleComplete);
      globalEvent.on('message.readme', this.handleReadme);

      try {
        var init = this.props.cards.ReadmeCard.init;

        if (init && init.fileName) {
          this.setState({
            selectedFile: this.props.findFile(init.fileName)
          });
        }
      } catch (e) {
        // continue regardless of error
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.files !== nextProps.files) {
        // TODO: watch file
        if (this.state.selectedFile) {
          this.setState({
            selectedFile: this.resolveFile(this.state.selectedFile.key)
          });
        }
      }
    }
  }, {
    key: 'resolveFile',
    value: function resolveFile(key) {
      if (!key) {
        return null;
      }
      return this.props.findFile(function (item) {
        return item.key === key;
      });
    }
  }, {
    key: 'renderDropDownMenu',
    value: function renderDropDownMenu() {
      var localization = this.props.localization;
      var selectedFile = this.state.selectedFile;


      var markdowns = this.props.files.filter(function (item) {
        return item.is('markdown');
      }).sort(function (a, b) {
        return a.header > b.header ? 1 : -1;
      });

      var styles = {
        index: {
          marginLeft: 16,
          marginRight: -8,
          fontSize: '.5rem'
        },
        dropDown: {
          verticalAlign: 'bottom'
        },
        underline: {
          display: 'none'
        }
      };

      return [React.createElement(
        'span',
        { key: 'index', style: styles.index },
        localization.readmeCard.index
      ), React.createElement(
        DropDownMenu,
        {
          key: 'dropDown',
          value: selectedFile.key,
          style: styles.dropDown,
          underlineStyle: styles.underline,
          onChange: this.handleSelect
        },
        markdowns.map(function (file) {
          return React.createElement(MenuItem, { key: file.key, value: file.key, primaryText: file.header });
        })
      )];
    }
  }, {
    key: 'render',
    value: function render() {
      var localization = this.props.localization;
      var selectedFile = this.state.selectedFile;


      if (!selectedFile) {
        return null;
      }

      var styles = {
        text: {
          flex: 1,
          paddingTop: 0,
          overflowX: 'hidden',
          overflowY: 'scroll'
        },
        actions: {
          flex: 0
        }
      };
      return React.createElement(
        Card,
        _extends({ icon: ReadmeCard.icon() }, this.props.cardPropsBag, { fit: true }),
        React.createElement(
          CardText,
          { style: styles.text },
          React.createElement(Readme, {
            file: selectedFile,
            selectTab: this.props.selectTab,
            findFile: this.props.findFile,
            addFile: this.props.addFile,
            getConfig: this.props.getConfig,
            localization: this.props.localization,
            completes: this.state.completes,
            setLocation: this.props.setLocation
          })
        ),
        React.createElement(
          CardActions,
          { style: styles.actions },
          this.renderDropDownMenu(),
          React.createElement(EditFile, {
            fileKey: selectedFile.key,
            findFile: this.props.findFile,
            selectTab: this.props.selectTab,
            localization: localization
          })
        )
      );
    }
  }], [{
    key: 'icon',
    value: function icon() {
      return React.createElement(MapsMap, null);
    }
  }]);

  return ReadmeCard;
}(PureComponent);

ReadmeCard.propTypes = {
  cardPropsBag: PropTypes.object.isRequired,
  files: PropTypes.array.isRequired,
  findFile: PropTypes.func.isRequired,
  selectTab: PropTypes.func.isRequired,
  addFile: PropTypes.func.isRequired,
  getConfig: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired,
  setLocation: PropTypes.func.isRequired,
  updateCard: PropTypes.func.isRequired,
  cards: PropTypes.object.isRequired,
  globalEvent: PropTypes.object.isRequired
};
export default ReadmeCard;