click to delete indecator

www/src/components/Fields/Image.tsx

@@ -10,6 +10,7 @@ import AddIcon from "@material-ui/icons/AddAPhoto";
 import CircularProgress from "@material-ui/core/CircularProgress";
 
 import _findIndex from "lodash/findIndex";
+import { Tooltip } from "@material-ui/core";
 // TODO:  indicate error state
 
 // TODO: multi support
@@ -18,7 +19,7 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       display: "flex",
-      // flexDirection: "column",
+      // flexDirection: "row",
       alignContent: "center",
       width: "100%",
     },
@@ -26,15 +27,15 @@ const useStyles = makeStyles((theme: Theme) =>
       display: "flex",
       alignContent: "center",
       flexDirection: "row",
-      // justifyItems: "space-between",
       justifyContent: "space-between",
     },
     progress: {
       margin: theme.spacing(3),
     },
-    img: {
+    imgHover: {
       "&:hover": {
-        backgroundColor: "rgb(255, 0, 0, 0.42)",
+        borderStyle: "solid",
+        borderColor: "rgb(255, 0, 0,0.6)",
       },
     },
   })
@@ -95,15 +96,17 @@ const Image = (props: Props) => {
               onSubmit(value);
             }}
           >
-            <img
-              className={classes.img}
-              key={file.name}
-              style={{
-                padding: `${row.rowHeight * 0.03}px`,
-                height: `${row.rowHeight * 0.95}px`,
-              }}
-              src={file.downloadURL}
-            />
+            <Tooltip title="click to delete">
+              <img
+                className={classes.imgHover}
+                key={file.name}
+                style={{
+                  padding: `${row.rowHeight * 0.03}px`,
+                  height: `${row.rowHeight * 0.95}px`,
+                }}
+                src={file.downloadURL}
+              />
+            </Tooltip>
           </div>
         ))}
       {progress === 0 && (

www/src/components/Table/Grid.tsx

@@ -39,10 +39,10 @@ const Grid = (props: any) => {
           onCellSelected={(coordinates: { rowIdx: number; idx: number }) => {
             const row = rows[coordinates.rowIdx];
             const column = columns[coordinates.idx];
-            // if (editable(column.type)) {
-            // only editable fields are stored selectedCell, temporary fix for custom fields
-            setSelectedCell({ row, column });
-            //}
+            if (editable(column.type)) {
+              //only editable fields are stored selectedCell, temporary fix for custom fields
+              setSelectedCell({ row, column });
+            }
           }}
           onColumnResize={(idx: number, width: number) =>
             //tableActions.column.resize(idx, width)
@@ -65,7 +65,6 @@ const Grid = (props: any) => {
 export const isArrayEqual = (x: any, y: any) => isEmpty(xorWith(x, y, isEqual));
 
 export default React.memo(Grid, (prevProps, nextProps) => {
-  console.log(nextProps, isArrayEqual(prevProps.columns, nextProps.columns));
   return (
     isArrayEqual(prevProps.columns, nextProps.columns) &&
     isArrayEqual(prevProps.rows, nextProps.rows)