diff --git a/platform/ui/index.js b/platform/ui/index.js index a6cf7e3fb..e03d2a056 100644 --- a/platform/ui/index.js +++ b/platform/ui/index.js @@ -46,6 +46,7 @@ export { ThemeWrapper, Thumbnail, ThumbnailSR, + ThumbnailTracked, ThumbnailList, Toolbar, ToolbarButton, diff --git a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx new file mode 100644 index 000000000..921180d08 --- /dev/null +++ b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx @@ -0,0 +1,111 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; + +import { Icon, Thumbnail } from '@ohif/ui'; + +const ThumbnailTracked = ({ + className, + imageSrc, + imageAltText, + seriesDescription, + seriesNumber, + instanceNumber, + isActive, + onClick, + viewportIdentificator, + isTracked, +}) => { + const trackedIcon = isTracked ? 'circled-checkmark' : 'dotted-circle'; + + return ( +
+
+
+ +
+ {viewportIdentificator} +
+
+
+
+ + Series is tracked + + {viewportIdentificator && ( + + in viewport + + {viewportIdentificator} + + + )} +
+
+ +
+
+ + + +
+
+ {isTracked && ( + + )} +
+ +
+ ); +}; + +ThumbnailTracked.propTypes = { + className: PropTypes.string, + imageSrc: PropTypes.string, + imageAltText: PropTypes.string, + seriesDescription: PropTypes.string.isRequired, + seriesNumber: PropTypes.number.isRequired, + instanceNumber: PropTypes.number.isRequired, + isActive: PropTypes.bool.isRequired, + onClick: PropTypes.func.isRequired, + isTracked: PropTypes.bool, + viewportIdentificator: PropTypes.string, +}; + +export default ThumbnailTracked; diff --git a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.mdx b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.mdx new file mode 100644 index 000000000..cbb408d7b --- /dev/null +++ b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.mdx @@ -0,0 +1,39 @@ +--- +name: ThumbnailTracked +menu: General +route: components/ThumbnailTracked +--- + +import { Playground, Props } from 'docz'; +import { ThumbnailTracked } from '@ohif/ui'; + +# ThumbnailTracked + +## Import + +```javascript +import { ThumbnailTracked } from '@ohif/ui'; +``` + +## Basic usage + + +
+
+ alert('Thumbnail was clicked!')} + isTracked={true} + viewportIdentificator="A" + /> +
+
+
+ +## Properties + + diff --git a/platform/ui/src/components/ThumbnailTracked/index.js b/platform/ui/src/components/ThumbnailTracked/index.js new file mode 100644 index 000000000..cf623a61f --- /dev/null +++ b/platform/ui/src/components/ThumbnailTracked/index.js @@ -0,0 +1,2 @@ +import ThumbnailTracked from './ThumbnailTracked'; +export default ThumbnailTracked; diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js index 8894a28ad..67e69abad 100644 --- a/platform/ui/src/components/index.js +++ b/platform/ui/src/components/index.js @@ -32,6 +32,7 @@ import TableRow from './TableRow'; import ThemeWrapper from './ThemeWrapper/'; import Thumbnail from './Thumbnail'; import ThumbnailSR from './ThumbnailSR'; +import ThumbnailTracked from './ThumbnailTracked'; import ThumbnailList from './ThumbnailList'; import Toolbar from './Toolbar'; import ToolbarButton from './ToolbarButton'; @@ -75,6 +76,7 @@ export { ThemeWrapper, Thumbnail, ThumbnailSR, + ThumbnailTracked, ThumbnailList, Toolbar, ToolbarButton,