argous 1.2.222 → 1.2.224

package/lib/components/ArgousComplexTable/ArgousComplexTable.js

@@ -176,7 +176,9 @@ const ArgousComplexTable = forwardRef(({
   tableProps,
   toolbarProps,
   externalCtrlPgn,
-  setExternalCtrlPgn
+  setExternalCtrlPgn,
+  code = '',
+  token = ''
 }, ref) => {
   const classes = useStyles();
   const [state, dispatch] = useReducer(reducer, initialState(defaultRowsPerPage));
@@ -222,15 +224,15 @@ const ArgousComplexTable = forwardRef(({
         tpOrdem: orderBy >= 0 ? (order === 'asc' ? 'A' : 'D') : undefined,
         indOrdem: orderBy >= 0 ? orderBy : undefined
       }, ...methodPrms 
-    }, handleMethodError);
-    onMethodResponse && onMethodResponse(res);      
+    }, code, handleMethodError, token);
+    onMethodResponse && onMethodResponse(res);
     if (res.status) {
       setCtrlPgn({ ...res.ctrlPgn, recordCount: (res.ctrlPgn?.qtPaginas * res.ctrlPgn?.qtRegs) });
       setLista(res[methodResultList] || []);
     }
     dispatch({ type: 'setLoading', value: false });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [method, allowMethodRequest, qtRegs, pgAtl, retornaAcao, ctrlPgn.pgAtl, page, orderBy, order, methodPrms, handleMethodError, methodResultList]);
+  }, [method, allowMethodRequest, qtRegs, pgAtl, retornaAcao, ctrlPgn.pgAtl, page, orderBy, order, methodPrms, handleMethodError, methodResultList, code, token]);
   
   useEffect(() => {
     buscaMetodo();

package/lib/components/BarraFerramentas/BarraFerramentas.d.ts

@@ -15,7 +15,10 @@ export interface BarraFerramentasProps {
   nmExclui?: string, 
   executaFuncao?: (prm: string) => void,
   habWidget?: boolean,
-  addWidget?: () => void
+  addWidget?: () => void,
+  snAnotacaoPrograma: boolean,
+  openAnnotations: (event: Event) => void,
+  toolbarLoading: object
 }
 
 declare function BarraFerramentas(props: BarraFerramentasProps): JSX.Element

package/lib/components/BarraFerramentas/BarraFerramentas.js

@@ -1,14 +1,15 @@
 import { Compartilhar } from '..';
 import ThreadLog from '../../components/ThreadLog';
 import { usePrevious } from '../../utils';
-import { Box, ClickAwayListener, Collapse, Divider, IconButton, makeStyles, MenuItem, MenuList, Paper, Popper, Toolbar, Tooltip, Typography } from '@material-ui/core';
+import { Box, CircularProgress, ClickAwayListener, Collapse, Divider, IconButton, makeStyles, MenuItem, MenuList, Paper, Popper, Toolbar, Tooltip, Typography, withStyles } from '@material-ui/core';
 import clsx from 'clsx';
 import { isArray, isNumber, isString, isEqual, isFunction } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { AiOutlineAppstoreAdd } from 'react-icons/ai';
 import { FaStar } from 'react-icons/fa';
-import { MdShare, MdFormatListBulleted, MdArrowBack, MdEdit, MdDelete, MdSave, MdKeyboardArrowRight, MdFirstPage, MdKeyboardArrowLeft, MdLastPage } from 'react-icons/md';
+import { MdShare, MdFormatListBulleted, MdArrowBack, MdEdit, MdDelete, MdSave, MdKeyboardArrowRight, MdFirstPage, MdKeyboardArrowLeft, MdLastPage, MdEditNote } from 'react-icons/md';
+
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -49,7 +50,32 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-function BarraFerramentas ({      
+const ToolbarTooltip = withStyles({
+  popper: {
+    zIndex: 1300
+  }
+})(Tooltip);
+
+
+const CustomTooltip = ({ disabled, arrow, placement, title, children }) => {
+  const [open, setOpen] = useState(false);
+  useEffect(() => (disabled && open) && setOpen(false), [disabled, open]);
+  return (
+    <ToolbarTooltip 
+      {...{ arrow, placement, title }} 
+      onOpen={() => (!disabled) && setOpen(true)} 
+      onClose={() => setOpen(false)} 
+      open={open}
+    >
+      {children}
+    </ToolbarTooltip>
+  );
+};
+
+const ButtonLoadingFeedback = ({ size = 24, color = 'secondary' }) => <CircularProgress {...{ size, color }} />;
+
+
+function BarraFerramentas ({
   titulo,
   abas = [],
   ferramentas = [],
@@ -65,12 +91,16 @@ function BarraFerramentas ({
   linkCompartilhamento = '',
   threads,
   currentProgram,
-  nmSalva, 
-  nmExclui, 
+  nmSalva,
+  nmExclui,
   executaFuncao = prm => void(prm),
   habWidget = false,
-  addWidget = () => ''
+  addWidget = () => '',
+  snAnotacaoPrograma = false,
+  openAnnotations = () => '',
+  toolbarLoading = {}
 }) {
+
   const classes = useStyles({ habNavegador });
   const anchorMenu = useRef(null);
   const anchorCompartilhar = useRef(null);
@@ -80,6 +110,7 @@ function BarraFerramentas ({
   const [habSalvar, setHabSalvar] = useState(false);
   const [habExcluir, setHabExcluir] = useState(false);
   const [openCompartilhar, setOpenCompartilhar] = useState(false);
+  const [disableTooltip, setDisableTooltip] = useState(false);
 
   useEffect(() => {
     if (anchorMenu.current) anchorMenu.current.focus();
@@ -127,9 +158,15 @@ function BarraFerramentas ({
     }
   }
 
+  function handleAnnotationsClick(event) {
+    setDisableTooltip(true);
+    openAnnotations(event);
+    setTimeout(() => setDisableTooltip(false), 0);
+  }
+
   const getFerramentas = (item, index) => {
     return (
-      <Tooltip key={index} title={item[1] || ''}>
+      <CustomTooltip key={index} title={item[1] || ''}>
         <IconButton onClick={() => isFunction(item[2]) ? item[2]() : executaFuncao(item[2] || 'F' + index)}>
           {typeof item[0] === 'string' ? (
             <i style={{ color: '#999' }} className={item[0]}></i>
@@ -137,7 +174,7 @@ function BarraFerramentas ({
             item[0]
           )}
         </IconButton>
-      </Tooltip>
+      </CustomTooltip>
     );
   };
 
@@ -146,7 +183,7 @@ function BarraFerramentas ({
       {(isArray(abas) && abas.length > 0) && (
         <IconButton id='botaoAbasBarraFerramentas' ref={anchorMenu} onClick={toggleAbas} className={classes.menuButton}>
           <MdFormatListBulleted />
-        </IconButton>       
+        </IconButton>
       )}
       <Popper open={open} anchorEl={anchorMenu.current} role={undefined} transition keepMounted style={{ zIndex: 2, marginLeft: 10 }}>
         {({ TransitionProps }) => (
@@ -164,50 +201,50 @@ function BarraFerramentas ({
         )}
       </Popper>
       <Typography component='div' variant='h6' className={classes.title}>
-        {abaAtual ? (
-          <Typography variant='subtitle1'>{abaAtual} <Typography variant='caption'>( {titulo} )</Typography></Typography> 
+        {(abaAtual) ? (
+          <Typography variant='subtitle1'>{abaAtual} <Typography variant='caption'>( {titulo} )</Typography></Typography>
         ) : (
           <Typography variant='subtitle1'>{titulo}</Typography>
         )}
       </Typography>
 
-      {habNavegador && (
+      {(habNavegador) && (
         <Box className={classes.navigator}>
-          <Tooltip title='Primeiro registro'>
+          <CustomTooltip title='Primeiro registro'>
             <IconButton size='small' onClick={() => executaFuncao('NF')}>
               <MdFirstPage />
             </IconButton>
-          </Tooltip>
-          <Tooltip title='Registro anterior'>
+          </CustomTooltip>
+          <CustomTooltip title='Registro anterior'>
             <IconButton size='small' onClick={() => executaFuncao('NP')}>
               <MdKeyboardArrowLeft/>
             </IconButton>
-          </Tooltip>
-          <Tooltip title='Próximo registro'>
+          </CustomTooltip>
+          <CustomTooltip title='Próximo registro'>
             <IconButton size='small' onClick={() => executaFuncao('NN')}>
               <MdKeyboardArrowRight/>
             </IconButton>
-          </Tooltip>
-          <Tooltip title='Último registro'>
+          </CustomTooltip>
+          <CustomTooltip title='Último registro'>
             <IconButton size='small' onClick={() => executaFuncao('NL')}>
               <MdLastPage />
             </IconButton>
-          </Tooltip>
+          </CustomTooltip>
         </Box>
       )}
 
-      {isArray(ferramentas) && ferramentas.map(g => g.map((item, index) => getFerramentas(item, index)))}
+      {(isArray(ferramentas)) && ferramentas.map(g => g.map((item, index) => getFerramentas(item, index)))}
 
-      {nmFuncaoVoltar && (
-        <Tooltip title='Voltar'>
+      {(nmFuncaoVoltar) && (
+        <CustomTooltip title='Voltar'>
           <IconButton onClick={() => executaFuncao(nmFuncaoVoltar)}>
             <MdArrowBack/>
           </IconButton>
-        </Tooltip>
+        </CustomTooltip>
       )}
-      {habCrud && <>
-        {habEditar ? (
-          <Tooltip title='Editar'>
+      {(habCrud) && <>
+        {(habEditar) ? (
+          <CustomTooltip title='Editar'>
             <IconButton onClick={() => {
               setHabEditar(false);
               setHabSalvar(true);
@@ -215,7 +252,7 @@ function BarraFerramentas ({
             }}>
               <MdEdit/>
             </IconButton>
-          </Tooltip>
+          </CustomTooltip>
         ) : (
           <ClickAwayListener onClickAway={() => {
             setHabEditar(true);
@@ -223,30 +260,30 @@ function BarraFerramentas ({
             setHabExcluir(false); 
           }}>
             <Box>
-              {habSalvar && (
-                <Tooltip title='Salvar Registro'>
+              {(habSalvar) && (
+                <CustomTooltip title='Salvar Registro'>
                   <IconButton onClick={() => executaFuncao(nmSalva)}>
                     <MdSave/>
                   </IconButton>
-                </Tooltip>
+                </CustomTooltip>
               )}
-              {habExcluir && (
-                <Tooltip title='Excluir Registro'>
+              {(habExcluir) && (
+                <CustomTooltip title='Excluir Registro'>
                   <IconButton onClick={() => executaFuncao(nmExclui)}>
                     <MdDelete/>
                   </IconButton>
-                </Tooltip>
+                </CustomTooltip>
               )}
             </Box>
           </ClickAwayListener>
         )}
       </>}
-      {nmCompartilhar && (
-        <Tooltip title='Compartilhar'>
+      {(nmCompartilhar) && (
+        <CustomTooltip title='Compartilhar'>
           <IconButton ref={anchorCompartilhar} onClick={toggleCompartilhar}>
             <MdShare />
           </IconButton>
-        </Tooltip>
+        </CustomTooltip>
       )}
       <Popper open={openCompartilhar} anchorEl={anchorCompartilhar.current} role={undefined} transition keepMounted style={{ zIndex: 2, marginRight: 10 }}>
         {({ TransitionProps }) => (
@@ -257,24 +294,29 @@ function BarraFerramentas ({
           </Collapse>
         )}
       </Popper>
-      {isArray(threads) && threads.map((thread, key) => <ThreadLog {...{ key, thread, currentProgram }} />)}
-      {habWidget &&
-        (
-          <Tooltip title='Adicionar widget'>
-            <IconButton onClick={addWidget}>
-              <AiOutlineAppstoreAdd />
-            </IconButton>
-          </Tooltip>
-        )
-      }
-      {habFavorito && checkIfIsFavorite && (
-        <Tooltip title='Favorito'>
+      {(isArray(threads)) && threads.map((thread, key) => <ThreadLog {...{ key, thread, currentProgram }} />)}
+      {(habWidget) && (
+        <CustomTooltip title='Adicionar widget'>
+          <IconButton onClick={addWidget}>
+            <AiOutlineAppstoreAdd />
+          </IconButton>
+        </CustomTooltip>
+      )}
+      {(snAnotacaoPrograma) && (
+        <CustomTooltip title='Anotações' disabled={disableTooltip}>
+          <IconButton disabled={toolbarLoading?.annotations} onClick={handleAnnotationsClick}>
+            {(toolbarLoading?.annotations) ? <ButtonLoadingFeedback /> : <MdEditNote />}
+          </IconButton>
+        </CustomTooltip>
+      )}
+      {(habFavorito && checkIfIsFavorite) && (
+        <CustomTooltip title='Favorito'>
           <IconButton onClick={addFavorite}>
             <FaStar className={`pg-fav-start ${checkIfIsFavorite()}`}></FaStar>
             {favoriteAnimationInsert && <FaStar className='pg-fav-start active insertion-star-fav' />}
             {favoriteAnimationRemove && <FaStar className='pg-fav-start active removing-star-fav' />}
           </IconButton>
-        </Tooltip>
+        </CustomTooltip>
       )}
     </Toolbar>
     <Divider style={{ marginBottom: 10 }}/>

package/lib/components/Document/Icons.js

@@ -0,0 +1,169 @@
+import { getFileFromLink, getLink } from '../../api';
+import { CircularProgress } from '@material-ui/core';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+const reqSvgs = require.context ('./icons', true, /\.svg$/);
+
+const loadSvg = async (svg, path) => ({ [path.replace(/.\/|.svg/g, '')]: URL.createObjectURL(await (await fetch(svg?.default || svg)).blob()) });
+
+const iconClasses = {
+  'application/pdf': 'pdf',
+  'application/msword': 'doc',
+  'application/vnd.ms-word': 'doc',
+  'application/vnd.oasis.opendocument.text': 'doc',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml': 'doc',
+  'application/vnd.ms-excel': 'xls',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml': 'xls',
+  'application/vnd.oasis.opendocument.spreadsheet': 'xls',
+  'application/vnd.ms-powerpoint': 'ppt',
+  'application/vnd.openxmlformats-officedocument.presentationml': 'ppt',
+  'application/vnd.oasis.opendocument.presentation': 'ppt',
+  'text/rtf': 'rtf',
+  'text/plain': 'txt',
+  'text/html': 'html',
+  'text/css': 'css',
+  'text/csv': 'csv',
+  'application/json': 'json',
+  'image/vnd.adobe.photoshop': 'psd',
+  'image/photoshop': 'psd',
+  'image/x-photoshop': 'psd',
+  'image/psd': 'psd',
+  'application/photoshop': 'psd',
+  'application/psd': 'psd',
+  'zz-application/zz-winassoc-psd': 'psd',
+  'video/x-msvideo': 'avi',
+  'application/gzip': 'zip1',
+  'application/zip': 'zip',
+  'application/acad': 'dwg',
+  'image/vnd.dwg': 'dwg',
+  'image/x-dwg': 'dwg',
+  'application/octet-stream': 'exe',
+  'audio/flac': 'fla',
+  'image/jpeg': 'jpg',
+  'image/jpg': 'jpg',
+  'text/javascript': 'js',
+  'audio/mpeg': 'mp3',
+  'video/mpeg': 'mp4',
+  'audio/mp4': 'mp4',
+  'image/png': 'png',
+  'application/xml': 'xml',
+  'application/x-7z-compressed': 'zip1',
+  'application/x-compressed-tar': 'zip1',
+  'application/vnd.rar': 'zip1',
+  'modelo/contrato': 'mod',
+  image: 'image',
+  audio: 'audio',
+  video: 'video'
+};
+
+let icones;
+
+(async () => {
+  icones = await (await Promise.all(reqSvgs.keys()
+    .map(path => loadSvg(reqSvgs(path), path))
+  )).reduce((acc, item) => ({ ...acc, ...item }), {});
+})();
+
+// eslint-disable-next-line valid-jsdoc
+/**
+ * @typedef {'ai'|'audio'|'avi'|'css'|'csv'|'dbf'|'doc'|'dwg'|'exe'|'file'|'fla'|'html'|'image'|'iso'|'jpg'|'js'|'json'|'mod'|'mp3'|'mp4'|'pdf'|'png'|'ppt'|'psd'|'rtf'|'search'|'svg'|'txt'|'video'|'xls'|'xml'|'zip'|'zip1'} Extencoes
+ * 
+ * @typedef {object} Tipos
+ * @property {Extencoes} type - Tipos de arquivos suportados
+ * @property {string} mimeType - MimeType do arquivo
+ * @property {string} fileName - Nome do arquivo
+ * 
+ * @param {React.ImgHTMLAttributes<HTMLImageElement> & Tipos} props - props 
+ * @returns {JSX.Element} retorno
+ */
+
+export const IconsComponent = ({ type, fileName, mimeType, idDocumento, link, ...props }) => {
+  /** @type {[FileIcons, React.Dispatch<FileIcons>]} */
+  const [state, setState] = useState(icones);
+  const [preview, setPreview] = useState();
+
+
+  const setarState = useCallback(() => {
+    if (state) return;
+    if (icones) setState(icones);
+    else setTimeout(setarState, 200);
+  }, [state]);
+
+  useEffect(setarState, [setarState]);
+
+  const selectedImage = useMemo(() => {
+    if (type) return type;
+    /** @type {Extencoes} */
+    const extension = fileName?.match(/\.([^.]*)$/)?.at(1);
+    if (!state) return '';
+    if (Object.keys(state).includes(extension)) return extension;
+    for (let key in iconClasses) 
+      if (Object.prototype.hasOwnProperty.call(iconClasses, key)) 
+        if (mimeType?.search(key) === 0) 
+          return iconClasses[key];
+    return 'file';
+  }, [type, mimeType, fileName, state]);
+
+  const buscaImagemPreview = useCallback(async () => {
+    if (idDocumento && (mimeType?.includes('image'))) {
+      const file = await getFileFromLink(await getLink(idDocumento));
+      setPreview(file);
+    }
+  }, [mimeType, idDocumento]);
+  useEffect(() => void(buscaImagemPreview()), [buscaImagemPreview]);
+
+  if (!state) return <CircularProgress disableShrink/>;
+  return <>
+    {(preview) ? (
+      <img src={preview} alt={type} {...props} style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, width: '100%', height: '100%', objectFit: 'contain' }} />
+    ) : (
+      <img src={state[selectedImage]} alt={type} {...props} />
+    )}
+  </>;
+};
+
+/**
+ * @typedef {object} FileIcons - Objeto de icones
+ * @property {JSX.Element} ai -Icone de arquivos do Ilustrator
+ * @property {JSX.Element} audio -Icone genérico de Audio
+ * @property {JSX.Element} avi -Icone de videos AVI
+ * @property {JSX.Element} css -Icone de arquivos CSS
+ * @property {JSX.Element} csv -Icone de arquivos CSV
+ * @property {JSX.Element} dbf -Icone de arquivos DBF
+ * @property {JSX.Element} doc -Icone de arquivos Word
+ * @property {JSX.Element} dwg -Icone de arquivos DWG
+ * @property {JSX.Element} exe -Icone de arquivos EXE
+ * @property {JSX.Element} file -Icone de arquivos genéricos
+ * @property {JSX.Element} fla -Icone de arquivos FLA
+ * @property {JSX.Element} html -Icone de arquivos HTML
+ * @property {JSX.Element} image -Icone genérico de Imagens
+ * @property {JSX.Element} iso -Icone de imagens ISO
+ * @property {JSX.Element} jpg -Icone de imagens JPG
+ * @property {JSX.Element} js -Icone de arquivos Javascript
+ * @property {JSX.Element} json -Icone de arquivos JSON
+ * @property {JSX.Element} mod -Icone de modelos de documentos
+ * @property {JSX.Element} mp3 -Icone de músicas MP3
+ * @property {JSX.Element} mp4 -Icone de vídeos MP4
+ * @property {JSX.Element} pdf -Icone de arquivos PDP
+ * @property {JSX.Element} png -Icone de imagens PNG
+ * @property {JSX.Element} ppt -Icone de arquivos do Power Point
+ * @property {JSX.Element} psd -Icone de arquivos do Photoshop
+ * @property {JSX.Element} rtf -Icone de arquivos RTF
+ * @property {JSX.Element} search -Icone genérico de Busca
+ * @property {JSX.Element} svg -Icone de arquivos SVG
+ * @property {JSX.Element} txt -Icone de arquivos de Texto
+ * @property {JSX.Element} video -Icone genérico de Vídeo
+ * @property {JSX.Element} xls -Icone de arquivos do Excel
+ * @property {JSX.Element} xml -Icone de arquivos XML
+ * @property {JSX.Element} zip -Icone de arquivos ZIP
+ * @property {JSX.Element} zip1 -Icone genérico de arquivos comprimidos
+ */
+
+/** @type {FileIcons}  */
+export const Icons = reqSvgs.keys().reduce((images, path) => {
+  const key = path.replace(/.\/|.svg/g, '');
+  images[key] = <IconsComponent type={key}/>;
+  return images;
+}, {});
+
+export default Icons;

package/lib/components/Document/ModalVisualizacaoDocumentos.js

@@ -0,0 +1,64 @@
+import Visualizacao from './Visualizacao';
+import { downloadBase64, downloadFromUrl, geraLog, printUrl, stopPrntScr } from '../../utils/index';
+import { Typography, IconButton, Dialog, Toolbar, AppBar, Box } from '@material-ui/core';
+import React, { useState } from 'react';
+import { MdClose, MdFileDownload, MdPrint } from 'react-icons/md';
+
+const ModalVisualizacaoDocumentos = ({ open, proceed, tokenSistema, ...props }) => {
+  const [visualizando, setVisualizando] = useState(props);
+  return (
+    <Dialog
+      fullScreen
+      open={open}
+      onClose={() => proceed(undefined)}
+      onKeyDown={stopPrntScr}
+      onContextMenu={(e) => e.preventDefault()}
+    >
+      <AppBar style={{ position: 'relative' }}>
+        <Toolbar>
+          <IconButton edge='start' color='inherit' onClick={() => proceed(undefined)}>
+            <MdClose />
+          </IconButton>
+          <Typography variant='h6' style={{ flexGrow: '1' }}>
+            {visualizando?.nome}
+          </Typography>
+          {!visualizando?.sensible && (
+            <>
+              <IconButton
+                onClick={(_) => {
+                  if (!visualizando?.linkPronto?.length) {
+                    geraLog(visualizando.idDocumento, 'Impressão do documento', '3', tokenSistema);
+                  }
+                  printUrl(visualizando.URL ? visualizando.URL : visualizando.linkPronto);
+                }}
+                color='inherit'
+                title='Imprimir arquivo'
+              >
+                <MdPrint />
+              </IconButton>
+              <IconButton
+                onClick={() => {
+                  if (!visualizando?.linkPronto?.length) {
+                    geraLog(visualizando.idDocumento, 'Download do documento', '3', tokenSistema);
+                    downloadFromUrl(visualizando?.URL, visualizando?.nome);
+                  } else {
+                    downloadBase64(visualizando?.linkPronto, visualizando?.nome);
+                  }
+                }}
+                color='inherit'
+                title='Baixar arquivo'
+              >
+                <MdFileDownload />
+              </IconButton>
+            </>
+          )}
+        </Toolbar>
+      </AppBar>
+      <Box display='flex' justifyContent='center' alignItems='center' width='100%' height='100%'>
+        <Visualizacao {...{ setVisualizando, ...visualizando, tokenSistema, proceed }} />
+      </Box>
+    </Dialog>
+  );
+};
+
+export default ModalVisualizacaoDocumentos;

package/lib/components/Document/Visualizacao.js

@@ -0,0 +1,104 @@
+import { serverAction, setError } from '../../utils/api';
+import { Box, CircularProgress, makeStyles } from '@material-ui/core';
+import React, { useEffect, useRef, useState } from 'react';
+
+
+const useStyles = makeStyles(theme => ({
+  iframe: {
+    width: '100%',
+    height: '100%',
+    border: 'none',
+    background: theme.palette.background.default,
+    '&:focus': {
+      outline: 'none'
+    },
+    '&[seamless]': {
+      display: 'block'
+    }
+  },
+  restricSize: {
+    maxWidth: '100%',
+    maxHeight: '100%'
+  }
+}));
+
+let onchange = () => undefined;
+
+
+const Visualizacao = ({ idDocumento, nrRevisao, setVisualizando, proceed, URL: documento, linkPronto, tokenSistema, ariaLabel }) => {
+
+  const classes = useStyles();
+  const blockLoop = useRef(null);
+  const [{ type }, setArquivo] = useState({});
+  const tagType = type?.match(/^[^/]+/)?.at(0);
+  const [link, setLink] = useState(linkPronto);
+
+  const preparaLink = async () => {
+    if (!linkPronto && ((!idDocumento && !documento) || (documento === blockLoop.current))) {
+      return;
+    }
+ 
+    const objGetLinkDocumento = { idDocumento, nrRevisao, dsToken: tokenSistema?.toString() };
+    const { link: res } = linkPronto ? { link: { URL: linkPronto } } : documento ? { link: { URL: documento } } : await serverAction('getLinkDocumento', objGetLinkDocumento, 'CtrlDocumentos', true);
+    try {
+      const file = await (await fetch(res?.URL, {
+        method: 'post',
+        headers: { lgTkn: tokenSistema }
+      })).blob();
+      const url = URL.createObjectURL(file);
+      setVisualizando(v => ({ ...v, URL: url }));
+      blockLoop.current = url;
+      setLink(url);
+      setArquivo({ ...res, type: file?.type });
+    } catch (error) {
+      setError('Não foi possível visualizar este documento.');
+    }
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => preparaLink(), []);
+
+  useEffect(() => {
+    onchange = function(evt) {
+      let v = 'visible', h = 'hidden', evtMap = { focus: v, focusin: v, pageshow: v, blur: h, focusout: h, pagehide: h };
+      evt = evt || window.event;
+      if (evt.type in evtMap) document.body.style.opacity = evtMap[evt.type];
+      else document.body.style.opacity = this[hidden] ? 0 : 1;
+    };
+    let hidden = 'hidden';
+    if (hidden in document) document.addEventListener('visibilitychange', onchange);
+    else if ((hidden = 'mozHidden') in document) document.addEventListener('mozvisibilitychange', onchange);
+    else if ((hidden = 'webkitHidden') in document) document.addEventListener('webkitvisibilitychange', onchange);
+    else if ((hidden = 'msHidden') in document) document.addEventListener('msvisibilitychange', onchange);
+    else if ('onfocusin' in document) document.onfocusin = document.onfocusout = onchange;
+    else window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange;
+    if (document[hidden] !== undefined) onchange({ type: document[hidden] ? 'blur' : 'focus' });
+
+    window.onkeydown = e => {
+      if (e.key === 'Escape') proceed(undefined);
+      if (e.key === 'F12') return false;
+      if (e.ctrlKey && e.shiftKey && e.key === 'I') return false;
+      if (e.ctrlKey && e.shiftKey && e.key === 'C') return false;
+      if (e.ctrlKey && e.shiftKey && e.key === 'J') return false;
+      if (e.ctrlKey && e.key === 'u') return false;
+    };
+    return () => {
+      window.onkeydown = undefined;
+      onchange = () => undefined;
+    };
+  }, [proceed]);
+
+  switch (tagType) {
+    case 'audio':
+      return <audio className={classes.restricSize} aria-label={ariaLabel} src={link} controls controlsList='nodownload' />;
+    case 'image':
+      return <img className={classes.restricSize} alt={ariaLabel || 'Imagem'} aria-label={ariaLabel} src={link} onClick={e => e.preventDefault()}/>;
+    case 'video':
+      return <video className={classes.restricSize} aria-label={ariaLabel} controls controlsList='nodownload' autoPlay src={link}/>;
+    default:
+      return link ? <iframe className={classes.iframe} aria-label={ariaLabel} title='Iframe' src={`${link}#toolbar=0`}/> : <Box justifyContent='center' alignItems='center' display='flex'><CircularProgress disableShrink/></Box>;
+  }
+};
+
+
+export default Visualizacao;