argous 1.2.247 → 1.3.2

package/lib/components/FilePreparer/FilePreparer.d.ts

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

package/lib/components/FilePreparer/FilePreparer.js

@@ -1,117 +1,117 @@
 import { prepareFile } from '../../api';
 import { setError } from '../../utils/api';
-import { Chip, CircularProgress, FilledInput, IconButton, makeStyles, TextField } from '@material-ui/core';
-import { useAutocomplete } from '@material-ui/lab';
-import clsx from 'clsx';
+import { Chip, CircularProgress, FilledInput, GlobalStyles, IconButton, TextField, useAutocomplete } from '@mui/material';
+import { clsx } from 'clsx';
 import { produce } from 'immer';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { MdAttachment, MdClear } from 'react-icons/md';
 
-const useStyles = makeStyles(_theme => ({
-  tag: {
+const classes = {
+  tag: 'argous-file-preparer-tag',
+  inputRoot: 'argous-file-preparer-input-root',
+  input: 'argous-file-preparer-input',
+  inputFocused: 'argous-file-preparer-input-focused',
+  clearIndicator: 'argous-file-preparer-clear-indicator',
+  clearIndicatorDirty: 'argous-file-preparer-clear-indicator-dirty',
+  root: 'argous-file-preparer-root',
+  loading: 'argous-file-preparer-loading',
+  endAdornment: 'argous-file-preparer-end-adornment',
+  rename: 'argous-file-preparer-rename',
+};
+
+const filePreparerStyles = {
+  [`.${classes.tag}`]: {
     margin: 3,
     maxWidth: 'calc(100% - 6px)',
   },
-  inputRoot: {
+  [`.${classes.inputRoot}`]: {
     flexWrap: 'wrap',
-    '$hasPopupIcon &, $hasClearIcon &': {
-      paddingRight: 26 + 4,
-    },
-    '$hasPopupIcon$hasClearIcon &': {
-      paddingRight: 52 + 4,
-    },
-    '& $input': {
+    [`& .${classes.input}`]: {
       width: 0,
       minWidth: 30,
     },
     '&[class*="MuiInput-root"]': {
       paddingBottom: 1,
-      '& $input': {
+      [`& .${classes.input}`]: {
         padding: 4,
       },
-      '& $input:first-child': {
+      [`& .${classes.input}:first-child`]: {
         padding: '6px 0',
       },
-    },    
+    },
     '&[class*="MuiOutlinedInput-root"]': {
       padding: 9,
       paddingRight: 26 + 4 + 9,
-      '$hasClearIcon &': {
-        paddingRight: 52 + 4 + 9,
-      },
-      '& $input': {
+      [`& .${classes.input}`]: {
         padding: '9.5px 4px',
       },
-      '& $input:first-child': {
+      [`& .${classes.input}:first-child`]: {
         paddingLeft: 6,
       },
-      '& $endAdornment': {
+      [`& .${classes.endAdornment}`]: {
         right: 9,
       },
     },
-    '&[class*="MuiOutlinedInput-root"][class*="MuiOutlinedInput-marginDense"]': {
+    '&[class*="MuiOutlinedInput-root"][class*="MuiInputBase-sizeSmall"]': {
       padding: 6,
-      '& $input': {
+      [`& .${classes.input}`]: {
         padding: '4.5px 4px',
       },
-    },    
+    },
   },
-  input: {
+  [`.${classes.input}`]: {
     flexGrow: 1,
     textOverflow: 'ellipsis',
     opacity: 0,
   },
-  inputFocused: {
+  [`.${classes.inputFocused}`]: {
     opacity: 1,
   },
-  clearIndicator: {
+  [`.${classes.clearIndicator}`]: {
     marginRight: -2,
     padding: 4,
     visibility: 'hidden',
   },
-  clearIndicatorDirty: {},
-  root: {
+  [`.${classes.root}`]: {
     display: 'flex',
     flexGrow: 1,
-    '&$focused $clearIndicatorDirty': {
+    [`& .${classes.clearIndicatorDirty}`]: {
       visibility: 'visible',
     },
     '@media (pointer: fine)': {
-      '&:hover $clearIndicatorDirty': {
+      [`&:hover .${classes.clearIndicatorDirty}`]: {
         visibility: 'visible',
       },
     },
   },
-  loading: {},
-  endAdornment: {
+  [`.${classes.endAdornment}`]: {
     position: 'absolute',
-    right: 0, 
+    right: 0,
     top: 'calc(50% - 24px)',
-    '$loading &': {
+    [`.${classes.loading} &`]: {
       top: 'calc(50% - 14px)',
     },
   },
-  rename: {
+  [`.${classes.rename}`]: {
     borderRadius: 10,
     padding: '5px !important'
   }
-}));
+};
 
-const FilePreparer = ({ 
-  onChange, 
+const FilePreparer = ({
+  onChange,
   TextFieldProps,
-  placeholder, 
-  label, 
-  multiple, 
+  placeholder,
+  label,
+  multiple,
   ChipProps,
   disabled,
   fileInputProps,
   valuePlaceHolder,
   concat,
   initialFiles = [],
-  ...props 
+  ...props
 }, ref) => {
-  const classes = useStyles();
   const inputRef = useRef();
 
   const [loading, setLoading] = useState(false);
@@ -153,20 +153,20 @@ const FilePreparer = ({
 
   useImperativeHandle(ref, () => ({ preparaArquivo, loading, setLoading, setFiles }), [preparaArquivo, loading]);
 
-  const { 
-    getInputProps, 
-    getTagProps, 
-    setAnchorEl, 
-    focusedTag, 
-    getClearProps, 
-    dirty 
-  } = useAutocomplete({ 
-    value: files, 
-    inputValue: files.length ? '' : placeholder || 'Selecione um arquivo', 
-    options: [], 
-    onChange: handleChange, 
-    multiple: true, 
-    componentName: 'FilePreparer' 
+  const {
+    getInputProps,
+    getItemProps,
+    setAnchorEl,
+    focusedItem,
+    getClearProps,
+    dirty
+  } = useAutocomplete({
+    value: files,
+    inputValue: files.length ? '' : placeholder || 'Selecione um arquivo',
+    options: [],
+    onChange: handleChange,
+    multiple: true,
+    componentName: 'FilePreparer'
   });
 
   const [editando, setEditando] = useState();
@@ -185,60 +185,64 @@ const FilePreparer = ({
 
   return (
     <div className={clsx(classes.root, { [classes.loading]: loading })} {...props}>
+      <GlobalStyles styles={filePreparerStyles} />
       <input ref={inputRef} type='file' {...{ multiple }} onChange={e => e?.target?.files?.length && preparaArquivo(e.target.files)} style={{ display: 'none' }} {...fileInputProps}/>
       <TextField
         ref={setAnchorEl}
-        variant='outlined' 
-        label={label || 'Arquivo'} 
-        margin='dense' 
-        onClick={handleClick} 
+        variant='outlined'
+        label={label || 'Arquivo'}
+        margin='dense'
+        onClick={handleClick}
         style={{ flexGrow: '1' }}
-        InputProps={{
-          readOnly: true,
-          startAdornment: files.length > 0 ? 
-            files.map((option, index) => editando === index ? (
-              <FilledInput className={classes.rename} defaultValue={option.name} autoFocus onBlur={handleRename} multiline disableUnderline/>
-            ) : ( 
-              <Chip
-                className={clsx(classes.tag)}
-                label={option.name}
-                onClick={handleEditing(index)}
-                clickable 
-                {...{ disabled, ...ChipProps }}
-                {...getTagProps({ index })}
-              />
-            )) : undefined,
-          className: classes.inputRoot,
-          endAdornment: <div className={classes.endAdornment}>
-            {loading ? <CircularProgress disableShrink size={24}/> : <>
-              <IconButton
-                disabled={disabled}
-                {...getClearProps()}
-                className={clsx(classes.clearIndicator, {
-                  [classes.clearIndicatorDirty]: dirty,
-                })}
-              >
-                <MdClear/>
-              </IconButton>            
-              <IconButton 
-                disabled={disabled}
-                onClick={e => {
-                  e.stopPropagation();
-                  inputRef.current.click(); 
-                }}>
-                <MdAttachment />
-              </IconButton>
-            </> }
-          </div>
-        }}
-        inputProps={{
-          className: clsx(classes.input, {
-            [classes.inputFocused]: focusedTag === -1,
-          }), disabled, ...getInputProps()
-        }}
-        {...TextFieldProps}/>
+        {...TextFieldProps}
+        slotProps={{
+          input: {
+            readOnly: true,
+            startAdornment: files.length > 0 ?
+              files.map((option, index) => editando === index ? (
+                <FilledInput className={classes.rename} defaultValue={option.name} autoFocus onBlur={handleRename} multiline disableUnderline/>
+              ) : (
+                <Chip
+                  className={clsx(classes.tag)}
+                  label={option.name}
+                  onClick={handleEditing(index)}
+                  clickable
+                  {...{ disabled, ...ChipProps }}
+                  {...getItemProps({ index })}
+                />
+              )) : undefined,
+            className: classes.inputRoot,
+            endAdornment: <div className={classes.endAdornment}>
+              {loading ? <CircularProgress disableShrink size={24}/> : <>
+                <IconButton
+                  disabled={disabled}
+                  {...getClearProps()}
+                  className={clsx(classes.clearIndicator, {
+                    [classes.clearIndicatorDirty]: dirty,
+                  })}
+                >
+                  <MdClear/>
+                </IconButton>
+                <IconButton
+                  disabled={disabled}
+                  onClick={e => {
+                    e.stopPropagation();
+                    inputRef.current.click();
+                  }}>
+                  <MdAttachment />
+                </IconButton>
+              </> }
+            </div>
+          },
+
+          htmlInput: {
+            className: clsx(classes.input, {
+              [classes.inputFocused]: focusedItem === -1,
+            }), disabled, ...getInputProps()
+          }
+        }} />
     </div>
   );
 };
 
-export default forwardRef(FilePreparer);
+export default forwardRef(FilePreparer);

package/lib/components/FileUploader/FileUploader.js

@@ -1,5 +1,6 @@
 import { inicFileUpload, sendFilePart, endFileUpload, cancelFileUpload/*, getFileInfo*/ } from '../../api/index';
-import { withStyles, CircularProgress, LinearProgress } from '@material-ui/core';
+import { CircularProgress, LinearProgress } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import React, { useState, useEffect } from 'react';
 
@@ -98,17 +99,17 @@ export function retomaUpload(dados) {
   return confirmFileUpload(dados.arquivo, dados.retornaProgresso);
 }
 
-export const ColorLinearProgress = withStyles({
-  root: {
+export const ColorLinearProgress = styled(LinearProgress)({
+  '&.MuiLinearProgress-root': {
     margin: '5px 0px 0px 5px'
   },
-  colorPrimary: {
+  '&.MuiLinearProgress-colorPrimary': {
     backgroundColor: '#d3deda',
   },
-  barColorPrimary: {
+  '& .MuiLinearProgress-bar': {
     backgroundColor: '#009C6A',
   },
-})(LinearProgress);
+});
 
 const estiloBotoes = {
   margin: '0px 3px',
@@ -315,4 +316,4 @@ FileUploader.propTypes = {
   funcaoRetorno: PropTypes.func,
   enviarDireto: PropTypes.bool,
   variant: PropTypes.string
-};
+};

package/lib/components/FormVisualizer/FormVisualizer.d.ts

@@ -1,7 +1,5 @@
-import { CheckboxProps, OutlinedTextFieldProps, RadioProps, TypographyProps } from '@material-ui/core';
-import { ClassNameMap } from '@material-ui/core/styles/withStyles';
-import { AutocompleteProps } from '@material-ui/lab';
-import { KeyboardDatePickerProps } from '@material-ui/pickers';
+import { CheckboxProps, OutlinedTextFieldProps, RadioProps, TypographyProps, AutocompleteProps } from '@mui/material';
+import { DatePickerProps } from '@mui/x-date-pickers';
 import * as React from 'react';
 
 interface TextField extends OutlinedTextFieldProps {
@@ -27,7 +25,7 @@ interface Label extends TypographyProps {
   value: string
 }
 
-interface Data extends KeyboardDatePickerProps {
+interface Data extends DatePickerProps<any> {
   tp: 'data',
   name: string
 }
@@ -77,7 +75,7 @@ interface Fase {
 
 interface JSONInterface {
   nome: string,
-  classes: ClassNameMap,
+  classes: Record<string, React.CSSProperties>,
   fases: Fase[],
 }
 
@@ -89,4 +87,4 @@ export interface FormVisualizerProps {
 
 declare function FormVisualizer(props: FormVisualizerProps): JSX.Element
 
-export default FormVisualizer;
+export default FormVisualizer;

package/lib/components/FormVisualizer/FormVisualizer.js

@@ -1,10 +1,10 @@
 import Button from '../../components/MaterialButton';
 import { useUpdateEffect } from '../../utils';
 import { getStore } from '../../utils/store';
-import MomentUtils from '@date-io/moment';
-import { makeStyles, Grid, Paper, Card, Typography, TextField, FormLabel, FormGroup, FormControlLabel, Checkbox, RadioGroup, Radio, Dialog, DialogTitle, DialogContent, DialogActions, InputAdornment, IconButton } from '@material-ui/core';
-import Autocomplete from '@material-ui/lab/Autocomplete';
-import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import { Grid, Paper, Card, Typography, TextField, FormLabel, FormGroup, FormControlLabel, Checkbox, RadioGroup, Radio, Dialog, DialogTitle, DialogContent, DialogActions, InputAdornment, IconButton, GlobalStyles } from '@mui/material';
+import Autocomplete from '@mui/material/Autocomplete';
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { isArray, isEqual, isString, set } from 'lodash';
 import moment from 'moment';
 import React, { useEffect, useState, useCallback, memo } from 'react';
@@ -23,7 +23,8 @@ const init = (initialValues) => (initialState) => {
 };
 
 const FormVisualizer = ({ json = {}, initialValues = [], onChange = () => '', disabled }) => {
-  const classes = makeStyles(json.classes)();
+  const classes = Object.keys(json.classes || {}).reduce((acc, key) => ({ ...acc, [key]: `argous-form-visualizer-${key}` }), {});
+  const globalStyles = Object.keys(json.classes || {}).reduce((acc, key) => ({ ...acc, [`.${classes[key]}`]: json.classes[key] }), {});
 
   const [state, dispatch] = useImmerReducer(reducer, json.fases.map(fase => fase.documentos.map(documento => documento.linhas.reduce((a, linha) => ({ ...a, ...linha.colunas.reduce((ac, { obj }) => obj.name ? ({ ...ac, [obj.name]: obj.value }) : ac, {}) }), {}))), init(initialValues));
 
@@ -33,6 +34,7 @@ const FormVisualizer = ({ json = {}, initialValues = [], onChange = () => '', di
 
   return (
     <Card style={{ padding: '10px' }}>
+      <GlobalStyles styles={globalStyles} />
       <Typography variant='h4' component='div' align='center' style={{ marginBottom: '10px' }}>{json.nome}</Typography>
       {json.fases && json.fases.map((fase, i) => (
         <Card key={fase.idFase} className={classes[fase.className]} style={{ ...fase.style, padding: '10px', margin: '10px' }}>
@@ -43,7 +45,7 @@ const FormVisualizer = ({ json = {}, initialValues = [], onChange = () => '', di
               {documento.linhas.map((linha, k) => (
                 <Grid container spacing={linha.spacing || 2} key={`${k}`} className={classes[linha.className]} style={linha.style}>
                   {linha.colunas.map(({ span, className, style, obj: { name, ...obj } }, l) => (
-                    <Grid item key={l} xs={span} className={classes[className]} style={style}>
+                    <Grid key={l} className={classes[className]} style={style} size={span}>
                       {console.log(state[i][j][name])}
                       <RetornaComponente value={obj.value || state[i][j][name]} fase={i} documento={j} {...{ ...obj, name, dispatch, disabled }} />
                     </Grid>
@@ -81,17 +83,7 @@ const Label = ({ className, style, value, ...props }) => {
   return <Typography {...{ className, style, ...props }}>{value}</Typography>;
 };
 
-const useStyles = makeStyles({
-  textArea: {
-    '& textarea': {
-      resize: 'vertical',
-      minHeight: '50px'
-    }
-  }
-});
-
 const Text = ({ variant, label, multiple, className, style, options, value, dispatch, path, ...props }) => {
-  const classes = useStyles();
   if (variant === 'select') return (
     <Autocomplete
       {...{ multiple, options }}
@@ -117,7 +109,13 @@ const Text = ({ variant, label, multiple, className, style, options, value, disp
   );
   return (
     <TextField
-      className={`${classes.textArea} mostraSpinner ${className}`}
+      className={`mostraSpinner ${className || ''}`}
+      sx={{
+        '& textarea': {
+          resize: 'vertical',
+          minHeight: '50px'
+        }
+      }}
       variant='outlined' margin='dense'
       fullWidth multiline={variant === 'multiline'}
       {...{ label, style }}
@@ -143,23 +141,25 @@ const Data = ({ label, className, style, value, dispatch, path, ...props }) => {
   }, [state, path])
 
   return (
-    <MuiPickersUtilsProvider utils={MomentUtils}>
-      <KeyboardDatePicker
-        fullWidth
-        invalidDateMessage='Data inválida'
-        autoOk
-        variant='inline'
-        inputVariant='outlined'
-        label='Data inicial'
-        margin='dense'
-        InputAdornmentProps={{ position: 'end' }}
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <DatePicker
         format='DD/MM/YYYY'
-        {...{ className, label, style }}
         {...props}
-        value={state || null}
+        label={label || 'Data inicial'}
+        value={state ? moment(state) : null}
         onChange={setState}
+        slotProps={{
+          inputAdornment: { position: 'end' },
+          textField: {
+            className,
+            style,
+            fullWidth: true,
+            margin: 'dense',
+            variant: 'outlined',
+          }
+        }}
       />
-    </MuiPickersUtilsProvider>
+    </LocalizationProvider>
   );
 };
 
@@ -186,7 +186,9 @@ const Selection = ({ label, multiple, className, style, options, value, dispatch
 
   if (multiple) return (
     <Grid container>
-      <Grid item xs={12} style={{ ...style, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 5, }} {...{ className }}>
+      <Grid
+        style={{ ...style, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 5, }}
+        size={12}>
         {label && <FormLabel style={{ marginBottom: '0px' }}>{label}</FormLabel>}
         <FormGroup row style={{ flexGrow: 1, justifyContent: label ? 'flex-end' : 'space-evenly' }}>
           {options.map((item, i) => (
@@ -204,7 +206,9 @@ const Selection = ({ label, multiple, className, style, options, value, dispatch
   );
   return (
     <Grid container>
-      <Grid item xs={12} style={{ ...style, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 5, }} {...{ className }}>
+      <Grid
+        style={{ ...style, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 5, }}
+        size={12}>
         {label && <FormLabel style={{ marginBottom: '0px' }}>{label}</FormLabel>}
         <RadioGroup row defaultValue={value} onChange={e => setState(e.target.value)} style={{ flexGrow: 1, justifyContent: label ? 'flex-end' : 'space-evenly' }}>
           {options.map((item, i) => (
@@ -249,7 +253,14 @@ const Signature = ({ label, grupos, usuarios, className, style, value, dados, se
   return (
     <>
       <Grid container direction='row-reverse' {...{ className, style }}>
-        <Grid item xs={12} sm={6} md={4} lg={2} xl={1}>
+        <Grid
+          size={{
+            xs: 12,
+            sm: 6,
+            md: 4,
+            lg: 2,
+            xl: 1
+          }}>
           <Button title={label} color='primary' variant='contained' fullWidth disabled={!podeAssinar} onClick={() => setValues({ ...values, modal: true })}>Assinar</Button>
         </Grid>
       </Grid>
@@ -263,20 +274,22 @@ const Signature = ({ label, grupos, usuarios, className, style, value, dados, se
             type={values.showPassword ? 'text' : 'password'}
             value={values.password}
             onChange={e => setValues({ ...values, password: e.target.value })}
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position='end'>
-                  <IconButton
-                    onClick={() => setValues({ ...values, showPassword: !values.showPassword })}
-                    onMouseDown={e => e.preventDefault()}
-                  >
-                    {values.showPassword ? <MdVisibility /> : <MdVisibilityOff />}
-                  </IconButton>
-                </InputAdornment>
-              )
-            }}
             error={!!values.senhaIncorreta}
             helperText={values.senhaIncorreta}
+            slotProps={{
+              input: {
+                endAdornment: (
+                  <InputAdornment position='end'>
+                    <IconButton
+                      onClick={() => setValues({ ...values, showPassword: !values.showPassword })}
+                      onMouseDown={e => e.preventDefault()}
+                    >
+                      {values.showPassword ? <MdVisibility /> : <MdVisibilityOff />}
+                    </IconButton>
+                  </InputAdornment>
+                )
+              }
+            }}
           />
         </DialogContent>
         <DialogActions>
@@ -286,4 +299,4 @@ const Signature = ({ label, grupos, usuarios, className, style, value, dados, se
       </Dialog>
     </>
   );
-};
+};