@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 6.08 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/drop-zone/index.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { upload, Icon } from '@wordpress/icons';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\nimport { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * `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.\n *\n * ```jsx\n * import { DropZone } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDropZone = () => {\n * const [ hasDropped, setHasDropped ] = useState( false );\n *\n * return (\n * <div>\n * { hasDropped ? 'Dropped!' : 'Drop something here' }\n * <DropZone\n * onFilesDrop={ () => setHasDropped( true ) }\n * onHTMLDrop={ () => setHasDropped( true ) }\n * onDrop={ () => setHasDropped( true ) }\n * />\n * </div>\n * );\n * }\n * ```\n */\nexport function DropZoneComponent({\n className,\n icon = upload,\n label,\n onFilesDrop,\n onHTMLDrop,\n onDrop,\n isEligible = () => true,\n ...restProps\n}) {\n const [isDraggingOverDocument, setIsDraggingOverDocument] = useState();\n const [isDraggingOverElement, setIsDraggingOverElement] = useState();\n const [isActive, setIsActive] = useState();\n const ref = useDropZone({\n onDrop(event) {\n if (!event.dataTransfer) {\n return;\n }\n const files = getFilesFromDataTransfer(event.dataTransfer);\n const html = event.dataTransfer.getData('text/html');\n\n /**\n * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n * The order of the checks is important to recognize the HTML drop.\n */\n if (html && onHTMLDrop) {\n onHTMLDrop(html);\n } else if (files.length && onFilesDrop) {\n onFilesDrop(files);\n } else if (onDrop) {\n onDrop(event);\n }\n },\n onDragStart(event) {\n setIsDraggingOverDocument(true);\n if (!event.dataTransfer) {\n return;\n }\n\n /**\n * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n * The order of the checks is important to recognize the HTML drop.\n */\n if (event.dataTransfer.types.includes('text/html')) {\n setIsActive(!!onHTMLDrop);\n } else if (\n // Check for the types because sometimes the files themselves\n // are only available on drop.\n event.dataTransfer.types.includes('Files') || getFilesFromDataTransfer(event.dataTransfer).length > 0) {\n setIsActive(!!onFilesDrop);\n } else {\n setIsActive(!!onDrop && isEligible(event.dataTransfer));\n }\n },\n onDragEnd() {\n setIsDraggingOverElement(false);\n setIsDraggingOverDocument(false);\n setIsActive(undefined);\n },\n onDragEnter() {\n setIsDraggingOverElement(true);\n },\n onDragLeave() {\n setIsDraggingOverElement(false);\n }\n });\n const classes = clsx('components-drop-zone', className, {\n 'is-active': isActive,\n 'is-dragging-over-document': isDraggingOverDocument,\n 'is-dragging-over-element': isDraggingOverElement\n });\n return /*#__PURE__*/_jsx(\"div\", {\n ...restProps,\n ref: ref,\n className: classes,\n children: /*#__PURE__*/_jsx(\"div\", {\n className: \"components-drop-zone__content\",\n children: /*#__PURE__*/_jsxs(\"div\", {\n className: \"components-drop-zone__content-inner\",\n children: [/*#__PURE__*/_jsx(Icon, {\n icon: icon,\n className: \"components-drop-zone__content-icon\"\n }), /*#__PURE__*/_jsx(\"span\", {\n className: \"components-drop-zone__content-text\",\n children: label ? label : __('Drop files to upload')\n })]\n })\n })\n });\n}\nexport default DropZoneComponent;"],
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAAmB;AACnB,qBAAyB;AACzB,mBAA6B;AAC7B,iBAAyC;AACzC,qBAAyD;AAKzD,yBAA2C;AAwBpC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa,MAAM;AAAA,EACnB,GAAG;AACL,GAAG;AACD,QAAM,CAAC,wBAAwB,yBAAyB,QAAI,yBAAS;AACrE,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,yBAAS;AACnE,QAAM,CAAC,UAAU,WAAW,QAAI,yBAAS;AACzC,QAAM,UAAM,eAAAA,2BAAY;AAAA,IACtB,OAAO,OAAO;AACZ,UAAI,CAAC,MAAM,cAAc;AACvB;AAAA,MACF;AACA,YAAM,YAAQ,qCAAyB,MAAM,YAAY;AACzD,YAAM,OAAO,MAAM,aAAa,QAAQ,WAAW;AAMnD,UAAI,QAAQ,YAAY;AACtB,mBAAW,IAAI;AAAA,MACjB,WAAW,MAAM,UAAU,aAAa;AACtC,oBAAY,KAAK;AAAA,MACnB,WAAW,QAAQ;AACjB,eAAO,KAAK;AAAA,MACd;AAAA,IACF;AAAA,IACA,YAAY,OAAO;AACjB,gCAA0B,IAAI;AAC9B,UAAI,CAAC,MAAM,cAAc;AACvB;AAAA,MACF;AAMA,UAAI,MAAM,aAAa,MAAM,SAAS,WAAW,GAAG;AAClD,oBAAY,CAAC,CAAC,UAAU;AAAA,MAC1B;AAAA;AAAA;AAAA,QAGA,MAAM,aAAa,MAAM,SAAS,OAAO,SAAK,qCAAyB,MAAM,YAAY,EAAE,SAAS;AAAA,QAAG;AACrG,oBAAY,CAAC,CAAC,WAAW;AAAA,MAC3B,OAAO;AACL,oBAAY,CAAC,CAAC,UAAU,WAAW,MAAM,YAAY,CAAC;AAAA,MACxD;AAAA,IACF;AAAA,IACA,YAAY;AACV,+BAAyB,KAAK;AAC9B,gCAA0B,KAAK;AAC/B,kBAAY,MAAS;AAAA,IACvB;AAAA,IACA,cAAc;AACZ,+BAAyB,IAAI;AAAA,IAC/B;AAAA,IACA,cAAc;AACZ,+BAAyB,KAAK;AAAA,IAChC;AAAA,EACF,CAAC;AACD,QAAM,cAAU,YAAAC,SAAK,wBAAwB,WAAW;AAAA,IACtD,aAAa;AAAA,IACb,6BAA6B;AAAA,IAC7B,4BAA4B;AAAA,EAC9B,CAAC;AACD,SAAoB,uCAAAC,KAAK,OAAO;AAAA,IAC9B,GAAG;AAAA,IACH;AAAA,IACA,WAAW;AAAA,IACX,UAAuB,uCAAAA,KAAK,OAAO;AAAA,MACjC,WAAW;AAAA,MACX,UAAuB,uCAAAC,MAAM,OAAO;AAAA,QAClC,WAAW;AAAA,QACX,UAAU,CAAc,uCAAAD,KAAK,mBAAM;AAAA,UACjC;AAAA,UACA,WAAW;AAAA,QACb,CAAC,GAAgB,uCAAAA,KAAK,QAAQ;AAAA,UAC5B,WAAW;AAAA,UACX,UAAU,QAAQ,YAAQ,gBAAG,sBAAsB;AAAA,QACrD,CAAC,CAAC;AAAA,MACJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAO,oBAAQ;",
"names": ["useDropZone", "clsx", "_jsx", "_jsxs"]
}