argous 1.2.132 → 1.2.136

package/lib/components/ArgousComplexTableBody/ArgousComplexTableBody.js

@@ -0,0 +1,162 @@
+import { TableContext } from '../ArgousComplexTable/ArgousComplexTable';
+import { TableBody, TableRow, Checkbox, Collapse, TableCell, makeStyles, Typography, CircularProgress, alpha, Tooltip, IconButton } from '@material-ui/core';
+import clsx from 'clsx';
+import { isArray } from 'lodash';
+import React, { Fragment, useContext, memo } from 'react';
+import { MdDragHandle } from 'react-icons/md';
+import { Container, Draggable } from 'react-trello/dist/';
+
+const useStyles = makeStyles(theme => ({
+  dragHandle: {
+    cursor: 'n-resize'
+  },
+  hover: {
+    '&:hover': {
+      backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity * 2)
+    }
+  },
+  open: {
+    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    '&:hover': {
+      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity * 2),
+    }
+  },
+  semDados: {
+    padding: theme.spacing(1),
+    paddingLeft: theme.spacing(2),
+    fontSize: '1rem',
+  },
+  group: {
+    '&>td': {
+      padding: '0px',
+      // '&:hover':{
+      //   backgroundColor: theme.palette.action.selected
+      // }
+    }
+  },
+  loading: {
+    textAlign: 'center',
+    padding: '7px'
+  }
+}));
+
+const ArgousComplexTableBody = memo(({
+  children, 
+  line, 
+  lineStyle,
+  handleOpenClose,
+  lineClass,
+  enableCheck,
+  disableCheckIf,
+  columnStyles, 
+  head,
+  onClick,
+  onDoubleClick,
+  indexToSelect,
+  open,
+  dadosMostrados,
+  columnOptions,
+  lineTitle,
+  customKey,
+  columnProps,
+  rowProps,
+  enableDrag,
+  onDrop
+}) => {
+  const classes = useStyles();
+
+  const { lista, selected, dispatch, loading } = useContext(TableContext);
+
+  const handleClick = name => {
+    const selectedIndex = selected.indexOf(name);
+    let newSelected = [];
+    if (selectedIndex === -1) newSelected = newSelected.concat(selected, name);
+    else if (selectedIndex === 0) newSelected = newSelected.concat(selected.slice(1));
+    else if (selectedIndex === selected.length - 1) newSelected = newSelected.concat(selected.slice(0, -1));
+    else if (selectedIndex > 0) newSelected = newSelected.concat(
+      selected.slice(0, selectedIndex),
+      selected.slice(selectedIndex + 1),
+    );
+    dispatch({ type: 'setSelected', value: newSelected });
+  };
+
+  const isSelected = name => selected.indexOf(name) !== -1;
+
+  const getCellContent = (coluna, linha, index, i) => {
+    if (columnOptions) {
+      const item = columnOptions.filter(item => item.alias === index);
+      if (item.length > 0) return item[0].customJsx({ index: i, itemFormatado: line(linha)[index], linhaFormatada: line(linha), linhaOriginal: linha });
+    }
+    return coluna;
+  };
+
+  return (
+    <Container dragHandleSelector={`.${classes.dragHandle}`} onDrop={onDrop} render={containerRef => (
+      <TableBody innerRef={containerRef} /*component={Container} dragHandleSelector={`.${classes.dragHandle}`} onDrop={onDrop}*/>
+        {loading ? (
+          <TableRow><TableCell className={classes.loading} colSpan={dadosMostrados?.length && line(dadosMostrados[0])?.length + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0)}><CircularProgress disableShrink/></TableCell></TableRow>
+        ) : dadosMostrados.length ? dadosMostrados.map((linha, i) => {
+          const isItemSelected = isSelected(linha[indexToSelect]);
+          const isItemOpen = i === open;
+
+          const { title, ...rowProperties } = rowProps({ index: i, linhaOriginal: linha, linhaFormatada: line(linha), itensSelecionados: selected }) || {};
+          return <Draggable key={customKey ? lista[i][customKey] : i} render={draggableRef => (
+            //TODO criar proprio draggable pois esse remove classes do filho
+            <Fragment>
+              <CustomTooltip title={lineTitle || title}>
+                <TableRow
+                  component={Draggable}
+                  {...rowProperties}
+                  className={clsx({ [classes.hover]: isItemSelected, [classes.open]: isItemOpen && !!children }, lineClass(line(linha), linha, i), rowProperties.className)}
+                  hover
+                  role='checkbox'
+                  tabIndex={-1}
+                  selected={isItemSelected}
+                  style={lineStyle ? lineStyle(linha, line(linha), i) : undefined}
+                  onClick={onClick ? e => onClick(e, linha, line(linha), i) : children ? () => handleOpenClose(i) : undefined}
+                  onDoubleClick={onDoubleClick ? e => onDoubleClick(e, linha, line(linha), i) : undefined}
+                  innerRef={draggableRef} 
+                >
+                  {enableDrag && <TableCell padding='checkbox'>
+                    <Tooltip title='Arrastar'>
+                      <IconButton size='small' className={classes.dragHandle}>
+                        <MdDragHandle/>
+                      </IconButton>
+                    </Tooltip>
+                  </TableCell>}
+                  {enableCheck && <TableCell padding='checkbox'>
+                    <Checkbox disabled={disableCheckIf && disableCheckIf(linha, line(linha), i)} onClick={e => {
+                      e.stopPropagation();
+                      handleClick(linha[indexToSelect]);
+                    }} checked={isItemSelected} />
+                  </TableCell>}
+                  {isArray(line(linha)) && line(linha).map((coluna, j) => (
+                    <TableCell key={j} {...columnProps(j, coluna, linha, line(linha))} style={columnStyles ? columnStyles[j] : undefined}>{getCellContent(coluna, dadosMostrados[i], j, i)}</TableCell>
+                  ))}
+                </TableRow>
+              </CustomTooltip>
+              {children && (
+                <TableRow className={classes.group}>
+                  <TableCell colSpan={dadosMostrados?.length && line(dadosMostrados[0])?.length + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0)} style={{ padding: open === i ? 8 : 0 }}>
+                    <Collapse in={open === i} mountOnEnter unmountOnExit>
+                      {typeof children === 'function' ? children({ linha: line(linha), linhaOriginal: linha, index: i }) : children}                  
+                    </Collapse>
+                  </TableCell>
+                </TableRow>
+              )}
+            </Fragment>
+          )}/>;
+        }) : <TableRow><Typography className={classes.semDados} component='td' variant='h6' colSpan={head.length + (enableCheck ? 1 : 0)}>Nenhum dado a ser exibido</Typography></TableRow> }
+      </TableBody>
+    )}/>
+  );
+});
+
+export default ArgousComplexTableBody;
+
+export const CustomTooltip = ({ title, children }) => {
+  if (title) return <Tooltip arrow title={title}>
+    {children}
+  </Tooltip>;
+  return children; 
+};

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

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

package/lib/components/ArgousComplexTableBody/index.js

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

package/lib/components/ArgousComplexTableHead/ArgousComplexTableHead.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+
+export interface ArgousComplexTableHeadProps {
+  /**
+   * Array de títulos para o cabeçalho da tabela
+   */ 
+  head?: Array<string>, 
+  /**
+   * Array de estilos para cada item do cabeçalho
+   */ 
+  headerColumnStyles?: Array<React.CSSProperties>,
+  /**
+   * Array de booleanos para desabilitar a ordenacao em itens expecificos
+   */ 
+  disableSorting?: Array<boolean>,
+}
+
+export interface ArgousComplexTableHeadPrivateProps extends ArgousComplexTableHeadProps {
+  /**
+   * Quantidade de itens selecionados
+   */
+  numSelected: number,
+  /**
+   * Quantidade de linhas por página
+   */
+  rowCount: number,
+  /**
+   * Habilita a seleção de linhas da lista 
+   */ 
+  enableCheck?: boolean,
+  /**
+   * Habilita o drag and drop das linhas
+   */ 
+  enableDrag?: boolean,
+  /**
+   * Função que decide se a seleção de determinada linha está habilitada
+   * 
+   * @param linhaOriginal - Linha original, antes de ser formatada pela função line
+   * @param linhaFormatada - Linha ja formatada pela função line
+   * @param index - Índice da linha
+   * 
+   * @returns {boolean} Booleano
+   */ 
+  disableCheckIf?: (linhaOriginal: Array<any> | object, linhaFormatada: Array<any>, index: number) => boolean,
+  /**
+   * Função que converte a linha original em um array com os dados a serem exibidos
+   * 
+   * @param linhaOriginal - linha a ser formatada
+   * 
+   * @returns {Array<any>} Retorna array
+   */ 
+  line: (linhaOriginal: Array<Array<any> | Object>) => Array<any>, 
+  /**
+   * Quantidade total de linhas na tabela
+   */
+  size: number,
+  /**
+   * Array de booleanos retornado pelo caminhador para habilitar a ordenação
+   */ 
+  ordCols: Array<boolean>,
+  /**
+   * Recebe o array com todos os dados e retorna um array somente com os dados mostrados
+   * 
+   * @param dados - Dados completos
+   * 
+   * @returns {Array<Array<any> | Object>} Array com dados mostrados
+   */
+  cortaDados: (dados: Array<Array<any> | Object>) => Array<Array<any> | Object>
+}
+
+declare function ArgousComplexTableHead(props: ArgousComplexTableHeadPrivateProps): JSX.Element
+
+export default ArgousComplexTableHead;

package/lib/components/ArgousComplexTableHead/ArgousComplexTableHead.js

@@ -0,0 +1,98 @@
+import { TableContext } from '../ArgousComplexTable/ArgousComplexTable';
+import { TableHead, TableRow, Checkbox, TableCell, TableSortLabel, makeStyles, alpha } from '@material-ui/core';
+import clsx from 'clsx';
+import { isArray } from 'lodash';
+import React, { useContext, memo, useMemo } from 'react';
+
+const useStyles = makeStyles(theme => ({
+  highlight: {
+    color: theme.palette.type === 'light' ? theme.palette.secondary.main : theme.palette.text.primary,
+    backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity * 2)   
+  },
+  lighthighlight: {
+    background: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity)   
+  },
+  visuallyHidden: {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: 1,
+    margin: -1,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    top: 20,
+    width: 1,
+  }
+}));
+
+const ArgousComplexTableHead = memo(({ 
+  numSelected, 
+  rowCount, 
+  head, 
+  enableCheck,
+  disableCheckIf,
+  line, 
+  size, 
+  headerColumnStyles, 
+  disableSorting,
+  ordCols,
+  cortaDados,
+  enableDrag
+}) => {
+  const classes = useStyles();
+  const { selected, order, orderBy, dispatch, lista, indexToSelect, method } = useContext(TableContext);
+
+  const handleRequestSort = property => {
+    const isAsc = orderBy === property && order === 'asc';
+    dispatch({ type: 'setOrder', value: isAsc ? 'desc' : 'asc' });
+    dispatch({ type: 'setOrderBy', value: property });
+  };
+
+  const length = useMemo(() => disableCheckIf ? lista.reduce((acc, linha, i) => !disableCheckIf(linha, line(linha), i) ? acc + 1 : acc, 0) : size, [disableCheckIf, lista, size]);
+
+  const handleSelectAllClick = event => {
+    if (event.target.checked) {
+      if (!method && selected.length === 0) dispatch({ type: 'setSelected', value: cortaDados(lista).filter((linha, i) => disableCheckIf ? !disableCheckIf(linha, line(linha), i) : true).map((n) => n[indexToSelect]) });
+      else if (selected.length < length) dispatch({ type: 'setSelected', value: lista.filter((linha, i) => disableCheckIf ? !disableCheckIf(linha, line(linha), i) : true).map((n) => n[indexToSelect]) });
+      else dispatch({ type: 'setSelected', value: [] });
+    } else dispatch({ type: 'setSelected', value: [] });
+  };
+
+  return (
+    <TableHead>
+      <TableRow className={clsx({ 
+        [classes.highlight]: (numSelected === rowCount || numSelected === length) && (rowCount && length), 
+        [classes.lighthighlight]: numSelected > 0 && numSelected < rowCount 
+      })}>
+        {enableDrag && <TableCell padding='checkbox'/>}
+        {enableCheck && <TableCell padding='checkbox'>
+          <Checkbox
+            disabled={!length}
+            indeterminate={method ? (numSelected > 0 && numSelected < rowCount) : (numSelected > 0 && numSelected < length)}
+            checked={method ? (rowCount > 0 && numSelected === rowCount) : (rowCount > 0 && length && numSelected === length)}
+            onChange={handleSelectAllClick}
+          />
+        </TableCell>}
+        {isArray(head) && head.map((item, i) => (
+          <TableCell key={i} style={headerColumnStyles ? headerColumnStyles[i] : undefined}>
+            {(disableSorting[i] || (ordCols && !ordCols[i])) ? 
+              item 
+              : 
+              <TableSortLabel
+                active={orderBy === i}
+                direction={orderBy === i ? order : 'asc'}
+                onClick={() => handleRequestSort(i)}
+              >{item}{orderBy === i ? (
+                  <span className={classes.visuallyHidden}>
+                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                  </span>
+                ) : null}
+              </TableSortLabel>}
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+});
+
+export default ArgousComplexTableHead;

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

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

package/lib/components/ArgousComplexTableHead/index.js

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

package/lib/components/ArgousComplexTableToolbar/ArgousComplexTableToolBar.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { IconType } from 'react-icons';
+
+declare interface ActionsFunction {
+  /**
+   * @param identificador - Array com todos os itens que foram selecionados
+   * 
+   * @returns {void} Sem retorno
+   */ 
+  (identificador: Array<any>): void
+}
+
+export interface ArgousComplexTableToolBarProps {
+  /**
+   * Recebe um array com as ações para a tabela, cada item do array deve ser outro array
+   * com três itens na seguinte ordem:
+   * 
+   * @param icone - Icone, do react icons, que ficará visivel na action
+   * @param title - Texto que aparecerá ao passar o mouse por cima do icone
+   * @param callback - Funcao q será chamada ao clicar no icone, ela pode receber como parametros os itens selecioandos na lista
+   */ 
+  actions?: Array<Array<IconType | string | ActionsFunction>>,
+  /**
+   * Titulo que aparecerá acima da tabela
+   */ 
+  title?: string,
+  /**
+   * Desabilita o filtro
+   */ 
+  disableFilter?: boolean,
+  /**
+   * Label a ser aplicado ao filtro
+   */ 
+  filterLabel?: string,
+  /**
+   * Deixa a barra de ferramentas fixa sempre ativa
+   */ 
+  fixedToolbar?: boolean,
+}
+
+export interface ArgousComplexTableToolBarPrivateProps extends ArgousComplexTableToolBarProps {
+  /**
+   * Quantidade de itens selecionados
+   */
+  numSelected: number,
+  /**
+   * Lista com os itens da tabela
+   */
+  lista: Array<Array<any> | Object>,
+  /**
+   * Ìndice da linha original a ser utilizado como ID primário na hora das seleções e que será retornado pelas actions
+   */ 
+  indexToSelect?: number | string,
+}
+
+declare function ArgousComplexTableToolBar(props: ArgousComplexTableToolBarPrivateProps): JSX.Element
+
+export default ArgousComplexTableToolBar;

package/lib/components/ArgousComplexTableToolbar/ArgousComplexTableToolBar.js

@@ -0,0 +1,66 @@
+import { TableContext } from '../ArgousComplexTable/ArgousComplexTable';
+import { Toolbar, Typography, Grid, TextField, IconButton, makeStyles, Tooltip, alpha } from '@material-ui/core';
+import clsx from 'clsx';
+import { isArray } from 'lodash';
+import React, { useContext, useRef, memo } from 'react';
+
+const useStyles = makeStyles(theme => ({
+  toolbar: {
+    minHeight: 0,
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(1),
+  },
+  highlight: {
+    color: theme.palette.type === 'light' ? theme.palette.secondary.main : theme.palette.text.primary,
+    backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity * 2)
+  },
+  title: {
+    flex: '1 1 100%',
+    lineHeight: '50px'
+  }
+}));
+
+const ArgousComplexTableToolBar = memo(({
+  numSelected, 
+  actions, 
+  title,
+  disableFilter,
+  filterLabel,
+  lista, 
+  indexToSelect,
+  fixedToolbar }) => {
+  const classes = useStyles();
+  const { selected, dispatch } = useContext(TableContext);
+
+  const filterTime = useRef();
+
+  const handleChange = e => {
+    const value = e.target.value;
+    clearTimeout(filterTime.current);
+    filterTime.current = setTimeout(() => {
+      dispatch({ type: 'setFilter', value });
+    }, 300);
+  };
+
+  return (
+    <Toolbar className={clsx(classes.toolbar, { [classes.highlight]: numSelected > 0 })}>
+      {numSelected > 0 ? (
+        <Typography className={classes.title} color='inherit' variant='subtitle1' component='div'>
+          {numSelected} {numSelected === 1 ? 'selecionado' : 'selecionados'}
+        </Typography>
+      ) : <Grid container spacing={2} style={{ marginRight: 0 }}>
+        {title && <Grid item xs style={{ display: 'flex', alignItems: 'center' }}><Typography className={classes.title} variant='h6' component='div'>{title}</Typography></Grid>}
+        {!disableFilter && <Grid item xs><TextField label={filterLabel} fullWidth margin='dense' variant='outlined' onChange={handleChange}/></Grid>}
+      </Grid>}
+      {(fixedToolbar || numSelected > 0) && isArray(actions) && actions.map((action, i) => (
+        <Tooltip key={i} title={action[0]}>
+          <IconButton onClick={e => action[2](selected, e, lista.filter(linha => selected.indexOf(linha[indexToSelect]) > -1))}>
+            {action[1]}
+          </IconButton>
+        </Tooltip>
+      ))}
+    </Toolbar>
+  );
+});
+
+export default ArgousComplexTableToolBar;

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

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

package/lib/components/ArgousComplexTableToolbar/index.js

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

package/lib/components/ArgousInput/ArgousInput.d.ts

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