argous 1.2.246 → 1.3.2

package/lib/components/Document/Icons.js

@@ -1,5 +1,5 @@
 import { getFileFromLink, getLink } from '../../api';
-import { CircularProgress } from '@material-ui/core';
+import { CircularProgress } from '@mui/material';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 const reqSvgs = require.context ('./icons', true, /\.svg$/);
@@ -84,12 +84,20 @@ export const IconsComponent = ({ type, fileName, mimeType, idDocumento, link, ..
 
 
   const setarState = useCallback(() => {
-    if (state) return;
-    if (icones) setState(icones);
-    else setTimeout(setarState, 200);
+    if (state) return undefined;
+    if (icones) {
+      setState(icones);
+      return undefined;
+    }
+    return setTimeout(setarState, 200);
   }, [state]);
 
-  useEffect(setarState, [setarState]);
+  useEffect(() => {
+    const timeoutId = setarState();
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [setarState]);
 
   const selectedImage = useMemo(() => {
     if (type) return type;
@@ -166,4 +174,4 @@ export const Icons = reqSvgs.keys().reduce((images, path) => {
   return images;
 }, {});
 
-export default Icons;
+export default Icons;

package/lib/components/Document/ModalVisualizacaoDocumentos.js

@@ -1,6 +1,6 @@
 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 { Typography, IconButton, Dialog, Toolbar, AppBar, Box } from '@mui/material';
 import React, { useState } from 'react';
 import { MdClose, MdFileDownload, MdPrint } from 'react-icons/md';
 
@@ -54,7 +54,14 @@ const ModalVisualizacaoDocumentos = ({ open, proceed, tokenSistema, ...props })
           )}
         </Toolbar>
       </AppBar>
-      <Box display='flex' justifyContent='center' alignItems='center' width='100%' height='100%'>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100%',
+          height: '100%'
+        }}>
         <Visualizacao {...{ setVisualizando, ...visualizando, tokenSistema, proceed }} />
       </Box>
     </Dialog>

package/lib/components/Document/Visualizacao.js

@@ -1,33 +1,31 @@
 import { serverAction, setError } from '../../utils/api';
-import { Box, CircularProgress, makeStyles } from '@material-ui/core';
+import { Box, CircularProgress } from '@mui/material';
 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'
-    }
+const iframeSx = theme => ({
+  width: '100%',
+  height: '100%',
+  border: 'none',
+  background: theme.palette.background.default,
+  '&:focus': {
+    outline: 'none'
   },
-  restricSize: {
-    maxWidth: '100%',
-    maxHeight: '100%'
+  '&[seamless]': {
+    display: 'block'
   }
-}));
+});
+
+const 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);
@@ -55,8 +53,11 @@ const Visualizacao = ({ idDocumento, nrRevisao, setVisualizando, proceed, URL: d
     }
   };
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => preparaLink(), []);
+  useEffect(() => {
+    preparaLink();
+    // The document link is prepared once when this viewer mounts.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
     onchange = function(evt) {
@@ -90,15 +91,20 @@ const Visualizacao = ({ idDocumento, nrRevisao, setVisualizando, proceed, URL: d
 
   switch (tagType) {
     case 'audio':
-      return <audio className={classes.restricSize} aria-label={ariaLabel} src={link} controls controlsList='nodownload' />;
+      return <Box component='audio' sx={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()}/>;
+      return <Box component='img' sx={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}/>;
+      return <Box component='video' sx={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>;
+      return link ? <Box component='iframe' sx={iframeSx} aria-label={ariaLabel} title='Iframe' src={`${link}#toolbar=0`}/> : <Box
+        sx={{
+          justifyContent: 'center',
+          alignItems: 'center',
+          display: 'flex'
+        }}><CircularProgress disableShrink/></Box>;
   }
 };
 
 
-export default Visualizacao;
+export default Visualizacao;

package/lib/components/DropArea/DropArea.js

@@ -1,6 +1,6 @@
 import { getDroppedOrSelectedFiles } from './Html5FileSelector';
 import { FilePreparer } from '../';
-import { Box, CircularProgress } from '@material-ui/core';
+import { Box, CircularProgress } from '@mui/material';
 import React, { useState, Children, isValidElement, cloneElement, forwardRef } from 'react';
 import { MdFileUpload } from 'react-icons/md';
 
@@ -50,14 +50,20 @@ const DropArea = ({ children, onChange, style, ...props }, ref) => {
           style={{ position: 'absolute', border: '2px dashed', background: 'rgba(0, 0, 0, 0.5)', zIndex: 5, width: '100%', height: '100%', display: 'grid', placeItems: 'center' }}
         >
           {(loading) ? 
-            <Box display='flex' justifyContent='center' alignItems='center' height='100%'>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100%'
+              }}>
               <CircularProgress disableShrink />
             </Box>
             :
             <MdFileUpload style={{ width: '100%', height: '99%' }} />
           }
         </div>
-      )} 
+      )}
       {deepMap(children, (filho) => filho.type === FilePreparer ? cloneElement(filho, { ...filho.props, ref }) : filho)}
     </div>
   );

package/lib/components/Editor/ScriptLoader2.ts

@@ -107,7 +107,7 @@ const createDocumentScriptLoader = (doc: Document) => {
   const deleteScripts = () => {
     for (const item of Object.values(lookup)) {
       const scriptTag = doc.getElementById(item.id);
-      if (scriptTag != null && scriptTag.tagName === 'SCRIPT') {
+      if (scriptTag !== null && scriptTag !== undefined && scriptTag.tagName === 'SCRIPT') {
         scriptTag.parentNode?.removeChild(scriptTag);
       }
     }
@@ -147,7 +147,7 @@ const createScriptLoader = () => {
   };
 
   const reinitialize = () => {
-    for (let loader = cache.pop(); loader != null; loader = cache.pop()) {
+    for (let loader = cache.pop(); loader !== null && loader !== undefined; loader = cache.pop()) {
       loader.deleteScripts();
     }
   };
@@ -158,4 +158,4 @@ const createScriptLoader = () => {
   };
 };
 
-export const ScriptLoader = createScriptLoader();
+export const ScriptLoader = createScriptLoader();

package/lib/components/Editor/Utils.ts

@@ -91,7 +91,7 @@ export const isInDoc = (elem: Node) => {
     // Fallback for IE and old Edge
     let current = elem;
     let parent = elem.parentNode;
-    while (parent != null) {
+    while (parent !== null && parent !== undefined) {
       current = parent;
       parent = current.parentNode;
     }
@@ -103,10 +103,10 @@ export const isInDoc = (elem: Node) => {
 
 export const setMode = (editor: TinyMCEEditor | undefined, mode: 'readonly' | 'design') => {
   if (editor !== undefined) {
-    if (editor.mode != null && typeof editor.mode === 'object' && typeof editor.mode.set === 'function') {
+    if (editor.mode !== null && editor.mode !== undefined && typeof editor.mode === 'object' && typeof editor.mode.set === 'function') {
       editor.mode.set(mode);
     } else { // support TinyMCE 4
       (editor as any).setMode(mode);
     }
   }
-};
+};

package/lib/components/Editor/components/Editor.tsx

@@ -43,7 +43,7 @@ export class Editor extends React.Component<IAllProps> {
   public editor?: TinyMCEEditor;
 
   private id: string;
-  private elementRef: React.RefObject<HTMLElement>;
+  private elementRef: React.RefObject<HTMLElement | null>;
   private inline: boolean;
   private currentContent?: string;
   private boundHandlers: Record<string, (event: EditorEvent<unknown>) => unknown>;