OHIF-79: Study Browser side panel (#1614)

* Initial code changes for StudyBrowser * StudyItem component basic strucure * Adding new icon * Updates to get StudyItem working * Small fix on side panel open header * Adding new icons * Thumbnail List * ThumbnailSR WIP * Thumanil WIP * Export new components into ohif/ui * Updates on style * Update ThumbnailSR style * Margin updates * MAke it scrollable * Make it scrollable * Style updates * Fixing tooltip * Tunning the mock data and testing scenarios * Update mock data * make all studies collapsed * small fix on tooltip * Removing empty mdx files * Updating viewer docz page * Style updates * Update button font-size * Fix: Make cancel button only visible on hover * Fixing callouts * Fix eslint
2020-05-15 13:49:24 +02:00
1 parent 51750c6ede
commit eda99a0bac
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { Thumbnail, ThumbnailSR } from '@ohif/ui';
+
+const ThumbnailList = ({ thumbnails }) => {
+  const [thumbnailActive, setThumbnailActive] = useState(null);
+
+  return (
+    <div className="bg-black py-3">
+      {thumbnails.map(
+        ({
+          displaySetInstanceUid,
+          seriesDescription,
+          seriesNumber,
+          instanceNumber,
+          modality,
+          seriesDate,
+          viewportIdentificator,
+          isTracked,
+        }) => {
+          const isSR = modality && modality.toLowerCase() === 'sr';
+          const isActive = thumbnailActive === displaySetInstanceUid;
+
+          if (isSR) {
+            return (
+              <ThumbnailSR
+                key={displaySetInstanceUid}
+                modality={modality}
+                seriesDate={seriesDate}
+                seriesDescription={seriesDescription}
+              />
+            );
+          } else {
+            return (
+              <Thumbnail
+                key={displaySetInstanceUid}
+                seriesDescription={seriesDescription}
+                seriesNumber={seriesNumber}
+                instanceNumber={instanceNumber}
+                viewportIdentificator={viewportIdentificator}
+                isTracked={isTracked}
+                isActive={isActive}
+                onClick={() => {
+                  setThumbnailActive(
+                    thumbnailActive === displaySetInstanceUid
+                      ? null
+                      : displaySetInstanceUid
+                  );
+                }}
+              />
+            );
+          }
+        }
+      )}
+    </div>
+  );
+};
+
+ThumbnailList.propTypes = {
+  thumbnails: PropTypes.arrayOf(
+    PropTypes.shape({
+      displaySetInstanceUid: PropTypes.string,
+      seriesDescription: PropTypes.string,
+      seriesNumber: PropTypes.number,
+      instanceNumber: PropTypes.number,
+      modality: PropTypes.string,
+      seriesDate: PropTypes.string,
+    })
+  ),
+};
+
+export default ThumbnailList;
@@ -0,0 +1,2 @@
+import ThumbnailList from './ThumbnailList';
+export default ThumbnailList;