support hideOnDisable and disableSelect for grid (#370)

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/components/grid/Grid.tsx

@@ -132,6 +132,7 @@ const AttuGrid: FC<AttuGridType> = props => {
     order,
     orderBy,
     showPagination = true,
+    hideOnDisable,
   } = props;
 
   const _isSelected = (row: { [x: string]: any }) => {
@@ -140,6 +141,9 @@ const AttuGrid: FC<AttuGridType> = props => {
   };
 
   const _onSelected = (event: React.MouseEvent, row: { [x: string]: any }) => {
+    if (disableSelect) {
+      return;
+    }
     let newSelected: any[] = ([] as any[]).concat(selected);
     if (_isSelected(row)) {
       newSelected = newSelected.filter(s => s[primaryKey] !== row[primaryKey]);
@@ -201,6 +205,7 @@ const AttuGrid: FC<AttuGridType> = props => {
           <CustomToolbar
             toolbarConfigs={toolbarConfigs}
             selected={selected}
+            hideOnDisable={hideOnDisable}
           ></CustomToolbar>
         </Grid>
       )}

client/src/components/grid/Table.tsx

@@ -45,7 +45,7 @@ const useStyles = makeStyles(theme => ({
     marginBottom: theme.spacing(2),
   },
   table: {
-    minWidth: 750,
+    minWidth: '100%',
     minHeight: 57,
   },
   tableCell: {
@@ -54,7 +54,7 @@ const useStyles = makeStyles(theme => ({
   },
   cellContainer: {
     display: 'flex',
-    whiteSpace: 'nowrap'
+    whiteSpace: 'nowrap',
   },
   hoverActionCell: {
     transition: '0.2s all',
@@ -196,6 +196,7 @@ const EnhancedTable: FC<TableType> = props => {
               handleSort={handleSort}
               rowCount={rows.length}
               openCheckBox={openCheckBox}
+              disableSelect={disableSelect}
             />
           ) : (
             <EditableTableHead editHeads={editHeads} />
@@ -227,6 +228,7 @@ const EnhancedTable: FC<TableType> = props => {
                           <Checkbox
                             checked={isItemSelected}
                             color="primary"
+                            disabled={disableSelect}
                             inputProps={{
                               'aria-labelledby': labelId,
                               role: 'checkbox',
@@ -280,8 +282,12 @@ const EnhancedTable: FC<TableType> = props => {
                                           colDef.onClick(e, row);
                                       }}
                                     >
-                                      {row[colDef.id]}
+                                      {colDef.formatter
+                                        ? colDef.formatter(row)
+                                        : row[colDef.id]}
                                     </Button>
+                                  ) : colDef.formatter ? (
+                                    colDef.formatter(row)
                                   ) : (
                                     row[colDef.id]
                                   )}
@@ -299,8 +305,12 @@ const EnhancedTable: FC<TableType> = props => {
                                           colDef.onClick(e, row);
                                       }}
                                     >
-                                      {row[colDef.id]}
+                                      {colDef.formatter
+                                        ? colDef.formatter(row)
+                                        : row[colDef.id]}
                                     </Button>
+                                  ) : colDef.formatter ? (
+                                    colDef.formatter(row)
                                   ) : (
                                     row[colDef.id]
                                   )}

client/src/components/grid/TableHead.tsx

@@ -47,6 +47,7 @@ const EnhancedTableHead: FC<TableHeadType> = props => {
     colDefinitions = [],
     handleSort,
     openCheckBox,
+    disableSelect
   } = props;
   const classes = useStyles();
   const createSortHandler = (property: string) => (event: React.MouseEvent) => {
@@ -63,6 +64,7 @@ const EnhancedTableHead: FC<TableHeadType> = props => {
               indeterminate={numSelected > 0 && numSelected < rowCount}
               checked={rowCount > 0 && numSelected === rowCount}
               onChange={onSelectAllClick}
+              disabled={disableSelect}
               inputProps={{ 'aria-label': 'select all desserts', 'role': 'checkbox' }}
             />
           </TableCell>
@@ -111,4 +113,4 @@ const EnhancedTableHead: FC<TableHeadType> = props => {
   );
 };
 
-export default EnhancedTableHead;
+export default EnhancedTableHead;

client/src/components/grid/ToolBar.tsx

@@ -25,7 +25,7 @@ const useStyles = makeStyles((theme: Theme) =>
       opacity: 0.4,
     },
     btn: {
-      marginRight:  theme.spacing(.5),
+      marginRight: theme.spacing(0.5),
     },
     gridEnd: {
       display: 'flex',
@@ -39,7 +39,7 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 const CustomToolBar: FC<ToolBarType> = props => {
-  const { toolbarConfigs, selected = [] } = props;
+  const { toolbarConfigs, selected = [], hideOnDisable = false } = props;
   const classes = useStyles();
 
   // remove hidden button
@@ -71,6 +71,10 @@ const CustomToolBar: FC<ToolBarType> = props => {
 
             const Icon = c.icon ? Icons[c.icon!]() : '';
             const disabled = c.disabled ? c.disabled(selected) : false;
+
+            if (disabled && hideOnDisable) {
+              return null;
+            }
             // when disabled "disabledTooltip" will replace "tooltip"
             const tooltip =
               disabled && c.disabledTooltip ? c.disabledTooltip : c.tooltip;

client/src/components/grid/Types.ts

@@ -18,6 +18,7 @@ export type ToolBarType = {
   toolbarConfigs: ToolBarConfig[];
   selected?: any[];
   setSelected?: (selected: any[]) => void;
+  hideOnDisable?: boolean;
 };
 
 export type TableSwitchType = {
@@ -46,7 +47,7 @@ export type ToolBarConfig = Partial<TableSwitchType> &
     position?: 'right' | 'left';
     component?: ReactElement;
     btnVariant?: 'contained' | 'outlined' | 'text';
-    btnColor?: 'primary' | 'secondary'
+    btnColor?: 'primary' | 'secondary';
   };
 
 export type TableHeadType = {
@@ -58,6 +59,7 @@ export type TableHeadType = {
   colDefinitions: ColDefinitionsType[];
   handleSort?: (e: any, p: string) => void;
   openCheckBox?: boolean;
+  disableSelect?: boolean;
 };
 
 export type TableEditableHeadType = {
@@ -110,6 +112,7 @@ export type ColDefinitionsType = {
     data?: any
   ) => void;
   getStyle?: (data: any) => {};
+  formatter?: (data: any) => any;
 
   onConnect?: (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
@@ -146,6 +149,7 @@ export type AttuGridType = ToolBarType & {
   orderBy?: string;
   tableHeaderHeight?: number;
   rowHeight?: number;
+  hideOnDisable?: boolean;
 };
 
 export type ActionBarType = {

client/src/pages/collections/Collections.tsx

@@ -632,6 +632,7 @@ const Collections = () => {
           handleSort={handleGridSort}
           order={order}
           orderBy={orderBy}
+          hideOnDisable={true}
         />
       ) : (
         <>