@flexis/ui/components/FileDrop/FileDrop.es.js

Styleless React Components

import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
import _extends from "@babel/runtime-corejs3/helpers/extends";
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs3/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
import _inherits from "@babel/runtime-corejs3/helpers/inherits";
import { __decorate } from "tslib";
import React from 'react';
var _createElement = React.createElement;
var PureComponent = React.PureComponent;
import PropTypes from 'prop-types';
import { Bind, omit } from '../../helpers';
import { style, classes } from './FileDrop.st.css';

var FileSelect =
/** @class */
function () {
  var FileSelect = /*#__PURE__*/function (_PureComponent) {
    _inherits(FileSelect, _PureComponent);

    function FileSelect() {
      var _this;

      _classCallCheck(this, FileSelect);

      _this = _possibleConstructorReturn(this, _getPrototypeOf(FileSelect).apply(this, arguments));
      _this.state = {
        dragOver: false
      };
      return _this;
    }

    _createClass(FileSelect, [{
      key: "render",
      value: function render() {
        var _this$props = this.props,
            className = _this$props.className,
            disabled = _this$props.disabled,
            children = _this$props.children,
            props = _objectWithoutProperties(_this$props, ["className", "disabled", "children"]);

        var dragOver = this.state.dragOver;
        return _createElement("div", _extends({}, omit(props, ['onChange']), {
          className: style(classes.root, {
            disabled: disabled,
            dragOver: dragOver
          }, className),
          onDrag: this.onIgnoredEvent,
          onDragStart: this.onIgnoredEvent,
          onDragOver: this.onDragOver,
          onDragEnter: this.onDragOver,
          onDragLeave: this.onDragLeave,
          onDragEnd: this.onDragLeave,
          onDrop: this.onChange,
          "aria-disabled": disabled
        }), children);
      }
    }, {
      key: "onIgnoredEvent",
      value: function onIgnoredEvent(event) {
        event.stopPropagation();
        event.preventDefault();
      }
    }, {
      key: "onDragOver",
      value: function onDragOver(event) {
        event.stopPropagation();
        event.preventDefault();
        this.setState(function () {
          return {
            dragOver: true
          };
        });
      }
    }, {
      key: "onDragLeave",
      value: function onDragLeave(event) {
        event.stopPropagation();
        event.preventDefault();
        this.setState(function () {
          return {
            dragOver: false
          };
        });
      }
    }, {
      key: "onChange",
      value: function onChange(event) {
        event.stopPropagation();
        event.preventDefault();
        var disabled = this.props.disabled;

        if (disabled) {
          return;
        }

        this.setState(function () {
          return {
            dragOver: false
          };
        });
        var onChange = this.props.onChange;

        if (typeof onChange === 'function') {
          onChange(_Array$from(event.dataTransfer.files), event);
        }
      }
    }]);

    return FileSelect;
  }(PureComponent);

  process.env.NODE_ENV !== "production" ? FileSelect.propTypes = {
    onChange: PropTypes.func,
    disabled: PropTypes.bool,
    children: PropTypes.node
  } : void 0;
  FileSelect.defaultProps = {
    disabled: false
  };

  __decorate([Bind()], FileSelect.prototype, "onDragOver", null);

  __decorate([Bind()], FileSelect.prototype, "onDragLeave", null);

  __decorate([Bind()], FileSelect.prototype, "onChange", null);

  return FileSelect;
}();

export default FileSelect;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ZpbGVEcm9wL0ZpbGVEcm9wLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQSxPQUFPLEtBQVAsTUFLTyxPQUxQOzs7QUFNQSxPQUFPLFNBQVAsTUFBc0IsWUFBdEI7QUFDQSxTQUVDLElBRkQsRUFHQyxJQUhELFFBSU8sZUFKUDtBQUtBLFNBQ0MsS0FERCxFQUVDLE9BRkQsUUFHTyxtQkFIUDs7QUFvQkEsSUFBQSxVQUFBO0FBQUE7QUFBQSxZQUFBO0FBQUEsTUFBcUIsVUFBckI7QUFBQTs7QUFBQSwwQkFBQTtBQUFBOztBQUFBOzs7QUFZQyxZQUFBLEtBQUEsR0FBUTtBQUNQLFFBQUEsUUFBUSxFQUFFO0FBREgsT0FBUjtBQVpEO0FBeUdDOztBQXpHRDtBQUFBO0FBQUEsK0JBZ0JPO0FBQUEsMEJBT0QsS0FBSyxLQVBKO0FBQUEsWUFHSixTQUhJLGVBR0osU0FISTtBQUFBLFlBSUosUUFKSSxlQUlKLFFBSkk7QUFBQSxZQUtKLFFBTEksZUFLSixRQUxJO0FBQUEsWUFNRCxLQU5DOztBQUFBLFlBU0osUUFUSSxHQVVELEtBQUssS0FWSixDQVNKLFFBVEk7QUFZTCxlQUNDLG1DQUNLLElBQUksQ0FBQyxLQUFELEVBQVEsQ0FBQyxVQUFELENBQVIsQ0FEVDtBQUVDLFVBQUEsU0FBUyxFQUFFLEtBQUssQ0FBQyxPQUFPLENBQUMsSUFBVCxFQUFlO0FBQzlCLFlBQUEsUUFBUSxFQUFSLFFBRDhCO0FBRTlCLFlBQUEsUUFBUSxFQUFSO0FBRjhCLFdBQWYsRUFHYixTQUhhLENBRmpCO0FBTUMsVUFBQSxNQUFNLEVBQUUsS0FBSyxjQU5kO0FBT0MsVUFBQSxXQUFXLEVBQUUsS0FBSyxjQVBuQjtBQVFDLFVBQUEsVUFBVSxFQUFFLEtBQUssVUFSbEI7QUFTQyxVQUFBLFdBQVcsRUFBRSxLQUFLLFVBVG5CO0FBVUMsVUFBQSxXQUFXLEVBQUUsS0FBSyxXQVZuQjtBQVdDLFVBQUEsU0FBUyxFQUFFLEtBQUssV0FYakI7QUFZQyxVQUFBLE1BQU0sRUFBRSxLQUFLLFFBWmQ7QUFhQywyQkFBZTtBQWJoQixZQWVFLFFBZkYsQ0FERDtBQW1CQTtBQS9DRjtBQUFBO0FBQUEscUNBaUR3QixLQWpEeEIsRUFpRHdDO0FBQ3RDLFFBQUEsS0FBSyxDQUFDLGVBQU47QUFDQSxRQUFBLEtBQUssQ0FBQyxjQUFOO0FBQ0E7QUFwREY7QUFBQTtBQUFBLGlDQXVEb0IsS0F2RHBCLEVBdURvQztBQUVsQyxRQUFBLEtBQUssQ0FBQyxlQUFOO0FBQ0EsUUFBQSxLQUFLLENBQUMsY0FBTjtBQUVBLGFBQUssUUFBTCxDQUFjO0FBQUEsaUJBQU87QUFDcEIsWUFBQSxRQUFRLEVBQUU7QUFEVSxXQUFQO0FBQUEsU0FBZDtBQUdBO0FBL0RGO0FBQUE7QUFBQSxrQ0FrRXFCLEtBbEVyQixFQWtFcUM7QUFFbkMsUUFBQSxLQUFLLENBQUMsZUFBTjtBQUNBLFFBQUEsS0FBSyxDQUFDLGNBQU47QUFFQSxhQUFLLFFBQUwsQ0FBYztBQUFBLGlCQUFPO0FBQ3BCLFlBQUEsUUFBUSxFQUFFO0FBRFUsV0FBUDtBQUFBLFNBQWQ7QUFHQTtBQTFFRjtBQUFBO0FBQUEsK0JBNkVrQixLQTdFbEIsRUE2RWtDO0FBRWhDLFFBQUEsS0FBSyxDQUFDLGVBQU47QUFDQSxRQUFBLEtBQUssQ0FBQyxjQUFOO0FBSGdDLFlBTS9CLFFBTitCLEdBTzVCLEtBQUssS0FQdUIsQ0FNL0IsUUFOK0I7O0FBU2hDLFlBQUksUUFBSixFQUFjO0FBQ2I7QUFDQTs7QUFFRCxhQUFLLFFBQUwsQ0FBYztBQUFBLGlCQUFPO0FBQ3BCLFlBQUEsUUFBUSxFQUFFO0FBRFUsV0FBUDtBQUFBLFNBQWQ7QUFiZ0MsWUFrQi9CLFFBbEIrQixHQW1CNUIsS0FBSyxLQW5CdUIsQ0FrQi9CLFFBbEIrQjs7QUFxQmhDLFlBQUksT0FBTyxRQUFQLEtBQW9CLFVBQXhCLEVBQW9DO0FBQ25DLFVBQUEsUUFBUSxDQUNQLFlBQVcsS0FBSyxDQUFDLFlBQU4sQ0FBbUIsS0FBOUIsQ0FETyxFQUVQLEtBRk8sQ0FBUjtBQUlBO0FBQ0Q7QUF4R0Y7O0FBQUE7QUFBQSxJQUF3QyxhQUF4Qzs7QUFFUSwwQ0FBQSxVQUFBLENBQUEsU0FBQSxHQUFZO0FBQ2xCLElBQUEsUUFBUSxFQUFFLFNBQVMsQ0FBQyxJQURGO0FBRWxCLElBQUEsUUFBUSxFQUFFLFNBQVMsQ0FBQyxJQUZGO0FBR2xCLElBQUEsUUFBUSxFQUFFLFNBQVMsQ0FBQztBQUhGLEdBQVo7QUFNQSxFQUFBLFVBQUEsQ0FBQSxZQUFBLEdBQWU7QUFDckIsSUFBQSxRQUFRLEVBQUU7QUFEVyxHQUFmOztBQStDUCxFQUFBLFVBQUEsQ0FBQSxDQURDLElBQUksRUFDTCxDQUFBLEUsb0JBQUEsRSxZQUFBLEVBUUMsSUFSRCxDQUFBOztBQVdBLEVBQUEsVUFBQSxDQUFBLENBREMsSUFBSSxFQUNMLENBQUEsRSxvQkFBQSxFLGFBQUEsRUFRQyxJQVJELENBQUE7O0FBV0EsRUFBQSxVQUFBLENBQUEsQ0FEQyxJQUFJLEVBQ0wsQ0FBQSxFLG9CQUFBLEUsVUFBQSxFQTJCQyxJQTNCRCxDQUFBOztBQTRCRCxTQUFBLFVBQUE7QUFBQyxDQXpHRCxFQUFBOztlQUFxQixVIiwic291cmNlUm9vdCI6IiJ9