WIP DisplaySetService

platform/ui/src/components/ThumbnailList/ThumbnailList.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types';
 
 import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '@ohif/ui';
 
-const ThumbnailList = ({ thumbnails, thumbnailActive, onThumbnailClick }) => {
+const ThumbnailList = ({
+  dragData,
+  thumbnails,
+  thumbnailActive,
+  onThumbnailClick,
+}) => {
   return (
     <div className="bg-black py-3">
       {thumbnails.map(
@@ -27,6 +32,7 @@ const ThumbnailList = ({ thumbnails, thumbnailActive, onThumbnailClick }) => {
               return (
                 <Thumbnail
                   key={displaySetInstanceUID}
+                  dragData={dragData}
                   description={description}
                   seriesNumber={seriesNumber}
                   numInstances={numInstances}
@@ -41,6 +47,7 @@ const ThumbnailList = ({ thumbnails, thumbnailActive, onThumbnailClick }) => {
               return (
                 <ThumbnailNoImage
                   key={displaySetInstanceUID}
+                  dragData={dragData}
                   modality={modality}
                   seriesDate={seriesDate}
                   description={description}
@@ -51,6 +58,7 @@ const ThumbnailList = ({ thumbnails, thumbnailActive, onThumbnailClick }) => {
               return (
                 <ThumbnailTracked
                   key={displaySetInstanceUID}
+                  dragData={dragData}
                   description={description}
                   seriesNumber={seriesNumber}
                   numInstances={numInstances}
@@ -72,6 +80,17 @@ const ThumbnailList = ({ thumbnails, thumbnailActive, onThumbnailClick }) => {
 };
 
 ThumbnailList.propTypes = {
+  /**
+   * 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,
+  }),
   thumbnails: PropTypes.arrayOf(
     PropTypes.shape({
       displaySetInstanceUID: PropTypes.string.isRequired,