@proteinjs/ui 2.0.2 → 2.0.4

package/src/router/withRouter.tsx

@@ -2,20 +2,15 @@ import React from 'react';
 import { NavigateFunction, useNavigate } from 'react-router-dom';
 
 export type WithRouterProps = {
-  navigate: NavigateFunction
-}
+  navigate: NavigateFunction;
+};
 
 export const withRouter = (Component: typeof React.Component) => {
   const Wrapper = (props: any) => {
     const navigate = useNavigate();
-    
-    return (
-      <Component
-          navigate={navigate}
-          {...props}
-        />
-    );
+
+    return <Component navigate={navigate} {...props} />;
   };
-  
+
   return Wrapper;
-};
+};

package/src/table/Table.tsx

@@ -1,51 +1,71 @@
-import React from 'react'
-import { useNavigate } from 'react-router-dom'
-import S from 'string'
-import { TableContainer, Table as MuiTable, TableBody, TableCell, TableHead, TablePagination, TableRow, Typography, Checkbox } from '@mui/material'
-import moment from 'moment'
-import { StringUtil } from '@proteinjs/util'
-import { TableLoader } from './TableLoader'
-import { TableButton } from './TableButton'
-import { TableToolbar } from './TableToolbar'
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import S from 'string';
+import {
+  TableContainer,
+  Table as MuiTable,
+  TableBody,
+  TableCell,
+  TableHead,
+  TablePagination,
+  TableRow,
+  Typography,
+  Checkbox,
+} from '@mui/material';
+import moment from 'moment';
+import { StringUtil } from '@proteinjs/util';
+import { TableLoader } from './TableLoader';
+import { TableButton } from './TableButton';
+import { TableToolbar } from './TableToolbar';
 
 export type TableProps<T> = {
-  title?: string,
-  description?: () => JSX.Element,
-  columns: (keyof T)[],
-  tableLoader: TableLoader<T>,
-  rowOnClickRedirectUrl?: (row: T) => Promise<string>,
-  defaultRowsPerPage?: number,
-  buttons?: TableButton<T>[],
-}
-
-export function Table<T>({ title, description, columns, tableLoader, rowOnClickRedirectUrl, defaultRowsPerPage = 10, buttons }: TableProps<T>) {
+  title?: string;
+  description?: () => JSX.Element;
+  columns: (keyof T)[];
+  tableLoader: TableLoader<T>;
+  rowOnClickRedirectUrl?: (row: T) => Promise<string>;
+  defaultRowsPerPage?: number;
+  buttons?: TableButton<T>[];
+};
+
+export function Table<T>({
+  title,
+  description,
+  columns,
+  tableLoader,
+  rowOnClickRedirectUrl,
+  defaultRowsPerPage = 10,
+  buttons,
+}: TableProps<T>) {
   const [rowsPerPage, setRowsPerPage] = React.useState(defaultRowsPerPage);
   const [page, setPage] = React.useState(0);
   const [totalRows, setTotalRows] = React.useState(0);
   const [rows, setRows] = React.useState<T[]>([]);
-  const [selectedRows, setSelectedRows] = React.useState<{[key: number]: T}>({});
+  const [selectedRows, setSelectedRows] = React.useState<{ [key: number]: T }>({});
   const [selectAll, setSelectAll] = React.useState(false);
   const navigate = useNavigate();
 
   React.useEffect(() => {
-		const fetchData = async () => {
-			const startIndex = page * rowsPerPage;
-			const endIndex = startIndex + rowsPerPage;
-			const rowWindow = await tableLoader.load(startIndex, endIndex);
-			setRows(rowWindow.rows);
+    const fetchData = async () => {
+      const startIndex = page * rowsPerPage;
+      const endIndex = startIndex + rowsPerPage;
+      const rowWindow = await tableLoader.load(startIndex, endIndex);
+      setRows(rowWindow.rows);
       setTotalRows(rowWindow.totalCount);
-		};
+    };
 
-		fetchData();
-	}, [page, rowsPerPage, tableLoader]);
+    fetchData();
+  }, [page, rowsPerPage, tableLoader]);
 
   async function handleRowOnClick(row: T) {
-    if (!rowOnClickRedirectUrl)
+    if (!rowOnClickRedirectUrl) {
       return;
+    }
 
     let redirectUrl = await rowOnClickRedirectUrl(row);
-    if (!redirectUrl.startsWith('/'))
+    if (!redirectUrl.startsWith('/')) {
       redirectUrl = `/${redirectUrl}`;
+    }
 
     navigate(redirectUrl);
   }
@@ -57,17 +77,19 @@ export function Table<T>({ title, description, columns, tableLoader, rowOnClickR
 
   function toggleSelectRow(rowIndex: number, row: T) {
     const newSelectedRows = Object.assign({}, selectedRows);
-    if (newSelectedRows[rowIndex])
+    if (newSelectedRows[rowIndex]) {
       delete newSelectedRows[rowIndex];
-    else
+    } else {
       newSelectedRows[rowIndex] = row;
+    }
 
     setSelectedRows(newSelectedRows);
 
-    if (selectAll && Object.keys(selectedRows).length != rows.length)
+    if (selectAll && Object.keys(selectedRows).length != rows.length) {
       setSelectAll(false);
-    else if (!selectAll && Object.keys(selectedRows).length == rows.length)
+    } else if (!selectAll && Object.keys(selectedRows).length == rows.length) {
       setSelectAll(true);
+    }
   }
 
   function toggleSelectAll(selected: boolean) {
@@ -75,8 +97,9 @@ export function Table<T>({ title, description, columns, tableLoader, rowOnClickR
       const newSelectedRows = Object.assign({}, selectedRows);
       for (let i = 0; i < rows.length; i++) {
         const index = rowsPerPage * page + i;
-        if (!newSelectedRows[index])
+        if (!newSelectedRows[index]) {
           newSelectedRows[index] = rows[i];
+        }
       }
       setSelectedRows(newSelectedRows);
     } else {
@@ -87,91 +110,84 @@ export function Table<T>({ title, description, columns, tableLoader, rowOnClickR
   }
 
   function formatCellValue(value: any): string {
-    if (value == null)
+    if (value == null) {
       return '';
+    }
 
-    if (typeof value === 'boolean')
+    if (typeof value === 'boolean') {
       return value ? 'True' : 'False';
+    }
 
-    if (moment.isMoment(value))
-      return value.format('ddd, MMM Do YY, h:mm:ss a')
+    if (moment.isMoment(value)) {
+      return value.format('ddd, MMM Do YY, h:mm:ss a');
+    }
 
-    if (typeof value === 'object')
+    if (typeof value === 'object') {
       return JSON.stringify(value);
+    }
 
     return value.toString();
   }
 
   return (
     <div style={{ overflow: 'auto', width: '100%' }}>
-      { (title || description || buttons && buttons.length > 0) && 
-				<TableToolbar 
-					title={title}
-					description={description}
-					selectedRows={Object.values(selectedRows)}
-					buttons={buttons}
-				/>
-			}
+      {(title || description || (buttons && buttons.length > 0)) && (
+        <TableToolbar
+          title={title}
+          description={description}
+          selectedRows={Object.values(selectedRows)}
+          buttons={buttons}
+        />
+      )}
       <TableContainer>
         <MuiTable stickyHeader>
           <TableHead>
             <TableRow>
-              { buttons && buttons.length > 0 && 
+              {buttons && buttons.length > 0 && (
                 <TableCell padding='checkbox'>
                   <Checkbox
                     checked={selectAll}
                     onChange={(event, selected) => toggleSelectAll(selected)}
-                    inputProps={{ 
-                      'aria-label': 'Select all'
+                    inputProps={{
+                      'aria-label': 'Select all',
                     }}
                   />
                 </TableCell>
-              }
-              { columns.map((column, index) => (
-                <TableCell
-                  key={index}
-                >
-                  <Typography variant='h6'>
-                    { StringUtil.humanizeCamel(column as string) }
-                  </Typography>
+              )}
+              {columns.map((column, index) => (
+                <TableCell key={index}>
+                  <Typography variant='h6'>{StringUtil.humanizeCamel(column as string)}</Typography>
                 </TableCell>
               ))}
             </TableRow>
           </TableHead>
           <TableBody>
-            { rows.map((row, index) => {
+            {rows.map((row, index) => {
               index = rowsPerPage * page + index;
               return (
-                <TableRow 
-                  hover 
-                  role='checkbox' 
-                  tabIndex={-1} 
+                <TableRow
+                  hover
+                  role='checkbox'
+                  tabIndex={-1}
                   key={index}
                   selected={typeof selectedRows[index] !== 'undefined'}
                 >
-                  { buttons && buttons.length > 0 && 
+                  {buttons && buttons.length > 0 && (
                     <TableCell padding='checkbox'>
                       <Checkbox
                         checked={typeof selectedRows[index] !== 'undefined'}
                         onChange={(event, value) => toggleSelectRow(index, row)}
-                        inputProps={{ 
-                          'aria-label': 'Select row'
+                        inputProps={{
+                          'aria-label': 'Select row',
                         }}
                       />
                     </TableCell>
-                  }
-                  { columns.map((column, index) => {
+                  )}
+                  {columns.map((column, index) => {
                     const cellValue = formatCellValue(row[column]);
                     return (
-                      <TableCell
-                        key={index}
-                        onClick={(event: any) => handleRowOnClick(row)}
-                      >
-                        <Typography 
-                          variant='subtitle1'
-                        >
-                          {cellValue}
-                        </Typography>
+                      <TableCell key={index} onClick={(event: any) => handleRowOnClick(row)}>
+                        <Typography variant='subtitle1'>{cellValue}</Typography>
                       </TableCell>
                     );
                   })}
@@ -188,8 +204,8 @@ export function Table<T>({ title, description, columns, tableLoader, rowOnClickR
         rowsPerPage={rowsPerPage}
         page={page}
         onPageChange={(event, newPage) => setPage(newPage)}
-        onRowsPerPageChange={event => updateRowsPerPage(parseInt(event.target.value))}
+        onRowsPerPageChange={(event) => updateRowsPerPage(parseInt(event.target.value))}
       />
     </div>
   );
-}
+}

package/src/table/TableButton.ts

@@ -1,12 +1,12 @@
-import React from 'react'
-import { NavigateFunction } from 'react-router'
+import React from 'react';
+import { NavigateFunction } from 'react-router';
 
 export type TableButton<T> = {
-  name: string,
-  icon: React.ComponentType,
+  name: string;
+  icon: React.ComponentType;
   visibility: {
-    showWhenRowsSelected: boolean,
-    showWhenNoRowsSelected: boolean,
-  },
-  onClick: (selectedRows: T[], navigate: NavigateFunction) => Promise<void>,
-}
+    showWhenRowsSelected: boolean;
+    showWhenNoRowsSelected: boolean;
+  };
+  onClick: (selectedRows: T[], navigate: NavigateFunction) => Promise<void>;
+};

package/src/table/TableLoader.ts

@@ -1,11 +1,11 @@
 export type RowWindow<T> = {
-  rows: T[],
-  totalCount: number,
-}
+  rows: T[];
+  totalCount: number;
+};
 
 export type TableLoader<T> = {
-  load: (startIndex: number, endIndex: number) => Promise<RowWindow<T>>,
-}
+  load: (startIndex: number, endIndex: number) => Promise<RowWindow<T>>;
+};
 
 export class StaticTableLoader<T> implements TableLoader<T> {
   constructor(private list: T[]) {}
@@ -16,4 +16,4 @@ export class StaticTableLoader<T> implements TableLoader<T> {
       totalCount: this.list.length,
     };
   }
-}
+}

package/src/table/TableToolbar.tsx

@@ -1,16 +1,16 @@
-import React from 'react'
-import { TableButton } from './TableButton'
-import { IconButton, Toolbar, Tooltip, Typography, lighten } from '@mui/material'
-import { useNavigate } from 'react-router'
+import React from 'react';
+import { TableButton } from './TableButton';
+import { IconButton, Toolbar, Tooltip, Typography, lighten } from '@mui/material';
+import { useNavigate } from 'react-router';
 
 export type TableToolbarProps = {
-  title?: string,
-  selectedRows: any[],
-  description?: () => JSX.Element,
-  buttons?: TableButton<any>[],
-}
+  title?: string;
+  selectedRows: any[];
+  description?: () => JSX.Element;
+  buttons?: TableButton<any>[];
+};
 
-export const TableToolbar = (props : TableToolbarProps) => {
+export const TableToolbar = (props: TableToolbarProps) => {
   const { title, selectedRows, buttons } = props;
   const navigate = useNavigate();
   return (
@@ -18,19 +18,19 @@ export const TableToolbar = (props : TableToolbarProps) => {
       sx={(theme) => {
         if (selectedRows.length > 0) {
           return theme.palette.mode === 'light'
-          ? {
-            color: theme.palette.info.main,
-            backgroundColor: lighten(theme.palette.info.light, 0.85),
-          }
-          : {
-            color: theme.palette.info.light,
-            backgroundColor: theme.palette.info.dark,
-          };
+            ? {
+                color: theme.palette.info.main,
+                backgroundColor: lighten(theme.palette.info.light, 0.85),
+              }
+            : {
+                color: theme.palette.info.light,
+                backgroundColor: theme.palette.info.dark,
+              };
         }
 
         return {
           paddingLeft: theme.spacing(2),
-		      paddingRight: theme.spacing(1),
+          paddingRight: theme.spacing(1),
         };
       }}
     >
@@ -40,60 +40,53 @@ export const TableToolbar = (props : TableToolbarProps) => {
           flex: '0 0 auto',
         }}
       >
-				{ selectedRows.length > 0 ? (
-					<Typography variant='subtitle1' color='inherit'>
-						{selectedRows.length} rows selected
-					</Typography>
-				) : (
-					<div>
-            { typeof title !== 'undefined' && 
-              <Typography variant='h5'>
-                {title}
-              </Typography>
-            }
-						{ typeof props.description !== 'undefined' && 
-							<props.description />
-						}
-					</div>
-				)}
-			</div>
-			<div
+        {selectedRows.length > 0 ? (
+          <Typography variant='subtitle1' color='inherit'>
+            {selectedRows.length} rows selected
+          </Typography>
+        ) : (
+          <div>
+            {typeof title !== 'undefined' && <Typography variant='h5'>{title}</Typography>}
+            {typeof props.description !== 'undefined' && <props.description />}
+          </div>
+        )}
+      </div>
+      <div
         style={{
           flex: '1 1 100%',
         }}
       />
-			<div>
-				<Buttons />
-			</div>
+      <div>
+        <Buttons />
+      </div>
     </Toolbar>
   );
 
   function Buttons() {
-    if (!buttons)
+    if (!buttons) {
       return null;
+    }
 
     if (selectedRows.length > 0) {
-      return buttons.filter((button) => button.visibility.showWhenRowsSelected).map((button, index) => (
+      return buttons
+        .filter((button) => button.visibility.showWhenRowsSelected)
+        .map((button, index) => (
+          <Tooltip key={index} title={button.name}>
+            <IconButton aria-label={button.name} onClick={(event) => button.onClick(selectedRows, navigate)}>
+              <button.icon />
+            </IconButton>
+          </Tooltip>
+        ));
+    }
+
+    return buttons
+      .filter((button) => button.visibility.showWhenNoRowsSelected)
+      .map((button, index) => (
         <Tooltip key={index} title={button.name}>
-          <IconButton 
-            aria-label={button.name}
-            onClick={event => button.onClick(selectedRows, navigate)}
-          >
+          <IconButton aria-label={button.name} onClick={(event) => button.onClick([], navigate)}>
             <button.icon />
           </IconButton>
         </Tooltip>
       ));
-    }
-
-    return buttons.filter((button) => button.visibility.showWhenNoRowsSelected).map((button, index) => (
-      <Tooltip key={index} title={button.name}>
-        <IconButton 
-          aria-label={button.name}
-          onClick={event => button.onClick([], navigate)}
-        >
-          <button.icon />
-        </IconButton>
-      </Tooltip>
-    ));
   }
-}
+};

package/tsconfig.json

@@ -1,18 +1,18 @@
 {
-    "compilerOptions": {
-        "rootDir": "./",
-        "target": "es5",
-        "module": "commonjs",
-        "declaration": true,
-        "declarationMap": true,
-        "sourceMap": true,
-        "outDir": "./dist/",
-        "strict": true,
-        "noImplicitAny": true,
-        "esModuleInterop": true,
-        "skipLibCheck": true,
-        "forceConsistentCasingInFileNames": true,
-        "resolveJsonModule": true,
-        "jsx": "react"
-    }
-}
+  "compilerOptions": {
+    "rootDir": "./",
+    "target": "es5",
+    "module": "commonjs",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist/",
+    "strict": true,
+    "noImplicitAny": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "jsx": "react"
+  }
+}