argous 1.2.246 → 1.3.2

package/lib/components/ArgousProgressBar/ArgousProgressBar.js

@@ -1,52 +1,71 @@
-import { Grid, makeStyles, Collapse, Grow, useTheme } from '@material-ui/core';
+import { Box, Grid, Collapse, Grow, useTheme } from '@mui/material';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const useStyles = makeStyles(theme => ({
-  progressContainer: {
-    '& > div': {
-      padding: '0px !important'
-    }
-  },
-  progressBorder: {
-    border: props => `3px solid ${props.borderColor || props.preset.borderColor}`,
+const selectPreset = (preset, palette) => {
+  switch (preset) {
+    case 'secondary':
+      return { fullBarColor: palette.secondary.dark, borderColor: palette.secondary.dark, indicatorColor: palette.secondary.dark, barColor: `linear-gradient(90deg, ${palette.secondary.light} 0%, ${palette.secondary.main} 50%, ${palette.secondary.dark} 100%)` };
+    case 'success':
+      return { fullBarColor: palette.success.dark, borderColor: palette.success.dark, indicatorColor: palette.success.dark, barColor: `linear-gradient(90deg, ${palette.success.light} 0%, ${palette.success.main} 50%, ${palette.success.dark} 100%)` };
+    case 'info':
+      return { fullBarColor: palette.info.dark, borderColor: palette.info.dark, indicatorColor: palette.info.dark, barColor: `linear-gradient(90deg, ${palette.info.light} 0%, ${palette.info.main} 50%, ${palette.info.dark} 100%)` };
+    case 'warning':
+      return { fullBarColor: palette.warning.dark, borderColor: palette.warning.dark, indicatorColor: palette.warning.dark, barColor: `linear-gradient(90deg, ${palette.warning.light} 0%, ${palette.warning.main} 50%, ${palette.warning.dark} 100%)` };
+    case 'danger':
+      return { fullBarColor: palette.error.dark, borderColor: palette.error.dark, indicatorColor: palette.error.dark, barColor: `linear-gradient(90deg, ${palette.error.light} 0%, ${palette.error.main} 50%, ${palette.error.dark} 100%)` };
+    case 'hot':
+      return { fullBarColor: 'rgba(244,67,54,1)', borderColor: '#d84315', indicatorColor: '#f44336', barColor: 'linear-gradient(90deg, rgba(255,235,59,1) 0%, rgba(255,152,0,1) 50%, rgba(244,67,54,1) 100%)' };
+    case 'cold':
+      return { fullBarColor: '#673ab7', borderColor: '#5e35b1', indicatorColor: '#512da8', barColor: 'linear-gradient(90deg, #2196f3 0%, #3f51b5 50%, #673ab7 100%)' };
+    default:
+      return { fullBarColor: palette.primary.dark, borderColor: palette.primary.dark, indicatorColor: palette.primary.dark, barColor: `linear-gradient(90deg, ${palette.primary.light} 0%, ${palette.primary.main} 50%, ${palette.primary.dark} 100%)` };
+  }
+};
+
+export default function ProgressBar({ valueLabel, valueSuffix, maxValueSuffix, maxValueLabel, value, maxValue, rightIndicatorColor, topIndicatorColor, borderColor, barColor, fullBarColor, preset, compact, className }) {
+  const theme = useTheme();
+  const percnt = maxValue ? value * 100 / maxValue : 0;
+  const selectedPreset = selectPreset(preset, theme.palette);
+  const progressBorderSx = {
+    border: `3px solid ${borderColor || selectedPreset.borderColor}`,
     borderRadius: '15px',
-  },
-  progressBack: {
+  };
+  const progressBackSx = {
     height: '20px',
     padding: '2px',
     position: 'relative'
-  },
-  progressBar: {
+  };
+  const progressBarSx = {
     width: '100%',
     height: '100%',
     borderRadius: '10px',
-    background: props => props.percnt === 0 ? theme.palette.background.paper : props.percnt > 100 ? props.fullBarColor || props.preset.fullBarColor : props.barColor || props.preset.barColor,
-  },
-  progressCover: {
+    background: percnt === 0 ? theme.palette.background.paper : percnt > 100 ? fullBarColor || selectedPreset.fullBarColor : barColor || selectedPreset.barColor,
+  };
+  const progressCoverSx = {
     height: '100%',
     transition: '300ms',
-    background: props => props.percnt > 99 ? 'transparent' : theme.palette.background.paper,
+    background: percnt > 99 ? 'transparent' : theme.palette.background.paper,
     position: 'absolute',
     top: '0px',
     right: '0',
-    width: props => `${100 - props.percnt}%`,
+    width: `${100 - percnt}%`,
     minWidth: '5%',
     maxWidth: '95%',
-    borderRadius: '0px 10px 10px 0px;',
-  },
-  topIndicator: {
+    borderRadius: '0px 10px 10px 0px',
+  };
+  const topIndicatorSx = {
     zIndex: 1,
     transition: '300ms',
     display: 'block',
     position: 'relative',
     width: 'max-content',
     margin: '0 2px',
-    paddingLeft: props => props.percnt > 94 ? '94%' : props.percnt < 5 ? '0' : `${props.percnt}%`,
-    transform: props => props.percnt === 0 ? `translate(${props.compact ? '-25px, 1px' : '-10px, 0px'})` : props.percnt > 5 ? `translate(${props.compact ? '-30px, 1px' : '-15px, 0px'})` : '',
+    paddingLeft: percnt > 94 ? '94%' : percnt < 5 ? '0' : `${percnt}%`,
+    transform: percnt === 0 ? `translate(${compact ? '-25px, 1px' : '-10px, 0px'})` : percnt > 5 ? `translate(${compact ? '-30px, 1px' : '-15px, 0px'})` : '',
     '& p': {
       margin: '0 0 5px',
-      border: props => props.compact ? 0 : `2px solid ${props.topIndicatorColor || props.preset.indicatorColor}`,
+      border: compact ? 0 : `2px solid ${topIndicatorColor || selectedPreset.indicatorColor}`,
       padding: '0px 3px',
       borderRadius: '5px',
       minWidth: '25px',
@@ -62,20 +81,20 @@ const useStyles = makeStyles(theme => ({
       left: '0px',
       width: '0px',
       height: '0px',
-      borderTop: props => `5px solid ${props.topIndicatorColor || props.preset.indicatorColor}`,
+      borderTop: `5px solid ${topIndicatorColor || selectedPreset.indicatorColor}`,
       borderLeft: '10px solid transparent',
       borderRight: '10px solid transparent',
       display: 'block',
-      opacity: props => props.compact ? 0 : 1
+      opacity: compact ? 0 : 1
     },
-  },
-  rightIndicator: {
+  };
+  const rightIndicatorSx = {
     display: 'block',
     position: 'relative',
     width: 'max-content',
     '& p': {
       margin: '0 7px 0',
-      border: props => `2px solid ${props.rightIndicatorColor || props.preset.indicatorColor}`,
+      border: `2px solid ${rightIndicatorColor || selectedPreset.indicatorColor}`,
       padding: '0px 3px',
       borderRadius: '5px',
       minWidth: '25px',
@@ -92,62 +111,32 @@ const useStyles = makeStyles(theme => ({
       height: '0px',
       borderTop: '10px solid transparent',
       borderBottom: '10px solid transparent',
-      borderRight: props => `8px solid ${props.rightIndicatorColor || props.preset.indicatorColor}`,
+      borderRight: `8px solid ${rightIndicatorColor || selectedPreset.indicatorColor}`,
     },
-  },
-  collapse: {
-    height: props => props.compact ? '0px !important' : undefined
-  }
-}));
-
-const selectPreset = (preset, palette) => {
-  switch (preset) {
-    case 'secondary':
-      return { fullBarColor: palette.secondary.dark, borderColor: palette.secondary.dark, indicatorColor: palette.secondary.dark, barColor: `linear-gradient(90deg, ${palette.secondary.light} 0%, ${palette.secondary.main} 50%, ${palette.secondary.dark} 100%)` };
-    case 'success':
-      return { fullBarColor: palette.success.dark, borderColor: palette.success.dark, indicatorColor: palette.success.dark, barColor: `linear-gradient(90deg, ${palette.success.light} 0%, ${palette.success.main} 50%, ${palette.success.dark} 100%)` };
-    case 'info':
-      return { fullBarColor: palette.info.dark, borderColor: palette.info.dark, indicatorColor: palette.info.dark, barColor: `linear-gradient(90deg, ${palette.info.light} 0%, ${palette.info.main} 50%, ${palette.info.dark} 100%)` };
-    case 'warning':
-      return { fullBarColor: palette.warning.dark, borderColor: palette.warning.dark, indicatorColor: palette.warning.dark, barColor: `linear-gradient(90deg, ${palette.warning.light} 0%, ${palette.warning.main} 50%, ${palette.warning.dark} 100%)` };
-    case 'danger':
-      return { fullBarColor: palette.error.dark, borderColor: palette.error.dark, indicatorColor: palette.error.dark, barColor: `linear-gradient(90deg, ${palette.error.light} 0%, ${palette.error.main} 50%, ${palette.error.dark} 100%)` };
-    case 'hot':
-      return { fullBarColor: 'rgba(244,67,54,1)', borderColor: '#d84315', indicatorColor: '#f44336', barColor: 'linear-gradient(90deg, rgba(255,235,59,1) 0%, rgba(255,152,0,1) 50%, rgba(244,67,54,1) 100%)' };
-    case 'cold':
-      return { fullBarColor: '#673ab7', borderColor: '#5e35b1', indicatorColor: '#512da8', barColor: 'linear-gradient(90deg, #2196f3 0%, #3f51b5 50%, #673ab7 100%)' };
-    default:
-      return { fullBarColor: palette.primary.dark, borderColor: palette.primary.dark, indicatorColor: palette.primary.dark, barColor: `linear-gradient(90deg, ${palette.primary.light} 0%, ${palette.primary.main} 50%, ${palette.primary.dark} 100%)` };
-  }
-};
-
-export default function ProgressBar({ valueLabel, valueSuffix, maxValueSuffix, maxValueLabel, value, maxValue, rightIndicatorColor, topIndicatorColor, borderColor, barColor, fullBarColor, preset, compact, className }) {
-  const theme = useTheme();
-  const percnt = maxValue ? value * 100 / maxValue : 0;
-  const classes = useStyles({ percnt, rightIndicatorColor, topIndicatorColor, borderColor, barColor, fullBarColor, preset: selectPreset(preset, theme.palette), compact });
+  };
   return (
-    <Grid container spacing={2} className={`${classes.progressContainer} ${className}`} style={{ marginTop: compact ? '-10px' : undefined }}>
-      <Grid item xs={10} style={{ maxWidth: '80%', flexBasis: '80%' }}>
-        <Collapse in={value > 0} className={classes.collapse}>
-          <div className={classes.topIndicator}>
+    <Grid container spacing={2} className={className} sx={{ marginTop: compact ? '-10px' : undefined, '& > div': { padding: '0px !important' } }}>
+      <Grid style={{ maxWidth: '80%', flexBasis: '80%' }} size={10}>
+        <Collapse in={value > 0} sx={{ height: compact ? '0px !important' : undefined }}>
+          <Box sx={topIndicatorSx}>
             <p title={valueLabel || 'Minutos Realizados'}>{value}{valueSuffix}</p>
-          </div>
+          </Box>
         </Collapse>
       </Grid>
-      <Grid item xs={2} style={{ maxWidth: '20%', flexBasis: '20%' }}></Grid>
-      <Grid item xs={10} style={{ maxWidth: '80%', flexBasis: '80%' }}>
-        <div item title={`Porcentagem ${percnt.toFixed(2)}%`} className={classes.progressBorder}>
-          <div className={classes.progressBack}>
-            <div className={classes.progressBar}></div>
-            <div className={classes.progressCover}></div>
-          </div>
-        </div>
+      <Grid style={{ maxWidth: '20%', flexBasis: '20%' }} size={2}></Grid>
+      <Grid style={{ maxWidth: '80%', flexBasis: '80%' }} size={10}>
+        <Box title={`Porcentagem ${percnt.toFixed(2)}%`} sx={progressBorderSx}>
+          <Box sx={progressBackSx}>
+            <Box sx={progressBarSx}></Box>
+            <Box sx={progressCoverSx}></Box>
+          </Box>
+        </Box>
       </Grid>
-      <Grid item xs={2} style={{ maxWidth: '20%', flexBasis: '20%' }}>
+      <Grid style={{ maxWidth: '20%', flexBasis: '20%' }} size={2}>
         <Grow in={maxValue > 0}>
-          <div className={classes.rightIndicator}>
+          <Box sx={rightIndicatorSx}>
             <p title={maxValueLabel || 'Minutos Previstos'}>{maxValue}{maxValueSuffix}</p>
-          </div>
+          </Box>
         </Grow>
       </Grid>
     </Grid>
@@ -164,4 +153,4 @@ ProgressBar.propTypes = {
   fullBarColor: PropTypes.string,
   compact: PropTypes.bool,
   preset: PropTypes.oneOf(['default', 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'hot', 'cold'])
-};
+};

package/lib/components/ArgousSimpleTable/ArgousSimpleTable.js

@@ -1,12 +1,11 @@
 import AgPagination from '../ArgousPagination';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
 import React, { useState, useEffect } from 'react';
 
 /**
@@ -14,19 +13,11 @@ import React, { useState, useEffect } from 'react';
  */
 const ArgousSimpleTable = (props) => {
 
-  const useStyles = makeStyles({
-    table: {
-      minWidth: 650,
-    },
-  });
-
   const [ctrlPgn, setCtrlPgn] = useState({ acao: '', pgAtl: 1, qtRegs: 0 });
   const [iniciado, setIniciado] = useState(false);
   const [tpOrdenacao, setTpOrdenacao] = useState({ tpOrdem: 'D' });
   const [listaChildrens, setListaChildrens] = useState([]);
 
-  const classes = useStyles();
-
   function getCellContent(vlr, line) {
 
     if (props.columnOptions) {
@@ -114,13 +105,16 @@ const ArgousSimpleTable = (props) => {
       setListaChildrens(listaFilhos());
       setIniciado(true);
     }
+    // Pagination changes intentionally drive this effect; including the legacy
+    // props object would retrigger it on every render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ctrlPgn]);
 
   return (
     <div>
       <TableContainer component={Paper}>
 
-        <Table className={classes.table} size='small' style={{ tableLayout: 'fixed', width: '100%' }}>
+        <Table size='small' sx={{ minWidth: 650 }} style={{ tableLayout: 'fixed', width: '100%' }}>
           <TableHead>
             <TableRow>
               {props.head.map((coluna, index) => {
@@ -238,4 +232,4 @@ const ArgousSimpleTable = (props) => {
   );
 };
 
-export default ArgousSimpleTable;
+export default ArgousSimpleTable;

package/lib/components/AutoComplete/AutoComplete.js

@@ -3,7 +3,6 @@ import { createField, getField, setField } from '../../fieldsRedux';
 import { serverAction } from '../../utils/api';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { Scrollbars } from 'react-custom-scrollbars';
 
 /**
  * @deprecated 
@@ -141,7 +140,7 @@ class AutoComplete extends Component {
               {typeMessage > -1 &&
 
                 <div className={dropdownClassName ? dropdownClassName : 'argous-list-dropdown'} style={{ height: !showOnlyResults ? resultHeight : typeMessage === 0 ? resultHeight : 0, maxHeight: dropdownMaxHeight }}>
-                  <Scrollbars>
+                  <div style={{ height: '100%', overflowY: 'auto' }}>
                     {typeMessage > 0 && !showOnlyResults && (
                       <div className='padding-top-sm padding-bottom-sm color999 text-center'>
                         {typeMessage === 1 && 'Escreva para começar a buscar'}
@@ -158,7 +157,7 @@ class AutoComplete extends Component {
                       onClick={this.selectResult}
                       className='reset-margin'
                     />
-                  </Scrollbars>
+                  </div>
                 </div>
               }
             </td>

package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.d.ts

@@ -1,8 +1,7 @@
-import { TextFieldProps } from '@material-ui/core';
-import { AutocompleteProps, AutocompleteChangeDetails } from '@material-ui/lab';
+import { TextFieldProps, AutocompleteProps, AutocompleteChangeDetails } from '@mui/material';
 import * as React from 'react';
 
-export interface AutoCompleteFavoritesProps extends Omit<AutocompleteProps<any, false, false, false>, 'getOptionLabel'>{
+export interface AutoCompleteFavoritesProps extends Omit<AutocompleteProps<any, false, false, false>, 'getOptionLabel' | 'onChange'>{
   /**
    * Valor do campo
    */
@@ -98,4 +97,4 @@ export interface AutoCompleteFavoritesProps extends Omit<AutocompleteProps<any,
 
 declare function AutoCompleteFavorites(props: AutoCompleteFavoritesProps): JSX.Element
 
-export default AutoCompleteFavorites;
+export default AutoCompleteFavorites;