@wix/design-system
Version:
@wix/design-system
140 lines (138 loc) • 5.89 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _buildChildrenObject = require("../common/utils/buildChildrenObject");
var _constants = require("./constants");
var _DropzoneSt = require("./Dropzone.st.css.js");
var _Dropzone2 = _interopRequireDefault(require("./Dropzone.semanticClassNames"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Dropzone/Dropzone.jsx",
_Dropzone;
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/** Defines a region in the page where files can be dropped */
var Dropzone = /*#__PURE__*/function (_React$PureComponent) {
function Dropzone() {
var _this;
(0, _classCallCheck2["default"])(this, Dropzone);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, Dropzone, [].concat(args));
_this.state = {
isDragActive: false
};
/** https://spin.atomicobject.com/2018/09/13/file-uploader-react-typescript/ */
_this._dragEventCounter = 0;
_this._eventHasFiles = function (event) {
/** DataTransfer object is defined here: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer */
return event.dataTransfer ? Array.from(event.dataTransfer.items).some(function (item) {
return item.kind === 'file';
}) : !!(event.target && event.target.files);
};
_this._onDragEnter = function (event) {
Dropzone._overrideEventDefaults(event);
_this._dragEventCounter++;
/** We only want to show the overlay when files are dragged over the dropzone */
return _this._eventHasFiles(event) && _this.setState({
isDragActive: true
});
};
_this._onDragLeave = function (event) {
Dropzone._overrideEventDefaults(event);
_this._dragEventCounter--;
return _this._dragEventCounter === 0 && _this.setState({
isDragActive: false
});
};
_this._onDrop = function (event) {
Dropzone._overrideEventDefaults(event);
_this._dragEventCounter = 0;
if (_this._eventHasFiles(event)) {
var files = event.dataTransfer ? Array.from(event.dataTransfer.items).map(function (item) {
return item.getAsFile();
}) : event.target.files;
_this.setState({
isDragActive: false
});
return _this.props.onDrop(files);
}
};
return _this;
}
(0, _inherits2["default"])(Dropzone, _React$PureComponent);
return (0, _createClass2["default"])(Dropzone, [{
key: "render",
value: function render() {
var _this$props = this.props,
children = _this$props.children,
dataHook = _this$props.dataHook,
className = _this$props.className;
var isDragActive = this.state.isDragActive;
var childrenObj = (0, _buildChildrenObject.buildChildrenObject)(children, {
Content: null,
Overlay: null
});
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: (0, _DropzoneSt.st)(_DropzoneSt.classes.root, className, _Dropzone2["default"].container, isDragActive && _Dropzone2["default"].containerDragActive),
onDrop: this._onDrop,
onDragEnter: this._onDragEnter,
onDragLeave: this._onDragLeave,
onDragOver: Dropzone._overrideEventDefaults,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 7
}
}, isDragActive && childrenObj.Overlay, childrenObj.Content);
}
}]);
}(_react["default"].PureComponent);
_Dropzone = Dropzone;
Dropzone.displayName = 'Dropzone';
/**
* An overlay element to be displayed during a drag over the content
*/
Dropzone.Overlay = function (_ref) {
var children = _ref.children;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.dropzoneOverlay,
className: _DropzoneSt.classes.dropzoneOverlay,
__self: _Dropzone,
__source: {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 5
}
}, children);
};
/**
* An content element on which a file can be dragged over
*/
Dropzone.Content = function (_ref2) {
var children = _ref2.children;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.dropzoneContent,
__self: _Dropzone,
__source: {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 5
}
}, children);
};
Dropzone._overrideEventDefaults = function (event) {
event.preventDefault();
event.stopPropagation();
};
Dropzone.Content.displayName = 'Dropzone.Content';
Dropzone.Overlay.displayName = 'Dropzone.Overlay';
var _default = exports["default"] = Dropzone;