argous 1.2.133 → 1.2.137

package/lib/components/ArgousComplexTable/ArgousComplexTable.js

@@ -0,0 +1,360 @@
+import { ArgousComplexPagination, ArgousComplexTableHead, ArgousComplexTableToolbar, ArgousComplexTableBody } from '../';
+import { getField } from '../../fieldsRedux';
+import { serverAction } from '../../utils/api';
+import { Table, TableContainer, Paper, ClickAwayListener, makeStyles } from '@material-ui/core';
+import clsx from 'clsx';
+import { isArray, isEqual, isFunction } from 'lodash';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React, { useState, useEffect, forwardRef, useImperativeHandle, useMemo, createContext, useReducer, useCallback, memo } from 'react';
+
+const useStyles = makeStyles({
+  root: {
+    '& [class*="smooth-dnd-container"]': {
+      display: 'table-row-group'
+    },
+    '& [class*="smooth-dnd-draggable-wrapper"]': {
+      display: 'table-row !important'
+    }
+  }
+});
+
+export const TableContext = createContext();
+
+const ehData = valor => {
+  const retorno = (format) => moment(valor, format).format('YYYYMMDDHHmmss');
+  if (/[0-9]{2}\/[0-9]{2}\/[0-9]{4}/.test(valor)) return retorno('DD/MM/YYYY');
+  if (/\d{2}\/\d{2}\/\d{4} \d{2}:\d{2}/.test(valor)) return retorno('DD/MM/YYYY HH:mm');
+  if (/\d{2}\/\d{2}\/\d{4} \d{2}:\d{2}:\d{2}/.test(valor)) return retorno('DD/MM/YYYY HH:mm:ss');
+  if (/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}(.\d)*/.test(valor)) return retorno('YYYY-MM-DD HH:mm:ss');
+  return valor;
+};
+
+function descendingComparator(a, b, orderBy) {
+  const aO = ehData(a[orderBy]);
+  const bO = ehData(b[orderBy]);
+  if (bO < aO) return -1;
+  if (bO > aO) return 1;
+  return 0;
+}
+
+function getComparator(order, orderBy) {
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+function stableSort(array, comparator, line) {
+  const stabilizedThis = array.map((el, index) => [el, line(el), index]);
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[1], b[1]);
+    if (order !== 0) return order;
+    return a[2] - b[2];
+  });
+  return stabilizedThis.map((el) => el[0]);
+}
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'setSelected':
+      return {
+        ...state,
+        selected: action.value
+      };
+    case 'setPage':
+      return {
+        ...state,
+        page: action.value
+      };
+    case 'decremmentPage':
+      return {
+        ...state,
+        page: state.page === 0 ? 0 : state.page - 1
+      };
+    case 'setRowsPerPage':
+      return {
+        ...state,
+        rowsPerPage: action.value
+      };
+    case 'setOrder':
+      return {
+        ...state,
+        order: action.value
+      };
+    case 'setOrderBy':
+      return {
+        ...state,
+        orderBy: action.value
+      };
+    case 'setFilter':
+      return {
+        ...state,
+        filter: action.value
+      };
+    case 'setOpen':
+      return {
+        ...state,
+        open: action.value
+      };
+    case 'setLoading':
+      return {
+        ...state,
+        loading: action.value
+      };
+    case 'mount':
+      if (!action.value) return state;
+      return action.value;
+    default: 
+      return state;
+  }
+};
+
+const initialState = (defaultRowsPerPage) => ({
+  selected: [],
+  page: 0,
+  rowsPerPage: defaultRowsPerPage,
+  order: 'asc',
+  orderBy: -1,
+  filter: '',
+  open: undefined,
+  loading: false
+});
+
+const ArgousComplexTable = forwardRef(({ 
+  ToolbarComponent = ArgousComplexTableToolbar,
+  HeadComponent = ArgousComplexTableHead,
+  BodyComponent = ArgousComplexTableBody,
+  PaginationComponent = ArgousComplexPagination,
+  FooterComponent = undefined,
+  footerProps,
+  dados, 
+  head = [], 
+  line = i => i, 
+  actions, 
+  title,
+  defaultRowsPerPage = 10,
+  rowsPerPageOptions = [10, 25, 50], 
+  enableCheck: checkEnabled, 
+  disableCheckIf,
+  showCount, 
+  lineStyle, 
+  lineClass = () => undefined,
+  onClick,
+  onDoubleClick,
+  children = undefined, 
+  style,
+  className,
+  columnStyles,
+  headerColumnStyles,
+  columnOptions,
+  disableFilter,
+  filterLabel = 'Filtro',
+  indexToSelect = 0,
+  disableSorting = [],
+  size = 'small',
+  onOpen,
+  lineTitle,
+  onClose,
+  method,
+  methodPrms,
+  methodResultList = 'lista',
+  onMethodResponse,
+  field,
+  fixedToolbar,
+  onSelect,
+  customKey,
+  columnProps = () => '',
+  rowProps = () => '',
+  savedState = {},
+  containerProps,
+  onClickAway = () => undefined,
+  enableCheckIfSelected,
+  enableDrag,
+  onDrop,
+  tableProps,
+  toolbarProps
+}, ref) => {
+  const classes = useStyles();
+  const [state, dispatch] = useReducer(reducer, initialState(defaultRowsPerPage));
+  const memoState = useMemo(() => ({ ...state, dispatch }), [state, dispatch]);
+  const { selected, page, rowsPerPage, order, orderBy, filter, open } = memoState;
+
+  const [lista, setLista] = useState(dados/*.map(linha => isArray(linha) ? linha : Object.values(linha))*/ || []);
+  const [ctrlPgn, setCtrlPgn] = useState({ qtRegs: defaultRowsPerPage, pgAtl: 1 });
+  const { qtRegs, pgAtl, ordCols } = ctrlPgn;
+
+  const enableCheck = checkEnabled || (enableCheckIfSelected && !!selected.length);
+
+  useEffect(() => {
+    dispatch({ type: 'mount', value: savedState.current });
+  }, []);
+
+  useEffect(() => {
+    return () => savedState.current = state;    
+  }, [state]);
+
+  useEffect(() => {
+    if (isArray(dados)) setLista(dados/*.map(linha => isArray(linha) ? linha : Object.values(linha))*/ || []);
+  }, [dados]);
+
+  const retornaAcao = useCallback((pgAtl, page) => {
+    if (page === pgAtl) return undefined;
+    else if (page === pgAtl + 1) return 'N';
+    else if (page === pgAtl - 1) return 'P';
+    else if (page === ctrlPgn.recordCount) return 'L';
+    else if (page === 0) return 'F';
+    return `S=${page}`;
+  }, [ctrlPgn.recordCount]);
+
+  const buscaMetodo = useCallback(async () => {
+    if (!method) return;
+    dispatch({ type: 'setLoading', value: true });
+    const res = await serverAction(method, { 
+      ctrlPgn: {
+        qtRegs, pgAtl,
+        acao: retornaAcao(ctrlPgn.pgAtl, page + 1),
+        tpOrdem: orderBy >= 0 ? (order === 'asc' ? 'A' : 'D') : undefined,
+        indOrdem: orderBy >= 0 ? orderBy : undefined
+      }, ...methodPrms 
+    }, true);
+    onMethodResponse && onMethodResponse(res);      
+    if (res.status) {
+      setCtrlPgn({ ...res.ctrlPgn, recordCount: res.ctrlPgn?.recordCount || res[methodResultList]?.length < res.ctrlPgn?.qtRegs ? res[methodResultList]?.length : res.ctrlPgn?.qtPaginas * res.ctrlPgn?.qtRegs });
+      setLista(res[methodResultList] || []);
+    }
+    dispatch({ type: 'setLoading', value: false });
+  }, [method, qtRegs, pgAtl, order, orderBy, retornaAcao, ctrlPgn.pgAtl, page, methodPrms, methodResultList]);
+
+  useEffect(() => {
+    buscaMetodo();
+  }, [buscaMetodo]);
+
+  const fielValue = useMemo(() => /*isArray(getField(field, 'value')) ? */getField(field, 'value')/*?.map(item => isArray(item) ? item : Object.values(item)) : []*/, [field]);
+  
+  useEffect(() => {
+    if (field && !isEqual(lista, fielValue)) setLista(fielValue || []);
+  }, [field, lista, fielValue]);
+
+  useEffect(() => {
+    if (method || field) return;
+    if (isArray(lista) && lista.length > 0 && page === Math.ceil(method ? ctrlPgn.recordCount : lista.length / parseInt(rowsPerPage, 10))) dispatch({ type: 'decremmentPage' });
+  }, [page, method, lista.length, rowsPerPage, ctrlPgn.recordCount, lista, field]);
+
+  useEffect(() => dispatch({ type: 'setSelected', value: [] }), [lista]);
+  
+  useEffect(() => {
+    if (onSelect) onSelect(selected);
+  }, [selected]);
+
+  const dadosNaoCortados = useMemo(() => {
+    if (method) return lista || [];
+    if (isArray(lista) && lista.length > 0) return stableSort(lista, getComparator(order, orderBy), line)
+      .filter(linha => isArray(line(linha)) ? line(linha).filter(item => filter ? new RegExp(`.*${filter}.*`, 'gi').test(item?.toString()) : true).length > 0 : true) || [];
+    return [];
+  }, [lista, filter, order, orderBy, method, line]);
+
+  const cortaDados = useCallback((dados) => dados
+    ?.slice(defaultRowsPerPage === 0 ? (undefined) : page * rowsPerPage, defaultRowsPerPage === 0 ? (undefined) : page * rowsPerPage + rowsPerPage),
+  [page, rowsPerPage, defaultRowsPerPage]);
+
+  const dadosMostrados = useMemo(() => {
+    if (method) return lista || [];
+    return cortaDados(dadosNaoCortados) || [];
+  }, [method, lista, dadosNaoCortados, cortaDados]);
+
+  const handleOpenClose = useCallback((index) => {
+    if (index === open || (!index && index !== 0)) {
+      dispatch({ type: 'setOpen', value: undefined });
+      if (onClose && (index || open)) onClose({ linhaOriginal: dadosMostrados[index || open], linhaFormatada: line(dadosMostrados[index || open]) });
+    } else {
+      dispatch({ type: 'setOpen', value: index });
+      if (onOpen) onOpen({ linhaOriginal: dadosMostrados[index], linhaFormatada: line(dadosMostrados[index]) });
+    }
+  }, [open, onClose, onOpen, dadosMostrados, dispatch, line]);
+  
+  useImperativeHandle(ref, () => ({
+    setOpen: index => handleOpenClose(index),
+    getOpen: dadosMostrados[open],
+    getSelected: selected,
+    setSelected: s => dispatch({ type: 'setSelected', value: isFunction(s) ? s(selected, dadosMostrados) : s }),
+    setLoading: value => dispatch({ type: 'setLoading', value })
+  }));
+
+  return (
+    <TableContext.Provider value={{ ...memoState, dadosMostrados, lista, indexToSelect, method }}>
+      <ClickAwayListener onClickAway={onClickAway}>
+        <TableContainer component={Paper} variant='outlined' style={style} {...containerProps} className={clsx(classes.root, className)}>
+          <ToolbarComponent 
+            numSelected={selected.length} 
+            disableFilter={disableFilter || !!method}
+            {...{ actions, title, selected, filter, filterLabel, lista, indexToSelect, fixedToolbar, ...toolbarProps }} />
+          <Table {...{ ...tableProps, size }}>
+            <HeadComponent
+              size={method ? ctrlPgn.recordCount : dadosNaoCortados.length}
+              numSelected={selected.length}
+              rowCount={(rowsPerPage > (method ? ctrlPgn.recordCount : dadosNaoCortados.length)) ? method ? ctrlPgn.recordCount : dadosNaoCortados.length : rowsPerPage || dadosNaoCortados.length}
+              {...{ head, order, orderBy, enableCheck, headerColumnStyles, disableSorting, ordCols, method, cortaDados, disableCheckIf, line, enableDrag }}
+            />
+            <BodyComponent
+              {...{ 
+                children, line, lineStyle, lineTitle, handleOpenClose, lineClass, enableDrag,
+                enableCheck, columnStyles, head, columnOptions, columnProps, rowProps, onDrop,
+                onClick, onDoubleClick, indexToSelect, open, dadosMostrados, customKey, disableCheckIf
+              }}/>
+            {FooterComponent && <FooterComponent {...footerProps}/>}
+          </Table>
+          {rowsPerPageOptions !== 0 && Math.ceil(method ? ctrlPgn.recordCount : dadosNaoCortados.length / parseInt(rowsPerPageOptions[0], 10)) > 1 && (
+            <PaginationComponent
+              count={method ? ctrlPgn.recordCount : dadosNaoCortados.length}
+              onChangePage={(_, value) => {
+                dispatch({ type: 'setPage', value });
+                setCtrlPgn({ ...ctrlPgn, pgAtl: value + 1 });
+              }}
+              onChangeRowsPerPage={(e) => {
+                dispatch({ type: 'setRowsPerPage', value: parseInt(e.target.value, 10) });
+                dispatch({ type: 'setPage', value: 0 });
+                setCtrlPgn({ ...ctrlPgn, pgAtl: 1, qtRegs: parseInt(e.target.value, 10) });
+              }}
+              {...{ showCount, page, rowsPerPageOptions, rowsPerPage }} />
+          )}
+        </TableContainer>
+      </ClickAwayListener>
+    </TableContext.Provider>
+  );
+});
+
+ArgousComplexTable.propTypes = {
+  dados: PropTypes.array,
+  head: PropTypes.array,
+  line: PropTypes.func,
+  actions: PropTypes.array,
+  title: PropTypes.string,
+  defaultRowsPerPage: PropTypes.number,
+  rowsPerPageOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.oneOf([0])]),
+  enableCheck: PropTypes.bool,
+  showCount: PropTypes.bool,
+  lineStyle: PropTypes.func,
+  lineTitle: PropTypes.string,
+  lineClass: PropTypes.func,
+  onClick: PropTypes.func,
+  children: PropTypes.func,
+  style: PropTypes.object,
+  className: PropTypes.string,
+  columnStyles: PropTypes.array,
+  headerColumnStyles: PropTypes.array,
+  columnOptions: PropTypes.array,
+  disableFilter: PropTypes.bool,
+  filterLabel: PropTypes.string,
+  indexToSelect: PropTypes.number,
+  disableSorting: PropTypes.array,
+  size: PropTypes.oneOf(['small', 'normal']),
+  onOpen: PropTypes.func,
+  onClose: PropTypes.func,
+  method: PropTypes.string,
+  methodPrms: PropTypes.object,
+  field: PropTypes.string,
+  fixedToolbar: PropTypes.bool,
+  onSelect: PropTypes.func
+};
+
+export default memo(ArgousComplexTable, isEqual);

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

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

package/lib/components/ArgousComplexTable/index.js

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

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

@@ -0,0 +1,177 @@
+import { TableCellBaseProps, TableRowProps } from '@material-ui/core';
+import * as React from 'react';
+
+export declare interface ChildrenFunction {
+  /**
+   * Função sera executada quando for clicado em alguma linha, seu retorno aparecerá abaixo da linha clicada
+   * 
+   * @param linhaOriginal - Linha original, antes de ser formatada pela função line
+   * @param linha - Linha ja formatada pela função line
+   * @param index - Índice da linha
+   * 
+   * @returns {React.ReactNode} Componente react 
+   */ 
+  (props: {linhaOriginal: Array<any> | object, linha: Array<any>, index:number}): React.ReactNode
+}
+
+export declare interface ColumnOptions {
+  /**
+   * Indice da coluna a ser modificada
+   */ 
+  alias: number,
+  /**
+   * JSX Customizado para a coluna
+   * 
+   * @param itemFormatado - Item retornado pela funcao line no indice selecionado
+   * @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 {React.ReactNode} Componente react 
+   */ 
+  customJsx: (props: {index: number, itemFormatado: any, linhaFormatada: Array<any>, linhaOriginal: Array<any> | object}) => React.ReactNode
+}
+
+export interface ArgousComplexTableBodyProps {
+  /**
+   * @ignore
+   */
+  children?: React.ReactNode | ChildrenFunction,
+  /**
+   * 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>, 
+  /**
+   * Estilo que pode ser aplicado por linhas dependendo do conteúdo ou do índice da linha 
+   * 
+   * @param linhaOriginal - Linha original
+   * @param linhaFormatada - Linha formatada
+   * @param index - Índice da linha
+   * 
+   * @returns {React.CSSProperties} Estilos para a linha
+   */ 
+  lineStyle?: (linhaOriginal: Array<any> | object, linhaFormatada: Array<any>, index:number) => React.CSSProperties,
+  /**
+   * Classe que pode ser aplicada por linhas dependendo do conteúdo ou do índice da linha 
+   * 
+   * @param linhaFormatada - Linha formatada
+   * @param linhaOriginal - Linha original
+   * @param index - Índice da linha
+   * 
+   * @returns {string} Classe para a linha
+   */ 
+  lineClass?: (linhaFormatada: Array<any>, linhaOriginal: Array<any> | object, index: number) => string,
+  /**
+   * Habilita a seleção de linhas da lista 
+   */ 
+  enableCheck?: boolean,
+  /**
+   * Habilita o drag and drop das linhas
+   */ 
+  enableDrag?: boolean,
+  /**
+   * Função chamada ao clicar em uma linha
+   * 
+   * @param evento - Evento do drop
+   * 
+   * @returns {void} Sem retorno
+   */ 
+  onDrop?: (evento: React.DragEventHandler<HTMLDivElement>) => void,
+  /**
+   * 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,
+  /**
+   * Array de estilos para cada coluna da linha
+   */ 
+  columnStyles?: Array<React.CSSProperties>,
+  /**
+   * Função chamada ao clicar em uma linha
+   * 
+   * @param evento - Evento do click
+   * @param linhaOriginal - Linha original
+   * @param linhaFormatada - Linha formatada
+   * @param index - Índice da linha clicada
+   * 
+   * @returns {void} Sem retorno
+   */ 
+  onClick?: (evento: EventTarget, linhaOriginal: Array<any> | object, linhaFormatada: Array<any>, index:number) => void,
+  /**
+   * Ì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,
+  /**
+   * Array de opções para as colunas
+   * 
+   * @param alias - Índice da coluna
+   * @param customJsx - Função que retorna o JSX customizado
+   */ 
+  columnOptions?: Array<ColumnOptions>,
+  /**
+   * Title que aparecerá ao dar hover na linha
+   */ 
+  lineTitle?: string,
+  /**
+   * Item da linha original a ser utilizado como key no map
+   */ 
+  customKey?: string | number,
+  /**
+   * Props a serem repassados para a celula da tabela
+   * 
+   * @param index - Index da coluna sendo testada
+   * @param coluna - Item da coluna sendo testada
+   * @param linhaOriginal - Linha original sendo testada
+   * @param linhaFormatada - Linha formatada sendo testada
+   * 
+   * @returns {TableCellBaseProps} Props a serem passados para a coluna
+   */ 
+  columnProps?: (index: number, coluna: any, linhaOriginal: Array<any> | object, linhaFormatada: Array<any>) => TableCellBaseProps,
+  /**
+   * Props a serem repassados para a linha da tabela
+   * 
+   * @param index - Index da coluna sendo testada
+   * @param linhaOriginal - Linha original sendo testada
+   * @param linhaFormatada - Linha formatada sendo testada
+   * @param itensSelecionados - Linha formatada sendo testada
+   * 
+   * @returns {TableRowProps} Props a serem passados para a linha
+   */ 
+  rowProps?: (props: {index: number, linhaOriginal: Array<any> | object, linhaFormatada: Array<any>, itensSelecionados: any[]}) => TableRowProps
+}
+
+export interface ArgousComplexTableBodyPrivateProps extends ArgousComplexTableBodyProps {
+  /**
+   * Função que abre a linha clicada
+   * 
+   * @param index - Índice da linha clicada
+   * 
+   * @returns {void} Sem retorno
+   */
+  handleOpenClose: (index: number) => void,
+  /**
+   * Array de títulos para o cabeçalho da tabela
+   */ 
+  head?: Array<string>, 
+  /**
+   * Índice aberto 
+   */
+  open: number,
+  /**
+   * Array de dados que estão visíveis no momento
+   */
+  dadosMostrados: Array<Array<any> | Object>,
+}
+
+declare function ArgousComplexTableBody(props: ArgousComplexTableBodyPrivateProps): JSX.Element
+
+export default ArgousComplexTableBody;