@rnga/orders/src/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

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import { withStyles } from 'material-ui';

import UploadIcon from 'material-ui-icons/CloudUpload';

const 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,
  },
}


class FileInput extends Component {


  static propTypes = {
    classes: PropTypes.object.isRequired,
  };


  constructor(props) {

    super(props);

    this.state = this.getInitialStore();

  }


  getInitialStore(){
    return {
      allowDrop: false,
    }
  }

  resetStore() {
    this.setState({
      ...this.getInitialStore(),
    });
  }


  getItems(event) {

    let items = [];

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

        items.push(item);
      }
    }

    return items;
  }


  hasImages(event) {

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


  render() {

    const {
      onChange,
      multiple,
      classes,
      label = "Для загрузки перетащите изображения сюда",
      ...other
    } = this.props;

    const {
      allowDrop,
    } = this.state;

    return <div
      className={[classes.root, allowDrop ? classes.dropable : ""].join(" ")}
      style={{
      }}
      onDragStart={event => {
        event.preventDefault();



      }}
      onDragEnter={event => {
        event.preventDefault();









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

        //   }
        // }

        this.setState({
          allowDrop: this.hasImages(event),
        });

      }}
      onDragOver={event => {
        event.preventDefault();






      }}
      onDragLeave={event => {

        event.preventDefault();
        this.resetStore();
      }}
      onDrop={(event) => {
        // alert("Sdfdsf");





        event.preventDefault();

        let valid = true;

        const {
          files,
        } = event.dataTransfer;

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

        this.resetStore();

      }}
      onClick={event => {
        this.input.click();
      }}
    >
      <input
        type="file"
        multiple={multiple}
        ref={input => {
          this.input = input;
        }}
        onChange={onChange}
        style={{
          display: "none",
        }}
      />
      <UploadIcon
        className={classes.icon}
      /> {label}
    </div>
  }
}

export default withStyles(styles)(FileInput);