diff --git a/platform/ui/src/components/Thumbnail/Thumbnail.jsx b/platform/ui/src/components/Thumbnail/Thumbnail.jsx index 44460fa8a..2f6420f04 100644 --- a/platform/ui/src/components/Thumbnail/Thumbnail.jsx +++ b/platform/ui/src/components/Thumbnail/Thumbnail.jsx @@ -36,8 +36,7 @@ const Thumbnail = ({ className, 'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none' )} - onClick={onClick} - onKeyDown={onClick} + onDoubleClick={onClick} role="button" tabIndex="0" > diff --git a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx index 0f01bd9ce..051d4c1df 100644 --- a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx +++ b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import classnames from 'classnames'; import PropTypes from 'prop-types'; import { useDrag } from 'react-dnd'; @@ -10,6 +11,7 @@ const ThumbnailNoImage = ({ modality, onClick, dragData, + isActive, }) => { const [collectedProps, drag, dragPreview] = useDrag({ item: { ...dragData }, @@ -21,9 +23,11 @@ const ThumbnailNoImage = ({ return (
@@ -44,10 +48,22 @@ const ThumbnailNoImage = ({ }; ThumbnailNoImage.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, + }), description: PropTypes.string.isRequired, modality: PropTypes.string.isRequired, seriesDate: PropTypes.string.isRequired, onClick: PropTypes.func.isRequired, + isActive: PropTypes.bool.isRequired, }; export default ThumbnailNoImage;