@corva/ui 0.34.0-rc.3 → 0.34.0

package/components/DocumentViewer/DocumentViewer.js

@@ -1,149 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Modal, Typography, IconButton } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
-import { useState, createRef, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import GetAppIcon from '@material-ui/icons/GetApp';
-import { LoadingIndicator } from '@corva/ui/components';
-import { useStyles } from './styles.js';
-
-var REQUEST_TIMEOUT = 10000;
-var BYTES_IN_MEGABYTE = 1048576;
-
-var DocumentViewer = function DocumentViewer(_ref) {
-  var open = _ref.open,
-      fileUrl = _ref.fileUrl,
-      fileSize = _ref.fileSize,
-      fileName = _ref.fileName,
-      webviewType = _ref.webviewType,
-      onClose = _ref.onClose;
-
-  var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      isLoading = _useState2[0],
-      setIsLoading = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isLoadingFailed = _useState4[0],
-      setIsLoadingFailed = _useState4[1];
-
-  var timeoutRef = createRef(null);
-  var iframeRef = createRef(null);
-  var styles = useStyles();
-  var getIframeLink = useCallback(function () {
-    return webviewType === 'office' ? "https://view.officeapps.live.com/op/embed.aspx?src=".concat(window.encodeURIComponent(fileUrl)) : "https://docs.google.com/viewer?url=".concat(encodeURIComponent(fileUrl), "&embedded=true");
-  }, [fileUrl]);
-
-  var reloadFrame = function reloadFrame() {
-    if (iframeRef.current) {
-      iframeRef.current.src = getIframeLink();
-      iframeRef.current.contentWindow.location.reload();
-    }
-  };
-
-  var handleFrameLoad = function handleFrameLoad() {
-    if (timeoutRef.current) {
-      clearInterval(timeoutRef.current);
-    }
-
-    setIsLoading(false);
-  };
-
-  var handleFrameError = function handleFrameError() {
-    handleFrameLoad();
-    setIsLoadingFailed(true);
-  };
-
-  useEffect(function () {
-    setIsLoading(true);
-    setIsLoadingFailed(false);
-    var timeOut = fileSize && fileSize >= BYTES_IN_MEGABYTE ? fileSize / BYTES_IN_MEGABYTE * REQUEST_TIMEOUT : REQUEST_TIMEOUT;
-
-    if (timeoutRef && open) {
-      clearInterval(timeoutRef.current);
-      timeoutRef.current = setInterval(reloadFrame, timeOut);
-    }
-
-    return function () {
-      clearInterval(timeoutRef.current);
-    };
-  }, [fileUrl, open]);
-  return /*#__PURE__*/jsx(Modal, {
-    open: open,
-    onClose: onClose,
-    onContextMenu: function onContextMenu(e) {
-      return e.stopPropagation();
-    },
-    children: /*#__PURE__*/jsxs("div", {
-      className: styles.cDocsViewer,
-      children: [/*#__PURE__*/jsxs("div", {
-        className: styles.cDocsViewerToolbar,
-        children: [/*#__PURE__*/jsx(Typography, {
-          children: fileName
-        }), /*#__PURE__*/jsxs("div", {
-          children: [/*#__PURE__*/jsx(IconButton, {
-            size: "small",
-            className: styles.cDocsViewerToolbarIconButton,
-            children: /*#__PURE__*/jsx("a", {
-              download: true,
-              href: fileUrl,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              children: /*#__PURE__*/jsx(GetAppIcon, {
-                fontSize: "small"
-              })
-            })
-          }), /*#__PURE__*/jsx(IconButton, {
-            size: "small",
-            onClick: onClose,
-            className: styles.cDocsViewerToolbarIconButton,
-            children: /*#__PURE__*/jsx(CloseIcon, {
-              fontSize: "small"
-            })
-          })]
-        })]
-      }), isLoading && /*#__PURE__*/jsx("div", {
-        className: styles.cDocsViewerFrame,
-        children: /*#__PURE__*/jsx(LoadingIndicator, {
-          white: false
-        })
-      }), isLoadingFailed ? /*#__PURE__*/jsx("div", {
-        className: styles.cDocsViewerFrame,
-        children: /*#__PURE__*/jsx(Typography, {
-          variant: "body2",
-          className: styles.cDocsViewerFrameFailed,
-          children: "Loading failed"
-        })
-      }) : /*#__PURE__*/jsx("iframe", {
-        className: classNames(styles.cDocsViewerFrame, _defineProperty({}, styles.cDocsViewerFrameHidden, isLoading)),
-        title: fileUrl,
-        src: getIframeLink(),
-        onLoad: handleFrameLoad,
-        onError: handleFrameError,
-        ref: iframeRef
-      })]
-    })
-  });
-};
-
-DocumentViewer.propTypes = {
-  open: PropTypes.bool.isRequired,
-  fileUrl: PropTypes.string.isRequired,
-  webviewType: PropTypes.oneOf(['google', 'office']),
-  fileName: PropTypes.string,
-  fileSize: PropTypes.number,
-  onClose: PropTypes.func.isRequired,
-  classes: PropTypes.shape({}).isRequired
-};
-DocumentViewer.defaultProps = {
-  fileName: undefined,
-  fileSize: undefined,
-  webviewType: 'google'
-};
-
-export default DocumentViewer;
-//# sourceMappingURL=DocumentViewer.js.map
+import e from"@babel/runtime/helpers/defineProperty";import r from"@babel/runtime/helpers/slicedToArray";import{useState as o,createRef as i,useCallback as n,useEffect as c}from"react";import l from"prop-types";import t from"classnames";import{Modal as a,Typography as s,IconButton as m}from"@material-ui/core";import d from"@material-ui/icons/Close";import f from"@material-ui/icons/GetApp";import{LoadingIndicator as p}from"@corva/ui/components";import{useStyles as u}from"./styles.js";import{jsx as v,jsxs as w}from"react/jsx-runtime";var h=function(l){var h=l.open,b=l.fileUrl,g=l.fileSize,N=l.fileName,y=l.webviewType,D=l.onClose,V=o(!0),C=r(V,2),I=C[0],T=C[1],z=o(!1),F=r(z,2),R=F[0],S=F[1],q=i(null),x=i(null),U=u(),P=n((function(){return"office"===y?"https://view.officeapps.live.com/op/embed.aspx?src=".concat(window.encodeURIComponent(b)):"https://docs.google.com/viewer?url=".concat(encodeURIComponent(b),"&embedded=true")}),[b]),j=function(){x.current&&(x.current.src=P(),x.current.contentWindow.location.reload())},k=function(){q.current&&clearInterval(q.current),T(!1)};return c((function(){T(!0),S(!1);var e=g&&g>=1048576?g/1048576*1e4:1e4;return q&&h&&(clearInterval(q.current),q.current=setInterval(j,e)),function(){clearInterval(q.current)}}),[b,h]),v(a,{open:h,onClose:D,onContextMenu:function(e){return e.stopPropagation()},children:w("div",{className:U.cDocsViewer,children:[w("div",{className:U.cDocsViewerToolbar,children:[v(s,{children:N}),w("div",{children:[v(m,{size:"small",className:U.cDocsViewerToolbarIconButton,children:v("a",{download:!0,href:b,target:"_blank",rel:"noopener noreferrer",children:v(f,{fontSize:"small"})})}),v(m,{size:"small",onClick:D,className:U.cDocsViewerToolbarIconButton,children:v(d,{fontSize:"small"})})]})]}),I&&v("div",{className:U.cDocsViewerFrame,children:v(p,{white:!1})}),R?v("div",{className:U.cDocsViewerFrame,children:v(s,{variant:"body2",className:U.cDocsViewerFrameFailed,children:"Loading failed"})}):v("iframe",{className:t(U.cDocsViewerFrame,e({},U.cDocsViewerFrameHidden,I)),title:b,src:P(),onLoad:k,onError:function(){k(),S(!0)},ref:x})]})})};h.propTypes={open:l.bool.isRequired,fileUrl:l.string.isRequired,webviewType:l.oneOf(["google","office"]),fileName:l.string,fileSize:l.number,onClose:l.func.isRequired,classes:l.shape({}).isRequired},h.defaultProps={fileName:void 0,fileSize:void 0,webviewType:"google"};export{h as default};

package/components/DocumentViewer/styles.js

@@ -1,57 +1 @@
-import { makeStyles } from '@material-ui/core';
-
-var useStyles = makeStyles(function (theme) {
-  return {
-    cDocsViewer: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexDirection: 'column',
-      width: '100%',
-      height: '100%',
-      position: 'relative'
-    },
-    cDocsViewerToolbar: {
-      position: 'absolute',
-      top: 0,
-      height: 48,
-      width: '100%',
-      background: theme.palette.background.b4,
-      zIndex: 1001,
-      padding: '0 16px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    },
-    cDocsViewerFrame: {
-      position: 'absolute',
-      top: 48,
-      width: 'calc(100% - 64px)',
-      height: 'calc(100% - 64px)',
-      left: 32,
-      border: 'none',
-      borderRadius: 4,
-      background: '#eee'
-    },
-    cDocsViewerFrameFailed: {
-      color: '#000',
-      fontWeight: 'bold'
-    },
-    cDocsViewerFrameHidden: {
-      visibility: 0,
-      height: 0
-    },
-    cDocsViewerToolbarIconButton: {
-      marginLeft: 12,
-      color: theme.palette.primary.text6,
-      '& a': {
-        color: theme.palette.primary.text6,
-        width: 20,
-        height: 20
-      }
-    }
-  };
-});
-
-export { useStyles };
-//# sourceMappingURL=styles.js.map
+import{makeStyles as e}from"@material-ui/core";var t=e((function(e){return{cDocsViewer:{display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",width:"100%",height:"100%",position:"relative"},cDocsViewerToolbar:{position:"absolute",top:0,height:48,width:"100%",background:e.palette.background.b4,zIndex:1001,padding:"0 16px",display:"flex",alignItems:"center",justifyContent:"space-between"},cDocsViewerFrame:{position:"absolute",top:48,width:"calc(100% - 64px)",height:"calc(100% - 64px)",left:32,border:"none",borderRadius:4,background:"#eee"},cDocsViewerFrameFailed:{color:"#000",fontWeight:"bold"},cDocsViewerFrameHidden:{visibility:0,height:0},cDocsViewerToolbarIconButton:{marginLeft:12,color:e.palette.primary.text6,"& a":{color:e.palette.primary.text6,width:20,height:20}}}}));export{t as useStyles};