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

Styleless React Components

"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = void 0;

var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));

var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));

var _tslib = require("tslib");

var _react = _interopRequireDefault(require("react"));

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

var _helpers = require("../../helpers");

var _FileDropSt = require("./FileDrop.st.css");

var _createElement = _react.default.createElement;
var PureComponent = _react.default.PureComponent;

var FileSelect =
/** @class */
function () {
  var FileSelect = /*#__PURE__*/function (_PureComponent) {
    (0, _inherits2.default)(FileSelect, _PureComponent);

    function FileSelect() {
      var _this;

      (0, _classCallCheck2.default)(this, FileSelect);
      _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(FileSelect).apply(this, arguments));
      _this.state = {
        dragOver: false
      };
      return _this;
    }

    (0, _createClass2.default)(FileSelect, [{
      key: "render",
      value: function render() {
        var _this$props = this.props,
            className = _this$props.className,
            disabled = _this$props.disabled,
            children = _this$props.children,
            props = (0, _objectWithoutProperties2.default)(_this$props, ["className", "disabled", "children"]);
        var dragOver = this.state.dragOver;
        return _createElement("div", (0, _extends2.default)({}, (0, _helpers.omit)(props, ['onChange']), {
          className: (0, _FileDropSt.style)(_FileDropSt.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((0, _from.default)(event.dataTransfer.files), event);
        }
      }
    }]);
    return FileSelect;
  }(PureComponent);

  process.env.NODE_ENV !== "production" ? FileSelect.propTypes = {
    onChange: _propTypes.default.func,
    disabled: _propTypes.default.bool,
    children: _propTypes.default.node
  } : void 0;
  FileSelect.defaultProps = {
    disabled: false
  };
  (0, _tslib.__decorate)([(0, _helpers.Bind)()], FileSelect.prototype, "onDragOver", null);
  (0, _tslib.__decorate)([(0, _helpers.Bind)()], FileSelect.prototype, "onDragLeave", null);
  (0, _tslib.__decorate)([(0, _helpers.Bind)()], FileSelect.prototype, "onChange", null);
  return FileSelect;
}();

var _default = FileSelect;
exports.default = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ZpbGVEcm9wL0ZpbGVEcm9wLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQTs7QUFNQTs7QUFDQTs7QUFLQTs7Ozs7QUFvQkEsSUFBQSxVQUFBO0FBQUE7QUFBQSxZQUFBO0FBQUEsTUFBcUIsVUFBckI7QUFBQTs7QUFBQSwwQkFBQTtBQUFBOztBQUFBOztBQVlDLFlBQUEsS0FBQSxHQUFRO0FBQ1AsUUFBQSxRQUFRLEVBQUU7QUFESCxPQUFSO0FBWkQ7QUF5R0M7O0FBekdEO0FBQUE7QUFBQSwrQkFnQk87QUFBQSwwQkFPRCxLQUFLLEtBUEo7QUFBQSxZQUdKLFNBSEksZUFHSixTQUhJO0FBQUEsWUFJSixRQUpJLGVBSUosUUFKSTtBQUFBLFlBS0osUUFMSSxlQUtKLFFBTEk7QUFBQSxZQU1ELEtBTkM7QUFBQSxZQVNKLFFBVEksR0FVRCxLQUFLLEtBVkosQ0FTSixRQVRJO0FBWUwsZUFDQyxpREFDSyxtQkFBSyxLQUFMLEVBQVksQ0FBQyxVQUFELENBQVosQ0FETDtBQUVDLFVBQUEsU0FBUyxFQUFFLHVCQUFNLG9CQUFRLElBQWQsRUFBb0I7QUFDOUIsWUFBQSxRQUFRLEVBQVIsUUFEOEI7QUFFOUIsWUFBQSxRQUFRLEVBQVI7QUFGOEIsV0FBcEIsRUFHUixTQUhRLENBRlo7QUFNQyxVQUFBLE1BQU0sRUFBRSxLQUFLLGNBTmQ7QUFPQyxVQUFBLFdBQVcsRUFBRSxLQUFLLGNBUG5CO0FBUUMsVUFBQSxVQUFVLEVBQUUsS0FBSyxVQVJsQjtBQVNDLFVBQUEsV0FBVyxFQUFFLEtBQUssVUFUbkI7QUFVQyxVQUFBLFdBQVcsRUFBRSxLQUFLLFdBVm5CO0FBV0MsVUFBQSxTQUFTLEVBQUUsS0FBSyxXQVhqQjtBQVlDLFVBQUEsTUFBTSxFQUFFLEtBQUssUUFaZDtBQWFDLDJCQUFlO0FBYmhCLFlBZUUsUUFmRixDQUREO0FBbUJBO0FBL0NGO0FBQUE7QUFBQSxxQ0FpRHdCLEtBakR4QixFQWlEd0M7QUFDdEMsUUFBQSxLQUFLLENBQUMsZUFBTjtBQUNBLFFBQUEsS0FBSyxDQUFDLGNBQU47QUFDQTtBQXBERjtBQUFBO0FBQUEsaUNBdURvQixLQXZEcEIsRUF1RG9DO0FBRWxDLFFBQUEsS0FBSyxDQUFDLGVBQU47QUFDQSxRQUFBLEtBQUssQ0FBQyxjQUFOO0FBRUEsYUFBSyxRQUFMLENBQWM7QUFBQSxpQkFBTztBQUNwQixZQUFBLFFBQVEsRUFBRTtBQURVLFdBQVA7QUFBQSxTQUFkO0FBR0E7QUEvREY7QUFBQTtBQUFBLGtDQWtFcUIsS0FsRXJCLEVBa0VxQztBQUVuQyxRQUFBLEtBQUssQ0FBQyxlQUFOO0FBQ0EsUUFBQSxLQUFLLENBQUMsY0FBTjtBQUVBLGFBQUssUUFBTCxDQUFjO0FBQUEsaUJBQU87QUFDcEIsWUFBQSxRQUFRLEVBQUU7QUFEVSxXQUFQO0FBQUEsU0FBZDtBQUdBO0FBMUVGO0FBQUE7QUFBQSwrQkE2RWtCLEtBN0VsQixFQTZFa0M7QUFFaEMsUUFBQSxLQUFLLENBQUMsZUFBTjtBQUNBLFFBQUEsS0FBSyxDQUFDLGNBQU47QUFIZ0MsWUFNL0IsUUFOK0IsR0FPNUIsS0FBSyxLQVB1QixDQU0vQixRQU4rQjs7QUFTaEMsWUFBSSxRQUFKLEVBQWM7QUFDYjtBQUNBOztBQUVELGFBQUssUUFBTCxDQUFjO0FBQUEsaUJBQU87QUFDcEIsWUFBQSxRQUFRLEVBQUU7QUFEVSxXQUFQO0FBQUEsU0FBZDtBQWJnQyxZQWtCL0IsUUFsQitCLEdBbUI1QixLQUFLLEtBbkJ1QixDQWtCL0IsUUFsQitCOztBQXFCaEMsWUFBSSxPQUFPLFFBQVAsS0FBb0IsVUFBeEIsRUFBb0M7QUFDbkMsVUFBQSxRQUFRLENBQ1AsbUJBQVcsS0FBSyxDQUFDLFlBQU4sQ0FBbUIsS0FBOUIsQ0FETyxFQUVQLEtBRk8sQ0FBUjtBQUlBO0FBQ0Q7QUF4R0Y7QUFBQTtBQUFBLElBQXdDLGFBQXhDOztBQUVRLDBDQUFBLFVBQUEsQ0FBQSxTQUFBLEdBQVk7QUFDbEIsSUFBQSxRQUFRLEVBQUUsbUJBQVUsSUFERjtBQUVsQixJQUFBLFFBQVEsRUFBRSxtQkFBVSxJQUZGO0FBR2xCLElBQUEsUUFBUSxFQUFFLG1CQUFVO0FBSEYsR0FBWjtBQU1BLEVBQUEsVUFBQSxDQUFBLFlBQUEsR0FBZTtBQUNyQixJQUFBLFFBQVEsRUFBRTtBQURXLEdBQWY7QUErQ1AseUJBQUEsQ0FEQyxvQkFDRCxDQUFBLEUsb0JBQUEsRSxZQUFBLEVBUUMsSUFSRDtBQVdBLHlCQUFBLENBREMsb0JBQ0QsQ0FBQSxFLG9CQUFBLEUsYUFBQSxFQVFDLElBUkQ7QUFXQSx5QkFBQSxDQURDLG9CQUNELENBQUEsRSxvQkFBQSxFLFVBQUEsRUEyQkMsSUEzQkQ7QUE0QkQsU0FBQSxVQUFBO0FBQUMsQ0F6R0QsRUFBQTs7ZUFBcUIsVSIsInNvdXJjZVJvb3QiOiIifQ==