Merge pull request #54 from graasp/53/appLinkPdfHeight

refactor: get dynamic height for app, pdf and links

src/constants.ts

@@ -24,7 +24,6 @@ export const TEXT_EDITOR_TOOLBAR = [
   [{ list: 'ordered' }, { list: 'bullet' }, 'code-block', 'link', 'formula'],
 ];
 export const TEXT_EDITOR_MIN_HEIGHT = 200;
-export const APP_ITEM_HEIGHT = 500;
 export const APP_ITEM_WIDTH = '100%';
 export const APP_ITEM_FRAME_BORDER = 0;
 export const UNEXPECTED_ERROR_MESSAGE = 'An unexpected error occurred';
@@ -56,3 +55,5 @@ export const SETTINGS = {
   },
 };
 export const FORBIDDEN_TEXT = 'You cannot access this item';
+
+export const ITEM_MAX_HEIGHT = '70vh';

src/items/AppItem.tsx

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import { Record } from 'immutable';
+import { withStyles } from '@material-ui/core/styles';
 import { getAppExtra } from '../utils/itemExtra';
 import Loader from '../Loader';
 import {
   APP_ITEM_FRAME_BORDER,
-  APP_ITEM_HEIGHT,
   APP_ITEM_WIDTH,
+  ITEM_MAX_HEIGHT,
 } from '../constants';
 import withCaption from './withCaption';
 import type { Item, Member, UUID } from '../types';
@@ -34,14 +35,24 @@ interface AppItemProps {
   // todo: one of enum
   mode?: string;
   saveButtonId?: string;
+  classes: {
+    iframe: string;
+  };
 }
 
 interface AppItemState {
   channel?: MessageChannel;
   iframeIsLoading: boolean;
   url?: string;
+  height: number | string;
 }
 
+const styles = {
+  iframe: {
+    maxHeight: ITEM_MAX_HEIGHT,
+  },
+};
+
 const requestApiAccessToken = async ({
   id,
   origin,
@@ -75,6 +86,7 @@ class AppItem extends Component<AppItemProps> {
 
   state: AppItemState = {
     iframeIsLoading: true,
+    height: '100%',
   };
 
   iframeRef: React.RefObject<HTMLIFrameElement>;
@@ -188,13 +200,26 @@ class AppItem extends Component<AppItemProps> {
   };
 
   render(): JSX.Element {
-    const { item, id, showCaption, onSaveCaption, saveButtonId, editCaption } =
-      this.props;
-    const { iframeIsLoading, url } = this.state;
+    const {
+      item,
+      id,
+      showCaption,
+      onSaveCaption,
+      saveButtonId,
+      editCaption,
+      classes,
+    } = this.props;
+    const { iframeIsLoading, url, height } = this.state;
 
     const onLoad = iframeIsLoading
       ? (): void => {
           this.setState({ iframeIsLoading: false });
+          if (this.iframeRef?.current?.contentWindow) {
+            this.setState({
+              height:
+                this.iframeRef.current.contentWindow.document.body.scrollHeight,
+            });
+          }
         }
       : undefined;
 
@@ -207,10 +232,10 @@ class AppItem extends Component<AppItemProps> {
           onLoad={onLoad}
           ref={this.iframeRef}
           width={APP_ITEM_WIDTH}
-          // todo: dynamic height depending on app
-          height={APP_ITEM_HEIGHT}
+          height={height}
           src={url}
           frameBorder={APP_ITEM_FRAME_BORDER}
+          className={classes.iframe}
         />
       </React.Fragment>
     );
@@ -228,4 +253,4 @@ class AppItem extends Component<AppItemProps> {
   }
 }
 
-export default AppItem;
+export default withStyles(styles)(AppItem);

src/items/FilePdf.tsx

@@ -1,13 +1,42 @@
-import React, { FC } from 'react';
+import React, { FC, useRef, useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { ITEM_MAX_HEIGHT } from '../constants';
 
 interface FilePdfProps {
   id?: string;
   url: string;
   height?: number | string;
 }
 
-const FilePdf: FC<FilePdfProps> = ({ url, id, height }) => {
-  return <embed id={id} src={url} width='100%' height={height || '100%'} />;
+const useStyles = makeStyles({
+  embed: {
+    maxHeight: ITEM_MAX_HEIGHT,
+  },
+});
+
+const FilePdf: FC<FilePdfProps> = ({ url, id, height: defaultHeight }) => {
+  const embedRef = useRef<HTMLEmbedElement>(null);
+  const classes = useStyles();
+  const [height, setHeight] = useState<number | string>(
+    defaultHeight ?? '100%',
+  );
+
+  const onLoad = (e): void => {
+    // set pdf height -> probably very high
+    setHeight(e.target?.offsetParent?.scrollHeight);
+  };
+
+  return (
+    <embed
+      ref={embedRef}
+      id={id}
+      src={url}
+      width='100%'
+      height={height || '100%'}
+      onLoad={onLoad}
+      className={classes.embed}
+    />
+  );
 };
 
 export default FilePdf;

src/items/LinkItem.tsx

@@ -1,13 +1,13 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useState, useRef } from 'react';
 import { Record } from 'immutable';
 import IconButton from '@material-ui/core/IconButton';
 import { makeStyles } from '@material-ui/core/styles';
 import { getEmbeddedLinkExtra } from '../utils/itemExtra';
 import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 import withCaption from './withCaption';
 import {
+  ITEM_MAX_HEIGHT,
   LINK_BUTTON_CONTAINER_BACKGROUND_COLOR,
-  LINK_BUTTON_CONTAINER_HEIGHT,
   LINK_BUTTON_CONTAINER_WIDTH,
   LINK_BUTTON_ICON_COLOR,
   LINK_BUTTON_ICON_FONT_SIZE,
@@ -16,7 +16,6 @@ import type { Item } from '../types';
 
 interface LinkItemProps {
   item: Record<Item>;
-  height?: number | string;
   onSaveCaption?: (text: string) => void;
   editCaption?: boolean;
   showCaption?: boolean;
@@ -29,13 +28,13 @@ const useStyles = makeStyles((theme) => ({
   iframe: {
     width: '100%',
     border: 'none',
+    maxHeight: ITEM_MAX_HEIGHT,
   },
   linkButtonContainer: {
-    position: 'absolute',
-    bottom: 0,
+    position: 'fixed',
+    top: 0,
     right: 0,
     width: LINK_BUTTON_CONTAINER_WIDTH,
-    height: LINK_BUTTON_CONTAINER_HEIGHT,
     backgroundColor: LINK_BUTTON_CONTAINER_BACKGROUND_COLOR,
   },
   linkButton: {
@@ -49,12 +48,13 @@ const useStyles = makeStyles((theme) => ({
   },
   iframeContainer: {
     position: 'relative',
+    maxHeight: ITEM_MAX_HEIGHT,
+    overflow: 'auto',
   },
 }));
 
 const LinkItem: FC<LinkItemProps> = ({
   item,
-  height = '100%',
   onSaveCaption,
   saveButtonId,
   editCaption = false,
@@ -65,6 +65,8 @@ const LinkItem: FC<LinkItemProps> = ({
   const classes = useStyles();
 
   const [isLoading, setIsLoading] = useState(true);
+  const [height, setHeight] = useState<string | number>('100%');
+  const iframeRef = useRef<HTMLIFrameElement>(null);
 
   const id = item.get('id');
   const extra = getEmbeddedLinkExtra(item.get('extra'));
@@ -95,6 +97,10 @@ const LinkItem: FC<LinkItemProps> = ({
 
   const handleLoad = (): void => {
     setIsLoading(false);
+    // set dynamic height
+    if (iframeRef?.current?.contentWindow) {
+      setHeight(iframeRef.current.contentWindow.document.body.scrollHeight);
+    }
   };
 
   const component = (
@@ -119,6 +125,7 @@ const LinkItem: FC<LinkItemProps> = ({
           src={url}
           onLoad={handleLoad}
           height='100%'
+          ref={iframeRef}
         />
         <div className={classes.linkButtonContainer}>
           <IconButton className={classes.linkButton}>