@dartech/arsenal-ui 1.2.5 → 1.2.7

package/src/lib/Table/DataGrid/Table.tsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import TablePagination from './TablePagination';
-import TableColumnMenu from './TableColumnMenu';
-import useTableQueryPagination from './useTableQueryPagination';
-import useTableQuerySorting from './useTableQuerySorting';
-import usePagination from './usePagination';
-import { DataGrid, GridCellParams, GridColumns, GridFeatureMode, GridRowsProp } from '@mui/x-data-grid';
-import useStyles from './styles';
-import Box from '@mui/material/Box';
-
-/**
- * This interface is referencing the [[Table]] component props.
- * @category Common UI components
- */
-export interface TableProps {
-  /**
-   * Data loading state
-   */
-  loading?: boolean;
-  /**
-   * Table columns
-   */
-  columns: GridColumns;
-  /**
-   * Table rows
-   */
-  rows: GridRowsProp;
-  /**
-   * Rows count to display
-   */
-  rowCount: number;
-  disableMargin?: boolean;
-  /**
-   * Data display mode.
-   * Values: `client` | `server`;
-   * Default: `server`
-   */
-  mode?: GridFeatureMode;
-  /**
-   * Page size. Default `10`
-   */
-  initialPageSize?: number;
-  /**
-   * On cell click handler function
-   * ```typescript
-   * (params: GridCellParams, event: React.MouseEvent) => void;
-   * ```
-   */
-  onCellClick?: (params: GridCellParams, event: React.MouseEvent) => void;
-  pagination?: boolean;
-}
-
-/**
- * Main data display component. MUI DataGrid used
- * @category Common UI components
- */
-export const Table = ({
-  columns,
-  rows,
-  rowCount,
-  loading,
-  disableMargin,
-  mode = 'server',
-  initialPageSize = 10,
-  pagination = true,
-  onCellClick,
-}: TableProps) => {
-  const { classes } = useStyles();
-
-  const { page, size, onPageChange, onSizeChange } = useTableQueryPagination({ mode });
-  const { onColumnHeaderClick, getSortedColumns } = useTableQuerySorting();
-
-  const { pageSize, handlePageSizeChange } = usePagination(initialPageSize);
-
-  const tableProps = {
-    sortingMode: mode,
-    paginationMode: mode,
-    pageSize: mode === 'server' ? size : pagination ? pageSize : rowCount,
-    onPageSizeChange: mode === 'server' ? onSizeChange : handlePageSizeChange,
-    components: {
-      Pagination: TablePagination,
-    },
-  };
-
-  if (mode === 'server') {
-    tableProps['sortModel'] = [];
-    tableProps['onColumnHeaderClick'] = onColumnHeaderClick;
-    tableProps['page'] = page;
-    tableProps['onPageChange'] = onPageChange;
-    tableProps.components['ColumnMenu'] = TableColumnMenu;
-  }
-
-
-  return (
-    <Box mt={disableMargin ? 0 : 2}>
-      <DataGrid
-        autoHeight
-        hideFooterPagination={!pagination}
-        hideFooter={!pagination}
-        disableSelectionOnClick
-        showColumnRightBorder
-        showCellRightBorder
-        className={classes.root}
-        loading={loading}
-        rows={rows}
-        columns={getSortedColumns(columns)}
-        rowCount={rowCount}
-        rowsPerPageOptions={[10, 20, 50, 100]}
-        onCellClick={onCellClick}
-        {...tableProps}
-      />
-      
-    </Box>
-  );
-};
-
-export default Table;

package/src/lib/Table/DataGrid/TableAction.tsx

@@ -1,43 +0,0 @@
-import Tooltip from '@mui/material/Tooltip';
-import { GridActionsCellItem } from '@mui/x-data-grid';
-import IconButton from '@mui/material/IconButton';
-import { Link } from 'react-router-dom';
-import React, { ReactElement } from 'react';
-
-type Props = {
-  icon: ReactElement;
-  onClick?: () => void;
-  label: string;
-  showInMenu?: boolean;
-  location?: {
-    pathname: string;
-    state?: Record<string, unknown>;
-  }
-};
-
-export const TableAction = ({ icon, label, showInMenu, onClick, location }: Props) => {
-  if (location) {
-    return (
-      <IconButton component={Link} to={location} size="small">
-        <Tooltip title={label} arrow>
-          {React.cloneElement(icon, { fontSize: 'small' })}         
-        </Tooltip>        
-      </IconButton>
-    )
-  }
-  return (    
-    <GridActionsCellItem
-      nonce=""
-      onResize={undefined}
-      onResizeCapture={undefined}
-      icon={
-        <Tooltip title={label} arrow>
-          {icon}
-        </Tooltip>
-      }
-      onClick={onClick}
-      label={label}
-      showInMenu={showInMenu}
-    />
-  );
-};

package/src/lib/Table/DataGrid/TableColumnMenu.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { GridColumnMenuContainer, GridFilterMenuItem } from '@mui/x-data-grid';
-
-const TableColumnMenu = ({ hideMenu, currentColumn, onUnsort, ...rest }: any) => {
-  return (
-    <GridColumnMenuContainer hideMenu={hideMenu} currentColumn={currentColumn} {...rest}>
-      <GridFilterMenuItem onClick={hideMenu} column={currentColumn} />
-    </GridColumnMenuContainer>
-  );
-};
-
-export default TableColumnMenu;

package/src/lib/Table/DataGrid/TablePagination.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import Box from '@mui/material/Box';
-import Pagination from '@mui/material/Pagination';
-import MuiTablePagination from '@mui/material/TablePagination';
-import {
-  gridPageCountSelector,
-  gridPageSelector,
-  gridRowCountSelector,
-  gridPageSizeSelector,
-  useGridApiContext,
-  useGridSelector,
-} from '@mui/x-data-grid';
-
-const TablePagination = () => {
-  const apiRef = useGridApiContext();
-  const page = useGridSelector(apiRef, gridPageSelector);
-  const pageCount = useGridSelector(apiRef, gridPageCountSelector);
-  const rowCount = useGridSelector(apiRef, gridRowCountSelector);
-  const pageSize = useGridSelector(apiRef, gridPageSizeSelector);
-
-  const onPageChange = (value) => apiRef.current.setPage(value);
-  const onRowsPerPageChange = (event: React.ChangeEvent<HTMLInputElement>) =>
-    apiRef.current.setPageSize(parseInt(event.target.value, 10));
-
-  return (
-    <Box px={2} display="flex" alignItems="center">
-      <MuiTablePagination
-        component="div"
-        page={page}
-        count={rowCount}
-        rowsPerPage={pageSize}
-        rowsPerPageOptions={[10, 20, 50, 100]}
-        onPageChange={(event, value) => onPageChange(value)}
-        onRowsPerPageChange={onRowsPerPageChange}
-        ActionsComponent={undefined}
-      />
-      <Pagination count={pageCount} page={page + 1} onChange={(event, value) => onPageChange(value - 1)} />
-    </Box>
-  );
-};
-
-export default TablePagination;

package/src/lib/Table/DataGrid/index.ts

@@ -1,2 +0,0 @@
-export * from './Table';
-export * from './TableAction';

package/src/lib/Table/DataGrid/styles.ts

@@ -1,59 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export default makeStyles()({
-  root: {
-    width: '100%',
-
-    '& .MuiDataGrid-virtualScrollerContent': {
-      height: 'auto !important',
-      minHeight: '56px !important',
-    },
-
-    '& .MuiDataGrid-virtualScrollerRenderZone': {
-      position: 'static',
-    },
-
-    '& .MuiDataGrid-renderingZone': {
-      maxHeight: 'none !important',
-    },
-
-    '& .MuiDataGrid-cell': {
-      maxHeight: 'none !important',
-      lineHeight: 'unset !important',
-      // whiteSpace: 'normal !important',
-      textOverflow: 'ellipsis',
-      wordBreak: 'break-all',
-
-      '& .MuiDataGrid-actionsCell': {
-        width: '100%',
-        gridGap: '4px',
-        flexWrap: 'wrap',
-
-        '& > button[aria-label="more"]': {
-          marginLeft: 'auto',
-        },
-      },
-    },
-
-    '& .MuiDataGrid-row': {
-      maxHeight: 'none !important',
-    },
-
-    '& .Sorted': {
-      '& .MuiDataGrid-iconButtonContainer': {
-        visibility: 'visible',
-        width: 'auto',
-
-        '& svg': {
-          opacity: '1 !important',
-        },
-      },
-
-      '&.--desc': {
-        '& svg': {
-          transform: 'rotate(180deg)',
-        },
-      },
-    },
-  },
-});

package/src/lib/Table/DataGrid/usePagination.ts

@@ -1,15 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const usePagination = (initialPageSize?: number) => {
-  const [pageSize, setPageSize] = useState(10);
-
-  useEffect(() => {
-    setPageSize(initialPageSize);
-  }, [initialPageSize]);
-
-  const handlePageSizeChange = (size) => setPageSize(size);
-
-  return { pageSize, handlePageSizeChange };
-};
-
-export default usePagination;

package/src/lib/Table/DataGrid/useTableQueryPagination.ts

@@ -1,47 +0,0 @@
-import { useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { GridFeatureMode } from '@mui/x-data-grid';
-
-interface Props {
-  mode: GridFeatureMode;
-}
-
-export const useTableQueryPagination = ({ mode }: Props) => {
-  const [queryParams, setQueryParams] = useSearchParams();
-
-  const page = +queryParams.get('page') || 0;
-  const size = +queryParams.get('size') || 10;
-
-  const onPageChange = (newPage: number) => {
-    queryParams.set('page', `${newPage}`);
-    setQueryParams(queryParams, { replace: true });
-  };
-
-  const onSizeChange = (count: number) => {
-    queryParams.set('size', `${count}`);
-    setQueryParams(queryParams, { replace: true });
-  };
-
-  useEffect(() => {
-    if (mode === 'server') {
-      if (!queryParams.has('page')) {
-        queryParams.set('page', '0');
-      }
-
-      if (!queryParams.has('size')) {
-        queryParams.set('size', `10`);
-      }
-
-      setQueryParams(queryParams, { replace: true });
-    }
-  }, [mode, queryParams, setQueryParams]);
-
-  return {
-    page,
-    size,
-    onPageChange,
-    onSizeChange,
-  };
-};
-
-export default useTableQueryPagination;

package/src/lib/Table/DataGrid/useTableQuerySorting.ts

@@ -1,47 +0,0 @@
-import { useSearchParams } from 'react-router-dom';
-import { GridColumnHeaderParams, GridColumns } from '@mui/x-data-grid';
-
-export const useTableQuerySorting = () => {
-  const [queryParams, setQueryParams] = useSearchParams();
-  const sortParams = queryParams.getAll('sort').map((param) => param.split(','));
-
-  const onColumnHeaderClick = ({ field }: GridColumnHeaderParams) => {
-    let keyFound = false;
-
-    const sortValues = queryParams.getAll('sort');
-    queryParams.delete('sort');
-
-    sortValues.forEach((sortValue) => {
-      const [key, sort] = sortValue.split(',');
-      if (key === field) {
-        keyFound = true;
-        if (sort === 'asc') {
-          queryParams.append('sort', `${key},desc`);
-        }
-      } else {
-        queryParams.append('sort', `${key},${sort}`);
-      }
-    });
-
-    if (!keyFound) {
-      queryParams.append('sort', `${field},asc`);
-    }
-    setQueryParams(queryParams, { replace: true });
-  };
-
-  const getSortedColumns = (columns: GridColumns): GridColumns => {
-    return columns.map((column) => {
-      const columnSort = sortParams.find((param) => param[0] === column.field);
-      if (columnSort) {
-        column.headerClassName = `Sorted --${columnSort[1]} `;
-      } else {
-        column.headerClassName = '';
-      }
-      return column;
-    });
-  };
-
-  return { onColumnHeaderClick, getSortedColumns };
-};
-
-export default useTableQuerySorting;

package/src/lib/Table/SimpleTable/SimpleTable.tsx

@@ -1,138 +0,0 @@
-import { ReactNode, forwardRef, ForwardedRef } from 'react';
-import MuiTable from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TablePagination from '@mui/material/TablePagination';
-import TableRow from '@mui/material/TableRow';
-import TableSortLabel from '@mui/material/TableSortLabel';
-import TableFooter from '@mui/material/TableFooter';
-
-import { Column, Row } from '../../../interfaces';
-import { Loader } from '../../Loader';
-import Backdrop from '@mui/material/Backdrop';
-import useTablePagination from './useTablePagination';
-import useTableSorting from './useTableSorting';
-
-type SortDirection = "asc" | "desc";
-
-interface Props<T> {
-  columns: Column<T>[];
-  rows: Row<T>[];
-  totalCount: number;
-  loading?: boolean;
-  pagination?: boolean;
-  onRowClick?: (row: Row<T>) => void;
-  children?: ReactNode;
-  verticalAlign?: 'top' | 'middle' | 'bottom' | 'sub' | 'baseline';
-}
-
-function TableInner<T>({
-  columns = [],
-  rows = [],
-  totalCount,
-  children,
-  pagination = true,
-  loading = false,
-  onRowClick,
-  verticalAlign = 'middle'
-}: Props<T>, ref: ForwardedRef<HTMLTableElement>) {
-  const { page, size, onPageChange, onSizeChange } = useTablePagination();
-  const { onSortChanged, getColumnSorting } = useTableSorting();
-
-  return (
-    <TableContainer sx={{ position: 'relative', overflow: 'visible' }}>
-      <Backdrop open={loading} sx={{ position: 'absolute', top: 0, left: 0 }}>
-        <Loader />
-      </Backdrop>
-      <MuiTable ref={ref}>
-        <TableHead>
-          <TableRow>
-            {columns.map((column, index) => {
-              const sortDirection = column.sortKey
-                ? getColumnSorting(column.sortKey)
-                : false;
-              return (
-                <TableCell
-                  key={index}
-                  align={column.align ? column.align : 'left'}
-                  sortDirection={sortDirection as SortDirection}
-                  sx={{ width: column.width ? `${column.width}%` : 'unset' }}
-                >
-                  <TableSortLabel
-                    active={!!sortDirection}
-                    hideSortIcon={!column.sortKey}
-                    direction={(sortDirection as SortDirection) || 'asc'}
-                    onClick={() =>
-                      column.sortKey ? onSortChanged(column.sortKey) : {}
-                    }
-                  >
-                    {column.label}
-                  </TableSortLabel>
-                </TableCell>
-              );
-            })}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {rows.map((row, index) => (
-            <TableRow
-              hover
-              onClick={onRowClick ? () => onRowClick(row) : row.onClick}
-              key={index}
-              sx={{ verticalAlign }}
-            >
-              {columns.map((column, idx) => (
-                <TableCell
-                  key={idx}
-                  align={column.align ? column.align : 'left'}
-                  sx={{ width: column.width ? `${column.width}%` : 'unset' }}
-                >
-                  {column.renderCell
-                    ? column.renderCell(row, index)
-                    : ((row as any)[column.id] as string)}
-                </TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableBody>
-        {(pagination || children) ? (
-          <TableFooter>
-            <TableRow>
-              {
-                children && (
-                  <TableCell
-                    colSpan={columns.length}
-                    sx={{ background: '#F0F0F7', px: 4, py: 3 }}
-                  >
-                    {children}
-                  </TableCell>
-                )
-              }
-              {
-                pagination && rows.length && (
-                  <TablePagination
-                    rowsPerPageOptions={[5, 10, 25]}
-                    count={totalCount}
-                    rowsPerPage={+size}
-                    page={+page}
-                    sx={{ borderBottom: 'none' }}
-                    onPageChange={(_, page) => onPageChange(page)}
-                    onRowsPerPageChange={(event) =>
-                      onSizeChange(+event.target.value)
-                    }
-                  />
-                )
-              }              
-            </TableRow>
-          </TableFooter>
-        ) : null}
-      </MuiTable>
-    </TableContainer>
-  );
-}
-export const SimpleTable = forwardRef(TableInner) as <T>(
-  props: Props<T> & { ref?: ForwardedRef<HTMLTableElement> }
-) => ReturnType<typeof TableInner>;
-export default SimpleTable;

package/src/lib/Table/SimpleTable/TableActionCell.tsx

@@ -1,67 +0,0 @@
-import { useState, MouseEvent } from 'react';
-import IconButton from '@mui/material/IconButton';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-
-type ActionItem = {
-  title: string;
-  onClick: (e?: MouseEvent<HTMLElement>) => void;
-}
-
-type Props = {
-  actionsList: ActionItem[]
-}
-
-export const TableActionCell = ({ actionsList }: Props) => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (e: MouseEvent<HTMLElement>) => {
-    e.stopPropagation();
-    setAnchorEl(e.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  return (
-    <div>
-      <IconButton
-        aria-label="more"
-        id="more-button"
-        aria-controls={open ? 'more-menu' : undefined}
-        aria-expanded={open ? 'true' : undefined}
-        aria-haspopup="true"
-        onClick={handleClick}
-      >
-        <MoreHorizIcon />
-      </IconButton>
-      <Menu
-        id="more-menu"
-        MenuListProps={{
-          'aria-labelledby': 'more-button',
-        }}
-        anchorEl={anchorEl}
-        open={open}
-        onClose={(e: MouseEvent<HTMLElement>) => {
-          e.stopPropagation();
-          handleClose();
-        }}
-        PaperProps={{
-          style: {
-            minWidth: '127px'
-          }
-        }}
-      >
-        {actionsList.map((option) => (
-          <MenuItem key={option.title} onClick={(e: MouseEvent<HTMLElement>) => {
-            e.stopPropagation();
-            if (option.onClick) option.onClick();
-            handleClose();
-          }}>
-            {option.title}
-          </MenuItem>
-        ))}
-      </Menu>
-    </div>
-  )
-}

package/src/lib/Table/SimpleTable/index.ts

@@ -1,2 +0,0 @@
-export * from './SimpleTable';
-export * from './TableActionCell';

package/src/lib/Table/SimpleTable/useTablePagination.ts

@@ -1,54 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
-
-const useTablePagination = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const page = useMemo(
-    () => searchParams.get('page') ?? 0,
-    [searchParams]
-  );
-  const size = useMemo(
-    () => searchParams.get('size') ?? 10,
-    [searchParams]
-  );
-
-  const onPageChange = useCallback(
-    (newPage: number) => {
-      setSearchParams((params) => {
-        params.set('page', `${newPage}`);
-        return params;
-      });
-    },
-    [setSearchParams]
-  );
-
-  const onSizeChange = useCallback(
-    (newSize: number) => {
-      setSearchParams((params) => {
-        params.set('size', `${newSize}`);
-        return params;
-      });
-    },
-    [setSearchParams]
-  );
-
-  useEffect(() => {
-    if (!searchParams.has('page')) {      
-      setSearchParams((params) => {
-        params.set('page', '0');
-        return params;
-      });
-    }
-    if (!searchParams.has('size')) {
-      setSearchParams((params) => {
-        params.set('size', '10');
-        return params;
-      });
-    }
-  }, [searchParams, setSearchParams]);
-
-  return { page, size, onPageChange, onSizeChange };
-};
-
-export default useTablePagination;