DropZone — это компонент в WordPress, который создает область для перетаскивания и сброса, охватывающую весь размер родительского элемента. Он поддерживает перетаскивание файлов, HTML-контента и других событий перетаскивания. Это полезный инструмент для добавления интуитивного и удобного функционала загрузки в пользовательский интерфейс.
Импорт и базовое использование
Чтобы начать работу с DropZone, его нужно импортировать из библиотеки компонентов WordPress:
import { useState } from 'react';
import { DropZone } from '@wordpress/components';
Пример использования DropZone
В этом примере мы создаем компонент MyDropZone, который отображает текст, указывающий пользователю перетащить объект в зону. Как только объект сброшен, отображается сообщение «Dropped!».
const MyDropZone = () => {
const [hasDropped, setHasDropped] = useState(false);
return (
<div style={{ position: 'relative', width: '100%', height: '200px', border: '2px dashed #cccccc' }}>
<p>{hasDropped ? 'Dropped!' : 'Перетащите что-нибудь сюда'}</p>
<DropZone
onFilesDrop={() => setHasDropped(true)}
onHTMLDrop={() => setHasDropped(true)}
onDrop={() => setHasDropped(true)}
/>
</div>
);
};
Подробное описание пропсов
DropZone поддерживает несколько параметров, которые позволяют гибко настраивать его поведение при различных типах сброса.
className(опциональный)- Тип:
string - Класс CSS, который будет присвоен обертке компонента DropZone.
- Тип:
Пример использования className:
<DropZone className="my-custom-dropzone" />
label(опциональный)- Тип:
string - Строка, которая будет отображена в области DropZone. Полезно для указания пользователю, что делать с элементом.
- Тип:
Пример с label:
<DropZone label="Перетащите файлы сюда для загрузки" />
onFilesDrop(опциональный)- Тип:
(files: File[]) => void - Функция, вызываемая при сбросе файлов в область DropZone. Принимает массив сброшенных файлов в качестве аргумента.
- Тип:
Пример использования onFilesDrop:
<DropZone onFilesDrop={(files) => console.log('Файлы сброшены:', files)} />
onHTMLDrop(опциональный)- Тип:
(html: string) => void - Функция, вызываемая при сбросе HTML-контента в область DropZone. Получает HTML-контент в виде строки.
- Тип:
Пример использования onHTMLDrop:
<DropZone onHTMLDrop={(html) => console.log('HTML сброшен:', html)} />
onDrop(опциональный)- Тип:
(event: DragEvent) => void - Универсальная функция-обработчик сброса, которая вызывается, если
onFilesDropилиonHTMLDropне были вызваны. Получает объект событияdragкак аргумент.
- Тип:
Пример использования onDrop:
<DropZone onDrop={(event) => console.log('Событие перетаскивания:', event)} />
Обработка сброса файлов
Следующий пример показывает, как создать зону, в которую можно перетаскивать и сбрасывать файлы. В случае сброса в консоль выводится информация о сброшенных файлах.
const FileDropZone = () => {
const handleFilesDrop = (files) => {
console.log('Файлы получены:', files);
};
return (
<div style={{ position: 'relative', width: '100%', height: '200px', border: '2px dashed #00aacc' }}>
<p>Перетащите файлы сюда</p>
<DropZone onFilesDrop={handleFilesDrop} />
</div>
);
};
Обработка сброса HTML
Этот пример добавляет поддержку сброса HTML-контента. При сбросе HTML отображается текст «HTML сброшен!» и в консоль выводится содержимое HTML.
const HTMLDropZone = () => {
const [htmlDropped, setHtmlDropped] = useState(false);
const handleHTMLDrop = (html) => {
setHtmlDropped(true);
console.log('HTML сброшен:', html);
};
return (
<div style={{ position: 'relative', width: '100%', height: '200px', border: '2px dashed #00cc77' }}>
<p>{htmlDropped ? 'HTML сброшен!' : 'Перетащите HTML сюда'}</p>
<DropZone onHTMLDrop={handleHTMLDrop} />
</div>
);
};
Использование универсального обработчика onDrop
В этом примере onDrop используется как универсальный обработчик событий перетаскивания, если сбрасываемый контент не является файлом или HTML.
const UniversalDropZone = () => {
const handleDrop = (event) => {
console.log('Контент сброшен:', event);
};
return (
<div style={{ position: 'relative', width: '100%', height: '200px', border: '2px dashed #ffaa00' }}>
<p>Перетащите что-нибудь сюда</p>
<DropZone onDrop={handleDrop} />
</div>
);
};
Комбинирование обработчиков для различных типов сброса
Следующий пример демонстрирует, как комбинировать onFilesDrop, onHTMLDrop и onDrop для создания зоны сброса, которая обрабатывает разные типы данных, выводя сообщения в зависимости от типа сброшенного контента.
const CombinedDropZone = () => {
const [dropMessage, setDropMessage] = useState('Перетащите что-нибудь сюда');
const handleFilesDrop = (files) => {
setDropMessage(`Получено ${files.length} файл(ов)`);
console.log('Файлы сброшены:', files);
};
const handleHTMLDrop = (html) => {
setDropMessage('HTML контент получен');
console.log('HTML сброшен:', html);
};
const handleDrop = (event) => {
setDropMessage('Нечто было сброшено');
console.log('Произошло событие сброса:', event);
};
return (
<div style={{ position: 'relative', width: '100%', height: '200px', border: '2px dashed #ff00aa' }}>
<p>{dropMessage}</p>
<DropZone onFilesDrop={handleFilesDrop} onHTMLDrop={handleHTMLDrop} onDrop={handleDrop} />
</div>
);
};
Заключение
Компонент DropZone обеспечивает удобный интерфейс для перетаскивания и сброса файлов и HTML-контента, охватывая весь размер родительского элемента и позволяя настроить различные обработчики событий для каждого типа сброса.