argous 1.2.247 → 1.3.3

package/lib/components/Stepper/Stepper.js

@@ -1,11 +1,15 @@
-import { Box, Button, DialogActions, Divider, ListItem, ListItemIcon, ListItemText, MobileStepper, Paper, Step, StepButton, StepConnector, StepLabel, Stepper as MuiStepper, Typography, useMediaQuery, useTheme, withStyles } from '@material-ui/core';
-import clsx from 'clsx';
+import { Box, Button, DialogActions, Divider, GlobalStyles, ListItem, ListItemIcon, ListItemText, MobileStepper, Paper, Step, StepButton, StepConnector, StepLabel, Stepper as MuiStepper, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { stepConnectorClasses } from '@mui/material/StepConnector';
+import { styled } from '@mui/material/styles';
+import { clsx } from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { IconContext } from 'react-icons/lib';
 import { MdCheck, MdChevronLeft, MdChevronRight } from 'react-icons/md';
 
-const ColorlibConnector = withStyles(theme => ({
-  alternativeLabel: ({ orientation }) => orientation === 'vertical' ? {
+const ColorlibConnector = styled(StepConnector, {
+  shouldForwardProp: prop => prop !== 'customOrientation'
+})(({ theme, customOrientation }) => ({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: customOrientation === 'vertical' ? {
     top: -28,
     transform: 'rotate(90deg)',
     left: 'calc(-50% + 40px)',
@@ -16,18 +20,18 @@ const ColorlibConnector = withStyles(theme => ({
   } : {
     top: 22,
   },
-  active: {
-    '& $line': {
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
       backgroundPosition: 'left bottom'
     },
   },
-  completed: {
-    '& $line': {
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
       backgroundPosition: 'left bottom',
       backgroundImage: `linear-gradient( to right, ${theme.palette.secondary.main} 0%,${theme.palette.secondary.main} 50%,#eaeaf0 51%, #eaeaf0 100%)`,
     },
   },
-  line: {
+  [`& .${stepConnectorClasses.line}`]: {
     height: 3,
     border: 0,
     backgroundImage: `linear-gradient( to right, ${theme.palette.secondary.main} 0%,${theme.palette.primary.main} 50%,#eaeaf0 51%, #eaeaf0 100%)`,
@@ -36,91 +40,101 @@ const ColorlibConnector = withStyles(theme => ({
     transition: 'background-position 500ms ease',
     borderRadius: 1,
   }
-}))(StepConnector);
+}));
 
-const ColorlibStepIcon = withStyles(theme => ({
-  root: {
-    zIndex: 1,
-    color: '#fff',
-    width: 50,
-    height: 50,
-    display: 'flex',
-    borderRadius: '50%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    fontSize: 24,
-    backgroundColor: theme.palette.type === 'light' ? '#ccc' : '#838383',
-    transition: 'all 400ms ease 100ms'
-  },
-  initial: theme.palette.type === 'light' ? {
-    backgroundColor: ({ ambienteTeste }) => ambienteTeste ? '#ffc7a2' : '#9acbb8'
-  } : {
-    backgroundColor: ({ ambienteTeste }) => ambienteTeste ? '#8b6751' : '#507265'
-  },
-  active: {
-    backgroundColor: ({ ambienteTeste }) => ambienteTeste ? '#f5781e !important' : '#00995D !important',
-    boxShadow: theme.shadows[5],
-  },
-  completed: {
-    backgroundColor: '#2979ff !important',
-  },
-  error: {
-    backgroundColor: '#f44336 !important',
-  },
-  icon: {
-    '& path': {
-      stroke: '#FFF'
-    }
-  }
-}))(({ initial, active, completed, icon, classes, error }) => (
-  <div
-    className={clsx(classes.root, {
-      [classes.initial]: initial,
-      [classes.active]: active,
-      [classes.completed]: completed,
-      [classes.error]: error,
-    })}
-  >
-    <IconContext.Provider value={{ className: classes.icon }} >
-      {icon}
-    </IconContext.Provider>
-  </div>
-));
+const ColorlibStepIcon = ({ initial, active, completed, icon, error, ambienteTeste }) => {
+  const theme = useTheme();
+  const initialBackground = theme.palette.mode === 'light'
+    ? ambienteTeste ? '#ffc7a2' : '#9acbb8'
+    : ambienteTeste ? '#8b6751' : '#507265';
+  const backgroundColor = error
+    ? '#f44336 !important'
+    : completed
+      ? '#2979ff !important'
+      : active
+        ? ambienteTeste ? '#f5781e !important' : '#00995D !important'
+        : initial
+          ? initialBackground
+          : theme.palette.mode === 'light' ? '#ccc' : '#838383';
+
+  return (
+    <Box
+      sx={{
+        zIndex: 1,
+        color: '#fff',
+        width: 50,
+        height: 50,
+        display: 'flex',
+        borderRadius: '50%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: 24,
+        backgroundColor,
+        transition: 'all 400ms ease 100ms',
+        boxShadow: active ? theme.shadows[5] : undefined,
+        '& svg path': {
+          stroke: '#FFF'
+        }
+      }}
+    >
+      <IconContext.Provider value={{}}>
+        {icon}
+      </IconContext.Provider>
+    </Box>
+  );
+};
+
+const stepperClasses = {
+  root: 'argous-stepper-root',
+  header: 'argous-stepper-header',
+  caption: 'argous-stepper-caption',
+  selectedCaption: 'argous-stepper-selected-caption',
+  stepper: 'argous-stepper-stepper',
+  subDescription: 'argous-stepper-sub-description',
+  icon: 'argous-stepper-icon',
+  mobileDivider: 'argous-stepper-mobile-divider',
+  stepLabel: 'argous-stepper-step-label',
+};
+
+const mergeClasses = (defaultClasses, overrideClasses = {}) => Object.keys(defaultClasses).reduce((acc, key) => ({
+  ...acc,
+  [key]: overrideClasses[key] || defaultClasses[key],
+}), {});
 
-const stepperStyles = theme => ({
-  root: {
+const stepperStyles = ({ orientation }) => theme => ({
+  [`.${stepperClasses.root}`]: {
     '&>div': {
       minHeight: 'calc(100vh - 50px)'
     }
   },
-  header: {
+  [`.${stepperClasses.header}`]: {
     background: theme.palette.background.default,
     marginTop: -10,
   },
-  caption: {
+  [`.${stepperClasses.caption}`]: {
     display: 'block',
     textAlign: 'center',
     color: theme.palette.text.hint
   },
-  selectedCaption: {
+  [`.${stepperClasses.selectedCaption}`]: {
     color: theme.palette.text.secondary
   },
-  stepper: {
-    padding: ({ orientation }) => orientation === 'vertical' ? '0 0 0 136px' : '',
+  [`.${stepperClasses.stepper}`]: {
+    padding: orientation === 'vertical' ? '0 0 0 136px' : '',
     [theme.breakpoints.down('sm')]: {
       padding: 0
     },
     '&>div': {
       display: 'flex',
-      padding: ({ orientation }) => orientation === 'vertical' ? '0 0 30px' : '',
+      padding: orientation === 'vertical' ? '0 0 30px' : '',
       '&>button': {
         '&>span:nth-child(1)': {
-          flexDirection: ({ orientation }) => orientation === 'vertical' ? 'row' : 'column'
+          flexDirection: orientation === 'vertical' ? 'row' : 'column'
         }
       }
     }
   },
-  subDescription: {
+  [`.${stepperClasses.subDescription}`]: {
     minWidth: 140,
     display: 'flex',
     alignItems: 'center',
@@ -129,34 +143,34 @@ const stepperStyles = theme => ({
     top: 17,
     left: -148,
   },
-  icon: {
+  [`.${stepperClasses.icon}`]: {
     fontSize: theme.typography.fontSize * 2,
     '& path': {
       stroke: theme.palette.text.primary
     }
   },
-  mobileDivider: {
+  [`.${stepperClasses.mobileDivider}`]: {
     marginBottom: theme.spacing(2)
   },
-  stepLabel: {
+  [`.${stepperClasses.stepLabel}`]: {
     '&>span:nth-child(2)': {
-      margin: ({ orientation }) => orientation === 'vertical' ? '0 0 0 8px' : '',
+      margin: orientation === 'vertical' ? '0 0 0 8px' : '',
       '&>span:nth-child(1)': {
-        margin: ({ orientation }) => orientation === 'vertical' ? 0 : ''
+        margin: orientation === 'vertical' ? 0 : ''
       }
     },
   }
 });
 
-const Stepper = ({ 
-  children, 
-  classes = {}, 
-  steps = [], 
-  onClick = (index) => (event) => void(index, event), 
-  onNext = (event) => void(event), 
-  onPrevious = (event) => void(event), 
-  onFinish = (event) => void(event), 
-  maxStep: maxStepProps, 
+const Stepper = ({
+  children,
+  classes: classesProp = {},
+  steps = [],
+  onClick = (index) => (event) => void(index, event),
+  onNext = (event) => void(event),
+  onPrevious = (event) => void(event),
+  onFinish = (event) => void(event),
+  maxStep: maxStepProps,
   activeStep = 0,
   errors = [],
   component: Component = 'div',
@@ -172,126 +186,144 @@ const Stepper = ({
   ...props
 }) => {
   const theme = useTheme();
+  const classes = mergeClasses(stepperClasses, classesProp);
   const maxSteps = steps.length;
   const maxStep = maxStepProps || steps.length - 1;
   const mobile = useMediaQuery(theme.breakpoints.down(Math.max(maxSteps * 100, theme.breakpoints.values.sm)));
   const ambienteTeste = JSON.parse(window.localStorage.getItem('ambienteTeste'));
   const [initialStep, setInitialStep] = useState(-1);
-  useEffect(() => (activeStep > initialStep && showProgress) && setInitialStep(activeStep), [activeStep, initialStep, showProgress]);
+  useEffect(() => {
+    if (activeStep > initialStep && showProgress) setInitialStep(activeStep);
+  }, [activeStep, initialStep, showProgress]);
 
-  return <Component {...props}>
-    {mobile && orientation !== 'vertical' ? (
-      <Paper square elevation={0}>
-        <ListItem dense className={classes.header}>
-          <ListItemIcon className={classes.icon}>{steps[activeStep][0]}</ListItemIcon>
-          <ListItemText primary={steps[activeStep][1]} secondary={steps[activeStep][2]}/>
-        </ListItem>
-        <Divider className={classes.mobileDivider}/>
-      </Paper>
-    ) : (
-      <MuiStepper 
-        className={classes.stepper} 
-        alternativeLabel 
-        activeStep={activeStep} 
-        orientation={orientation}
-        connector={<ColorlibConnector />}
-      >
-        {steps.map(([icon, label, description, subDescription], i) => (
-          <Step key={label}>
-            {orientation === 'vertical' && subDescription &&
-              <div className={classes.subDescription}>
-                <Typography 
-                  variant='caption' 
-                  className={clsx(classes.caption, { [classes.selectedCaption]: activeStep >= i })}>
-                  {subDescription}
-                </Typography>
-              </div>
-            }
-            <StepButton 
-              onClick={onClick(i)}
-              disabled={i > maxStep} 
-              optional={
-                <>
-                  <Typography 
-                    variant='caption' 
+  return (
+    <Component {...props} className={clsx(classes.root, props.className)}>
+      <GlobalStyles styles={stepperStyles({ orientation })} />
+      {mobile && orientation !== 'vertical' ? (
+        <Paper square elevation={0}>
+          <ListItem dense className={classes.header}>
+            <ListItemIcon className={classes.icon}>{steps[activeStep][0]}</ListItemIcon>
+            <ListItemText primary={steps[activeStep][1]} secondary={steps[activeStep][2]}/>
+          </ListItem>
+          <Divider className={classes.mobileDivider}/>
+        </Paper>
+      ) : (
+        <MuiStepper
+          className={classes.stepper}
+          alternativeLabel
+          activeStep={activeStep}
+          orientation={orientation}
+          connector={<ColorlibConnector customOrientation={orientation} />}
+        >
+          {steps.map(([icon, label, description, subDescription], i) => (
+            <Step key={label}>
+              {orientation === 'vertical' && subDescription &&
+                <div className={classes.subDescription}>
+                  <Typography
+                    variant='caption'
                     className={clsx(classes.caption, { [classes.selectedCaption]: activeStep >= i })}>
-                    {description}
+                    {subDescription}
                   </Typography>
-                  {orientation !== 'vertical' && subDescription && 
-                    <Typography 
+                </div>
+              }
+              <StepButton
+                onClick={onClick(i)}
+                disabled={i > maxStep}
+                optional={
+                  <>
+                    <Typography
                       variant='caption'
                       className={clsx(classes.caption, { [classes.selectedCaption]: activeStep >= i })}>
-                      {subDescription}
+                      {description}
                     </Typography>
-                  }
-                </>
-              }
-            >
-              <StepLabel 
-                className={classes.stepLabel}
-                disabled={i > maxStep} 
-                error={errors[i]} 
-                StepIconComponent={ColorlibStepIcon}
-                StepIconProps={{ icon, error: errors[i], initial: initialStep >= i, ambienteTeste }}
+                    {orientation !== 'vertical' && subDescription &&
+                      <Typography
+                        variant='caption'
+                        className={clsx(classes.caption, { [classes.selectedCaption]: activeStep >= i })}>
+                        {subDescription}
+                      </Typography>
+                    }
+                  </>
+                }
               >
-                {label}
-              </StepLabel>
-            </StepButton>
-          </Step>
-        ))}
-      </MuiStepper>
-    )}
-
-    {children && 
-      <Box padding={mobile ? 0 : 4} pt={1} pb={0}>
-        {children}
-      </Box>
-    }
-
-    {mobile && orientation !== 'vertical' ? (
-      <MobileStepper
-        steps={maxSteps}
-        position='bottom'
-        variant='dots'
-        activeStep={activeStep}
-        backButton={
-          <Button 
-            startIcon={<MdChevronLeft/>} 
-            onClick={onPrevious} 
-            disabled={activeStep === 0}>
-            {backLabel}
-          </Button>
-        }
-        nextButton={
-          <Button 
-            variant='contained' 
-            color='primary' 
-            endIcon={activeStep === maxSteps - 1 ? <MdCheck/> : <MdChevronRight/>} 
-            onClick={activeStep === steps.length - 1 ? onFinish : onNext}>
-            {activeStep === steps.length - 1 ? finishLabel : nextLabel}            
-          </Button>
-        }
-      />
-    ) : !disableActions ? (
-      <DialogActions>
-        <Box padding={mobile ? 0 : 4} paddingTop={1} paddingBottom={1}>
-          <Button 
-            disabled={activeStep === 0 || disablePrevious} 
-            onClick={onPrevious}>
-            {backLabel}
-          </Button>
-          <Button
-            variant='contained'
-            color='primary'
-            onClick={activeStep === steps.length - 1 ? onFinish : onNext}
-            disabled={activeStep === steps.length - 1 ? disableFinish : disableNext}
-          >
-            {activeStep === steps.length - 1 ? finishLabel : nextLabel}
-          </Button>
+                <StepLabel
+                  className={classes.stepLabel}
+                  disabled={i > maxStep}
+                  error={errors[i]}
+                  slots={{
+                    stepIcon: ColorlibStepIcon
+                  }}
+                  slotProps={{
+                    stepIcon: { icon, error: errors[i], initial: initialStep >= i, ambienteTeste }
+                  }}
+                >
+                  {label}
+                </StepLabel>
+              </StepButton>
+            </Step>
+          ))}
+        </MuiStepper>
+      )}
+      {children &&
+        <Box
+          sx={{
+            padding: mobile ? 0 : 4,
+            pt: 1,
+            pb: 0
+          }}>
+          {children}
         </Box>
-      </DialogActions>
-    ) : null }
-  </Component>;
+      }
+      {mobile && orientation !== 'vertical' ? (
+        <MobileStepper
+          steps={maxSteps}
+          position='bottom'
+          variant='dots'
+          activeStep={activeStep}
+          backButton={
+            <Button
+              startIcon={<MdChevronLeft/>}
+              onClick={onPrevious}
+              disabled={activeStep === 0}>
+              {backLabel}
+            </Button>
+          }
+          nextButton={
+            <Button
+              variant='contained'
+              color='primary'
+              endIcon={activeStep === maxSteps - 1 ? <MdCheck/> : <MdChevronRight/>}
+              onClick={activeStep === steps.length - 1 ? onFinish : onNext}>
+              {activeStep === steps.length - 1 ? finishLabel : nextLabel}
+            </Button>
+          }
+        />
+      ) : !disableActions ? (
+        <DialogActions>
+          <Box
+            sx={{
+              padding: mobile ? 0 : 4,
+              paddingTop: 1,
+              paddingBottom: 1
+            }}>
+            <Button
+              disabled={activeStep === 0 || disablePrevious}
+              onClick={onPrevious}>
+              {backLabel}
+            </Button>
+            <Button
+              variant='contained'
+              color='primary'
+              onClick={activeStep === steps.length - 1 ? onFinish : onNext}
+              disabled={activeStep === steps.length - 1 ? disableFinish : disableNext}
+            >
+              {activeStep === steps.length - 1 ? finishLabel : nextLabel}
+            </Button>
+          </Box>
+        </DialogActions>
+      ) : null }
+    </Component>
+  );
 };
 
-export default withStyles(stepperStyles, { name: 'ArgousStepper' })(Stepper);
+export default Stepper;

package/lib/components/TablePicker/TablePicker.js

@@ -2,10 +2,9 @@ import Input from './../Input';
 import SimpleTable, { Action } from './../SimpleTable';
 import { setField, getField } from '../../fieldsRedux';
 import { serverAction } from '../../utils/api';
-import { withTheme } from '@material-ui/core';
+import { useTheme } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { Scrollbars } from 'react-custom-scrollbars';
 
 /**
  * @deprecated 
@@ -190,7 +189,7 @@ class TablePicker extends Component {
               <td colSpan='2'>
 
                 <div className='argous-list-dropdown' style={{ height: resultHeight }}>
-                  <Scrollbars>
+                  <div style={{ height: '100%', overflowY: 'auto' }}>
                     {typeMessage > 0 && (
                       <div className='padding-top-sm padding-bottom-sm color999 text-center'>
                         {typeMessage === 1 && 'Escreva para começar a buscar'}
@@ -200,7 +199,7 @@ class TablePicker extends Component {
                     )}
 
                     <SimpleTable field={`results-${field}`} alias={alias} onClick={this.selectResult} className='reset-margin' />
-                  </Scrollbars>
+                  </div>
                 </div>
 
                 <SimpleTable field={field} defaultValue={defaultValue} alias={alias} head={head} rows={value && value.length > rows ? rows : undefined} fieldListener={fieldListener} className='reset-margin-bottom'>
@@ -232,7 +231,13 @@ TablePicker.propTypes = {
   placeholder: PropTypes.string,
   removeAction: PropTypes.string,
   head: PropTypes.array,
-  rows: PropTypes.number
+  rows: PropTypes.number,
+  theme: PropTypes.object
+};
+
+const TablePickerWithTheme = props => {
+  const theme = useTheme();
+  return <TablePicker {...props} theme={theme} />;
 };
 
-export default withTheme(TablePicker);
+export default TablePickerWithTheme;