close #216

packages/client/src/components/grid-select/grid-cell.tsx

@@ -1,11 +1,10 @@
 import React, { MouseEventHandler } from 'react';
 
 type CellProperties = {
-  active: boolean;
   hover: boolean;
   disabled: boolean;
   cellSize: number;
-  onClick: MouseEventHandler<HTMLDivElement>;
+  onMouseDown: MouseEventHandler<HTMLDivElement>;
   onMouseEnter: MouseEventHandler<HTMLDivElement>;
   styles: Record<string, React.CSSProperties>;
   id: string;
@@ -38,7 +37,7 @@ const getMergedStyle = (baseStyles, styles, styleClass) => ({
   ...(styles && styles[styleClass] ? styles[styleClass] : {}),
 });
 
-export const GridCell = ({ active, hover, disabled, onClick, onMouseEnter, cellSize, styles, id }: CellProperties) => {
+export const GridCell = ({ hover, disabled, onMouseDown, onMouseEnter, cellSize, styles, id }: CellProperties) => {
   const baseStyles = getBaseStyles(cellSize);
   const cellStyles = {
     cell: getMergedStyle(baseStyles, styles, 'cell'),
@@ -52,11 +51,10 @@ export const GridCell = ({ active, hover, disabled, onClick, onMouseEnter, cellS
       id={id}
       style={{
         ...cellStyles.cell,
-        ...(active && cellStyles.active),
         ...(hover && cellStyles.hover),
-        ...(!active && disabled && cellStyles.disabled),
+        ...(disabled && cellStyles.disabled),
       }}
-      onClick={onClick}
+      onMouseDown={onMouseDown}
       onMouseEnter={onMouseEnter}
     />
   );

packages/client/src/components/grid-select/grid-select.tsx

@@ -44,10 +44,6 @@ export const GridSelect = ({
   cellSize = 16,
   styles,
 }: RegionSelectionProps) => {
-  const [activeCell, setActiveCell] = useState<CoordsType>({
-    x: -1,
-    y: -1,
-  });
   const [hoverCell, setHoverCell] = useState<CoordsType>(null);
 
   const onClick = useCallback(
@@ -60,6 +56,15 @@ export const GridSelect = ({
     [onSelect]
   );
 
+  const onClickPanel = useCallback(() => {
+    if (hoverCell.x + 1 > 0 && hoverCell.y + 1 > 0) {
+      onSelect({
+        rows: hoverCell.y + 1,
+        cols: hoverCell.x + 1,
+      });
+    }
+  }, [hoverCell, onSelect]);
+
   const onHover = useCallback(({ x, y, isCellDisabled }) => {
     if (isCellDisabled) {
       return setHoverCell(null);
@@ -71,16 +76,17 @@ export const GridSelect = ({
     const cells = [];
     for (let y = 0; y < rows; y++) {
       for (let x = 0; x < cols; x++) {
-        const isActive = x <= activeCell.x && y <= activeCell.y;
         const isHover = hoverCell && x <= hoverCell.x && y <= hoverCell.y;
         const isCellDisabled = disabled;
         cells.push(
           <GridCell
             id={x + '-' + y}
             key={x + '-' + y}
-            onClick={() => onClick({ x, y, isCellDisabled })}
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              onClick({ x, y, isCellDisabled });
+            }}
             onMouseEnter={onHover.bind(null, { x, y, isCellDisabled })}
-            active={isActive}
             hover={isHover}
             disabled={isCellDisabled}
             styles={styles}
@@ -90,12 +96,12 @@ export const GridSelect = ({
       }
     }
     return cells;
-  }, [rows, cols, disabled, activeCell.x, activeCell.y, cellSize, hoverCell, styles, onClick, onHover]);
+  }, [rows, cols, disabled, cellSize, hoverCell, styles, onClick, onHover]);
 
   const baseStyles = useMemo(() => getBaseStyles(cols, cellSize), [cols, cellSize]);
 
   return (
-    <div>
+    <div onMouseDown={onClickPanel}>
       <div
         style={
           {