@vtex/styleguide/lib/Dropzone/index.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactDropzone = require("react-dropzone");

var _reactDropzone2 = _interopRequireDefault(_reactDropzone);

var _FileIcon = require("./FileIcon");

var _FileIcon2 = _interopRequireDefault(_FileIcon);

var _Spinner = require("../Spinner");

var _Spinner2 = _interopRequireDefault(_Spinner);

var _ButtonWithIcon = require("../ButtonWithIcon");

var _ButtonWithIcon2 = _interopRequireDefault(_ButtonWithIcon);

var _Delete = require("../icon/Delete");

var _Delete2 = _interopRequireDefault(_Delete);

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

function _extends() { _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; }; return _extends.apply(this, arguments); }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var dropzoneRef = (0, _react.createRef)();

var Dropzone =
/*#__PURE__*/
function (_PureComponent) {
  _inheritsLoose(Dropzone, _PureComponent);

  function Dropzone() {
    var _this;

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

    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
    _this.state = {
      files: [],
      isHovering: false,
      fileDropped: false
    };

    _this.handleDragEnter = function () {
      _this.setState({
        isHovering: true
      });
    };

    _this.handleDragLeave = function () {
      _this.setState({
        isHovering: false
      });
    };

    _this.handleDropAccepted = function (files) {
      _this.setState({
        isHovering: false,
        fileDropped: true,
        files: files
      });

      _this.props.onDropAccepted(files);
    };

    _this.handleDropRejected = function (files) {
      _this.setState({
        isHovering: false
      });

      _this.props.onDropRejected(files);
    };

    _this.handleRemoveFile = function (fileIndex) {
      var files = _this.state.files;

      if (files.length > 1) {
        var filteredFiles = files.filter(function (_, i) {
          return i !== fileIndex;
        });

        _this.setState({
          files: filteredFiles
        }, function () {
          _this.props.onFileReset(filteredFiles);
        });
      } else {
        _this.handleReset();

        _this.props.onFileReset();
      }
    };

    _this.handleReset = function () {
      _this.setState({
        files: [],
        fileDropped: false
      });
    };

    return _this;
  }

  var _proto = Dropzone.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        children = _this$props.children,
        isLoading = _this$props.isLoading,
        icon = _this$props.icon,
        multiple = _this$props.multiple,
        accept = _this$props.accept,
        maxSize = _this$props.maxSize,
        minSize = _this$props.minSize;
    var _this$state = this.state,
        isHovering = _this$state.isHovering,
        fileDropped = _this$state.fileDropped,
        files = _this$state.files;
    var initialState = !isHovering && !fileDropped;
    var dropzoneContainerClasses = 'flex flex-column items-center justify-center b--light-blue ba br2 bw1 b--dashed ';
    var iconHolderClasses = 'flex items-center justify-center pa6  bg-near-white ';
    var droppedContainerClasses = 'w-100 ';
    var holderSize = '120px';
    var iconHolderStyles = {
      borderRadius: '100%',
      width: holderSize,
      height: holderSize
    };

    if (initialState) {
      dropzoneContainerClasses += 'pa8 ';
    }

    if (isHovering) {
      dropzoneContainerClasses += 'pa8 b--action-primary bg-action-secondary ';
      iconHolderClasses += 'bg-action-primary ';
    }

    if (fileDropped) {
      dropzoneContainerClasses += 'pv4 ph5 bg-muted-5 b--muted-3 ';
    }

    return _react2.default.createElement(_reactDropzone2.default, {
      ref: dropzoneRef,
      multiple: multiple,
      accept: accept,
      maxSize: maxSize,
      minSize: minSize,
      onDropAccepted: this.handleDropAccepted,
      onDropRejected: this.handleDropRejected,
      onDragEnter: this.handleDragEnter,
      onDragLeave: this.handleDragLeave
    }, function (_ref) {
      var getRootProps = _ref.getRootProps,
          getInputProps = _ref.getInputProps;
      return _react2.default.createElement("div", _extends({
        className: dropzoneContainerClasses
      }, getRootProps()), isLoading ? _react2.default.createElement("div", {
        className: iconHolderClasses,
        style: iconHolderStyles
      }, _react2.default.createElement(_Spinner2.default, {
        size: 32
      })) : fileDropped ? _react2.default.createElement("div", {
        className: droppedContainerClasses
      }, files.map(function (file, fileIndex) {
        return _react2.default.createElement("div", {
          key: file.name,
          className: "black-70 flex flex-row justify-between items-center " + (files.length > 1 && fileIndex !== files.length - 1 ? 'mb2' : '')
        }, _react2.default.createElement("span", null, file.name), _react2.default.createElement(_ButtonWithIcon2.default, {
          onClick: function onClick() {
            return _this2.handleRemoveFile(fileIndex);
          },
          variation: "tertiary",
          icon: _react2.default.createElement(_Delete2.default, null)
        }));
      })) : _react2.default.createElement(_react2.default.Fragment, null, _react2.default.createElement("input", getInputProps()), _react2.default.createElement("div", {
        className: iconHolderClasses,
        style: iconHolderStyles
      }, icon || _react2.default.createElement(_FileIcon2.default, null)), children && children));
    });
  };

  return Dropzone;
}(_react.PureComponent);

Dropzone.defaultProps = {
  onDropRejected: function onDropRejected() {},
  children: null,
  icon: null,
  isLoading: false,
  onFileReset: function onFileReset() {},
  multiple: false,
  maxSize: Infinity,
  minSize: 0,
  accept: null
};
Dropzone.propTypes = {
  /** Callback when file(s) is(are) droppped and accepted */
  onDropAccepted: _propTypes2.default.func.isRequired,

  /** Callback when file(s) is(are) droppped and rejected (e.g: when props.multiple is false and multiple files are dragged and dropped.*/
  onDropRejected: _propTypes2.default.func,

  /** Callback when a file is removed */
  onFileReset: _propTypes2.default.func,

  /** Content after the file icon */
  children: _propTypes2.default.node,

  /** Loading state */
  isLoading: _propTypes2.default.bool,

  /** Custom icon */
  icon: _propTypes2.default.node,

  /** Allow multiple files drop */
  multiple: _propTypes2.default.bool,

  /** Set accepted file types. See [this MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) for more information. */
  accept: _propTypes2.default.string,

  /** Maximum file size (in bytes) */
  maxSize: _propTypes2.default.number,

  /** Minimum file size (in bytes) */
  minSize: _propTypes2.default.number
};
exports.default = Dropzone;