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

The hackable and serializable IDE to make learning material

"use strict";

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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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 _propTypes = _interopRequireDefault(require("prop-types"));

var _typestyle = require("typestyle");

var _CardWindow = _interopRequireDefault(require("../CardWindow"));

var _CardContent = _interopRequireDefault(require("@material-ui/core/CardContent"));

var _CardActions = _interopRequireDefault(require("@material-ui/core/CardActions"));

var _Select = _interopRequireDefault(require("@material-ui/core/Select"));

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

var _CardFloatingBar = _interopRequireDefault(require("../CardFloatingBar"));

var _Readme = _interopRequireDefault(require("./Readme"));

var _EditFile = _interopRequireDefault(require("../EditFile"));

var _shallowEqual = _interopRequireDefault(require("../../utils/shallowEqual"));

var cn = {
  text: (0, _typestyle.style)({
    flex: 1,
    paddingTop: 0,
    overflowX: 'hidden',
    overflowY: 'scroll'
  })
};

var ReadmeCard =
/*#__PURE__*/
function (_PureComponent) {
  (0, _inherits2.default)(ReadmeCard, _PureComponent);

  function ReadmeCard() {
    var _getPrototypeOf2;

    var _this;

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

    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)(ReadmeCard)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
      selectedFile: null,
      completes: []
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleComplete", function (event) {
      var value = event.data.value;

      if (!(0, _shallowEqual.default)(value, _this.state.completes)) {
        _this.setState({
          completes: value
        });
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_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(\"".concat(value, "\")"));
        }

        _this.setState({
          selectedFile: selectedFile
        });

        _this.props.setCardVisibility('ReadmeCard', true);
      } else {
        // feeles.closeReadme()
        _this.props.setCardVisibility('ReadmeCard', false);
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleSelect", function (event) {
      _this.setState({
        selectedFile: _this.resolveFile(event.target.value)
      });
    });
    return _this;
  }

  (0, _createClass2.default)(ReadmeCard, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var globalEvent = this.props.globalEvent;
      globalEvent.on('message.complete', this.handleComplete);
      globalEvent.on('message.readme', this.handleReadme);

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

        if (init && init.fileName) {
          this.setState({
            selectedFile: this.props.findFile(init.fileName)
          });
        }
      } catch (e) {// continue regardless of error
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (prevProps.files !== this.props.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,
          fontSize: '.5rem'
        },
        dropDown: {
          verticalAlign: 'bottom'
        }
      };
      return [_react.default.createElement("span", {
        key: "index",
        className: styles.index
      }, localization.readmeCard.index), _react.default.createElement(_Select.default, {
        key: "dropDown",
        value: selectedFile.key,
        className: styles.dropDown,
        onChange: this.handleSelect
      }, markdowns.map(function (file) {
        return _react.default.createElement(_MenuItem.default, {
          key: file.key,
          value: file.key
        }, file.header);
      }))];
    }
  }, {
    key: "render",
    value: function render() {
      var localization = this.props.localization;
      var selectedFile = this.state.selectedFile;

      if (!selectedFile) {
        return null;
      }

      return _react.default.createElement(_CardWindow.default, (0, _extends2.default)({}, this.props.cardPropsBag, {
        fit: true
      }), _react.default.createElement(_CardFloatingBar.default, null, this.props.localization.readmeCard.title), _react.default.createElement(_CardContent.default, {
        className: cn.text
      }, _react.default.createElement(_Readme.default, {
        file: selectedFile,
        findFile: this.props.findFile,
        addFile: this.props.addFile,
        getConfig: this.props.getConfig,
        localization: this.props.localization,
        completes: this.state.completes,
        setLocation: this.props.setLocation,
        globalEvent: this.props.globalEvent
      })), _react.default.createElement(_CardActions.default, null, this.renderDropDownMenu(), _react.default.createElement(_EditFile.default, {
        filePath: selectedFile.name,
        globalEvent: this.props.globalEvent,
        localization: localization
      })));
    }
  }]);
  return ReadmeCard;
}(_react.PureComponent);

exports.default = ReadmeCard;
(0, _defineProperty2.default)(ReadmeCard, "propTypes", {
  cardPropsBag: _propTypes.default.object.isRequired,
  files: _propTypes.default.array.isRequired,
  findFile: _propTypes.default.func.isRequired,
  addFile: _propTypes.default.func.isRequired,
  getConfig: _propTypes.default.func.isRequired,
  localization: _propTypes.default.object.isRequired,
  setLocation: _propTypes.default.func.isRequired,
  setCardVisibility: _propTypes.default.func.isRequired,
  cardProps: _propTypes.default.object.isRequired,
  globalEvent: _propTypes.default.object.isRequired
});