argous 1.2.132 → 1.2.136

package/lib/components/ArgousComplexPagination/ArgousComplexPagination.d.ts

@@ -0,0 +1,76 @@
+import { SelectProps } from '@material-ui/core';
+import * as React from 'react';
+
+export interface ArgousComplexPaginationProps {
+  /**
+   * Array de opções para as quantidades de linhas por pagina possiveis
+   * 
+   * Se receber zero como opção ao invés de um array a tabela tera todas as linahs numa só página
+   */ 
+  rowsPerPageOptions?: Array<number> | 0, 
+  /**
+   * Mostra a quantidade total de linhas da tabela
+   */ 
+  showCount?: boolean
+}
+
+export interface ArgousComplexPaginationPrivateProps extends ArgousComplexPaginationProps {
+  /**
+   * Componente com os botões de mudança de página
+   */
+  ActionsComponent: (props: {count: number, page: number, rowsPerPage: number, onChangePage: (evento: EventTarget, novaPagina: number) => void}) => JSX.Element,
+  /**
+   * Componente com o display das páginas
+   */
+  LabelDisplayedRows: (props: {pages: number, page: number, onChangePage: (evento: EventTarget, novaPagina: number) => void, from: number, to: number, count: number, showCount: boolean}) => JSX.Element,
+  /**
+   * Classes aplicadas á raiz do componente
+   */
+  className?: string,
+  /**
+   * Texto representando os itens da paginação (Linhas por padrão)
+   */
+  labelRowsPerPage?: string,
+  /**
+   * Props repassados ao componente de seleção
+   */
+  SelectProps?: SelectProps,
+  /**
+   * Quantidade total de linhas
+   */
+  count: number,
+  /**
+   * Função chamada ao mudar de página
+   * 
+   * @param evento - Evento do click
+   * @param novaPagina - Número da nova página selecionada
+   * 
+   * @returns {void} Sem retorno
+   */
+  onChangePage: (evento: EventTarget, novaPagina: number) => void,
+  /**
+   *  Função chamada ao mudar a quantidade de itens por página
+   * 
+   * @param evento - Evento do click
+   * @param filho - Elemento que foi selecionado
+   * 
+   * @returns {void} Sem retorno
+   */
+  onChangeRowsPerPage: ((evento: React.ChangeEvent<{name?: string | undefined; value: unknown;}>, filho: React.ReactNode) => void) | undefined,
+  /**
+   * Página atual 
+   */
+  page: number,
+  /**
+   * Quantidade de linhas por página
+   */
+  rowsPerPage: number,
+  // backIconButtonProps?,
+  // backIconButtonText?: string,
+  // nextIconButtonProps?,
+  // nextIconButtonText?: string,
+}
+
+declare function ArgousComplexPagination(props: ArgousComplexPaginationPrivateProps): JSX.Element
+
+export default ArgousComplexPagination;

package/lib/components/ArgousComplexPagination/ArgousComplexPagination.js

@@ -0,0 +1,182 @@
+import { makeStyles, Toolbar, Typography, Select, InputBase, MenuItem, useTheme, IconButton, Box } from '@material-ui/core';
+import clsx from 'clsx';
+import React, { memo } from 'react';
+import { MdLastPage, MdFirstPage, MdKeyboardArrowRight, MdKeyboardArrowLeft } from 'react-icons/md';
+
+const useStyles = makeStyles(theme => ({
+  pagination: {
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    color: theme.palette.text.primary,
+    fontSize: theme.typography.pxToRem(14),
+    overflow: 'auto',
+    '&:last-child': {
+      padding: 0,
+    },
+  },
+  toolbar: {
+    minHeight: 52,
+    paddingRight: 2,
+  },
+  spacer: {
+    flex: '1 1 100%',
+  },
+  caption: {
+    flexShrink: 0,
+  },
+  selectRoot: {
+    marginRight: 32,
+    marginLeft: 8,
+  },
+  select: {
+    paddingLeft: 8,
+    paddingRight: 24,
+    textAlign: 'right',
+    textAlignLast: 'right',
+  },
+  input: {
+    color: 'inherit',
+    fontSize: 'inherit',
+    flexShrink: 0,
+  },
+  actions: {
+    flexShrink: 0,
+    marginLeft: 20,
+  },
+  paginationActions: {
+    flexShrink: 0,
+    marginLeft: theme.spacing(2.5),
+  },
+}));
+
+const handleChangePgAtual = (value, pages) => {
+  if (value < 1) return 0;
+  else if (value > pages) return pages - 1;
+  return value - 1;
+};
+
+const DefaultLabelDisplayedRows = ({ pages, page, onChangePage, from, to, count, showCount }) => {
+  return <React.Fragment>
+    <Box padding='1px 0px' display='inline'>
+      <InputBase inputProps={{ type: 'number', min: 1, max: pages || 1, value: page + 1 }} onChange={e => onChangePage(e, handleChangePgAtual(e.target.value, pages))} />
+      {` / ${pages || 1}`}
+    </Box>
+    {showCount && <div style={{ display: 'inline', marginLeft: '10px', paddingLeft: '10px' }}>{from} a {to} de {count}</div>}
+  </React.Fragment>;
+};
+
+const TablePaginationActions = memo(({ count, page, rowsPerPage, onChangePage }) => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const handleFirstPageButtonClick = e => onChangePage(e, 0);
+  const handleBackButtonClick = e => onChangePage(e, page - 1);
+  const handleNextButtonClick = e => onChangePage(e, page + 1);
+  const handleLastPageButtonClick = e => onChangePage(e, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  return (
+    <div className={classes.paginationActions}>
+      <IconButton
+        onClick={handleFirstPageButtonClick}
+        disabled={page === 0}
+      >
+        {theme.direction === 'rtl' ? <MdLastPage /> : <MdFirstPage />}
+      </IconButton>
+      <IconButton onClick={handleBackButtonClick} disabled={page === 0}>
+        {theme.direction === 'rtl' ? <MdKeyboardArrowRight /> : <MdKeyboardArrowLeft />}
+      </IconButton>
+      <IconButton
+        onClick={handleNextButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+      >
+        {theme.direction === 'rtl' ? <MdKeyboardArrowLeft /> : <MdKeyboardArrowRight />}
+      </IconButton>
+      <IconButton
+        onClick={handleLastPageButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+      >
+        {theme.direction === 'rtl' ? <MdFirstPage /> : <MdLastPage />}
+      </IconButton>
+    </div>
+  );
+});
+
+const ArgousComplexPagination = memo(({
+  ActionsComponent = TablePaginationActions,
+  // backIconButtonProps,
+  // backIconButtonText = 'Página Anterior',
+  className,
+  count,
+  LabelDisplayedRows = DefaultLabelDisplayedRows,
+  labelRowsPerPage = 'Linhas',
+  // nextIconButtonProps,
+  // nextIconButtonText = 'Próxima Página',
+  onChangePage,
+  onChangeRowsPerPage,
+  page,
+  rowsPerPage,
+  rowsPerPageOptions = [10, 25, 50, 100],
+  SelectProps = {},
+  showCount
+}) => {
+  const classes = useStyles();
+  const MenuItemComponent = SelectProps.native ? 'option' : MenuItem;
+  return (
+    <div className={clsx(classes.pagination, className)}>
+      <Toolbar className={classes.toolbar}>
+        <div className={classes.spacer} />
+        {rowsPerPageOptions.length > 1 && (
+          <Typography color='inherit' variant='body2' className={classes.caption}>
+            {labelRowsPerPage}
+          </Typography>
+        )}
+        {rowsPerPageOptions.length > 1 && (
+          <Select
+            classes={{
+              select: classes.select,
+              icon: classes.selectIcon,
+            }}
+            input={<InputBase className={clsx(classes.input, classes.selectRoot)} />}
+            value={rowsPerPage}
+            onChange={onChangeRowsPerPage}
+            {...SelectProps}
+          >
+            {rowsPerPageOptions.map((rowsPerPageOption) => (
+              <MenuItemComponent
+                className={classes.menuItem}
+                key={rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption}
+                value={rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption}
+              >
+                {rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption}
+              </MenuItemComponent>
+            ))}
+          </Select>
+        )}
+        <Typography color='inherit' variant='body2' component='div' className={classes.caption}>
+          <LabelDisplayedRows {...{
+            pages: Math.ceil(count / parseInt(rowsPerPage, 10)),
+            from: count === 0 ? 0 : page * rowsPerPage + 1,
+            to: count !== -1 ? Math.min(count, (page + 1) * rowsPerPage) : (page + 1) * rowsPerPage,
+            count: count === -1 ? -1 : count,
+            page, onChangePage, showCount
+          }}/>
+        </Typography>
+        <ActionsComponent
+          className={classes.actions}
+          // backIconButtonProps={{
+          //   title: backIconButtonText,
+          //   ...backIconButtonProps,
+          // }}
+          count={count}
+          // nextIconButtonProps={{
+          //   title: nextIconButtonText,
+          //   ...nextIconButtonProps,
+          // }}
+          onChangePage={onChangePage}
+          page={page}
+          rowsPerPage={rowsPerPage}
+        />
+      </Toolbar>
+    </div>
+  );
+});
+
+export default ArgousComplexPagination;

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

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

package/lib/components/ArgousComplexPagination/index.js

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

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

@@ -0,0 +1,131 @@
+import { ArgousComplexPaginationPrivateProps, ArgousComplexPaginationProps } from '../ArgousComplexPagination/ArgousComplexPagination';
+import { ArgousComplexTableBodyPrivateProps, ArgousComplexTableBodyProps } from '../ArgousComplexTableBody/ArgousComplexTableBody';
+import { ArgousComplexTableHeadPrivateProps, ArgousComplexTableHeadProps } from '../ArgousComplexTableHead/ArgousComplexTableHead';
+import { ArgousComplexTableToolBarPrivateProps, ArgousComplexTableToolBarProps } from '../ArgousComplexTableToolbar/ArgousComplexTableToolBar';
+import { TableContainerProps, TableProps } from '@material-ui/core';
+import React from 'react';
+
+export interface ArgousComplexTableProps extends ArgousComplexTableBodyProps, ArgousComplexPaginationProps, ArgousComplexPaginationProps, ArgousComplexTableHeadProps, ArgousComplexTableToolBarProps {
+  /**
+   * Componente para substituir a Toolbar padrão
+   */ 
+  ToolbarComponent?: (props: ArgousComplexTableToolBarPrivateProps) => JSX.Element,
+  /**
+   * Componente para substituir o Header padrão
+   */ 
+  HeadComponent?: (props: ArgousComplexTableHeadPrivateProps) => JSX.Element,
+  /**
+   * Componente para substituir o Body padrão
+   */ 
+  BodyComponent?: (props: ArgousComplexTableBodyPrivateProps) => JSX.Element,
+  /**
+   * Componente para substituir a pagination padrão
+   */ 
+  PaginationComponent?: (props: ArgousComplexPaginationPrivateProps) => JSX.Element,
+  /**
+   * Adiciona um Footer à tabela
+   */ 
+  FooterComponent?: React.ReactNode,
+  /**
+   * Props repassados ao componente de footer
+   */ 
+  footerProps?: object,
+  /**
+   * Array de dados fornecido paa a tabela
+   */ 
+  dados?: Array<Array<any> | Object>,
+  /**
+   * Número de linhas padrão por página
+   */ 
+  defaultRowsPerPage?: number,
+  /**
+   * Estilos aplicados à tabela
+   */ 
+  style?: React.CSSProperties,
+  /**
+   * Classes aplicadas à tabela
+   */ 
+  className?: string,
+  /**
+   * Tamanho da tabela
+   */ 
+  size?: 'small' | 'normal',
+  /**
+   * Função chamada ao abrir um item
+   * 
+   * @param linhaOriginal - Linha original 
+   * @param linhaFormatada - Linha formatada
+   * 
+   * @returns {void} Sem retorno
+   */ 
+  onOpen?: (linhaOriginal: Array<any> | object, linhaFormatada: Array<any>) => void,
+  /**
+   * Função chamada ao fechar um item
+   * 
+   * @param linhaOriginal - Linha original 
+   * @param linhaFormatada - Linha formatada
+   * 
+   * @returns {void} Sem retorno
+   */ 
+  onClose?: (linhaOriginal: Array<any> | object, linhaFormatada: Array<any>) => void,
+  /**
+   * Nome de metódo utilizando o padrão de caminhador argous para prover os dados para a tabela
+   */ 
+  method?: string,
+  /**
+   * Objeto de parâmetros passados para o método
+   */ 
+  methodPrms?: object,
+  /**
+   * Nome da chave do objeto de resposta do método (lista por padrão)
+   */ 
+  methodResultList?: string,
+  /**
+   * Função chamada apos o metodo receber uma resposta 
+   * 
+   * @param response - Resposta
+   * 
+   * @returns {void} Sem retorno
+   */
+  onMethodResponse?: (response: Object) => void,
+  /**
+   * @deprecated
+   * 
+   * Field contendo os dados a serem providos para a tabela
+   */ 
+  field?: string,
+  /**
+   * Função que é chamada sempre que os itens selecionados mudam
+   * 
+   * @param itensSelecionados - Array com os itens selecionados
+   * 
+   * @returns {void} Sem retorno
+   */ 
+  onSelect?: (itensSelecionados: Array<any>) => void,
+  /**
+   * Referência utilizada para salvar o estado da tabela quando ela é descarregada
+   */ 
+  //TODO criar interface para o savedstate
+  savedState?: React.RefObject<any>,
+  /**
+   * Referencia passada ao componente
+   */
+  //TODO criar interface para a referencia
+  ref?: React.RefObject<any>,
+  /**
+   * Props repassados ao componente container
+   */
+  containerProps?: TableContainerProps,
+  /**
+   * Props repassados ao componente table
+   */
+  tableProps?: TableProps,
+  /**
+   * Props repassados ao toolbar
+   */
+  toolbarProps?: any
+}
+
+declare function ArgousComplexTable(props: ArgousComplexTableProps): JSX.Element
+
+export default ArgousComplexTable;