Merge pull request #26 from plotly/addSelectionFixtures

Add selection fixtures

Author: bpostlethwaite

packages/dash-table/src/lib/components/computedStyles.js

@@ -119,12 +119,22 @@ const styles = {
             const isAboveExpanded =
                 collapsable && R.contains(ri, expanded_rows);
 
+            let leftEdgeThickness = 1;
+            if (isActive && !isLeftmost) {
+                leftEdgeThickness = 2;
+            }
+
+            let topEdgeThickness = 1;
+            if (isActive && !isTopmost) {
+                topEdgeThickness = 2;
+            }
+
             // rules are applied in the order that they are supplied
             const boxShadowRules = [
                 showLeftEdge || isNeighborToExpanded
-                    ? doLeft(ACCENT, isActive ? 2 : 1)
+                    ? doLeft(ACCENT, leftEdgeThickness)
                     : null,
-                showTopEdge ? doTop(ACCENT, isActive ? 2 : 1) : null,
+                showTopEdge ? doTop(ACCENT, topEdgeThickness) : null,
                 showInsideBottomEdge ? doBottom(ACCENT, 1) : null,
                 showInsideRightEdge ? doRight(ACCENT, 1) : null,
                 isWithinColSelections && isTopmost ? doTop(ACCENT, 1) : null,

packages/dash-table/tests/fixtures.json

@@ -258,6 +258,80 @@
                 {"column-1": 10, "column-2": 20, "column-3": 30}
             ]
         }
+    },
+    {
+        "name": "selection-borders-active-SW",
+        "props": {
+            "editable": true,
+            "selected_cell": [[1, 1], [1, 0], [0, 1], [0, 0]],
+            "columns": [
+                {
+                    "name": "Column 1",
+                    "id": "column-1"
+                },
+                {
+                    "name": "Column 2",
+                    "id": "column-2"
+                }
+            ],
+            "dataframe": [
+                {"column-1": 1, "column-2": "alpha"},
+                {"column-1": 2, "column-2": "bravo"}
+            ],
+            "active_cell": [1, 0]
+        }
+    },
+    {
+        "name": "selection-borders-active-NE",
+        "props": {
+            "editable": true,
+            "selected_cell": [[1, 1], [1, 0], [0, 1], [0, 0]],
+            "columns": [
+                {
+                    "name": "Column 1",
+                    "id": "column-1"
+                },
+                {
+                    "name": "Column 2",
+                    "id": "column-2"
+                }
+            ],
+            "dataframe": [
+                {"column-1": 1, "column-2": "alpha"},
+                {"column-1": 2, "column-2": "bravo"}
+            ],
+            "active_cell": [0, 1]
+        }
+    },
+    {
+        "name": "inner-selection",
+        "props": {
+            "editable": true,
+            "selected_cell": [[2, 1], [2, 2], [1, 1], [1, 2]],
+            "columns": [
+                {
+                    "name": "Column 1",
+                    "id": "column-1"
+                },
+                {
+                    "name": "Column 2",
+                    "id": "column-2"
+                },
+                {
+                    "name": "Column 3",
+                    "id": "column-3"
+                },
+                {
+                    "name": "Column 4",
+                    "id": "column-4"
+                }
+            ],
+            "dataframe": [
+                {"column-1": 1, "column-2": "alpha", "column-3": 2, "column-4": 1},
+                {"column-1": 2, "column-2": "bravo", "column-3": 2, "column-4": 1},
+                {"column-1": 3, "column-2": "charlie", "column-3": 2, "column-4": 1},
+                {"column-1": 4, "column-2": "delta", "column-3": 2, "column-4": 1}
+            ]
+        }
     }
-
 ]