argous 1.2.246 → 1.3.2

package/lib/components/BarraFerramentas/BarraFerramentas.js

@@ -1,18 +1,29 @@
 import { Compartilhar } from '..';
 import ThreadLog from '../../components/ThreadLog';
 import { usePrevious } from '../../utils';
-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 { TAB_ACTIVE_INDEX, TAB_ALIAS_INDEX, TAB_ICON_INDEX, TAB_LABEL_INDEX } from '../Programa/TabNavigationRail';
+import { Box, CircularProgress, ClickAwayListener, Collapse, Divider, GlobalStyles, IconButton, ListItemIcon, ListItemText, MenuItem, MenuList, Paper, Popper, Toolbar, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { isArray, isNumber, 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 { IoSettings } from 'react-icons/io5';
 import { MdShare, MdFormatListBulleted, MdArrowBack, MdEdit, MdDelete, MdSave, MdKeyboardArrowRight, MdFirstPage, MdKeyboardArrowLeft, MdLastPage, MdEditNote } from 'react-icons/md';
 
 
-const useStyles = makeStyles(theme => ({
-  root: {
+const classes = {
+  root: 'argous-barra-ferramentas-root',
+  menuButton: 'argous-barra-ferramentas-menu-button',
+  title: 'argous-barra-ferramentas-title',
+  navigator: 'argous-barra-ferramentas-navigator',
+};
+
+const TAB_ICON_SIZE = 20;
+
+const toolbarStyles = ({ habNavegador }) => theme => ({
+  [`.${classes.root}`]: {
     zIndex: 0,
     margin: '-11px',
     marginBottom: 0,
@@ -31,35 +42,34 @@ const useStyles = makeStyles(theme => ({
     },
     '&:hover': {
       '&::-webkit-scrollbar-thumb': {
-        background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
+        background: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
       }
     }
   },
-  menuButton: {
+  [`.${classes.menuButton}`]: {
     marginRight: theme.spacing(2),
   },
-  menuSelected: {
-    backgroundColor: theme.palette.action.selected
+  [`.${classes.title}`]: {
+    flexGrow: habNavegador ? 0 : 1,
   },
-  title: {
-    flexGrow: ({ habNavegador }) => habNavegador ? 0 : 1,
-  },
-  navigator: {
+  [`.${classes.navigator}`]: {
     flexGrow: 1,
     marginLeft: theme.spacing(2)
   }
-}));
+});
 
-const ToolbarTooltip = withStyles({
-  popper: {
+const ToolbarTooltip = styled(Tooltip)({
+  '&.MuiTooltip-popper': {
     zIndex: 1300
   }
-})(Tooltip);
+});
 
 
 const CustomTooltip = ({ disabled, arrow, placement, title, children }) => {
   const [open, setOpen] = useState(false);
-  useEffect(() => (disabled && open) && setOpen(false), [disabled, open]);
+  useEffect(() => {
+    if (disabled && open) setOpen(false);
+  }, [disabled, open]);
   return (
     <ToolbarTooltip 
       {...{ arrow, placement, title }} 
@@ -98,14 +108,22 @@ function BarraFerramentas ({
   addWidget = () => '',
   snAnotacaoPrograma = false,
   openAnnotations = () => '',
-  toolbarLoading = {}
+  toolbarLoading = {},
+  selectedTab = [],
+  setSelectedTab = () => ''
 }) {
 
-  const classes = useStyles({ habNavegador });
+  const theme = useTheme();
+  const xs = useMediaQuery(theme.breakpoints.only('xs'));
   const anchorMenu = useRef(null);
   const anchorCompartilhar = useRef(null);
+  const setSelectedTabRef = useRef(setSelectedTab);
+
+  useEffect(() => {
+    setSelectedTabRef.current = setSelectedTab;
+  }, [setSelectedTab]);
+
   const [open, setOpen] = useState(false);
-  const [abaAtual, setAbaAtual] = useState(undefined);
   const [habEditar, setHabEditar] = useState(true);
   const [habSalvar, setHabSalvar] = useState(false);
   const [habExcluir, setHabExcluir] = useState(false);
@@ -117,13 +135,18 @@ function BarraFerramentas ({
   }, [open]);
 
   const previousAbas = usePrevious(abas);
+
   useEffect(() => {
+
     if (isEqual(abas, previousAbas)) return;
-    if (!abas.length) setAbaAtual(undefined);
-    else for (let i = 0; i < abas?.length; i++) {
+    if (!abas?.length) {
+      if (typeof setSelectedTabRef.current === 'function') setSelectedTabRef.current([]);
+    } else for (let i = 0; i < abas?.length; i++) {
+
       const aba = abas[i];
-      if (aba[1] === 'active') {
-        setAbaAtual(aba[0]);
+
+      if (aba[TAB_ACTIVE_INDEX] === 'active') {
+        if (typeof setSelectedTabRef.current === 'function') setSelectedTabRef.current(aba);
         break;
       }
     }
@@ -144,10 +167,16 @@ function BarraFerramentas ({
     setOpenCompartilhar(false);
   };
 
-  const selecionaAba = (index, item, alias) => event => {
+  const selecionaAba = (index, tab) => (event) => {
+
+    const alias = tab?.[TAB_ALIAS_INDEX];
+
     if (anchorMenu.current && anchorMenu?.current?.contains(event.target)) return;
-    if (isString(item)) setAbaAtual(item);
+    if (typeof setSelectedTabRef.current === 'function') {
+      if (tab?.length) setSelectedTabRef.current(tab);
+    }
     if (isNumber(index)) executaFuncao(alias || `T${index}`);
+
     setOpen(false);
   };
 
@@ -178,9 +207,11 @@ function BarraFerramentas ({
     );
   };
 
+
   return <>
-    <Toolbar className={classes.root} /*disableGutters*/ variant='dense'>
-      {(isArray(abas) && abas.length > 0) && (
+    <GlobalStyles styles={toolbarStyles({ habNavegador })} />
+    <Toolbar className={classes.root} variant='dense'>
+      {(xs && isArray(abas) && (abas?.length > 0)) && (
         <IconButton id='botaoAbasBarraFerramentas' ref={anchorMenu} onClick={toggleAbas} className={classes.menuButton}>
           <MdFormatListBulleted />
         </IconButton>
@@ -188,12 +219,34 @@ function BarraFerramentas ({
       <Popper open={open} anchorEl={anchorMenu.current} role={undefined} transition keepMounted style={{ zIndex: 2, marginLeft: 10 }}>
         {({ TransitionProps }) => (
           <Collapse in={TransitionProps.in} timeout={100}>
-            <Paper style={{ maxHeight: '80vh', overflowY: 'auto' }}>
+            <Paper elevation={6} style={{ maxHeight: '80vh', overflowY: 'auto' }}>
               <ClickAwayListener onClickAway={selecionaAba()}>
                 <MenuList autoFocusItem={open} onKeyDown={handleListKeyDown}>
-                  {isArray(abas) && abas.map((item, key) => (
-                    <MenuItem className={clsx({ [classes.menuSelected]: abaAtual === item[0] })} key={key} onClick={selecionaAba(key, item[0], item[2])}>{item[0]}</MenuItem>
-                  ))}
+                  {(isArray(abas)) && abas.map((item, key) => {
+
+                    const Icon = item?.[TAB_ICON_INDEX];
+
+
+                    return (
+                      <MenuItem 
+                        key={key} 
+                        onClick={selecionaAba(key, item)} 
+                        selected={isEqual(item, selectedTab)}
+                      >
+                        <ListItemIcon>
+                          {(Icon) && (
+                            <Icon size={TAB_ICON_SIZE} />
+                          )}
+                          {(!Icon) && (
+                            <IoSettings size={TAB_ICON_SIZE} />
+                          )}
+                        </ListItemIcon>
+                        <ListItemText>
+                          {item?.[TAB_LABEL_INDEX]}
+                        </ListItemText>
+                      </MenuItem>
+                    );
+                  })}
                 </MenuList>
               </ClickAwayListener>
             </Paper>
@@ -201,8 +254,8 @@ function BarraFerramentas ({
         )}
       </Popper>
       <Typography component='div' variant='h6' className={classes.title}>
-        {(abaAtual) ? (
-          <Typography variant='subtitle1'>{abaAtual} <Typography variant='caption'>( {titulo} )</Typography></Typography>
+        {(selectedTab?.length) ? (
+          <Typography variant='subtitle1'>{selectedTab?.[TAB_LABEL_INDEX]} <Typography variant='caption'>( {titulo} )</Typography></Typography>
         ) : (
           <Typography variant='subtitle1'>{titulo}</Typography>
         )}
@@ -342,7 +395,9 @@ BarraFerramentas.propTypes = {
   threads: PropTypes.array,
   currentProgram: PropTypes.string,
   habWidget: PropTypes.bool,
-  addWidget: PropTypes.func
+  addWidget: PropTypes.func,
+  selectedTab: PropTypes.array,
+  setSelectedTab: PropTypes.func
 };
 
-export default BarraFerramentas;
+export default BarraFerramentas;

package/lib/components/Calendar/Calendar.js

@@ -1,6 +1,5 @@
 import { createField, initField, getField } from '../../fieldsRedux';
 import { addExtraZero } from '../../utils';
-import { getMonthName } from '../../utils/date';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Calendar as CalDep } from 'react-date-range';
@@ -35,32 +34,12 @@ class Calendar extends Component {
 
   handleClickCalendar = (e) => {
 
-    const eCls = e.target.className;
-    const eClsP = e.target.parentNode.className;
+    const navigationButton = e.target.closest('.rdrNextPrevButton');
 
-    const prev = eCls !== 'rdr-MonthAndYear-button next' && eClsP !== 'rdr-MonthAndYear-button next';
-    const next = eCls !== 'rdr-MonthAndYear-button prev' && eClsP !== 'rdr-MonthAndYear-button prev';
-
-    if (next && prev) {
+    if (!navigationButton) {
       this.setState({ open: false });
       document.removeEventListener('click', this.handleClickCalendar);
-    } else {
-      const { month } = this.state;
-
-      let newMonth = next
-        ? month + 1
-        : month - 1;
-
-      newMonth = newMonth < 0
-        ? 11
-        : newMonth > 11
-          ? 0
-          : newMonth;
-
-      this.setState({ month: newMonth });
-      this.setMonthName(null, newMonth);
     }
-
   }
 
   checkDefaultValue = (defaultValue) => {
@@ -93,9 +72,9 @@ class Calendar extends Component {
   handleSelect = (date) => {
     const { onChange } = this.props;
 
-    const day = date._d.getDate();
-    const month = (date._d.getMonth() + 1);
-    const year = date._d.getFullYear();
+    const day = date.getDate();
+    const month = (date.getMonth() + 1);
+    const year = date.getFullYear();
 
     const formattedDate = `${addExtraZero(day)}/${addExtraZero(month)}/${year}`;
 
@@ -107,22 +86,8 @@ class Calendar extends Component {
     this.setState({ open: false });
   }
 
-  setMonthName = (date, month) => {
-
-    if (date) {
-      this.setState({ month: date._d.getMonth() });
-    }
-
-    const name = getMonthName(typeof month !== 'undefined'
-      ? month
-      : date._d.getMonth());
-
-    const monthDescription = document.getElementsByClassName('rdr-MonthAndYear-month')[0];
-    monthDescription.innerHTML = name;
-  }
-
   render() {
-    const { openCalendar, handleSelect, setMonthName } = this;
+    const { openCalendar, handleSelect } = this;
     const { open } = this.state;
     const { field } = this.props;
 
@@ -131,7 +96,7 @@ class Calendar extends Component {
     return (
       <div className='argous-calendar'>
         <span onMouseUp={openCalendar}>{date ? date : 'dd/mm/aaaa'}</span>
-        {open && (<CalDep date={date} onChange={handleSelect} onInit={setMonthName} />)}
+        {open && (<CalDep date={date ? new Date(date.split('/').reverse().join('-') + 'T00:00:00') : new Date()} onChange={handleSelect} />)}
       </div>
     );
   }

package/lib/components/Carousel/Carousel.js

@@ -1,22 +1,33 @@
-import { makeStyles } from '@material-ui/core';
-import clsx from 'clsx';
+import { GlobalStyles } from '@mui/material';
+import { clsx } from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
 
 
-const useStyles = makeStyles(theme => ({
-  container: {
+const classes = {
+  container: 'argous-carousel-container',
+  carouselContainer: 'argous-carousel-carousel-container',
+  carousel: 'argous-carousel-carousel',
+  button: 'argous-carousel-button',
+  leftButton: 'argous-carousel-left-button',
+  rightButton: 'argous-carousel-right-button',
+  indicator: 'argous-carousel-indicator',
+  currentIndicator: 'argous-carousel-current-indicator',
+};
+
+const carouselStyles = ({ itemSpacing, indicator, indicatorSize, indicatorGap, indicatorPadding, iconSize }) => theme => ({
+  [`.${classes.container}`]: {
     height: '100%',
     width: '100%'
   },
-  carouselContainer: {
+  [`.${classes.carouselContainer}`]: {
     width: '100%',
-    height: ({ indicator, indicatorPadding }) => (indicator) ? `calc(100% - ${indicatorPadding * 2}px)` : '100%',
+    height: indicator ? `calc(100% - ${indicatorPadding * 2}px)` : '100%',
     minWidth: '100%',
     display: 'flex',
     alignItems: 'center'
   },
-  carousel: {
+  [`.${classes.carousel}`]: {
     width: '100%',
     height: '100%',
     margin: 'auto',
@@ -26,52 +37,52 @@ const useStyles = makeStyles(theme => ({
     overflow: 'hidden',
     scrollBehavior: 'smooth',
     '&>*:not(:last-child)': {
-      marginRight: ({ itemSpacing }) => (itemSpacing || '')
+      marginRight: itemSpacing || ''
     }
   },
-  button: {
+  [`.${classes.button}`]: {
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
     border: 0,
     padding: 0,
     backgroundColor: '#0000',
-    color: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
+    color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
     '&:hover': {
-      color: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .6)' : 'rgba(255, 255, 255, .8)'
+      color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, .6)' : 'rgba(255, 255, 255, .8)'
     },
     '&:disabled': {
-      color: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .23)' : 'rgba(255, 255, 255, .3)',
+      color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, .23)' : 'rgba(255, 255, 255, .3)',
       backgroundColor: 'transparent',
       cursor: 'default',
       pointerEvents: 'none'
     }
   },
-  leftButton: {
+  [`.${classes.leftButton}`]: {
     left: 0
   },
-  rightButton: {
+  [`.${classes.rightButton}`]: {
     right: 0
   },
-  indicator: {
+  [`.${classes.indicator}`]: {
     display: 'flex',
     flexWrap: 'wrap',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: ({ indicatorGap }) => (indicatorGap || ''),
-    padding: ({ indicatorPadding, indicatorSize, iconSize }) => `${indicatorPadding - (indicatorSize / 2)}px ${iconSize}px`,
+    gap: indicatorGap || '',
+    padding: `${indicatorPadding - (indicatorSize / 2)}px ${iconSize}px`,
     '& span': {
-      width: ({ indicatorSize }) => (indicatorSize || ''),
-      height: ({ indicatorSize }) => (indicatorSize || ''),
+      width: indicatorSize || '',
+      height: indicatorSize || '',
       borderRadius: '50%',
-      backgroundColor: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
+      backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
       transition: 'background-color 500ms'
     }
   },
-  currentIndicator: {
-    backgroundColor: (theme.palette.type === 'light') ? '#000 !important' : '#fff !important'
+  [`.${classes.currentIndicator}`]: {
+    backgroundColor: theme.palette.mode === 'light' ? '#000 !important' : '#fff !important'
   }
-}));
+});
 
 
 const CAROUSEL_ID = 'carousel';
@@ -102,7 +113,6 @@ const Carousel = ({
   currentIndicatorClassName 
 }) => {
 
-  const classes = useStyles({ itemSpacing, indicator, indicatorSize, indicatorGap, indicatorPadding, iconSize });
   const [state, setState] = useState(initialState);
   const { position, indicatorArray } = state;
   const carousel = useRef(null);
@@ -140,7 +150,9 @@ const Carousel = ({
 
     (position === children.length) && logicSetState({ type: 'position', value: (children.length - 1) });
   }, [itemSpacing, leftButtonId, rightButtonId, position, children.length]);
-  useEffect(() => control(), [control]);
+  useEffect(() => {
+    control();
+  }, [control]);
   control();
 
   const createIndicatorArray = useCallback(() => {
@@ -148,7 +160,9 @@ const Carousel = ({
     const newIndicatorArray = Array.from(Array(childrenLength).keys());
     logicSetState({ type: 'indicatorArray', value: newIndicatorArray });
   }, []);
-  useEffect(() => (indicator) && createIndicatorArray(), [indicator, children, createIndicatorArray]);
+  useEffect(() => {
+    if (indicator) createIndicatorArray();
+  }, [indicator, children, createIndicatorArray]);
 
   const handleCarouselClick = (e, direction) => {
     if (!childWidth || (typeof childWidth !== 'number')) return;
@@ -181,6 +195,7 @@ const Carousel = ({
 
 
   return <div id={carouselId} className={classes.container}>
+    <GlobalStyles styles={carouselStyles({ itemSpacing, indicator, indicatorSize, indicatorGap, indicatorPadding, iconSize })} />
     <div className={classes.carouselContainer}>
       {(buttons && LEFT_ICON) && (
         <button id={leftButtonId} onClick={(e) => handleCarouselClick(e, 'left')} className={clsx(classes.button, classes.leftButton, buttonClassName)}>
@@ -215,4 +230,4 @@ const Carousel = ({
 };
 
 
-export default Carousel;
+export default Carousel;

package/lib/components/CartaoUsuario/CartaoUsuario.js

@@ -2,7 +2,7 @@ import { ArgousAvatar } from '../';
 import { setAnotherProgramField } from '../../fieldsRedux';
 import { useStore } from '../../utils';
 import { serverAction } from '../../utils/api';
-import { Card, Typography, Grid, Button, Portal, Popper } from '@material-ui/core';
+import { Card, Typography, Grid, Button, Portal, Popper } from '@mui/material';
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { IoIosCall } from 'react-icons/io';
 import { MdMail, MdMessage } from 'react-icons/md';
@@ -71,10 +71,10 @@ function CartaoUsuario({ anchor, idUsuario }) {
       <Popper onClick={e => e.stopPropagation()} style={{ zIndex: 5 }} onMouseLeave={mouseLeave} onMouseEnter={mouseEnter} open={(!!anchor || !!localAnchor) && !!dados.dsNomeUsuario} anchorEl={anchor || localAnchor}>
         <Card variant='outlined' style={{ padding: '10px', maxWidth: '350px' }}>
           <Grid container spacing={1}>
-            <Grid item xs='auto'>
+            <Grid size='auto'>
               <ArgousAvatar style={{ width: '50px', height: '50px', margin: '10px' }} nome={dados.dsNomeUsuario} idUsuario={idUsuario || localIdUsuario} />
             </Grid>
-            <Grid item xs='auto'>
+            <Grid size='auto'>
               <Typography variant='h6' style={{ overflow: 'hidden', width: '250px', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{dados.dsNomeUsuario}</Typography>
               <Typography variant='body2' style={{ width: '250px' }}>{dados.dsFuncaoUsuario}</Typography>
               <Typography variant='caption' style={{ width: '250px' }}>{dados.dsSetor}</Typography>
@@ -85,14 +85,14 @@ function CartaoUsuario({ anchor, idUsuario }) {
               ((idUsuario && (idUsuarioLogado !== idUsuario)) || (localIdUsuario && (idUsuarioLogado !== localIdUsuario))) &&
               <React.Fragment>
                 {dados.nrRamalUsuario &&
-                  <Grid item xs>
+                  <Grid size='grow'>
                     <Button fullWidth variant='contained' href={`tel: ${dados.nrRamalUsuario}`} title={`Ramal: ${dados.nrRamalUsuario}`}><IoIosCall/>&nbsp;{dados.nrRamalUsuario}</Button>
                   </Grid>
                 }
-                <Grid item xs>
+                <Grid size='grow'>
                   <Button fullWidth variant='contained' href={`mailto: ${dados.dsEmailUsuario}`} title={dados.dsEmailUsuario}><MdMail/>&nbsp;Email</Button>
                 </Grid>
-                <Grid item xs>
+                <Grid size='grow'>
                   <Button fullWidth variant='contained' onClick={() => setAnotherProgramField('janelaChatOpen', retornaUser(), 'argousSystem')} title='Abrir chat de conversa'><MdMessage/>&nbsp;Mensagem</Button>
                 </Grid>
               </React.Fragment>

package/lib/components/Collapse/Collapse.d.ts

@@ -1,5 +1,5 @@
-import { StandardProps } from '@material-ui/core';
-import { TransitionProps } from '@material-ui/core/transitions/transition';
+import { StandardProps } from '@mui/material';
+import { TransitionProps } from '@mui/material/transitions';
 import * as React from 'react';
 
 export interface CollapseProps extends StandardProps<TransitionProps, CollapseClassKey, 'timeout'> {
@@ -57,4 +57,4 @@ export type CollapseClassKey = 'container' | 'entered' | 'hidden' | 'wrapper' |
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition#Transition-props)
  */
 
-export default function Collapse(props: CollapseProps): JSX.Element;
+export default function Collapse(props: CollapseProps): JSX.Element;