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

The hackable and serializable IDE to make learning material

import _regeneratorRuntime from 'babel-runtime/regenerator';
import _asyncToGenerator from 'babel-runtime/helpers/asyncToGenerator';
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 { DragSource } from 'react-dnd';
import Paper from 'material-ui/Paper';
import IconButton from 'material-ui/IconButton';
import { fade } from 'material-ui/utils/colorManipulator';
import EditorDragHandle from 'material-ui/svg-icons/editor/drag-handle';
import ActionSettings from 'material-ui/svg-icons/action/settings';
import includes from 'lodash/includes';

import Filename from './Filename';
import { PreferenceDialog } from '../../FileDialog/';
import DragTypes from '../../utils/dragTypes';

var getStyles = function getStyles(props, context) {
  var file = props.file,
      selectedFile = props.selectedFile,
      tabbedFiles = props.tabbedFiles,
      isDragging = props.isDragging;
  var _context$muiTheme = context.muiTheme,
      palette = _context$muiTheme.palette,
      spacing = _context$muiTheme.spacing,
      transitions = _context$muiTheme.transitions;


  var isSelected = selectedFile === file;
  var backgroundColor = includes(tabbedFiles, file) ? fade(palette.canvasColor, 1) : palette.disabledColor;

  return {
    root: {
      marginTop: 4,
      marginRight: 8,
      transition: transitions.easeOut()
    },
    card: {
      boxSizing: 'border-box',
      height: 40,
      paddingLeft: spacing.desktopGutterLess,
      borderTopRightRadius: isSelected ? 0 : 2,
      borderBottomRightRadius: isSelected ? 0 : 2,
      backgroundColor: backgroundColor,
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      opacity: isDragging ? 0.5 : 1,
      transition: transitions.easeOut()
    },
    dragHandle: {
      flex: '0 0 auto',
      width: spacing.iconSize,
      height: spacing.iconSize,
      marginRight: spacing.desktopGutterMini,
      cursor: 'move'
    },
    container: {
      flex: '1 1 auto',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center'
    }
  };
};

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

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

    var _temp, _this, _ret;

    _classCallCheck(this, FileCard);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FileCard.__proto__ || _Object$getPrototypeOf(FileCard)).call.apply(_ref, [this].concat(args))), _this), _this.handleConfirmSettings = function () {
      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
        var _this$props, file, openFileDialog, putFile, change;

        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                event.stopPropagation();
                _this$props = _this.props, file = _this$props.file, openFileDialog = _this$props.openFileDialog, putFile = _this$props.putFile;
                _context.next = 4;
                return openFileDialog(PreferenceDialog, { content: file });

              case 4:
                change = _context.sent;

                if (change) {
                  putFile(file, file.set(change));
                }

              case 6:
              case 'end':
                return _context.stop();
            }
          }
        }, _callee, _this2);
      }));

      return function (_x) {
        return _ref2.apply(this, arguments);
      };
    }(), _this.handleNameChange = function (event, name) {
      var _this$props2 = _this.props,
          file = _this$props2.file,
          putFile = _this$props2.putFile;


      return putFile(file, file.rename(name));
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(FileCard, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          file = _props.file,
          selectedFile = _props.selectedFile,
          handleFileSelect = _props.handleFileSelect,
          connectDragSource = _props.connectDragSource,
          connectDragPreview = _props.connectDragPreview;
      var _context$muiTheme2 = this.context.muiTheme,
          prepareStyles = _context$muiTheme2.prepareStyles,
          secondaryTextColor = _context$muiTheme2.palette.secondaryTextColor;


      var isSelected = selectedFile === file;

      var _getStyles = getStyles(this.props, this.context),
          root = _getStyles.root,
          card = _getStyles.card,
          dragHandle = _getStyles.dragHandle,
          container = _getStyles.container;

      return connectDragPreview(React.createElement(
        'div',
        { style: root },
        React.createElement(
          Paper,
          {
            zDepth: isSelected ? 2 : 0,
            onClick: function onClick() {
              return handleFileSelect(file);
            },
            style: card
          },
          connectDragSource(React.createElement(
            'div',
            { style: prepareStyles(dragHandle) },
            React.createElement(EditorDragHandle, { color: secondaryTextColor })
          )),
          React.createElement(
            'div',
            { style: prepareStyles(container) },
            React.createElement(Filename, { file: file, onChange: this.handleNameChange })
          ),
          React.createElement(
            IconButton,
            { onClick: this.handleConfirmSettings },
            React.createElement(ActionSettings, { color: secondaryTextColor })
          )
        )
      ));
    }
  }]);

  return FileCard;
}(PureComponent);

FileCard.propTypes = {
  file: PropTypes.object.isRequired,
  selectedFile: PropTypes.object,
  tabbedFiles: PropTypes.array.isRequired,
  handleFileSelect: PropTypes.func.isRequired,
  openFileDialog: PropTypes.func.isRequired,
  putFile: PropTypes.func.isRequired,

  connectDragSource: PropTypes.func.isRequired,
  connectDragPreview: PropTypes.func.isRequired,
  isDragging: PropTypes.bool.isRequired
};
FileCard.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};


var spec = {
  beginDrag: function beginDrag(props) {
    return { files: [props.file] };
  }
};

var collect = function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  };
};

export default DragSource(DragTypes.File, spec, collect)(FileCard);