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

The hackable and serializable IDE to make learning material

import _extends from 'babel-runtime/helpers/extends';
import _regeneratorRuntime from 'babel-runtime/regenerator';
import _asyncToGenerator from 'babel-runtime/helpers/asyncToGenerator';
import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
import _Promise from 'babel-runtime/core-js/promise';
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 FloatingActionButton from 'material-ui/FloatingActionButton';
import FileFolderOpen from 'material-ui/svg-icons/file/folder-open';
import ContentAdd from 'material-ui/svg-icons/content/add';
import includes from 'lodash/includes';

import Card from '../CardWindow';
import { makeFromFile } from '../../File/';
import { SignDialog, AddDialog } from '../../FileDialog/';
import { Tab } from '../../ChromeTab/';
import Root from './Root';
import SearchBar from './SearchBar';

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

  function HierarchyCard() {
    var _ref,
        _this2 = this;

    var _temp, _this, _ret;

    _classCallCheck(this, HierarchyCard);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = HierarchyCard.__proto__ || _Object$getPrototypeOf(HierarchyCard)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      openedPaths: [''],
      tabbedFiles: [],
      filter: function filter() {
        return false;
      }
    }, _this.handleNativeDrop = function (files) {
      var dir = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
      var _this$props = _this.props,
          addFile = _this$props.addFile,
          openFileDialog = _this$props.openFileDialog;


      _Promise.all(files.map(makeFromFile)).then(function (files) {
        return openFileDialog(SignDialog, {
          content: files,
          getFiles: function getFiles() {
            return _this.props.files;
          }
        });
      }).then(function (files) {
        files = files.map(function (file) {
          return dir ? file.move(dir.path) : file;
        });
        return _Promise.all(files.map(addFile));
      }).then(function (files) {
        files = files.slice(0, 5);
        return _Promise.all(files.map(_this.handleFileSelect));
      });
    }, _this.handleDirToggle = function (dir) {
      var openedPaths = _this.isDirOpened(dir, _this.state.openedPaths.filter(function (path) {
        return path !== dir.path;
      }), _this.state.openedPaths.concat(dir.path));
      _this.setState({ openedPaths: openedPaths });
    }, _this.handleFileMove = function (file, dir) {
      var putFile = _this.props.putFile;


      return putFile(file, file.move(dir.path));
    }, _this.handleFileSelect = function (file) {
      var _this$props2 = _this.props,
          selectTab = _this$props2.selectTab,
          closeTab = _this$props2.closeTab,
          tabs = _this$props2.tabs,
          findFile = _this$props2.findFile;

      if (file.is('text')) {
        // SourceFile
        var getFile = function getFile() {
          return findFile(function (_ref2) {
            var key = _ref2.key;
            return key === file.key;
          });
        };
        var tab = new Tab({ getFile: getFile });

        var selected = tabs.find(function (tab) {
          return tab.isSelected;
        });

        if (selected && selected.is(tab)) {
          closeTab(selected);
        } else {
          selectTab(tab);
        }
      } else {
        // BinaryFile
        try {
          window.open(file.blobURL, file.blobURL);
        } catch (e) {
          // continue regardless of error
        }
      }
    }, _this.isDirOpened = function (dir, passed, failed) {
      return includes(_this.state.openedPaths, dir.path) ? passed : failed;
    }, _this.handleDelete = function () {
      var _this$props3;

      (_this$props3 = _this.props).deleteFile.apply(_this$props3, _toConsumableArray(_this.props.files.filter(_this.state.filter)));
    }, _this.handleAdd = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var file;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.next = 2;
              return _this.props.openFileDialog(AddDialog);

            case 2:
              file = _context.sent;

              if (!file) {
                _context.next = 8;
                break;
              }

              _context.next = 6;
              return _this.props.addFile(file);

            case 6:
              _context.next = 8;
              return _this.handleFileSelect(file);

            case 8:
            case 'end':
              return _context.stop();
          }
        }
      }, _callee, _this2);
    })), _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(HierarchyCard, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.files !== nextProps.files || this.props.tabs !== nextProps.tabs) {
        this.setState({
          tabbedFiles: nextProps.tabs.map(function (tab) {
            return tab.file;
          })
        });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _props = this.props,
          files = _props.files,
          putFile = _props.putFile,
          openFileDialog = _props.openFileDialog,
          localization = _props.localization;
      var filter = this.state.filter;


      var tabs = this.props.tabs.filter(function (tab) {
        return !tab.props.component;
      });
      var selected = tabs.find(function (tab) {
        return tab.isSelected;
      });

      var transfer = {
        selectedFile: selected && selected.file,
        tabbedFiles: this.state.tabbedFiles,
        openFileDialog: openFileDialog,
        putFile: putFile,
        isDirOpened: this.isDirOpened,
        handleFileSelect: this.handleFileSelect,
        handleDirToggle: this.handleDirToggle,
        handleFileMove: this.handleFileMove,
        handleNativeDrop: this.handleNativeDrop
      };

      var styles = {
        button: {
          margin: 16,
          alignSelf: 'flex-end'
        }
      };

      return React.createElement(
        Card,
        _extends({ icon: HierarchyCard.icon() }, this.props.cardPropsBag, { fit: true }),
        React.createElement(SearchBar, {
          files: files,
          filterRef: function filterRef(filter) {
            return _this3.setState({ filter: filter });
          },
          putFile: putFile,
          deleteAll: this.handleDelete,
          onOpen: this.handleNativeDrop,
          openFileDialog: openFileDialog,
          saveAs: this.props.saveAs,
          localization: localization
        }),
        React.createElement(Root, _extends({ files: files.filter(filter) }, transfer)),
        React.createElement(
          FloatingActionButton,
          {
            mini: true,
            style: styles.button,
            onClick: this.handleAdd
          },
          React.createElement(ContentAdd, null)
        )
      );
    }
  }], [{
    key: 'icon',
    value: function icon() {
      return React.createElement(FileFolderOpen, null);
    }
  }]);

  return HierarchyCard;
}(PureComponent);

HierarchyCard.propTypes = {
  files: PropTypes.array.isRequired,
  tabs: PropTypes.array.isRequired,
  addFile: PropTypes.func.isRequired,
  putFile: PropTypes.func.isRequired,
  deleteFile: PropTypes.func.isRequired,
  findFile: PropTypes.func.isRequired,
  selectTab: PropTypes.func.isRequired,
  closeTab: PropTypes.func.isRequired,
  saveAs: PropTypes.func.isRequired,
  openFileDialog: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired,
  cardPropsBag: PropTypes.object.isRequired
};
HierarchyCard.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default HierarchyCard;