argous 1.2.246 → 1.3.2

package/lib/api/ws.js

@@ -4,9 +4,38 @@ import { getConfig } from '../utils/config';
 const api = () => `${getConfig().ssl ? 'wss' : 'ws'}${ server() }ws`;
 
 let argousWS = null;
+let filaMensagens = [];
+
+const WS_CONNECTING = 0;
+const WS_OPEN = 1;
+const WS_CLOSING = 2;
+const WS_CLOSED = 3;
+
+const isSocketActive = (ws) => ws && [WS_CONNECTING, WS_OPEN].includes(ws.readyState);
+const isSocketOpen = (ws) => ws && ws.readyState === WS_OPEN;
+
+const flushMensagens = () => {
+  if (!isSocketOpen(argousWS) || !filaMensagens.length) {
+    return;
+  }
+
+  const mensagens = [...filaMensagens];
+  filaMensagens = [];
+
+  mensagens.forEach((mensagem) => {
+    argousWS.send(mensagem);
+  });
+};
 
 export const connectArgousWS = (data) => {
+  if (isSocketActive(argousWS)) {
+    return argousWS;
+  }
+
   argousWS = new WebSocket(api());
+  argousWS.addEventListener('open', flushMensagens);
+
+  return argousWS;
 };
 
 export const getArgousWS = (data) => {
@@ -14,14 +43,29 @@ export const getArgousWS = (data) => {
 };
 
 export const disconnect = () => {
-  if (argousWS)
+  filaMensagens = [];
+
+  if (argousWS && ![WS_CLOSING, WS_CLOSED].includes(argousWS.readyState)) {
     argousWS.close();
+  }
+
+  argousWS = null;
 };
 
 export const enviaMensagem = (data) => {
-  const argousWS = getArgousWS();
-  argousWS.send(JSON.stringify({
+  const mensagem = JSON.stringify({
     ...headers(),
     ...data
-  }));
+  });
+
+  if (!isSocketActive(argousWS)) {
+    connectArgousWS();
+  }
+
+  if (isSocketOpen(argousWS)) {
+    argousWS.send(mensagem);
+    return;
+  }
+
+  filaMensagens.push(mensagem);
 };

package/lib/components/ArgousAvatar/ArgousAvatar.d.ts

@@ -1,4 +1,4 @@
-import { AvatarProps } from '@material-ui/core';
+import { AvatarProps } from '@mui/material';
 
 export interface ArgousAvatarTypeMap extends AvatarProps{
   /**

package/lib/components/ArgousAvatar/ArgousAvatar.js

@@ -1,63 +1,21 @@
 import { fetchToArgous } from '../../api';
 import { getNumeroFromInitials, getInitials } from '../../utils';
-import { Avatar, makeStyles, colors } from '@material-ui/core';
+import { Avatar, useTheme } from '@mui/material';
+import { blue, brown, deepOrange, deepPurple, green, grey, pink, red, yellow } from '@mui/material/colors';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 
-const useStyles = makeStyles(theme => ({
-  orange: {
-    color: theme.palette.getContrastText(colors.deepOrange[500]),
-    backgroundColor: colors.deepOrange[500],
-  },
-  purple: {
-    color: theme.palette.getContrastText(colors.deepPurple[500]),
-    backgroundColor: colors.deepPurple[500],
-  },
-  blue: {
-    color: theme.palette.getContrastText(colors.blue[500]),
-    backgroundColor: colors.blue[500],
-  },
-  red: {
-    color: theme.palette.getContrastText(colors.red[500]),
-    backgroundColor: colors.red[500],
-  },
-  rosa: {
-    color: theme.palette.getContrastText(colors.pink[500]),
-    backgroundColor: colors.pink[500],
-  },
-  cinza: {
-    color: theme.palette.getContrastText(colors.grey[500]),
-    backgroundColor: colors.grey[500],
-  },
-  green: {
-    color: theme.palette.getContrastText(colors.green[500]),
-    backgroundColor: colors.green[500],
-  },
-  amarelo: {
-    color: theme.palette.getContrastText(colors.yellow[500]),
-    backgroundColor: colors.yellow[500],
-  },
-  marrom: {
-    color: theme.palette.getContrastText(colors.brown[500]),
-    backgroundColor: colors.brown[500],
-  },
-  preto: {
-    color: theme.palette.getContrastText(colors.grey['A400']),
-    backgroundColor: colors.grey['A400'],
-  },
-  img: {
-    border: '2px solid #FFF'
-  },
-}));
+const avatarColors = [deepOrange[500], deepPurple[500], blue[500], pink[500], grey[500], red[500], yellow[500], brown[500], grey['A400'], green[500]];
+const normalizeSx = sx => sx ? (Array.isArray(sx) ? sx : [sx]) : [];
 
-const ArgousAvatar = React.forwardRef(({ nome, src, className, idUsuario, forwardedBlockSearch, ...props }, ref) => {
-  const classes = useStyles();
-  const cores = [classes.orange, classes.purple, classes.blue, classes.rosa, classes.cinza, classes.red, classes.amarelo, classes.marrom, classes.preto, classes.green];
+const ArgousAvatar = React.forwardRef(({ nome, src, className, idUsuario, forwardedBlockSearch, sx, ...props }, ref) => {
+  const theme = useTheme();
   const [userImage, setUserImage] = useState(undefined);
 
   useEffect(() => {
-    setUserImage(localStorage.getItem(`imgUsuario-${idUsuario}`) || '');
-    if (!idUsuario || userImage || localStorage.getItem(`imgUsuario-${idUsuario}`) || forwardedBlockSearch?.return) return;
+    const storedUserImage = localStorage.getItem(`imgUsuario-${idUsuario}`) || '';
+    setUserImage(storedUserImage);
+    if (!idUsuario || storedUserImage || forwardedBlockSearch?.return) return;
     fetchToArgous('aguserimage', { idUsuario })
       .then(({ userImage }) => {
         if (userImage) {
@@ -65,9 +23,17 @@ const ArgousAvatar = React.forwardRef(({ nome, src, className, idUsuario, forwar
           localStorage.setItem(`imgUsuario-${idUsuario}`, userImage);
         } else localStorage.setItem(`imgUsuario-${idUsuario}`, '');
       });
-  }, [idUsuario]);
+  }, [forwardedBlockSearch?.return, idUsuario]);
+
+  const color = avatarColors[getNumeroFromInitials(getInitials(nome), avatarColors.length)];
+  const avatarSx = src || userImage ? {
+    border: '2px solid #FFF'
+  } : {
+    color: theme.palette.getContrastText(color),
+    backgroundColor: color
+  };
 
-  return <Avatar ref={ref} className={`${className} ${src || userImage ? classes.img : cores[getNumeroFromInitials(getInitials(nome), cores.length)]}`} {...props} src={src || userImage}>{getInitials(nome)}</Avatar>;
+  return <Avatar ref={ref} className={className} sx={[avatarSx, ...normalizeSx(sx)]} {...props} src={src || userImage}>{getInitials(nome)}</Avatar>;
 });
 
 ArgousAvatar.propTypes = {
@@ -76,4 +42,4 @@ ArgousAvatar.propTypes = {
   className: PropTypes.string
 };
 
-export default ArgousAvatar;
+export default ArgousAvatar;

package/lib/components/ArgousComplexPagination/ArgousComplexPagination.d.ts

@@ -1,4 +1,4 @@
-import { SelectProps } from '@material-ui/core';
+import { SelectProps } from '@mui/material';
 import * as React from 'react';
 
 export interface ArgousComplexPaginationProps {

package/lib/components/ArgousComplexPagination/ArgousComplexPagination.js

@@ -1,10 +1,24 @@
-import { makeStyles, Toolbar, Typography, Select, InputBase, MenuItem, useTheme, IconButton, Box } from '@material-ui/core';
-import clsx from 'clsx';
+import { Toolbar, Typography, Select, InputBase, MenuItem, useTheme, IconButton, Box, GlobalStyles } from '@mui/material';
+import { clsx } from 'clsx';
 import React, { memo } from 'react';
 import { MdLastPage, MdFirstPage, MdKeyboardArrowRight, MdKeyboardArrowLeft } from 'react-icons/md';
 
-const useStyles = makeStyles(theme => ({
-  pagination: {
+const classes = {
+  pagination: 'argous-complex-pagination-pagination',
+  toolbar: 'argous-complex-pagination-toolbar',
+  spacer: 'argous-complex-pagination-spacer',
+  caption: 'argous-complex-pagination-caption',
+  selectRoot: 'argous-complex-pagination-select-root',
+  select: 'argous-complex-pagination-select',
+  selectIcon: 'argous-complex-pagination-select-icon',
+  input: 'argous-complex-pagination-input',
+  menuItem: 'argous-complex-pagination-menu-item',
+  actions: 'argous-complex-pagination-actions',
+  paginationActions: 'argous-complex-pagination-pagination-actions',
+};
+
+const paginationStyles = theme => ({
+  [`.${classes.pagination}`]: {
     display: 'flex',
     flexDirection: 'row-reverse',
     color: theme.palette.text.primary,
@@ -14,40 +28,42 @@ const useStyles = makeStyles(theme => ({
       padding: 0,
     },
   },
-  toolbar: {
+  [`.${classes.toolbar}`]: {
     minHeight: 52,
     paddingRight: 2,
   },
-  spacer: {
+  [`.${classes.spacer}`]: {
     flex: '1 1 100%',
   },
-  caption: {
+  [`.${classes.caption}`]: {
     flexShrink: 0,
   },
-  selectRoot: {
+  [`.${classes.selectRoot}`]: {
     marginRight: 32,
     marginLeft: 8,
   },
-  select: {
+  [`.${classes.select}`]: {
     paddingLeft: 8,
     paddingRight: 24,
     textAlign: 'right',
     textAlignLast: 'right',
   },
-  input: {
+  [`.${classes.selectIcon}`]: {},
+  [`.${classes.input}`]: {
     color: 'inherit',
     fontSize: 'inherit',
     flexShrink: 0,
   },
-  actions: {
+  [`.${classes.menuItem}`]: {},
+  [`.${classes.actions}`]: {
     flexShrink: 0,
     marginLeft: 20,
   },
-  paginationActions: {
+  [`.${classes.paginationActions}`]: {
     flexShrink: 0,
     marginLeft: theme.spacing(2.5),
   },
-}));
+});
 
 const handleChangePgAtual = (value, pages) => {
   if (value < 1) return 0;
@@ -56,17 +72,22 @@ const handleChangePgAtual = (value, pages) => {
 };
 
 const DefaultLabelDisplayedRows = ({ pages, page, onChangePage, from, to, count, showCount }) => {
-  return <React.Fragment>
-    <Box padding='1px 0px' display='inline'>
-      <InputBase inputProps={{ type: 'number', min: 1, max: pages || 1, value: page + 1 }} onChange={e => onChangePage(e, handleChangePgAtual(e.target.value, pages))} />
-      {` / ${pages || 1}`}
-    </Box>
-    {showCount && <div style={{ display: 'inline', marginLeft: '10px', paddingLeft: '10px' }}>{from} a {to} de {count}</div>}
-  </React.Fragment>;
+  return (
+    <React.Fragment>
+      <Box
+        sx={{
+          padding: '1px 0px',
+          display: 'inline'
+        }}>
+        <InputBase inputProps={{ type: 'number', min: 1, max: pages || 1, value: page + 1 }} onChange={e => onChangePage(e, handleChangePgAtual(e.target.value, pages))} />
+        {` / ${pages || 1}`}
+      </Box>
+      {showCount && <div style={{ display: 'inline', marginLeft: '10px', paddingLeft: '10px' }}>{from} a {to} de {count}</div>}
+    </React.Fragment>
+  );
 };
 
 const TablePaginationActions = memo(({ count, page, rowsPerPage, onChangePage }) => {
-  const classes = useStyles();
   const theme = useTheme();
   const handleFirstPageButtonClick = e => onChangePage(e, 0);
   const handleBackButtonClick = e => onChangePage(e, page - 1);
@@ -117,14 +138,16 @@ const ArgousComplexPagination = memo(({
   SelectProps = {},
   showCount
 }) => {
-  const classes = useStyles();
   const MenuItemComponent = SelectProps.native ? 'option' : MenuItem;
   return (
     <div className={clsx(classes.pagination, className)}>
+      <GlobalStyles styles={paginationStyles} />
       <Toolbar className={classes.toolbar}>
         <div className={classes.spacer} />
         {rowsPerPageOptions.length > 1 && (
-          <Typography color='inherit' variant='body2' className={classes.caption}>
+          <Typography variant='body2' className={classes.caption} sx={{
+            color: 'inherit'
+          }}>
             {labelRowsPerPage}
           </Typography>
         )}
@@ -150,7 +173,9 @@ const ArgousComplexPagination = memo(({
             ))}
           </Select>
         )}
-        <Typography color='inherit' variant='body2' component='div' className={classes.caption}>
+        <Typography variant='body2' component='div' className={classes.caption} sx={{
+          color: 'inherit'
+        }}>
           <LabelDisplayedRows {...{
             pages: Math.ceil(count / parseInt(rowsPerPage, 10)),
             from: count === 0 ? 0 : page * rowsPerPage + 1,
@@ -179,4 +204,4 @@ const ArgousComplexPagination = memo(({
   );
 });
 
-export default ArgousComplexPagination;
+export default ArgousComplexPagination;

package/lib/components/ArgousComplexTable/ArgousComplexTable.d.ts

@@ -2,7 +2,7 @@ import { ArgousComplexPaginationPrivateProps, ArgousComplexPaginationProps } fro
 import { ArgousComplexTableBodyPrivateProps, ArgousComplexTableBodyProps } from '../ArgousComplexTableBody/ArgousComplexTableBody';
 import { ArgousComplexTableHeadPrivateProps, ArgousComplexTableHeadProps } from '../ArgousComplexTableHead/ArgousComplexTableHead';
 import { ArgousComplexTableToolBarPrivateProps, ArgousComplexTableToolBarProps } from '../ArgousComplexTableToolbar/ArgousComplexTableToolBar';
-import { TableContainerProps, TableProps } from '@material-ui/core';
+import { TableContainerProps, TableProps } from '@mui/material';
 import React from 'react';
 
 export interface ArgousComplexTableProps extends ArgousComplexTableBodyProps, ArgousComplexPaginationProps, ArgousComplexPaginationProps, ArgousComplexTableHeadProps, ArgousComplexTableToolBarProps {

package/lib/components/ArgousComplexTable/ArgousComplexTable.js

@@ -1,23 +1,22 @@
 import { ArgousComplexPagination, ArgousComplexTableHead, ArgousComplexTableToolbar, ArgousComplexTableBody } from '../';
 import { getField } from '../../fieldsRedux';
 import { serverAction } from '../../utils/api';
-import { Table, TableContainer, Paper, ClickAwayListener, makeStyles } from '@material-ui/core';
-import clsx from 'clsx';
+import { Table, TableContainer, Paper, ClickAwayListener } from '@mui/material';
 import { isArray, isEqual, isFunction } from 'lodash';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { useState, useEffect, forwardRef, useImperativeHandle, useMemo, createContext, useReducer, useCallback, memo } from 'react';
 
-const useStyles = makeStyles({
-  root: {
-    '& [class*="smooth-dnd-container"]': {
-      display: 'table-row-group'
-    },
-    '& [class*="smooth-dnd-draggable-wrapper"]': {
-      display: 'table-row !important'
-    }
+const rootSx = {
+  '& [class*="smooth-dnd-container"]': {
+    display: 'table-row-group'
+  },
+  '& [class*="smooth-dnd-draggable-wrapper"]': {
+    display: 'table-row !important'
   }
-});
+};
+
+const normalizeSx = sx => sx ? (Array.isArray(sx) ? sx : [sx]) : [];
 
 export const TableContext = createContext();
 
@@ -181,7 +180,6 @@ const ArgousComplexTable = forwardRef(({
   token = ''
 }, ref) => {
 
-  const classes = useStyles();
   const [state, dispatch] = useReducer(reducer, initialState(defaultRowsPerPage));
   const memoState = useMemo(() => ({ ...state, dispatch }), [state, dispatch]);
   const { selected, page, rowsPerPage, order, orderBy, filter, open } = memoState;
@@ -285,7 +283,9 @@ const ArgousComplexTable = forwardRef(({
     }
   }, [page, lista.length, rowsPerPage, ctrlPgn.recordCount, lista, method, field, externalCtrlPgn, dispatch]);
 
-  useEffect(() => dispatch({ type: 'setSelected', value: [] }), [lista]);
+  useEffect(() => {
+    dispatch({ type: 'setSelected', value: [] });
+  }, [lista]);
 
   useEffect(() => {
     if (onSelect) onSelect(selected);
@@ -354,7 +354,7 @@ const ArgousComplexTable = forwardRef(({
   return (
     <TableContext.Provider value={{ ...memoState, dadosMostrados, lista, indexToSelect, method, externalCtrlPgn }}>
       <ClickAwayListener onClickAway={onClickAway}>
-        <TableContainer component={Paper} variant='outlined' style={style} {...containerProps} className={clsx(classes.root, className)}>
+        <TableContainer component={Paper} variant='outlined' style={style} {...containerProps} className={className} sx={[rootSx, ...normalizeSx(containerProps?.sx)]}>
           <ToolbarComponent 
             numSelected={selected.length} 
             disableFilter={disableFilter || !!method || !!externalCtrlPgn} 
@@ -433,4 +433,4 @@ ArgousComplexTable.propTypes = {
   setExternalCtrlPgn: PropTypes.func
 };
 
-export default memo(ArgousComplexTable, isEqual);
+export default memo(ArgousComplexTable, isEqual);

package/lib/components/ArgousComplexTableBody/ArgousComplexTableBody.d.ts

@@ -1,4 +1,4 @@
-import { TableCellBaseProps, TableRowProps } from '@material-ui/core';
+import { TableCellBaseProps, TableRowProps } from '@mui/material';
 import * as React from 'react';
 
 export declare interface ChildrenFunction {