780 lines
18 KiB
JavaScript
780 lines
18 KiB
JavaScript
import './style.scss';
|
|
import './extensions/dynamic-categories';
|
|
import './extensions/image-title-and-desription';
|
|
|
|
import {
|
|
closestCenter,
|
|
DndContext,
|
|
PointerSensor,
|
|
useSensor,
|
|
useSensors,
|
|
} from '@dnd-kit/core';
|
|
import {
|
|
arrayMove,
|
|
rectSortingStrategy,
|
|
SortableContext,
|
|
useSortable,
|
|
} from '@dnd-kit/sortable';
|
|
import { CSS } from '@dnd-kit/utilities';
|
|
import classnames from 'classnames/dedupe';
|
|
|
|
import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
|
|
import {
|
|
Button,
|
|
FocalPointPicker,
|
|
Modal,
|
|
TextControl,
|
|
} from '@wordpress/components';
|
|
import { useSelect } from '@wordpress/data';
|
|
import { useState } from '@wordpress/element';
|
|
import { applyFilters } from '@wordpress/hooks';
|
|
import { __, _n, sprintf } from '@wordpress/i18n';
|
|
|
|
import ControlsRender from '../controls-render';
|
|
|
|
const { navigator, VPGutenbergVariables } = window;
|
|
|
|
const ALLOWED_MEDIA_TYPES = ['image'];
|
|
|
|
function getHumanFileSize(size) {
|
|
const i = Math.floor(Math.log(size) / Math.log(1024));
|
|
return `${(size / 1024 ** i).toFixed(2) * 1} ${
|
|
['B', 'KB', 'MB', 'GB', 'TB'][i]
|
|
}`;
|
|
}
|
|
|
|
function prepareImage(img) {
|
|
const imgData = {
|
|
id: img.id,
|
|
imgUrl: img.url,
|
|
imgThumbnailUrl: img.url,
|
|
};
|
|
|
|
// Prepare thumbnail for all images except GIF, since GIFs animated only in full size.
|
|
if (!img.mime || img.mime !== 'image/gif') {
|
|
if (img.sizes && img.sizes.large && img.sizes.large.url) {
|
|
imgData.imgThumbnailUrl = img.sizes.large.url;
|
|
} else if (img.sizes && img.sizes.medium && img.sizes.medium.url) {
|
|
imgData.imgThumbnailUrl = img.sizes.medium.url;
|
|
} else if (
|
|
img.sizes &&
|
|
img.sizes.thumbnail &&
|
|
img.sizes.thumbnail.url
|
|
) {
|
|
imgData.imgThumbnailUrl = img.sizes.thumbnail.url;
|
|
}
|
|
}
|
|
|
|
if (img.title) {
|
|
imgData.title = img.title;
|
|
}
|
|
if (img.description) {
|
|
imgData.description = img.description;
|
|
}
|
|
|
|
return imgData;
|
|
}
|
|
|
|
/**
|
|
* Prepare selected images array using our format.
|
|
* Use the current images set with already user data on images.
|
|
*
|
|
* @param {Array} images - new images set.
|
|
* @param {Array} currentImages - current images set.
|
|
* @return {Array}
|
|
*/
|
|
function prepareImages(images, currentImages) {
|
|
const result = [];
|
|
const currentImagesIds =
|
|
currentImages && Object.keys(currentImages).length
|
|
? currentImages.map((img) => img.id)
|
|
: [];
|
|
|
|
if (images && images.length) {
|
|
images.forEach((img) => {
|
|
// We have to check for image URL, because when the image is removed from the
|
|
// system, it should be removed from our block as well after re-save.
|
|
if (img.url) {
|
|
let currentImgData = false;
|
|
|
|
if (currentImagesIds.length) {
|
|
const currentId = currentImagesIds.indexOf(img.id);
|
|
|
|
if (currentId > -1 && currentImages[currentId]) {
|
|
currentImgData = currentImages[currentId];
|
|
}
|
|
}
|
|
|
|
const imgData = currentImgData || prepareImage(img);
|
|
|
|
result.push(imgData);
|
|
}
|
|
});
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
const SelectedImageData = function (props) {
|
|
const {
|
|
showFocalPoint,
|
|
focalPoint,
|
|
imgId,
|
|
imgUrl,
|
|
onChangeFocalPoint,
|
|
onChangeImage,
|
|
} = props;
|
|
|
|
const [showMoreInfo, setShowMoreInfo] = useState(false);
|
|
const [linkCopied, setLinkCopied] = useState(false);
|
|
|
|
const { imageData } = useSelect(
|
|
(select) => {
|
|
if (!imgId) {
|
|
return {};
|
|
}
|
|
|
|
const { getMedia } = select('core');
|
|
|
|
const imgData = getMedia(imgId);
|
|
|
|
if (!imgData) {
|
|
return {};
|
|
}
|
|
|
|
return {
|
|
imageData: imgData,
|
|
};
|
|
},
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[showMoreInfo, imgId]
|
|
);
|
|
|
|
return (
|
|
<MediaUploadCheck>
|
|
<div
|
|
className={`vpf-component-gallery-control-item-modal-image-info editor-post-featured-image ${
|
|
showMoreInfo
|
|
? 'vpf-component-gallery-control-item-modal-image-info-sticky-bottom'
|
|
: ''
|
|
}`}
|
|
>
|
|
{showFocalPoint ? (
|
|
<FocalPointPicker
|
|
url={imageData?.source_url || imgUrl}
|
|
value={focalPoint}
|
|
dimensions={{
|
|
width: imageData?.media_details?.width || 80,
|
|
height: imageData?.media_details?.height || 80,
|
|
}}
|
|
onChange={(val) => {
|
|
onChangeFocalPoint(val);
|
|
}}
|
|
/>
|
|
) : null}
|
|
<MediaUpload
|
|
onSelect={(image) => {
|
|
const imgData = prepareImage(image);
|
|
onChangeImage(imgData);
|
|
}}
|
|
allowedTypes={ALLOWED_MEDIA_TYPES}
|
|
render={({ open }) => (
|
|
<Button onClick={open} isSecondary>
|
|
{__('Replace Image', 'visual-portfolio')}
|
|
</Button>
|
|
)}
|
|
/>
|
|
<Button
|
|
onClick={() => {
|
|
onChangeImage(false);
|
|
}}
|
|
isLink
|
|
isDestructive
|
|
>
|
|
{__('Remove Image from Gallery', 'visual-portfolio')}
|
|
</Button>
|
|
<div className="vpf-component-gallery-control-item-modal-image-additional-info">
|
|
<Button
|
|
onClick={() => {
|
|
setShowMoreInfo(!showMoreInfo);
|
|
}}
|
|
isLink
|
|
>
|
|
{showMoreInfo
|
|
? __('Hide Additional Info', 'visual-portfolio')
|
|
: __('Show Additional Info', 'visual-portfolio')}
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M8 4L14 10L8 16"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
transform={`rotate(${
|
|
showMoreInfo ? '-' : ''
|
|
}90 10 10)`}
|
|
/>
|
|
</svg>
|
|
</Button>
|
|
{showMoreInfo ? (
|
|
<>
|
|
<div>
|
|
<strong>
|
|
{__('File name:', 'visual-portfolio')}
|
|
</strong>{' '}
|
|
{imageData?.source_url.split('/').pop() || '-'}
|
|
<br />{' '}
|
|
<strong>
|
|
{__('File type:', 'visual-portfolio')}
|
|
</strong>{' '}
|
|
{imageData?.mime_type || '-'}
|
|
<br />{' '}
|
|
<strong>
|
|
{__('File size:', '@text_domain')}
|
|
</strong>{' '}
|
|
{imageData?.media_details?.filesize
|
|
? getHumanFileSize(
|
|
imageData.media_details.filesize
|
|
)
|
|
: '-'}
|
|
{imageData?.media_details?.width ? (
|
|
<>
|
|
<br />{' '}
|
|
<strong>
|
|
{__('Dimensions:', '@text_domain')}
|
|
</strong>{' '}
|
|
{imageData.media_details.width} by{' '}
|
|
{imageData.media_details.height} pixels
|
|
</>
|
|
) : null}
|
|
</div>
|
|
<div>
|
|
<TextControl
|
|
label={__('File URL:', 'visual-portfolio')}
|
|
value={imageData?.source_url || ''}
|
|
readOnly
|
|
/>
|
|
<Button
|
|
onClick={() => {
|
|
navigator.clipboard
|
|
.writeText(
|
|
imageData?.source_url || ''
|
|
)
|
|
.then(() => {
|
|
setLinkCopied(true);
|
|
});
|
|
}}
|
|
isSecondary
|
|
isSmall
|
|
>
|
|
{__(
|
|
'Copy URL to Clipboard',
|
|
'visual-portfolio'
|
|
)}
|
|
</Button>
|
|
{linkCopied ? (
|
|
<span className="vpf-component-gallery-control-item-modal-image-additional-info-copied">
|
|
{__('Copied!', 'visual-portfolio')}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
{imageData?.link ? (
|
|
<div>
|
|
<a
|
|
href={imageData?.link}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{__(
|
|
'View attachment page',
|
|
'visual-portfolio'
|
|
)}
|
|
</a>
|
|
{' | '}
|
|
<a
|
|
href={`${VPGutenbergVariables.admin_url}post.php?post=${imageData.id}&action=edit`}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{__(
|
|
'Edit more details',
|
|
'visual-portfolio'
|
|
)}
|
|
</a>
|
|
</div>
|
|
) : null}
|
|
</>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</MediaUploadCheck>
|
|
);
|
|
};
|
|
|
|
const SortableItem = function (props) {
|
|
const {
|
|
img,
|
|
items,
|
|
index,
|
|
onChange,
|
|
imageControls,
|
|
controlName,
|
|
focalPoint,
|
|
clientId,
|
|
isSetupWizard,
|
|
} = props;
|
|
|
|
const idx = index - 1;
|
|
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging,
|
|
isSorting,
|
|
} = useSortable({
|
|
id: props.id,
|
|
});
|
|
|
|
const style = {
|
|
transform: CSS.Translate.toString(transform),
|
|
transition: isSorting ? transition : '',
|
|
};
|
|
|
|
const [isOpen, setOpen] = useState(false);
|
|
const openModal = () => setOpen(true);
|
|
const closeModal = () => setOpen(false);
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={classnames(
|
|
'vpf-component-gallery-control-item',
|
|
isDragging
|
|
? 'vpf-component-gallery-control-item-dragging'
|
|
: ''
|
|
)}
|
|
ref={setNodeRef}
|
|
style={style}
|
|
{...attributes}
|
|
{...listeners}
|
|
>
|
|
<Button
|
|
className="vpf-component-gallery-control-item-button"
|
|
onClick={openModal}
|
|
aria-expanded={isOpen}
|
|
>
|
|
<img
|
|
src={img.imgThumbnailUrl || img.imgUrl}
|
|
alt={img.alt || img.imgThumbnailUrl || img.imgUrl}
|
|
loading="lazy"
|
|
/>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<circle cx="12" cy="12" r="3" />
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
|
</svg>
|
|
</Button>
|
|
<Button
|
|
className="vpf-component-gallery-control-item-remove"
|
|
onClick={() => {
|
|
const newImages = [...items];
|
|
|
|
if (newImages[idx]) {
|
|
newImages.splice(idx, 1);
|
|
|
|
onChange(newImages);
|
|
}
|
|
}}
|
|
>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M3.5 5.5H7.5M16.5 5.5H12.5M12.5 5.5V2.5H7.5V5.5M12.5 5.5H7.5M5 8.5L6 17H14L15 8.5"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
fill="transparent"
|
|
/>
|
|
</svg>
|
|
</Button>
|
|
</div>
|
|
{isOpen ? (
|
|
<Modal
|
|
title={__('Image Settings', 'visual-portfolio')}
|
|
onRequestClose={(e) => {
|
|
if (
|
|
e?.relatedTarget?.classList?.contains('media-modal')
|
|
) {
|
|
// Don't close modal if opened media modal.
|
|
} else {
|
|
closeModal(e);
|
|
}
|
|
}}
|
|
>
|
|
<div className="vpf-component-gallery-control-item-modal">
|
|
{focalPoint && img.id ? (
|
|
<SelectedImageData
|
|
showFocalPoint={focalPoint}
|
|
focalPoint={img.focalPoint}
|
|
imgId={img.id}
|
|
imgUrl={img.imgThumbnailUrl || img.imgUrl}
|
|
onChangeFocalPoint={(val) => {
|
|
const newImages = [...items];
|
|
|
|
if (newImages[idx]) {
|
|
newImages[idx] = {
|
|
...newImages[idx],
|
|
focalPoint: val,
|
|
};
|
|
|
|
onChange(newImages);
|
|
}
|
|
}}
|
|
onChangeImage={(imgData) => {
|
|
const newImages = [...items];
|
|
|
|
if (!newImages[idx]) {
|
|
return;
|
|
}
|
|
|
|
if (imgData === false) {
|
|
newImages.splice(idx, 1);
|
|
|
|
onChange(newImages);
|
|
|
|
closeModal();
|
|
} else {
|
|
newImages[idx] = {
|
|
...newImages[idx],
|
|
...imgData,
|
|
};
|
|
|
|
onChange(newImages);
|
|
}
|
|
}}
|
|
/>
|
|
) : (
|
|
''
|
|
)}
|
|
<div>
|
|
{Object.keys(imageControls).map((name) => {
|
|
const newCondition = [];
|
|
|
|
// prepare name.
|
|
const imgControlName = `${controlName}[${idx}].${name}`;
|
|
|
|
// prepare conditions for the current item.
|
|
if (imageControls[name].condition.length) {
|
|
imageControls[name].condition.forEach(
|
|
(data) => {
|
|
const newData = { ...data };
|
|
|
|
if (
|
|
newData.control &&
|
|
/SELF/g.test(newData.control)
|
|
) {
|
|
newData.control =
|
|
newData.control.replace(
|
|
/SELF/g,
|
|
`${controlName}[${idx}]`
|
|
);
|
|
}
|
|
|
|
newCondition.push(newData);
|
|
}
|
|
);
|
|
}
|
|
|
|
return applyFilters(
|
|
'vpf.editor.gallery-controls-render',
|
|
<ControlsRender.Control
|
|
key={`${
|
|
img.id ||
|
|
img.imgThumbnailUrl ||
|
|
img.imgUrl
|
|
}-${idx}-${name}`}
|
|
attributes={props.attributes}
|
|
onChange={(val) => {
|
|
const newImages = [...items];
|
|
|
|
if (newImages[idx]) {
|
|
newImages[idx] = {
|
|
...newImages[idx],
|
|
[name]: val,
|
|
};
|
|
|
|
onChange(newImages);
|
|
}
|
|
}}
|
|
{...imageControls[name]}
|
|
name={imgControlName}
|
|
value={img[name]}
|
|
condition={newCondition}
|
|
clientId={clientId}
|
|
isSetupWizard={isSetupWizard}
|
|
/>,
|
|
imageControls[name],
|
|
props,
|
|
{
|
|
name,
|
|
fullName: imgControlName,
|
|
index: idx,
|
|
condition: newCondition,
|
|
}
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
) : null}
|
|
</>
|
|
);
|
|
};
|
|
|
|
const SortableList = function (props) {
|
|
const {
|
|
items,
|
|
onChange,
|
|
onSortEnd,
|
|
imageControls,
|
|
controlName,
|
|
attributes,
|
|
focalPoint,
|
|
isSetupWizard,
|
|
} = props;
|
|
|
|
const sensors = useSensors(
|
|
useSensor(PointerSensor, { activationConstraint: { distance: 5 } })
|
|
);
|
|
|
|
// Automatically open images selector when first time select Images in Setup Wizard.
|
|
const [isOpenedInSetupWizard, setOpenInSetupWizard] = useState(
|
|
!isSetupWizard
|
|
);
|
|
const [showingItems, setShowingItems] = useState(18);
|
|
|
|
const sortableItems = [];
|
|
|
|
if (items && items.length) {
|
|
items.forEach((data, i) => {
|
|
if (i < showingItems) {
|
|
sortableItems.push({
|
|
id: i + 1,
|
|
data,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
const editGalleryButton = (
|
|
<MediaUpload
|
|
multiple="add"
|
|
onSelect={(images) => {
|
|
onChange(prepareImages(images, items));
|
|
}}
|
|
allowedTypes={ALLOWED_MEDIA_TYPES}
|
|
value={items && items.length ? items.map((img) => img.id) : false}
|
|
render={({ open }) => {
|
|
if (!isOpenedInSetupWizard && (!items || !items.length)) {
|
|
setOpenInSetupWizard(true);
|
|
open();
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
className="vpf-component-gallery-control-item-fullwidth vpf-component-gallery-control-item-add"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
open();
|
|
}}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
height="20"
|
|
width="20"
|
|
role="img"
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
>
|
|
{items && items.length ? (
|
|
<path d="M9 14h10l-3.45-4.5-2.3 3-1.55-2Zm-1 4q-.825 0-1.412-.587Q6 16.825 6 16V4q0-.825.588-1.413Q7.175 2 8 2h12q.825 0 1.413.587Q22 3.175 22 4v12q0 .825-.587 1.413Q20.825 18 20 18Zm0-2h12V4H8v12Zm-4 6q-.825 0-1.412-.587Q2 20.825 2 20V6h2v14h14v2ZM8 4v12V4Z" />
|
|
) : (
|
|
<path d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" />
|
|
)}
|
|
</svg>
|
|
<span>
|
|
{items && items.length
|
|
? __('Edit Gallery', 'visual-portfolio')
|
|
: __('Add Images', 'visual-portfolio')}
|
|
</span>
|
|
</Button>
|
|
);
|
|
}}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<div className="vpf-component-gallery-control-items">
|
|
{items && items.length && items.length > 9
|
|
? editGalleryButton
|
|
: null}
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={closestCenter}
|
|
onDragEnd={(event) => {
|
|
const { active, over } = event;
|
|
|
|
if (active.id !== over.id) {
|
|
onSortEnd(active.id - 1, over.id - 1);
|
|
}
|
|
}}
|
|
>
|
|
<SortableContext
|
|
items={sortableItems}
|
|
strategy={rectSortingStrategy}
|
|
>
|
|
{sortableItems.map(({ data, id }) => (
|
|
<SortableItem
|
|
key={`vpf-component-gallery-control-items-sortable-${id}`}
|
|
index={id}
|
|
id={id}
|
|
img={data}
|
|
items={items}
|
|
onChange={onChange}
|
|
imageControls={imageControls}
|
|
controlName={controlName}
|
|
attributes={attributes}
|
|
focalPoint={focalPoint}
|
|
isSetupWizard={isSetupWizard}
|
|
/>
|
|
))}
|
|
</SortableContext>
|
|
</DndContext>
|
|
|
|
{items && items.length ? (
|
|
<span className="vpf-component-gallery-control-item-fullwidth vpf-component-gallery-control-item-pagination">
|
|
<span>
|
|
{sprintf(
|
|
_n(
|
|
'Showing %1$s of %2$s Image',
|
|
'Showing %1$s of %2$s Images',
|
|
items.length,
|
|
'visual-portfolio'
|
|
),
|
|
showingItems > items.length
|
|
? items.length
|
|
: showingItems,
|
|
items.length
|
|
)}
|
|
</span>
|
|
{items.length > showingItems ? (
|
|
<div className="vpf-component-gallery-control-item-pagination-buttons">
|
|
<Button
|
|
isSecondary
|
|
isSmall
|
|
onClick={() => {
|
|
setShowingItems(showingItems + 18);
|
|
}}
|
|
>
|
|
{__('Show More', 'visual-portfolio')}
|
|
</Button>
|
|
<Button
|
|
isLink
|
|
isSmall
|
|
onClick={() => {
|
|
setShowingItems(items.length);
|
|
}}
|
|
>
|
|
{__('Show All', 'visual-portfolio')}
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</span>
|
|
) : null}
|
|
|
|
{editGalleryButton}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Component Class
|
|
*
|
|
* @param props
|
|
*/
|
|
export default function GalleryControl(props) {
|
|
const {
|
|
imageControls,
|
|
attributes,
|
|
name: controlName,
|
|
value,
|
|
onChange,
|
|
focalPoint,
|
|
isSetupWizard,
|
|
} = props;
|
|
|
|
const filteredValue = value.filter((img) => img.id);
|
|
|
|
return (
|
|
<div className="vpf-component-gallery-control">
|
|
<MediaUpload
|
|
onSelect={(images) => {
|
|
onChange(prepareImages(images));
|
|
}}
|
|
allowedTypes={ALLOWED_MEDIA_TYPES}
|
|
multiple="add"
|
|
value={
|
|
filteredValue && Object.keys(filteredValue).length
|
|
? filteredValue.map((img) => img.id)
|
|
: []
|
|
}
|
|
render={() => (
|
|
<SortableList
|
|
items={filteredValue}
|
|
onChange={onChange}
|
|
imageControls={imageControls}
|
|
controlName={controlName}
|
|
attributes={attributes}
|
|
focalPoint={focalPoint}
|
|
isSetupWizard={isSetupWizard}
|
|
onSortEnd={(oldIndex, newIndex) => {
|
|
const newImages = arrayMove(
|
|
filteredValue,
|
|
oldIndex,
|
|
newIndex
|
|
);
|
|
onChange(newImages);
|
|
}}
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|