@rnga/orders/lib/node_modules/ui/FileInput/index.js

## Get schema from @prisma-cms 1. yarn get-api-schema -e http://localhost:4000 2. yarn build-api-fragments

'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _materialUi = require('material-ui');

var _CloudUpload = require('material-ui-icons/CloudUpload');

var _CloudUpload2 = _interopRequireDefault(_CloudUpload);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var styles = {
  root: {
    minHeight: 54,
    maxWidth: 210,
    padding: "0 3px",
    display: "inline-flex",
    flexDirection: "row",
    alignItems: "center",
    border: "2px dotted #ddd",
    "&:hover": {
      borderColor: "#bbb",
      cursor: "pointer"
    }

  },
  dropable: {
    background: "rgba(255,255,0, 0.2)"
  },
  icon: {
    marginRight: 10
  }
};

var FileInput = function (_Component) {
  _inherits(FileInput, _Component);

  function FileInput(props) {
    _classCallCheck(this, FileInput);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.state = _this.getInitialStore();

    return _this;
  }

  FileInput.prototype.getInitialStore = function getInitialStore() {
    return {
      allowDrop: false
    };
  };

  FileInput.prototype.resetStore = function resetStore() {
    this.setState(_extends({}, this.getInitialStore()));
  };

  FileInput.prototype.getItems = function getItems(event) {

    var items = [];

    if (event.dataTransfer && event.dataTransfer.items) {
      for (var i = 0; i < event.dataTransfer.items.length; i++) {
        var item = event.dataTransfer.items[i];

        items.push(item);
      }
    }

    return items;
  };

  FileInput.prototype.hasImages = function hasImages(event) {

    return this.getItems(event).findIndex(function (n) {
      return n.kind === "file" && /^image\//i.test(n.type);
    }) !== -1;
  };

  FileInput.prototype.render = function render() {
    var _this2 = this;

    var _props = this.props,
        onChange = _props.onChange,
        multiple = _props.multiple,
        classes = _props.classes,
        _props$label = _props.label,
        label = _props$label === undefined ? "Для загрузки перетащите изображения сюда" : _props$label,
        other = _objectWithoutProperties(_props, ['onChange', 'multiple', 'classes', 'label']);

    var allowDrop = this.state.allowDrop;


    return _react2.default.createElement(
      'div',
      {
        className: [classes.root, allowDrop ? classes.dropable : ""].join(" "),
        style: {},
        onDragStart: function onDragStart(event) {
          event.preventDefault();
        },
        onDragEnter: function onDragEnter(event) {
          event.preventDefault();

          // if(event.dataTransfer.items){
          //   for(var i = 0; i < event.dataTransfer.items.length; i++){
          //     const item = event.dataTransfer.items[i];

          //   }
          // }

          _this2.setState({
            allowDrop: _this2.hasImages(event)
          });
        },
        onDragOver: function onDragOver(event) {
          event.preventDefault();
        },
        onDragLeave: function onDragLeave(event) {

          event.preventDefault();
          _this2.resetStore();
        },
        onDrop: function onDrop(event) {
          // alert("Sdfdsf");


          event.preventDefault();

          var valid = true;

          var files = event.dataTransfer.files;


          onChange({
            target: {
              validity: {
                valid: valid
              },
              files: files
            }
          });

          _this2.resetStore();
        },
        onClick: function onClick(event) {
          _this2.input.click();
        }
      },
      _react2.default.createElement('input', {
        type: 'file',
        multiple: multiple,
        ref: function ref(input) {
          _this2.input = input;
        },
        onChange: onChange,
        style: {
          display: "none"
        }
      }),
      _react2.default.createElement(_CloudUpload2.default, {
        className: classes.icon
      }),
      ' ',
      label
    );
  };

  return FileInput;
}(_react.Component);

FileInput.propTypes = process.env.NODE_ENV !== "production" ? {
  classes: _propTypes2.default.object.isRequired
} : {};
exports.default = (0, _materialUi.withStyles)(styles)(FileInput);
module.exports = exports['default'];