@wordpress/components
Version:
UI components for WordPress.
142 lines (136 loc) • 4.47 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DropZoneComponent = DropZoneComponent;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _dom = require("@wordpress/dom");
var _compose = require("@wordpress/compose");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
*
* ```jsx
* import { DropZone } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* const MyDropZone = () => {
* const [ hasDropped, setHasDropped ] = useState( false );
*
* return (
* <div>
* { hasDropped ? 'Dropped!' : 'Drop something here' }
* <DropZone
* onFilesDrop={ () => setHasDropped( true ) }
* onHTMLDrop={ () => setHasDropped( true ) }
* onDrop={ () => setHasDropped( true ) }
* />
* </div>
* );
* }
* ```
*/
function DropZoneComponent({
className,
icon = _icons.upload,
label,
onFilesDrop,
onHTMLDrop,
onDrop,
isEligible = () => true,
...restProps
}) {
const [isDraggingOverDocument, setIsDraggingOverDocument] = (0, _element.useState)();
const [isDraggingOverElement, setIsDraggingOverElement] = (0, _element.useState)();
const [isActive, setIsActive] = (0, _element.useState)();
const ref = (0, _compose.__experimentalUseDropZone)({
onDrop(event) {
if (!event.dataTransfer) {
return;
}
const files = (0, _dom.getFilesFromDataTransfer)(event.dataTransfer);
const html = event.dataTransfer.getData('text/html');
/**
* From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
* The order of the checks is important to recognize the HTML drop.
*/
if (html && onHTMLDrop) {
onHTMLDrop(html);
} else if (files.length && onFilesDrop) {
onFilesDrop(files);
} else if (onDrop) {
onDrop(event);
}
},
onDragStart(event) {
setIsDraggingOverDocument(true);
if (!event.dataTransfer) {
return;
}
/**
* From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
* The order of the checks is important to recognize the HTML drop.
*/
if (event.dataTransfer.types.includes('text/html')) {
setIsActive(!!onHTMLDrop);
} else if (
// Check for the types because sometimes the files themselves
// are only available on drop.
event.dataTransfer.types.includes('Files') || (0, _dom.getFilesFromDataTransfer)(event.dataTransfer).length > 0) {
setIsActive(!!onFilesDrop);
} else {
setIsActive(!!onDrop && isEligible(event.dataTransfer));
}
},
onDragEnd() {
setIsDraggingOverElement(false);
setIsDraggingOverDocument(false);
setIsActive(undefined);
},
onDragEnter() {
setIsDraggingOverElement(true);
},
onDragLeave() {
setIsDraggingOverElement(false);
}
});
const classes = (0, _clsx.default)('components-drop-zone', className, {
'is-active': isActive,
'is-dragging-over-document': isDraggingOverDocument,
'is-dragging-over-element': isDraggingOverElement
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
...restProps,
ref: ref,
className: classes,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "components-drop-zone__content",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "components-drop-zone__content-inner",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: icon,
className: "components-drop-zone__content-icon"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "components-drop-zone__content-text",
children: label ? label : (0, _i18n.__)('Drop files to upload')
})]
})
})
});
}
var _default = exports.default = DropZoneComponent;
//# sourceMappingURL=index.js.map