feeles-ide/lib/Cards/HierarchyCard/DirCard.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 { DropTarget } from 'react-dnd';
import { NativeTypes } from 'react-dnd-html5-backend';
import includes from 'lodash/includes';

import FileCard from './FileCard';
import DragTypes from '../../utils/dragTypes';

var getStyles = function getStyles(props, context) {
  var isRoot = props.isRoot,
      isDirOpened = props.isDirOpened,
      isOver = props.isOver,
      dragSource = props.dragSource;

  var cd = props.dir;
  var _context$muiTheme = context.muiTheme,
      palette = _context$muiTheme.palette,
      spacing = _context$muiTheme.spacing,
      transitions = _context$muiTheme.transitions;


  var borderStyle = isOver && !includes(cd.files, dragSource) ? 'dashed' : 'solid';
  var borderWidth = 4;

  return {
    root: isRoot ? {
      paddingTop: 16,
      paddingRight: 0,
      paddingBottom: 80,
      paddingLeft: 16
    } : {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'stretch',
      justifyContent: 'space-around',
      boxSizing: 'border-box',
      height: isDirOpened(cd, 'auto', 40),
      marginTop: 4,
      marginRight: 8,
      paddingBottom: isDirOpened(cd, spacing.desktopGutterLess, 0),
      paddingLeft: isDirOpened(cd, spacing.desktopGutterLess, 0),
      borderWidth: borderWidth,
      borderStyle: borderStyle,
      borderColor: palette.primary1Color,
      borderRadius: 2,
      transition: transitions.easeOut(null, ['margin', 'padding-bottom', 'border'])
    },
    closed: {
      color: palette.secondaryTextColor,
      paddingLeft: spacing.desktopGutterLess,
      cursor: 'pointer'
    },
    closer: {
      marginLeft: -spacing.desktopGutterLess,
      backgroundColor: palette.primary1Color,
      cursor: 'pointer'
    },
    closerLabel: {
      paddingLeft: spacing.desktopGutterLess,
      fontWeight: 'bold',
      color: palette.alternateTextColor
    }
  };
};

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

  function _DirCard() {
    _classCallCheck(this, _DirCard);

    return _possibleConstructorReturn(this, (_DirCard.__proto__ || _Object$getPrototypeOf(_DirCard)).apply(this, arguments));
  }

  _createClass(_DirCard, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          isRoot = _props.isRoot,
          isDirOpened = _props.isDirOpened,
          handleDirToggle = _props.handleDirToggle,
          connectDropTarget = _props.connectDropTarget;

      var cd = this.props.dir;
      var prepareStyles = this.context.muiTheme.prepareStyles;


      var transfer = {
        selectedFile: this.props.selectedFile,
        tabbedFiles: this.props.tabbedFiles,
        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
      };

      var _getStyles = getStyles(this.props, this.context),
          root = _getStyles.root,
          closed = _getStyles.closed,
          closer = _getStyles.closer,
          closerLabel = _getStyles.closerLabel;

      var closerProps = {
        style: prepareStyles(closer),
        labelStyle: prepareStyles(closerLabel),
        onClick: function onClick() {
          return handleDirToggle(cd);
        }
      };

      return connectDropTarget(React.createElement(
        'div',
        { style: prepareStyles(root) },
        isDirOpened(cd, [].concat(isRoot ? null : React.createElement(DirCloser, _extends({ key: 'closer' }, closerProps)), cd.dirs.map(function (dir) {
          return React.createElement(DirCard, _extends({ key: dir.path, dir: dir }, transfer));
        }), cd.files.map(function (file) {
          return React.createElement(FileCard, _extends({ key: file.key, file: file }, transfer));
        })), React.createElement(
          'div',
          {
            style: prepareStyles(closed),
            onClick: function onClick() {
              return handleDirToggle(cd);
            }
          },
          cd.path
        ))
      ));
    }
  }]);

  return _DirCard;
}(PureComponent);

_DirCard.propTypes = {
  dir: PropTypes.object.isRequired,
  selectedFile: PropTypes.object,
  tabbedFiles: PropTypes.array.isRequired,
  isDirOpened: PropTypes.func.isRequired,
  handleFileSelect: PropTypes.func.isRequired,
  handleDirToggle: PropTypes.func.isRequired,
  handleFileMove: PropTypes.func.isRequired,
  handleNativeDrop: PropTypes.func.isRequired,
  isRoot: PropTypes.bool,
  openFileDialog: PropTypes.func.isRequired,
  putFile: PropTypes.func.isRequired,

  connectDropTarget: PropTypes.func.isRequired,
  isOver: PropTypes.bool.isRequired,
  dragSource: PropTypes.object
};
_DirCard.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
_DirCard.defaultProps = {
  isRoot: false
};


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.File:
        files.filter(function (file) {
          return !includes(props.dir.files, file);
        }).forEach(function (file) {
          return props.handleFileMove(file, props.dir);
        });
        break;
      case 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 = DropTarget([DragTypes.File, NativeTypes.FILE], spec, collect)(_DirCard);
export default DirCard;

export var DirCloser = function DirCloser(props) {
  return React.createElement(
    'div',
    { style: props.style, onClick: props.onClick },
    React.createElement(
      'span',
      { style: props.labelStyle },
      '../'
    )
  );
};

DirCloser.propTypes = {
  style: PropTypes.object.isRequired,
  onClick: PropTypes.func.isRequired,
  labelStyle: PropTypes.object.isRequired
};