Initial commit from prod-batam

platform/ui/src/components/Thumbnail/Thumbnail.tsx

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { useDrag } from 'react-dnd';
+import Icon from '../Icon';
+import { StringNumber } from '../../types';
+import DisplaySetMessageListTooltip from '../DisplaySetMessageListTooltip';
+
+/**
+ * Display a thumbnail for a display set.
+ */
+const Thumbnail = ({
+  displaySetInstanceUID,
+  className,
+  imageSrc,
+  imageAltText,
+  description,
+  seriesNumber,
+  numInstances,
+  loadingProgress,
+  countIcon,
+  messages,
+  dragData = {},
+  isActive,
+  onClick,
+  onDoubleClick,
+}): React.ReactNode => {
+  // 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({
+    type: 'displayset',
+    item: { ...dragData },
+    canDrag: function (monitor) {
+      return Object.keys(dragData).length !== 0;
+    },
+  });
+
+  const [lastTap, setLastTap] = useState(0);
+
+  const handleTouchEnd = e => {
+    const currentTime = new Date().getTime();
+    const tapLength = currentTime - lastTap;
+    if (tapLength < 300 && tapLength > 0) {
+      onDoubleClick(e);
+    } else {
+      onClick(e);
+    }
+    setLastTap(currentTime);
+  };
+
+  return (
+    <div
+      className={classnames(
+        className,
+        'group mb-8 flex flex-1 cursor-pointer select-none flex-col px-3 outline-none'
+      )}
+      id={`thumbnail-${displaySetInstanceUID}`}
+      data-cy={`study-browser-thumbnail`}
+      data-series={seriesNumber}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onTouchEnd={handleTouchEnd}
+      role="button"
+      tabIndex="0"
+    >
+      <div ref={drag}>
+        <div
+          className={classnames(
+            'flex h-32 flex-1 items-center justify-center overflow-hidden rounded-md bg-black text-base text-white',
+            isActive
+              ? 'border-primary-light border-2'
+              : 'border-secondary-light border hover:border-blue-300'
+          )}
+        >
+          {imageSrc ? (
+            <img
+              src={imageSrc}
+              alt={imageAltText}
+              className="h-full w-full object-contain"
+              crossOrigin="anonymous"
+            />
+          ) : (
+            <div>{imageAltText}</div>
+          )}
+        </div>
+        <div className="flex flex-1 flex-row items-center pt-2 text-base text-blue-300">
+          <div className="mr-4">
+            <span className="text-primary-main font-bold">{'S: '}</span>
+            {seriesNumber}
+          </div>
+          <div className="flex flex-1 flex-row items-center">
+            <Icon
+              name={countIcon || 'group-layers'}
+              className="mr-2 w-3"
+            />
+            {` ${numInstances}`}
+          </div>
+          <div className="mr-2 flex last:mr-0">
+            {loadingProgress && loadingProgress < 1 && <>{Math.round(loadingProgress * 100)}%</>}
+            {loadingProgress && loadingProgress === 1 && (
+              <Icon
+                name={'database'}
+              className="w-3"
+            />
+          )}
+        </div>
+        <DisplaySetMessageListTooltip
+          messages={messages}
+          id={`display-set-tooltip-${displaySetInstanceUID}`}
+        />
+        </div>
+        <div className="break-all text-base text-white">{description}</div>
+      </div>
+    </div>
+  );
+};
+
+Thumbnail.propTypes = {
+  displaySetInstanceUID: PropTypes.string.isRequired,
+  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: StringNumber.isRequired,
+  numInstances: PropTypes.number.isRequired,
+  loadingProgress: PropTypes.number,
+  messages: PropTypes.object,
+  isActive: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onDoubleClick: PropTypes.func.isRequired,
+};
+
+export default Thumbnail;

platform/ui/src/components/Thumbnail/index.js

@@ -0,0 +1,2 @@
+import Thumbnail from './Thumbnail';
+export default Thumbnail;