wix-style-react
Version:
wix-style-react
139 lines (137 loc) • 4.72 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _buildChildrenObject = require("../common/utils/buildChildrenObject");
var _constants = require("./constants");
var _DropzoneSt = require("./Dropzone.st.css");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Dropzone/Dropzone.js",
_Dropzone;
/** Defines a region in the page where files can be dropped */
class Dropzone extends _react.default.PureComponent {
constructor() {
super(...arguments);
this.state = {
isDragActive: false
};
/** https://spin.atomicobject.com/2018/09/13/file-uploader-react-typescript/ */
this._dragEventCounter = 0;
this._eventHasFiles = 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(item => {
return item.kind === 'file';
}) : !!(event.target && event.target.files);
};
this._onDragEnter = 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 = event => {
Dropzone._overrideEventDefaults(event);
this._dragEventCounter--;
return this._dragEventCounter === 0 && this.setState({
isDragActive: false
});
};
this._onDrop = event => {
Dropzone._overrideEventDefaults(event);
this._dragEventCounter = 0;
if (this._eventHasFiles(event)) {
var files = event.dataTransfer ? Array.from(event.dataTransfer.items).map(item => item.getAsFile()) : event.target.files;
this.setState({
isDragActive: false
});
return this.props.onDrop(files);
}
};
}
render() {
var {
children,
dataHook,
className
} = this.props;
var {
isDragActive
} = this.state;
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),
onDrop: this._onDrop,
onDragEnter: this._onDragEnter,
onDragLeave: this._onDragLeave,
onDragOver: Dropzone._overrideEventDefaults,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 7
}
}, isDragActive && childrenObj.Overlay, childrenObj.Content);
}
}
_Dropzone = Dropzone;
Dropzone.displayName = 'Dropzone';
Dropzone.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: _propTypes.default.string,
/** Specifies a CSS class name to be appended to the component’s root element. */
className: _propTypes.default.string,
/** Defines an event handler which is called when files are dropped over the dropzone. Dropped files are supplied as an argument to the function. */
onDrop: _propTypes.default.func.isRequired,
/** Accepts `<Dropzone.Overlay />` or `<Dropzone.Content />`. Both of them can contain any required content. */
children: _propTypes.default.node
};
/**
* An overlay element to be displayed during a drag over the content
*/
Dropzone.Overlay = _ref => {
var {
children
} = _ref;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.dropzoneOverlay,
className: _DropzoneSt.classes.dropzoneOverlay,
__self: _Dropzone,
__source: {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 5
}
}, children);
};
/**
* An content element on which a file can be dragged over
*/
Dropzone.Content = _ref2 => {
var {
children
} = _ref2;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.dropzoneContent,
__self: _Dropzone,
__source: {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 5
}
}, children);
};
Dropzone._overrideEventDefaults = event => {
event.preventDefault();
event.stopPropagation();
};
Dropzone.Content.displayName = 'Dropzone.Content';
Dropzone.Overlay.displayName = 'Dropzone.Overlay';
var _default = exports.default = Dropzone;
//# sourceMappingURL=Dropzone.js.map