argous 1.2.246 → 1.3.2

package/lib/components/Programa/PageCodeEasterEgg.js

@@ -1,37 +1,34 @@
-import { makeStyles, Slide, Snackbar, Typography } from '@material-ui/core';
+import { Box, Slide, Snackbar, Typography } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 
-const useStyles = makeStyles(theme => ({
-  container: {
-    display: 'flex',
-    overflow: 'hidden',
-    borderRadius: 4,
-    color: theme.palette.type === 'light' ? '#fff' : '#000',
-    background: `linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(${theme.palette.type === 'light' ? '66,66,66' : '255,255,255' },1) 3%)`
-  },
-  messageDiv: {
-    padding: '.5rem 1rem'
-  },
-  gradientStripe: {
-    width: '1rem',
-    background: 'linear-gradient(180deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%)'
-  }
-}));
+const containerSx = theme => ({
+  display: 'flex',
+  overflow: 'hidden',
+  borderRadius: 4,
+  color: theme.palette.mode === 'light' ? '#fff' : '#000',
+  background: `linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(${theme.palette.mode === 'light' ? '66,66,66' : '255,255,255' },1) 3%)`
+});
+const messageDivSx = {
+  padding: '.5rem 1rem'
+};
+const gradientStripeSx = {
+  width: '1rem',
+  background: 'linear-gradient(180deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%)'
+};
 
 
 const SnackbarTransition = props => <Slide {...props} direction='up' />;
 
 const PageCodeEasterEgg = ({ code, usuarioLogado }) => {
-    
-  const classes = useStyles();
+
   const [open, setOpen] = useState(false);
-    
+
   function easterEggListener(e) {
     const teamMember = usuarioLogado?.idFornecedorInterno === 1; // Membro da TI
     if (teamMember && code && !open && e.ctrlKey && e.shiftKey && e.key === 'Z') setOpen(true);
   }
-  
+
   useEffect(() => {
     document.addEventListener('keydown', easterEggListener, false);
     return () => document.removeEventListener('keydown', easterEggListener, false);
@@ -40,27 +37,31 @@ const PageCodeEasterEgg = ({ code, usuarioLogado }) => {
 
   const handleClose = _ => setOpen(false);
 
-  
-  return <Snackbar 
-    open={open} 
-    onClose={handleClose}
-    autoHideDuration={5000}
-    TransitionComponent={SnackbarTransition}
-    anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-  >
-    <div className={classes.container}>
-      <div className={classes.gradientStripe} />
-      <div className={classes.messageDiv}>
-        <Typography variant='subtitle1'>Hi, dev!</Typography>
-        <Typography variant='body1'>{`The page code is ${code}.`}</Typography>
-      </div>
-    </div>
-  </Snackbar>;
+
+  return (
+    <Snackbar
+      open={open}
+      onClose={handleClose}
+      autoHideDuration={5000}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+      slots={{
+        transition: SnackbarTransition
+      }}
+    >
+      <Box sx={containerSx}>
+        <Box sx={gradientStripeSx} />
+        <Box sx={messageDivSx}>
+          <Typography variant='subtitle1'>Hi, dev!</Typography>
+          <Typography variant='body1'>{`The page code is ${code}.`}</Typography>
+        </Box>
+      </Box>
+    </Snackbar>
+  );
 };
 
 
-const mapStateToProps = (state) => ({ 
-  usuarioLogado: state.argous.usuarioLogado 
+const mapStateToProps = (state) => ({
+  usuarioLogado: state.argous.usuarioLogado
 });
 
-export default connect(mapStateToProps)(PageCodeEasterEgg);
+export default connect(mapStateToProps)(PageCodeEasterEgg);

package/lib/components/Programa/Programa.d.ts

@@ -1,6 +1,8 @@
-import { BoxProps } from '@material-ui/core';
+import { TabArray } from './Tab';
+import { BoxProps } from '@mui/material';
 import * as React from 'react';
 
+
 export interface ProgramaProps extends BoxProps {
   code: string,
   children: React.ReactNode,
@@ -12,7 +14,20 @@ export interface ProgramaProps extends BoxProps {
   hideTitle: boolean, 
   programDidMount: () => void,
   bfHabNavegador: boolean,
-  bfAbas: Array<any>,
+  /**
+   * Abas para a barra de ferramentas
+   * 
+   * Array de arrays
+   * 
+   * Array da aba: [('Label' || undefined), ('active' || undefined), ('alias' || undefined), (Icon || undefined)]
+   * 
+   * - [0] Label: Rótulo da aba.
+   * - [1] Active: Quando 'active' inicia o programa com essa aba selecionada.
+   * - [2] Alias: O nome que será recebido na função 'bfExecutaFuncao'. Caso não forneça esse nome a função retorna 'T[index]'.
+   * - [3] Icon: JSX do ícone da aba.
+   * 
+   */
+  bfAbas?: Array<TabArray>,
   bfFerramentas: Array<any>,
   bfExecutaFuncao: (prm: string) => void,
   bfNmFuncaoVoltar: string,
@@ -30,4 +45,4 @@ export interface ProgramaProps extends BoxProps {
 
 declare function Programa(props: ProgramaProps): JSX.Element
 
-export default Programa;
+export default Programa;

package/lib/components/Programa/Programa.js

@@ -1,8 +1,10 @@
 import BarraFerramentas from './../BarraFerramentas';
 import PageCodeEasterEgg from './PageCodeEasterEgg';
+import TabNavigationRail from './TabNavigationRail';
 import * as argous from '../../actions';
 import { getProgram, toggleFavorite } from '../../api';
-import { Box, CircularProgress, Paper, Typography, useTheme } from '@material-ui/core';
+import { Box, CircularProgress, Paper, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { isArray } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { FaExclamationTriangle } from 'react-icons/fa';
@@ -53,11 +55,25 @@ function Programa({
 }) {
 
   const theme = useTheme();
+  const xs = useMediaQuery(theme.breakpoints.only('xs'));
+
   const [programa, setPrograma] = useState({});
+  const [selectedTab, setSelectedTab] = useState([]);
   const [favoriteAnimationInsert, setFavoriteAnimationInsert] = useState(false);
   const [favoriteAnimationRemove, setFavoriteAnimationRemove] = useState(false);
   const [toolbarLoading/*, setToolbarLoading*/] = useState(initialStateToolbarLoading);
 
+  const tabNavigationRailRule = (!xs && isArray(bfAbas) && (bfAbas?.length > 1));
+
+  const styles = { 
+    bodyContainer: { 
+      display: 'flex', 
+      gap: 10 
+    }, 
+    childrenContainer: { 
+      width: (tabNavigationRailRule) ? 'calc(100% - 58px)' : '100%' 
+    } 
+  };
 
   useEffect(() => {
     (async () => {
@@ -109,7 +125,12 @@ function Programa({
   if (bfTitulo === undefined) bfTitulo = pnlTitle;
 
   return (
-    <Box fontFamily='Raleway, Helvetica, Arial, sans-serif' className={className} {...props}>
+    <Box
+      className={className}
+      {...props}
+      sx={[{
+        fontFamily: 'Raleway, Helvetica, Arial, sans-serif'
+      }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}>
       {!hideTitle &&
         <span style={{ cursor: 'default', overflow: 'hidden', display: 'block', marginBottom: '2px', color: theme.palette.text.primary }}>
           <h2 className='reset-margin pull-left' style={{ color: theme.palette.text.primary }}>
@@ -139,18 +160,50 @@ function Programa({
           favoriteAnimationRemove={favoriteAnimationRemove}
           threads={threads}
           currentProgram={code}
-          {...{ addWidget, habWidget, snAnotacaoPrograma, openAnnotations, toolbarLoading }}
+          {...{ 
+            addWidget, 
+            habWidget, 
+            snAnotacaoPrograma, 
+            openAnnotations, 
+            toolbarLoading, 
+            selectedTab, 
+            setSelectedTab 
+          }} 
         />
         {dsErro ? (
-          <Box textAlign='center' >
+          <Box sx={{
+            textAlign: 'center'
+          }} >
             <FaExclamationTriangle style={{ color: '#ED1651', width: '90px', height: '90px' }} />
             <Typography variant='h6'>{dsErro}</Typography>
           </Box>
         ) : (!pnlTitle || loading || !loaded) ? (
-          <Box position='relative' top={20} left='50%' z-index={20} height={80} width={0} marginLeft='-20px'>
+          <Box
+            z-index={20}
+            sx={{
+              position: 'relative',
+              top: 20,
+              left: '50%',
+              height: 80,
+              width: 0,
+              marginLeft: '-20px'
+            }}>
             <CircularProgress disableShrink/>
           </Box>
-        ) : children}
+        ) : (
+          <div style={styles.bodyContainer}>
+            {(tabNavigationRailRule) && (
+              <TabNavigationRail 
+                tabs={bfAbas} 
+                executesFunction={bfExecutaFuncao} 
+                {...{ selectedTab, setSelectedTab }} 
+              />
+            )}
+            <div style={styles.childrenContainer}>
+              {children}
+            </div>
+          </div>
+        )}
       </Paper>
       <PageCodeEasterEgg {...{ code }} />
     </Box>
@@ -200,4 +253,4 @@ Programa.propTypes = {
   // permissoes: PropTypes.object,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Programa);
+export default connect(mapStateToProps, mapDispatchToProps)(Programa);

package/lib/components/Programa/Tab.ts

@@ -0,0 +1,8 @@
+import { IconType } from 'react-icons';
+
+export interface TabArray { 
+  [0]: (string | undefined), 
+  [1]?: (string | undefined), 
+  [2]?: (string | undefined), 
+  [3]?: (IconType | undefined) 
+}

package/lib/components/Programa/TabNavigationRail.js

@@ -0,0 +1,96 @@
+import { alpha, IconButton, Paper, Tooltip, useTheme } from '@mui/material';
+import { isArray, isEqual, isNumber } from 'lodash';
+import React from 'react';
+import { IoSettings } from 'react-icons/io5';
+
+
+export const TAB_LABEL_INDEX = 0;
+export const TAB_ACTIVE_INDEX = 1;
+export const TAB_ALIAS_INDEX = 2;
+export const TAB_ICON_INDEX = 3;
+
+const BUTTON_SIZE = 36;
+
+
+const TabNavigationRail = ({ 
+  tabs = [], 
+  selectedTab = [], 
+  setSelectedTab = () => '', 
+  executesFunction = () => '' 
+}) => {
+
+  const theme = useTheme();
+
+  const styles = { 
+    rail: { 
+      display: 'flex', 
+      flexDirection: 'column', 
+      alignItems: 'center', 
+      height: 'fit-content', 
+      gap: 5, 
+      padding: 5, 
+      borderRadius: 10, 
+      border: `1px solid ${theme.palette.divider}`, 
+      backgroundColor: theme.palette.background.paper 
+    }, 
+    button: { 
+      width: BUTTON_SIZE, 
+      height: BUTTON_SIZE, 
+      borderRadius: 5, 
+      color: theme.palette.text.secondary, 
+      border: '1px solid transparent', 
+      transition: 'color 100ms ease-in-out, border-color 100ms ease-in-out, background-color 100ms ease-in-out' 
+    }, 
+    activeButton: { 
+      color: theme.palette.primary.main, 
+      border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`, 
+      backgroundColor: alpha(theme.palette.primary.main, 0.1) 
+    }, 
+    icon: { 
+      fontSize: 20 
+    } 
+  };
+
+  const navigate = (index, tab) => {
+
+    const alias = tab?.[TAB_ALIAS_INDEX];
+
+    if (typeof setSelectedTab === 'function') setSelectedTab(tab);
+    if (isNumber(index)) executesFunction(alias || `T${index}`);
+  };
+
+
+  return (
+    <Paper component='nav' elevation={1} sx={styles.rail}>
+      {(isArray(tabs)) && tabs.map((tab, tabIndex) => {
+
+        const label = tab?.[TAB_LABEL_INDEX];
+        const Icon = tab?.[TAB_ICON_INDEX];
+        const active = isEqual(tab, selectedTab);
+
+
+        return (
+          <Tooltip key={`${label || 'tab'}-${tabIndex}`} title={label || ''} placement='right'>
+            <IconButton 
+              size='small' 
+              aria-label={label} 
+              aria-current={(active) ? 'page' : undefined} 
+              onClick={() => navigate(tabIndex, tab)} 
+              sx={{ ...styles.button, ...((active) ? styles.activeButton : {}) }}
+            >
+              {(Icon) && (
+                <Icon style={styles.icon} />
+              )}
+              {(!Icon) && (
+                <IoSettings style={styles.icon} />
+              )}
+            </IconButton>
+          </Tooltip>
+        );
+      })}
+    </Paper>
+  );
+};
+
+
+export default TabNavigationRail;

package/lib/components/Stepper/Stepper.d.ts

@@ -1,4 +1,4 @@
-import { OverrideProps, OverridableComponent } from '@material-ui/core/OverridableComponent';
+import { OverrideProps, OverridableComponent } from '@mui/material/OverridableComponent';
 import * as React from 'react';
 import { IconType } from 'react-icons';