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

The hackable and serializable IDE to make learning material

import _Object$assign from 'babel-runtime/core-js/object/assign';
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 IconButton from 'material-ui/IconButton';
import ActionDelete from 'material-ui/svg-icons/action/delete';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import { transparent } from 'material-ui/styles/colors';

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

var getStyles = function getStyles(props, state, context) {
  var isOver = props.isOver;
  var _context$muiTheme = context.muiTheme,
      palette = _context$muiTheme.palette,
      spacing = _context$muiTheme.spacing;


  return {
    icon: {
      borderWidth: 0,
      borderTopWidth: isOver ? spacing.desktopGutterMini : 0,
      borderStyle: 'solid',
      borderColor: transparent,
      backgroundColor: isOver ? palette.disabledColor : transparent,
      borderRadius: 2
    }
  };
};

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

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

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

  _createClass(_TrashBox, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          showTrashes = _props.showTrashes,
          onClick = _props.onClick,
          connectDropTarget = _props.connectDropTarget;
      var palette = this.context.muiTheme.palette;

      var _getStyles = getStyles(this.props, this.state, this.context),
          icon = _getStyles.icon;

      return connectDropTarget(React.createElement(
        'div',
        null,
        React.createElement(
          IconButton,
          { style: icon, onClick: onClick },
          showTrashes ? React.createElement(NavigationArrowBack, { color: palette.secondaryTextColor }) : React.createElement(ActionDelete, { color: palette.secondaryTextColor })
        )
      ));
    }
  }]);

  return _TrashBox;
}(PureComponent);

_TrashBox.propTypes = {
  showTrashes: PropTypes.bool.isRequired,
  putFile: PropTypes.func.isRequired,
  onClick: PropTypes.func.isRequired,

  connectDropTarget: PropTypes.func.isRequired,
  isOver: PropTypes.bool.isRequired
};
_TrashBox.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};


var spec = {
  drop: function drop(props, monitor) {
    var putFile = props.putFile;

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

    files.forEach(function (file) {
      var options = _Object$assign({}, file.options, {
        isTrashed: !file.options.isTrashed
      });
      putFile(file, file.set({ options: options }));
    });
    return {};
  }
};

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

var TrashBox = DropTarget(DragTypes.File, spec, collect)(_TrashBox);
export default TrashBox;