@dartech/arsenal-ui 1.2.4 → 1.2.6

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

@@ -0,0 +1,42 @@
+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

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

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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,138 @@
+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

@@ -0,0 +1,67 @@
+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

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

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

@@ -0,0 +1,54 @@
+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;

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

@@ -0,0 +1,50 @@
+import { useCallback, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+const useTableSorting = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const sortParams = useMemo(
+    () => searchParams.getAll('sort').map((param) => param.split(',')),
+    [searchParams]
+  );
+
+  const onSortChanged = useCallback(
+    (sortKey: string) => {
+      setSearchParams((params) => {
+        console.log(sortKey, params.get('page'));
+        params.delete('sort');
+
+        let keyFound = false;
+        sortParams.forEach(([key, value]) => {
+          if (key === sortKey) {
+            keyFound = true;
+            if (value === 'asc') {
+              params.append('sort', `${key},desc`);
+            }
+          } else {
+            params.append('sort', `${key},${value}`);
+          }
+        });
+
+        if (!keyFound) {
+          params.append('sort', `${sortKey},asc`);
+        }
+
+        return params;
+      });
+    },
+    [sortParams, setSearchParams]
+  );
+
+  const getColumnSorting = useCallback(
+    (sortKey: string) => {
+      const sort = sortParams.find(([key, _]) => key === sortKey);
+      return sort ? sort[1] : false;
+    },
+    [sortParams]
+  );
+
+  return { sortParams, onSortChanged, getColumnSorting };
+};
+export default useTableSorting;

package/src/lib/Table/index.ts

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

package/src/lib/Tabs/RouteTabs.tsx

@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import TabPanel from './TabPanel';
+
+import { useNavigate, useLocation } from 'react-router-dom';
+
+interface RouteTab {
+  name: string;
+  label: string;
+  component: React.ReactElement;
+}
+
+interface Props {
+  tabs: RouteTab[];
+}
+
+export const RouteTabs = (props: Props) => {
+  const { tabs } = props;
+
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const queryParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
+  const value = queryParams.get('tab');
+
+  const handleChange = (event, newValue: string) => {
+    queryParams.set('tab', newValue);
+    navigate({ pathname: location.pathname, search: queryParams.toString() }, { replace: true });
+  };
+
+  return (
+    <Box>
+      <Paper>
+        <Tabs value={value || tabs[0]?.name} indicatorColor="primary" textColor="primary" onChange={handleChange}>
+          {tabs.map((tab) => (
+            <Tab key={tab.name} value={tab.name} label={tab.label} />
+          ))}
+        </Tabs>
+      </Paper>
+      <Box mt={2}>
+        {tabs.map((tab) => (
+          <TabPanel key={tab.name} value={value || tabs[0]?.name} index={tab.name}>
+            {tab.component}
+          </TabPanel>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default RouteTabs;

package/src/lib/Tabs/TabPanel.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+/**
+ * This interface is referencing the [[TabPanel]] component props.
+ * @category Common UI components
+ */
+export interface TabPanelProps {
+  /**
+   * Active tab value
+   */
+  value: number | string;
+  /**
+   * Index of current panel
+   */
+  index: number | string;
+  /**
+   * Rendered children component
+   */
+  children: React.ReactElement;
+}
+
+/**
+ * Tab panel component. Used with tabs component
+ * @category Common UI components
+ */
+export const TabPanel = (props: TabPanelProps) => {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index ? children : null}
+    </div>
+  );
+};
+
+export default TabPanel;

package/src/lib/Tabs/{index.d.ts → index.ts}

@@ -1,2 +1,2 @@
-export * from './TabPanel';
-export * from './RouteTabs';
+export * from './TabPanel';
+export * from './RouteTabs';

package/src/lib/{index.d.ts → index.ts}

@@ -1,16 +1,16 @@
-export * from './Alert';
-export * from './Forms';
-export * from './Loader';
-export * from './Table';
-export * from './Tabs';
-export * from './Modals';
-export * from './InfoItem';
-export * from './Definition';
-export * from './Property';
-export * from './Status';
-export * from './JsonView';
-export * from './JsonPathPicker';
-export * from './StepperView';
-export * from './Sidebar';
-export * from './ContentLayout';
-export * from './Breadcrumbs';
+export * from './Alert';
+export * from './Forms';
+export * from './Loader';
+export * from './Table';
+export * from './Tabs';
+export * from './Modals';
+export * from './InfoItem';
+export * from './Definition';
+export * from './Property';
+export * from './Status';
+export * from './JsonView';
+export * from './JsonPathPicker';
+export * from './StepperView';
+export * from './Sidebar';
+export * from './ContentLayout';
+export * from './Breadcrumbs';