@wordpress/components
Version:
UI components for WordPress.
133 lines (129 loc) • 4.06 kB
JavaScript
/**
* External dependencies
*/
import clsx from 'clsx';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { upload, Icon } from '@wordpress/icons';
import { getFilesFromDataTransfer } from '@wordpress/dom';
import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
/**
* Internal dependencies
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* `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>
* );
* }
* ```
*/
export function DropZoneComponent({
className,
icon = upload,
label,
onFilesDrop,
onHTMLDrop,
onDrop,
isEligible = () => true,
...restProps
}) {
const [isDraggingOverDocument, setIsDraggingOverDocument] = useState();
const [isDraggingOverElement, setIsDraggingOverElement] = useState();
const [isActive, setIsActive] = useState();
const ref = useDropZone({
onDrop(event) {
if (!event.dataTransfer) {
return;
}
const files = 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') || 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 = clsx('components-drop-zone', className, {
'is-active': isActive,
'is-dragging-over-document': isDraggingOverDocument,
'is-dragging-over-element': isDraggingOverElement
});
return /*#__PURE__*/_jsx("div", {
...restProps,
ref: ref,
className: classes,
children: /*#__PURE__*/_jsx("div", {
className: "components-drop-zone__content",
children: /*#__PURE__*/_jsxs("div", {
className: "components-drop-zone__content-inner",
children: [/*#__PURE__*/_jsx(Icon, {
icon: icon,
className: "components-drop-zone__content-icon"
}), /*#__PURE__*/_jsx("span", {
className: "components-drop-zone__content-text",
children: label ? label : __('Drop files to upload')
})]
})
})
});
}
export default DropZoneComponent;
//# sourceMappingURL=index.js.map