diff --git a/platform/ui/src/components/Thumbnail/Thumbnail.jsx b/platform/ui/src/components/Thumbnail/Thumbnail.jsx index c8f99989d..f62b2f304 100644 --- a/platform/ui/src/components/Thumbnail/Thumbnail.jsx +++ b/platform/ui/src/components/Thumbnail/Thumbnail.jsx @@ -1,9 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; - +import { useDrag } from 'react-dnd'; +// import { Icon } from '@ohif/ui'; +/** + * + */ const Thumbnail = ({ className, imageSrc, @@ -11,11 +15,23 @@ const Thumbnail = ({ description, seriesNumber, numInstances, + dragData, isActive, onClick, }) => { + // TODO: We should wrap our thumbnail to create a "DraggableThumbnail", as + // this will still allow for "drag", even if there is no drop target for the + // specified item. + const [collectedProps, drag, dragPreview] = useDrag({ + item: { ...dragData }, + canDrag: function(monitor) { + return Object.keys(dragData).length !== 0; + }, + }); + return (
{imageSrc ? ( - {imageAltText} + {imageAltText} ) : (
{imageAltText}
)} @@ -56,6 +76,17 @@ const Thumbnail = ({ Thumbnail.propTypes = { className: PropTypes.string, imageSrc: PropTypes.string, + /** + * Data the thumbnail should expose to a receiving drop target. Use a matching + * `dragData.type` to identify which targets can receive this draggable item. + * If this is not set, drag-n-drop will be disabled for this thumbnail. + * + * Ref: https://react-dnd.github.io/react-dnd/docs/api/use-drag#specification-object-members + */ + dragData: PropTypes.shape({ + /** Must match the "type" a dropTarget expects */ + type: PropTypes.string.isRequired, + }), imageAltText: PropTypes.string, description: PropTypes.string.isRequired, seriesNumber: PropTypes.number.isRequired, @@ -64,4 +95,8 @@ Thumbnail.propTypes = { onClick: PropTypes.func.isRequired, }; +Thumbnail.defaultProps = { + dragData: {}, +}; + export default Thumbnail;