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

The hackable and serializable IDE to make learning material

"use strict";

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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DirCloser = 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 _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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

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

var _react = _interopRequireWildcard(require("react"));

var _styles = require("@material-ui/core/styles");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _typestyle = require("typestyle");

var _reactDnd = require("react-dnd");

var _reactDndHtml5Backend = require("react-dnd-html5-backend");

var _includes = _interopRequireDefault(require("lodash/includes"));

var _FileCard = _interopRequireDefault(require("./FileCard"));

var _dragTypes = _interopRequireDefault(require("../../utils/dragTypes"));

var _dec, _dec2, _class, _class2, _temp;

var cn = {
  root: (0, _typestyle.style)({
    borderWidth: 0,
    paddingTop: 16,
    paddingRight: 0,
    paddingBottom: 80,
    paddingLeft: 16
  })
};

var getCn = function getCn(props) {
  return {
    dir: (0, _typestyle.style)({
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'stretch',
      justifyContent: 'space-around',
      boxSizing: 'border-box',
      marginTop: 4,
      marginRight: 8,
      borderWidth: 4,
      borderRadius: 2,
      height: props.isDirOpened(props.dir, 'auto', 40),
      paddingBottom: props.isDirOpened(props.dir, props.theme.spacing.unit * 2, 0),
      paddingLeft: props.isDirOpened(props.dir, props.theme.spacing.unit * 2, 0),
      borderStyle: props.isOver && !(0, _includes.default)(props.dir.files, props.dragSource) ? 'dashed' : 'solid',
      borderColor: props.theme.palette.primary.main,
      transition: props.theme.transitions.create(['margin', 'padding-bottom', 'border'])
    }),
    closed: (0, _typestyle.style)({
      cursor: 'pointer',
      color: props.theme.palette.text.secondary,
      paddingLeft: props.theme.spacing.unit * 2
    }),
    closer: (0, _typestyle.style)({
      cursor: 'pointer',
      marginLeft: -props.theme.spacing.unit * 2,
      backgroundColor: props.theme.palette.primary.main
    }),
    closerLabel: (0, _typestyle.style)({
      fontWeight: 'bold',
      paddingLeft: props.theme.spacing.unit * 2,
      color: props.theme.palette.primary.contrastText
    })
  };
};

var spec = {
  drop: function drop(props, monitor) {
    if (monitor.getDropResult()) {
      return;
    }

    var _monitor$getItem = monitor.getItem(),
        files = _monitor$getItem.files;

    switch (monitor.getItemType()) {
      case _dragTypes.default.File:
        files.filter(function (file) {
          return !(0, _includes.default)(props.dir.files, file);
        }).forEach(function (file) {
          return props.handleFileMove(file, props.dir);
        });
        break;

      case _reactDndHtml5Backend.NativeTypes.FILE:
        props.handleNativeDrop(files, props.dir);
        break;
    }

    return {};
  }
};

var collect = function collect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver({
      shallow: true
    }),
    dragSource: monitor.getItem()
  };
};

var DirCard = (_dec = (0, _reactDnd.DropTarget)([_dragTypes.default.File, _reactDndHtml5Backend.NativeTypes.FILE], spec, collect), _dec2 = (0, _styles.withTheme)(), _dec(_class = _dec2(_class = (_temp = _class2 =
/*#__PURE__*/
function (_PureComponent) {
  (0, _inherits2.default)(DirCard, _PureComponent);

  function DirCard() {
    (0, _classCallCheck2.default)(this, DirCard);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(DirCard).apply(this, arguments));
  }

  (0, _createClass2.default)(DirCard, [{
    key: "render",
    value: function render() {
      var dcn = getCn(this.props);
      var _this$props = this.props,
          isRoot = _this$props.isRoot,
          isDirOpened = _this$props.isDirOpened,
          handleDirToggle = _this$props.handleDirToggle,
          isOver = _this$props.isOver,
          dragSource = _this$props.dragSource,
          connectDropTarget = _this$props.connectDropTarget;
      var cd = this.props.dir;
      var transfer = {
        isDirOpened: this.props.isDirOpened,
        handleFileSelect: this.props.handleFileSelect,
        handleDirToggle: this.props.handleDirToggle,
        handleFileMove: this.props.handleFileMove,
        handleNativeDrop: this.props.handleNativeDrop,
        openFileDialog: this.props.openFileDialog,
        putFile: this.props.putFile,
        theme: this.props.theme,
        connectDropTarget: connectDropTarget,
        isOver: isOver,
        dragSource: dragSource
      };
      return connectDropTarget(_react.default.createElement("div", {
        className: isRoot ? cn.root : dcn.dir
      }, isDirOpened(cd, [].concat(isRoot ? null : _react.default.createElement(DirCloser, {
        key: "closer",
        classes: dcn,
        onClick: function onClick() {
          return handleDirToggle(cd);
        }
      }), cd.dirs.map(function (dir) {
        return _react.default.createElement(DirCard, (0, _extends2.default)({
          key: dir.path,
          dir: dir
        }, transfer));
      }), cd.files.map(function (file) {
        return _react.default.createElement(_FileCard.default, (0, _extends2.default)({
          key: file.key,
          file: file
        }, transfer));
      })), _react.default.createElement("div", {
        className: dcn.closed,
        onClick: function onClick() {
          return handleDirToggle(cd);
        }
      }, cd.path))));
    }
  }]);
  return DirCard;
}(_react.PureComponent), (0, _defineProperty2.default)(_class2, "propTypes", {
  theme: _propTypes.default.object.isRequired,
  dir: _propTypes.default.object.isRequired,
  isDirOpened: _propTypes.default.func.isRequired,
  handleFileSelect: _propTypes.default.func.isRequired,
  handleDirToggle: _propTypes.default.func.isRequired,
  handleFileMove: _propTypes.default.func.isRequired,
  handleNativeDrop: _propTypes.default.func.isRequired,
  isRoot: _propTypes.default.bool,
  openFileDialog: _propTypes.default.func.isRequired,
  putFile: _propTypes.default.func.isRequired,
  connectDropTarget: _propTypes.default.func.isRequired,
  isOver: _propTypes.default.bool.isRequired,
  dragSource: _propTypes.default.object
}), (0, _defineProperty2.default)(_class2, "defaultProps", {
  isRoot: false
}), _temp)) || _class) || _class);
exports.default = DirCard;
var DirCloser = (0, _styles.withTheme)()(function (props) {
  return _react.default.createElement("div", {
    className: props.classes.closer,
    onClick: props.onClick
  }, _react.default.createElement("span", {
    className: props.classes.closerLabel
  }, "../"));
});
exports.DirCloser = DirCloser;
DirCloser.propTypes = {
  classes: _propTypes.default.object.isRequired,
  onClick: _propTypes.default.func.isRequired
};