argous 1.2.132 → 1.2.136

package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.js

@@ -0,0 +1,298 @@
+import { serverAction, setError } from '../../utils/api';
+import { Chip, CircularProgress, Fade, ListItem, ListItemText, ListSubheader, makeStyles, Slide, TextField, Tooltip, withStyles } from '@material-ui/core';
+import { Autocomplete } from '@material-ui/lab';
+import clsx from 'clsx';
+import { isObject, isString } from 'lodash';
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
+
+const useStyles = makeStyles((theme) => ({
+  subHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: theme.palette.background.default,
+    height: 25
+  },
+  divButton: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  areaButton: {
+    padding: '0px 8px 0px 8px'
+  },
+  button: theme.palette.type === 'light' ? {
+    width: 15,
+    height: 15,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    color: 'rgba(0, 0, 0, 0.4)',
+    '&:hover': {
+      fontWeight: 500,
+      color: '#000000',
+    }
+  } : {
+    width: 15,
+    height: 15,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    color: 'rgba(255, 255, 255, 0.4)',
+    '&:hover': {
+      fontWeight: 500,
+      color: '#ffffff',
+    }
+  },
+  buttonActive: theme.palette.type === 'light' ? {
+    color: 'rgba(0, 0, 0, 0.8)',
+    '&:hover': {
+      fontWeight: 600,
+    }
+  } : {
+    color: 'rgba(255, 255, 255, 0.8)',
+    '&:hover': {
+      fontWeight: 600,
+    }
+  },
+  listItem: {
+    padding: 0,
+    width: '100%',
+    cursor: 'pointer',
+    '&:hover': {
+      background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.08)'
+    }
+  },
+  listItemText: {
+    margin: 0,
+    width: '100%',
+    direction: 'ltr',
+    overflow: 'visible',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    padding: '0px 0px 0px 6px',
+  },
+  box: {
+    padding: 0,
+    overflowX: 'hidden',
+    '&::-webkit-scrollbar': {
+      width: 5
+    },
+    '&::-webkit-scrollbar-track': {
+      background: '#0000'
+    },
+    '&::-webkit-scrollbar-thumb': {
+      background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)'
+    }
+  }
+}));
+
+const CustomTooltip = withStyles((theme) => ({
+  tooltip: theme.palette.type === 'light' ? {
+    fontSize: 15,
+    fontWeight: 400,
+    color: 'rgb(255, 255, 255)',
+    backgroundColor: '#333333e3',
+  } : {
+    fontSize: 15,
+    fontWeight: 400,
+    color: 'rgb(0, 0, 0)',
+    backgroundColor: '#fbfbfbd1',
+  },
+  arrow: {
+    color: theme.palette.type === 'light' ? '#333333e3' : '#fbfbfbd1'
+  }
+}))(Tooltip);
+
+const ListboxFavorites = forwardRef((props, ref) => {
+
+  const classes = useStyles();
+  const { children, favoritePage, dados, setDados, groupHeaderColor, groupTitleColor } = props;
+  const { pageNumber, favoritosLength, direction, slide } = dados;
+
+  function retornaInicio() {
+    switch (pageNumber) {
+      case 1: 
+        return 0;
+      case 2:
+        return 7;
+      case 3:
+        return 14;
+      default: return;
+    }
+  }
+
+  function retornaFim() {
+    switch (pageNumber) {
+      case 1:
+        return 7;
+      case 2:
+        return 14;
+      case 3:
+        return favoritosLength;
+      default: return;
+    }
+  }
+
+  function retornaArray(sectionIndex, section) {
+    if (sectionIndex === 0 && favoritePage && favoritosLength > 7) return section.props.children[1].props.children.slice(retornaInicio(), retornaFim());
+    return section.props.children[1].props.children;
+  }
+
+  function retornaEstrutura(sectionIndex, item) {
+    if (sectionIndex === 0 && favoritePage && favoritosLength > 7) {
+      return (
+        <Slide in={slide} direction={direction}>
+          <CustomTooltip title={item.props.children} arrow enterDelay='1000' enterNextDelay='1000' placement='top-end' TransitionComponent={Fade} TransitionProps={{ timeout: { enter: 100, exit: 500 } }}>
+            <ListItem {...item.props} key={item.key} className={classes.listItem}>
+              <ListItemText primary={item.props.children} className={classes.listItemText} />
+            </ListItem>
+          </CustomTooltip>
+        </Slide>
+      );
+    } return (
+      <CustomTooltip title={item.props.children} arrow enterDelay='1000' enterNextDelay='1000' placement='top-end' TransitionComponent={Fade} TransitionProps={{ timeout: { enter: 100, exit: 500 } }}>
+        <ListItem {...item.props} key={item.key} className={classes.listItem}>
+          <ListItemText primary={item.props.children} className={classes.listItemText} />
+        </ListItem>
+      </CustomTooltip>
+    );
+  }
+
+  function buttonClick(evento, value) {
+    evento.preventDefault();
+    evento.stopPropagation();
+    if (value !== pageNumber) {
+      verificaSaidaSlide(value);
+      setDados(v => ({ ...v, slide: false }));
+      setTimeout(() => {
+        setDados(v => ({ ...v, pageNumber: value, direction: retornaDirection(value) }));
+        setTimeout(() => setDados(v => ({ ...v, slide: true })), 100);
+      }, 200);
+    }
+  }
+
+  function verificaSaidaSlide(value) {
+    let direction = '';
+    if ((value === 2 || value === 3) && pageNumber === 1) direction = 'right';
+    else if (value === 3 && pageNumber === 2) direction = 'right';
+    else if (value === 1 && pageNumber === 2) direction = 'left';
+    direction && setDados(v => ({ ...v, direction: direction }));
+  }
+
+  function retornaDirection(value) {
+    if (value < pageNumber) return 'right';
+    return 'left';
+  }
+
+  return children.map((section, sectionIndex) => (
+    <ul {...props} className={clsx('MuiAutocomplete-listbox', classes.box)}>
+      <ListSubheader className={classes.subHeader} style={{ backgroundColor: groupHeaderColor?.[sectionIndex], color: groupTitleColor?.[sectionIndex] }}>
+        {section.props.children[0].props.children}
+        <Fade in={sectionIndex === 0 && favoritePage && favoritosLength > 7}>
+          <div className={classes.divButton}>
+            <div className={classes.areaButton}>
+              <div onClick={e => buttonClick(e, 1)} className={clsx({ [classes.buttonActive]: pageNumber === 1 }, classes.button)}>1</div>
+            </div>
+            <div className={classes.areaButton}>
+              <div onClick={e => buttonClick(e, 2)} className={clsx({ [classes.buttonActive]: pageNumber === 2 }, classes.button)}>2</div>
+            </div>
+            {favoritosLength > 14 &&
+              <>
+                <div className={classes.areaButton}>
+                  <div onClick={e => buttonClick(e, 3)} className={clsx({ [classes.buttonActive]: pageNumber === 3 }, classes.button)}>3</div>
+                </div>
+              </>
+            }
+          </div>
+        </Fade>
+      </ListSubheader>
+      {retornaArray(sectionIndex, section).map((item, itemIndex) => retornaEstrutura(sectionIndex, item))}
+    </ul>
+  ));
+});
+
+const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode, favoritePage, groupName, groupHeaderColor, groupTitleColor, loadingColor, filterFunction, getOptionLabel, onChange = e => e, textFieldProps = {}, searchParams, ...props }) => {
+
+  const [dados, setDados] = useState({
+    lista: [],
+    slide: true,
+    direction: '',
+    favoritosLength: '',
+    pageNumber: favoritePage ? 1 : '',
+  });
+  const [loading, setLoading] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+
+  const buscar = useCallback(async valor => {
+    setLoading(true);
+    const res = await serverAction(action, { [busca]: valor || inputValue, ...searchParams }, true, pgCode);
+    if (res[resposta || 'result']?.length > 1) carimbaLista(res[resposta || 'result']);
+    else if (res[resposta || 'result']) setDados(v => ({ ...v, lista: res[resposta || 'result'] || [] }));
+    else setError('Erro ao tentar buscar dados.');
+    setLoading(false);
+  }, [inputValue, searchParams]);
+
+  function carimbaLista(lista) {
+    let completo = [];
+    lista.map((arr, index) => {
+      index === 0 && favoritePage && setDados(v => ({ ...v, favoritosLength: arr.length }));
+      return arr.map(itemArr => itemArr.length < 3 && itemArr.push(groupName[index]));
+    });
+    lista.forEach(v => {
+      for (let item of v.values()) {
+        completo.push(item);
+      }
+    });
+    setDados(v => ({ ...v, lista: completo }));
+  }
+
+  useEffect(() => buscar(), [inputValue, buscar]);
+  useEffect(() => isString(value) && buscar(value), []);
+
+  return (
+    <Autocomplete
+      autoComplete
+      autoHighlight
+      openText='Abrir'
+      clearText='Limpar'
+      filterSelectedOptions        
+      onInputChange={e => setInputValue(e?.target?.value || '')}
+      options={isObject(value) ? dados?.lista.filter(v => filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]) : dados?.lista}
+      getOptionLabel={getOptionLabel && (option => getOptionLabel(option, dados?.lista))}
+      getOptionSelected={(o, v) => o[0] === v}
+      renderTags={(value, getTagProps) =>
+        value.map((option, index) => (
+          <Chip variant='outlined' size='small' label={option} {...getTagProps({ index })} />
+        ))
+      }
+      renderInput={params => (
+        <TextField
+          margin='dense'
+          variant='outlined'
+          label={label}
+          {...params}
+          {...textFieldProps}
+          InputProps={{
+            ...textFieldProps.InputProps,
+            ...params.InputProps,
+            endAdornment: (
+              <>
+                {params.InputProps.endAdornment}
+                <Fade in={loading}><CircularProgress disableShrink color={loadingColor || 'inherit'} size={20} /></Fade>
+              </>
+            )
+          }}
+        />
+      )}
+      {...props}
+      {...{ value, onChange }}
+      ListboxComponent={ListboxFavorites}
+      ListboxProps={{ dados, setDados, favoritePage, groupHeaderColor, groupTitleColor }}
+    />
+  );
+};
+
+export default forwardRef(AutoCompleteFavorites);

package/lib/components/BarChart/BarChart.d.ts

@@ -0,0 +1,8 @@
+export interface BarChartProps {}
+/**
+ * @deprecated
+ * @param props 
+ */
+declare function BarChart(props: BarChartProps): JSX.Element
+
+export default BarChart;

package/lib/components/BarChart/BarChart.js

@@ -0,0 +1,92 @@
+import Chart from 'chart.js';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+/**
+ * @deprecated 
+ */
+class BarChart extends Component {
+  componentDidMount = () => {
+
+    const { labels = [], datasets = [], horizontal, percentage, maxTicksLimit, stepSize, scaleLabel = {},
+      title = { display: false }, legend = false, tooltip = false, stacked, onClick } = this.props;
+
+    const chart = new Chart(this.canv, {
+      type: horizontal ? 'horizontalBar' : 'bar',
+      data: {
+        labels,
+        datasets
+      },
+      options: {
+        maintainAspectRatio: false,
+        events: ['click'],
+        onClick: !onClick ? undefined : function(event, context) {
+          const activeElement = chart.getElementAtEvent(event);
+
+          if (activeElement.length > 0) {
+            const datasetIndex = activeElement[0]._datasetIndex;
+            const index = activeElement[0]._index;
+            const value = chart.data.datasets[activeElement[0]._datasetIndex].data[activeElement[0]._index];
+            const label = labels[activeElement[0]._index];
+
+            onClick(datasetIndex, index, value, label);
+          }
+        },
+        scales: {
+          xAxes: [{
+            stacked
+          }],
+          yAxes: [{
+            ticks: {
+              suggestedMax: percentage ? 100 : undefined,
+              maxTicksLimit,
+              stepSize,
+              beginAtZero: true,
+            },
+            scaleLabel,
+            stacked
+          }]
+        },
+        title,
+        legend: {
+          display: legend
+        },
+        tooltips: {
+          enabled: tooltip
+        }
+      }
+    });
+  }
+
+  render() {
+    const { height } = this.props;
+
+    return (
+      <div style={{ position: 'relative', height }}>
+        <canvas ref={canv => {
+          this.canv = canv;
+        }} />
+      </div>
+    );
+  }
+}
+
+BarChart.propTypes = {
+  height: PropTypes.number,
+  labels: PropTypes.array,
+  datasets: PropTypes.array,
+  horizontal: PropTypes.bool,
+  percentage: PropTypes.bool,
+  maxTicksLimit: PropTypes.number,
+  stepSize: PropTypes.number,
+  scaleLabel: PropTypes.object,
+  title: PropTypes.object,
+  legend: PropTypes.bool,
+  tooltip: PropTypes.bool,
+  stacked: PropTypes.bool,
+  prefix: PropTypes.string,
+  suffix: PropTypes.string,
+  onClick: PropTypes.func
+};
+
+export default BarChart;

package/lib/components/BarChart/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './BarChart';
+export * from './BarChart'; 

package/lib/components/BarChart/index.js

@@ -0,0 +1 @@
+export { default } from './BarChart';

package/lib/components/BarraFerramentas/BarraFerramentas.d.ts

@@ -0,0 +1,21 @@
+import { IconType } from 'react-icons';
+
+export interface BarraFerramentasProps {
+  titulo?: string,
+  abas?: [string, 'active' | undefined][],
+  ferramentas?: [IconType, string, string | (() => void) ][][],
+  habCrud?: boolean,
+  habNavegador?: boolean,
+  nmFuncaoVoltar?: string,
+  nmCompartilhar?: string,
+  linkCompartilhamento?: string,
+  threads?: Array<any>,
+  currentProgram?: string,
+  nmSalva?: string, 
+  nmExclui?: string, 
+  executaFuncao?: (prm: string) => void,
+}
+
+declare function BarraFerramentas(props: BarraFerramentasProps): JSX.Element
+
+export default BarraFerramentas;