add image view component

apps/sensenet/src/components/content/Explore.tsx

@@ -23,7 +23,7 @@ import { DocumentViewer } from '../document-viewer'
 import { EditBinary } from '../edit/edit-binary'
 import { FullScreenLoader } from '../full-screen-loader'
 import TreeWithData from '../tree/tree-with-data'
-import { BrowseView, EditView, NewView, PermissionView, VersionView } from '../view-controls'
+import { BrowseView, EditView, ImageView, NewView, PermissionView, VersionView } from '../view-controls'
 import WopiPage from '../wopi-page'
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -158,7 +158,7 @@ export function Explore({
       case 'setpermissions':
         return <PermissionView key={activeContent} contentPath={`${rootPath}${activeContent}`} />
       case 'image':
-        return <img src={`${repository.configuration.repositoryUrl}${rootPath}${activeContent}`} alt="" />
+        return <ImageView key={activeContent} contentPath={`${rootPath}${activeContent}`} />
       case 'preview':
         return <DocumentViewer key={activeContent} contentPath={`${rootPath}${activeContent}`} />
       case 'edit-binary':

apps/sensenet/src/components/view-controls/image-view.tsx

@@ -0,0 +1,18 @@
+/**
+ * @module ViewControls
+ */
+import { useRepository } from '@sensenet/hooks-react'
+import React, { ReactElement } from 'react'
+
+export interface ImageViewProps {
+  renderIcon?: (name: string) => ReactElement
+  handleCancel?: () => void
+  contentPath: string
+}
+
+export const ImageView: React.FC<ImageViewProps> = (props) => {
+  const { contentPath } = props
+  const repository = useRepository()
+
+  return <img src={`${repository.configuration.repositoryUrl}${contentPath}`} alt="" />
+}

apps/sensenet/src/components/view-controls/index.ts

@@ -1,5 +1,6 @@
 export * from './browse-view'
 export * from './edit-view'
+export * from './image-view'
 export * from './new-view'
 export * from './permission-view'
 export * from './version-view'