import { useState, useEffect } from '@wordpress/element';
|
import { MediaUpload, MediaUploadCheck } from '@wordpress/media-utils';
|
import { Button } from '@wordpress/components';
|
import apiFetch from '@wordpress/api-fetch';
|
|
const SUBTYPE_MAP = { image: 'image', video: 'video', document: 'application', all: '' };
|
|
const Thumbnail = ({ id, onRemove }) => {
|
const [media, setMedia] = useState(null);
|
|
useEffect(() => {
|
let cancelled = false;
|
if (!id) return;
|
apiFetch({ path: `/wp/v2/media/${id}` })
|
.then((data) => !cancelled && setMedia(data))
|
.catch(() => {});
|
return () => { cancelled = true; };
|
}, [id]);
|
|
const thumb = media?.media_details?.sizes?.thumbnail?.source_url || media?.source_url;
|
const isImage = media?.media_type === 'image';
|
|
return (
|
<div className="jvb-upload-thumb">
|
{isImage && thumb ? (
|
<img src={thumb} alt={media?.alt_text || ''} />
|
) : (
|
<div className="jvb-upload-thumb-placeholder">
|
{media?.title?.rendered || `#${id}`}
|
</div>
|
)}
|
<Button variant="link" isDestructive onClick={() => onRemove(id)}>
|
Remove
|
</Button>
|
</div>
|
);
|
};
|
|
const UploadField = ({ field, value, onChange }) => {
|
const multiple = field.multiple || field.type === 'gallery';
|
const ids = multiple ? (Array.isArray(value) ? value : []) : value;
|
const allowedTypes = SUBTYPE_MAP[field.subtype] ? [SUBTYPE_MAP[field.subtype]] : undefined;
|
|
const onSelect = (media) => onChange(multiple ? media.map((m) => m.id) : media.id);
|
|
const onRemove = (id) => {
|
onChange(multiple ? ids.filter((existing) => existing !== id) : 0);
|
};
|
|
return (
|
<div className="jvb-upload-field">
|
<p className="jvb-field-label">{field.label}</p>
|
|
<div className={multiple ? 'jvb-upload-grid' : 'jvb-upload-single'}>
|
{multiple
|
? ids.map((id) => <Thumbnail key={id} id={id} onRemove={onRemove} />)
|
: !!ids && <Thumbnail id={ids} onRemove={onRemove} />}
|
</div>
|
|
<MediaUploadCheck>
|
<MediaUpload
|
onSelect={onSelect}
|
allowedTypes={allowedTypes}
|
multiple={multiple}
|
value={multiple ? ids : ids || undefined}
|
render={({ open }) => (
|
<Button variant="secondary" onClick={open}>
|
{(multiple ? ids.length : ids) ? 'Change' : 'Select'} {field.label}
|
</Button>
|
)}
|
/>
|
</MediaUploadCheck>
|
</div>
|
);
|
};
|
|
export default UploadField;
|
