payload
Version:
Node, React and MongoDB Headless CMS and Application Framework
120 lines (119 loc) • 12.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Dropzone", {
enumerable: true,
get: function() {
return Dropzone;
}
});
const _react = /*#__PURE__*/ _interop_require_default(require("react"));
const _reacti18next = require("react-i18next");
const _Button = /*#__PURE__*/ _interop_require_default(require("../Button"));
require("./index.scss");
function _interop_require_default(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
const handleDragOver = (e)=>{
e.preventDefault();
e.stopPropagation();
};
const baseClass = 'dropzone';
const Dropzone = ({ onChange, className, mimeTypes })=>{
const dropRef = _react.default.useRef(null);
const [dragging, setDragging] = _react.default.useState(false);
const inputRef = _react.default.useRef(null);
const { t } = (0, _reacti18next.useTranslation)([
'upload',
'general'
]);
const handlePaste = _react.default.useCallback((e)=>{
e.preventDefault();
e.stopPropagation();
if (e.clipboardData.files && e.clipboardData.files.length > 0) {
onChange(e.clipboardData.files);
}
}, [
onChange
]);
const handleDragEnter = _react.default.useCallback((e)=>{
e.preventDefault();
e.stopPropagation();
setDragging(true);
}, []);
const handleDragLeave = _react.default.useCallback((e)=>{
e.preventDefault();
e.stopPropagation();
setDragging(false);
}, []);
const handleDrop = _react.default.useCallback((e)=>{
e.preventDefault();
e.stopPropagation();
setDragging(false);
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
onChange(e.dataTransfer.files);
setDragging(false);
e.dataTransfer.clearData();
}
}, [
onChange
]);
const handleFileSelection = _react.default.useCallback((e)=>{
if (e.target.files && e.target.files.length > 0) {
onChange(e.target.files);
}
}, [
onChange
]);
_react.default.useEffect(()=>{
const div = dropRef.current;
if (div) {
div.addEventListener('dragenter', handleDragEnter);
div.addEventListener('dragleave', handleDragLeave);
div.addEventListener('dragover', handleDragOver);
div.addEventListener('drop', handleDrop);
div.addEventListener('paste', handlePaste);
return ()=>{
div.removeEventListener('dragenter', handleDragEnter);
div.removeEventListener('dragleave', handleDragLeave);
div.removeEventListener('dragover', handleDragOver);
div.removeEventListener('drop', handleDrop);
div.removeEventListener('paste', handlePaste);
};
}
return ()=>null;
}, [
handleDragEnter,
handleDragLeave,
handleDrop,
handlePaste
]);
const classes = [
baseClass,
className,
dragging ? 'dragging' : ''
].filter(Boolean).join(' ');
return /*#__PURE__*/ _react.default.createElement("div", {
ref: dropRef,
className: classes
}, /*#__PURE__*/ _react.default.createElement(_Button.default, {
size: "small",
buttonStyle: "secondary",
onClick: ()=>{
inputRef.current.click();
},
className: `${baseClass}__file-button`
}, t('selectFile')), /*#__PURE__*/ _react.default.createElement("input", {
ref: inputRef,
type: "file",
accept: mimeTypes?.join(','),
onChange: handleFileSelection,
className: `${baseClass}__hidden-input`
}), /*#__PURE__*/ _react.default.createElement("p", {
className: `${baseClass}__label`
}, t('general:or'), " ", t('dragAndDrop')));
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL2VsZW1lbnRzL0Ryb3B6b25lL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL0J1dHRvbidcblxuaW1wb3J0ICcuL2luZGV4LnNjc3MnXG5cbmNvbnN0IGhhbmRsZURyYWdPdmVyID0gKGU6IERyYWdFdmVudCkgPT4ge1xuICBlLnByZXZlbnREZWZhdWx0KClcbiAgZS5zdG9wUHJvcGFnYXRpb24oKVxufVxuXG5jb25zdCBiYXNlQ2xhc3MgPSAnZHJvcHpvbmUnXG5cbnR5cGUgUHJvcHMgPSB7XG4gIG9uQ2hhbmdlOiAoZTogRmlsZUxpc3QpID0+IHZvaWRcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIG1pbWVUeXBlcz86IHN0cmluZ1tdXG59XG5cbmV4cG9ydCBjb25zdCBEcm9wem9uZTogUmVhY3QuRkM8UHJvcHM+ID0gKHsgb25DaGFuZ2UsIGNsYXNzTmFtZSwgbWltZVR5cGVzIH0pID0+IHtcbiAgY29uc3QgZHJvcFJlZiA9IFJlYWN0LnVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbClcbiAgY29uc3QgW2RyYWdnaW5nLCBzZXREcmFnZ2luZ10gPSBSZWFjdC51c2VTdGF0ZShmYWxzZSlcbiAgY29uc3QgaW5wdXRSZWYgPSBSZWFjdC51c2VSZWYobnVsbClcblxuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKFsndXBsb2FkJywgJ2dlbmVyYWwnXSlcblxuICBjb25zdCBoYW5kbGVQYXN0ZSA9IFJlYWN0LnVzZUNhbGxiYWNrKFxuICAgIChlOiBDbGlwYm9hcmRFdmVudCkgPT4ge1xuICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpXG4gICAgICBlLnN0b3BQcm9wYWdhdGlvbigpXG5cbiAgICAgIGlmIChlLmNsaXBib2FyZERhdGEuZmlsZXMgJiYgZS5jbGlwYm9hcmREYXRhLmZpbGVzLmxlbmd0aCA+IDApIHtcbiAgICAgICAgb25DaGFuZ2UoZS5jbGlwYm9hcmREYXRhLmZpbGVzKVxuICAgICAgfVxuICAgIH0sXG4gICAgW29uQ2hhbmdlXSxcbiAgKVxuXG4gIGNvbnN0IGhhbmRsZURyYWdFbnRlciA9IFJlYWN0LnVzZUNhbGxiYWNrKChlOiBEcmFnRXZlbnQpID0+IHtcbiAgICBlLnByZXZlbnREZWZhdWx0KClcbiAgICBlLnN0b3BQcm9wYWdhdGlvbigpXG4gICAgc2V0RHJhZ2dpbmcodHJ1ZSlcbiAgfSwgW10pXG5cbiAgY29uc3QgaGFuZGxlRHJhZ0xlYXZlID0gUmVhY3QudXNlQ2FsbGJhY2soKGU6IERyYWdFdmVudCkgPT4ge1xuICAgIGUucHJldmVudERlZmF1bHQoKVxuICAgIGUuc3RvcFByb3BhZ2F0aW9uKClcbiAgICBzZXREcmFnZ2luZyhmYWxzZSlcbiAgfSwgW10pXG5cbiAgY29uc3QgaGFuZGxlRHJvcCA9IFJlYWN0LnVzZUNhbGxiYWNrKFxuICAgIChlOiBEcmFnRXZlbnQpID0+IHtcbiAgICAgIGUucHJldmVudERlZmF1bHQoKVxuICAgICAgZS5zdG9wUHJvcGFnYXRpb24oKVxuICAgICAgc2V0RHJhZ2dpbmcoZmFsc2UpXG5cbiAgICAgIGlmIChlLmRhdGFUcmFuc2Zlci5maWxlcyAmJiBlLmRhdGFUcmFuc2Zlci5maWxlcy5sZW5ndGggPiAwKSB7XG4gICAgICAgIG9uQ2hhbmdlKGUuZGF0YVRyYW5zZmVyLmZpbGVzKVxuICAgICAgICBzZXREcmFnZ2luZyhmYWxzZSlcblxuICAgICAgICBlLmRhdGFUcmFuc2Zlci5jbGVhckRhdGEoKVxuICAgICAgfVxuICAgIH0sXG4gICAgW29uQ2hhbmdlXSxcbiAgKVxuXG4gIGNvbnN0IGhhbmRsZUZpbGVTZWxlY3Rpb24gPSBSZWFjdC51c2VDYWxsYmFjayhcbiAgICAoZTogUmVhY3QuQ2hhbmdlRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pID0+IHtcbiAgICAgIGlmIChlLnRhcmdldC5maWxlcyAmJiBlLnRhcmdldC5maWxlcy5sZW5ndGggPiAwKSB7XG4gICAgICAgIG9uQ2hhbmdlKGUudGFyZ2V0LmZpbGVzKVxuICAgICAgfVxuICAgIH0sXG4gICAgW29uQ2hhbmdlXSxcbiAgKVxuXG4gIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgZGl2ID0gZHJvcFJlZi5jdXJyZW50XG5cbiAgICBpZiAoZGl2KSB7XG4gICAgICBkaXYuYWRkRXZlbnRMaXN0ZW5lcignZHJhZ2VudGVyJywgaGFuZGxlRHJhZ0VudGVyKVxuICAgICAgZGl2LmFkZEV2ZW50TGlzdGVuZXIoJ2RyYWdsZWF2ZScsIGhhbmRsZURyYWdMZWF2ZSlcbiAgICAgIGRpdi5hZGRFdmVudExpc3RlbmVyKCdkcmFnb3ZlcicsIGhhbmRsZURyYWdPdmVyKVxuICAgICAgZGl2LmFkZEV2ZW50TGlzdGVuZXIoJ2Ryb3AnLCBoYW5kbGVEcm9wKVxuICAgICAgZGl2LmFkZEV2ZW50TGlzdGVuZXIoJ3Bhc3RlJywgaGFuZGxlUGFzdGUpXG5cbiAgICAgIHJldHVybiAoKSA9PiB7XG4gICAgICAgIGRpdi5yZW1vdmVFdmVudExpc3RlbmVyKCdkcmFnZW50ZXInLCBoYW5kbGVEcmFnRW50ZXIpXG4gICAgICAgIGRpdi5yZW1vdmVFdmVudExpc3RlbmVyKCdkcmFnbGVhdmUnLCBoYW5kbGVEcmFnTGVhdmUpXG4gICAgICAgIGRpdi5yZW1vdmVFdmVudExpc3RlbmVyKCdkcmFnb3ZlcicsIGhhbmRsZURyYWdPdmVyKVxuICAgICAgICBkaXYucmVtb3ZlRXZlbnRMaXN0ZW5lcignZHJvcCcsIGhhbmRsZURyb3ApXG4gICAgICAgIGRpdi5yZW1vdmVFdmVudExpc3RlbmVyKCdwYXN0ZScsIGhhbmRsZVBhc3RlKVxuICAgICAgfVxuICAgIH1cblxuICAgIHJldHVybiAoKSA9PiBudWxsXG4gIH0sIFtoYW5kbGVEcmFnRW50ZXIsIGhhbmRsZURyYWdMZWF2ZSwgaGFuZGxlRHJvcCwgaGFuZGxlUGFzdGVdKVxuXG4gIGNvbnN0IGNsYXNzZXMgPSBbYmFzZUNsYXNzLCBjbGFzc05hbWUsIGRyYWdnaW5nID8gJ2RyYWdnaW5nJyA6ICcnXS5maWx0ZXIoQm9vbGVhbikuam9pbignICcpXG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IHJlZj17ZHJvcFJlZn0gY2xhc3NOYW1lPXtjbGFzc2VzfT5cbiAgICAgIDxCdXR0b25cbiAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgYnV0dG9uU3R5bGU9XCJzZWNvbmRhcnlcIlxuICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgaW5wdXRSZWYuY3VycmVudC5jbGljaygpXG4gICAgICAgIH19XG4gICAgICAgIGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fZmlsZS1idXR0b25gfVxuICAgICAgPlxuICAgICAgICB7dCgnc2VsZWN0RmlsZScpfVxuICAgICAgPC9CdXR0b24+XG5cbiAgICAgIDxpbnB1dFxuICAgICAgICByZWY9e2lucHV0UmVmfVxuICAgICAgICB0eXBlPVwiZmlsZVwiXG4gICAgICAgIGFjY2VwdD17bWltZVR5cGVzPy5qb2luKCcsJyl9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVGaWxlU2VsZWN0aW9ufVxuICAgICAgICBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2hpZGRlbi1pbnB1dGB9XG4gICAgICAvPlxuXG4gICAgICA8cCBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2xhYmVsYH0+XG4gICAgICAgIHt0KCdnZW5lcmFsOm9yJyl9IHt0KCdkcmFnQW5kRHJvcCcpfVxuICAgICAgPC9wPlxuICAgIDwvZGl2PlxuICApXG59XG4iXSwibmFtZXMiOlsiRHJvcHpvbmUiLCJoYW5kbGVEcmFnT3ZlciIsImUiLCJwcmV2ZW50RGVmYXVsdCIsInN0b3BQcm9wYWdhdGlvbiIsImJhc2VDbGFzcyIsIm9uQ2hhbmdlIiwiY2xhc3NOYW1lIiwibWltZVR5cGVzIiwiZHJvcFJlZiIsIlJlYWN0IiwidXNlUmVmIiwiZHJhZ2dpbmciLCJzZXREcmFnZ2luZyIsInVzZVN0YXRlIiwiaW5wdXRSZWYiLCJ0IiwidXNlVHJhbnNsYXRpb24iLCJoYW5kbGVQYXN0ZSIsInVzZUNhbGxiYWNrIiwiY2xpcGJvYXJkRGF0YSIsImZpbGVzIiwibGVuZ3RoIiwiaGFuZGxlRHJhZ0VudGVyIiwiaGFuZGxlRHJhZ0xlYXZlIiwiaGFuZGxlRHJvcCIsImRhdGFUcmFuc2ZlciIsImNsZWFyRGF0YSIsImhhbmRsZUZpbGVTZWxlY3Rpb24iLCJ0YXJnZXQiLCJ1c2VFZmZlY3QiLCJkaXYiLCJjdXJyZW50IiwiYWRkRXZlbnRMaXN0ZW5lciIsInJlbW92ZUV2ZW50TGlzdGVuZXIiLCJjbGFzc2VzIiwiZmlsdGVyIiwiQm9vbGVhbiIsImpvaW4iLCJyZWYiLCJCdXR0b24iLCJzaXplIiwiYnV0dG9uU3R5bGUiLCJvbkNsaWNrIiwiY2xpY2siLCJpbnB1dCIsInR5cGUiLCJhY2NlcHQiLCJwIl0sIm1hcHBpbmdzIjoiOzs7OytCQW1CYUE7OztlQUFBQTs7OzhEQW5CSzs4QkFDYTsrREFDWjtRQUVaOzs7Ozs7QUFFUCxNQUFNQyxpQkFBaUIsQ0FBQ0M7SUFDdEJBLEVBQUVDLGNBQWM7SUFDaEJELEVBQUVFLGVBQWU7QUFDbkI7QUFFQSxNQUFNQyxZQUFZO0FBUVgsTUFBTUwsV0FBNEIsQ0FBQyxFQUFFTSxRQUFRLEVBQUVDLFNBQVMsRUFBRUMsU0FBUyxFQUFFO0lBQzFFLE1BQU1DLFVBQVVDLGNBQUssQ0FBQ0MsTUFBTSxDQUFpQjtJQUM3QyxNQUFNLENBQUNDLFVBQVVDLFlBQVksR0FBR0gsY0FBSyxDQUFDSSxRQUFRLENBQUM7SUFDL0MsTUFBTUMsV0FBV0wsY0FBSyxDQUFDQyxNQUFNLENBQUM7SUFFOUIsTUFBTSxFQUFFSyxDQUFDLEVBQUUsR0FBR0MsSUFBQUEsNEJBQWMsRUFBQztRQUFDO1FBQVU7S0FBVTtJQUVsRCxNQUFNQyxjQUFjUixjQUFLLENBQUNTLFdBQVcsQ0FDbkMsQ0FBQ2pCO1FBQ0NBLEVBQUVDLGNBQWM7UUFD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