Disable header row marker on single selection (#935)

* Disable header row marker on single selection * Add story * Use other defaults * Update text * Minor change
glideapps · May 10, 2024 · c21e6ca · c21e6ca
1 parent 3a97523
commit c21e6ca
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 2 deletions.
diff --git a/packages/core/src/data-editor/data-editor.tsx b/packages/core/src/data-editor/data-editor.tsx
@@ -877,6 +877,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
     const rowMarkerTheme = rowMarkersObj?.theme ?? p.rowMarkerTheme;
     const headerRowMarkerTheme = rowMarkersObj?.headerTheme;
     const headerRowMarkerAlwaysVisible = rowMarkersObj?.headerAlwaysVisible;
+    const headerRowMarkerDisabled = rowSelect !== "multi";
     const rowMarkerCheckboxStyle = rowMarkersObj?.checkboxStyle ?? "square";
 
     const minColumnWidth = Math.max(minColumnWidthIn, 20);
@@ -1112,6 +1113,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                 rowMarkerChecked,
                 headerRowMarkerTheme,
                 headerRowMarkerAlwaysVisible,
+                headerRowMarkerDisabled,
             },
             ...columns,
         ];
@@ -1124,6 +1126,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         rowMarkerChecked,
         headerRowMarkerTheme,
         headerRowMarkerAlwaysVisible,
+        headerRowMarkerDisabled,
     ]);
 
     const visibleRegionRef = React.useRef<VisibleRegion>({
@@ -1795,7 +1798,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                         } else {
                             setSelectedRows(CompactSelection.fromSingleSelection(newSlice), undefined, isMultiRow);
                         }
-                    } else if (isMultiRow || args.isTouch || rowSelectionMode === "multi") {
+                    } else if (rowSelect === "multi" && (isMultiRow || args.isTouch || rowSelectionMode === "multi")) {
                         if (isSelected) {
                             setSelectedRows(selectedRows.remove(row), undefined, true);
                         } else {

diff --git a/packages/core/src/docs/examples/row-selections.stories.tsx b/packages/core/src/docs/examples/row-selections.stories.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import { type RowMarkerOptions } from "../../data-editor/data-editor.js";
+import {
+    BeautifulWrapper,
+    Description,
+    PropName,
+    useMockDataGenerator,
+    defaultProps,
+} from "../../data-editor/stories/utils.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Row selections"
+                    description={
+                        <Description>
+                            You can enable row selections by setting <PropName>rowSelect</PropName> prop to{" "}
+                            <PropName>multi</PropName> for multi-selection or <PropName>single</PropName> for
+                            single-selection. The row marker behavior and appearance can be controlled via the{" "}
+                            <PropName>rowMarkers</PropName> prop.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+interface RowSelectionsProps {
+    rowSelect: "none" | "single" | "multi";
+    rowSelectionMode: "auto" | "multi";
+    rowMarkersKind: RowMarkerOptions["kind"];
+    rowMarkersCheckboxStyle: RowMarkerOptions["checkboxStyle"];
+}
+
+export const RowSelections: React.FC<RowSelectionsProps> = p => {
+    const { cols, getCellContent } = useMockDataGenerator(30);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            rowSelect={p.rowSelect}
+            rowSelectionMode={p.rowSelectionMode}
+            getCellContent={getCellContent}
+            rowMarkers={{
+                kind: p.rowMarkersKind,
+                checkboxStyle: p.rowMarkersCheckboxStyle,
+            }}
+            columns={cols}
+            rows={400}
+        />
+    );
+};
+(RowSelections as any).args = {
+    rowSelect: "single",
+    rowSelectionMode: "auto",
+    rowMarkersKind: "checkbox-visible",
+    rowMarkersCheckboxStyle: "circle",
+};
+(RowSelections as any).argTypes = {
+    rowSelect: {
+        control: { type: "select" },
+        options: ["none", "single", "multi"],
+    },
+    rowSelectionMode: {
+        control: { type: "select" },
+        options: ["auto", "multi"],
+    },
+    rowMarkersKind: {
+        control: { type: "select" },
+        options: ["both", "checkbox", "number", "none", "clickable-number", "checkbox-visible"],
+    },
+    rowMarkersCheckboxStyle: {
+        control: { type: "select" },
+        options: ["square", "circle"],
+    },
+};
diff --git a/packages/core/src/internal/data-grid/data-grid-types.ts b/packages/core/src/internal/data-grid/data-grid-types.ts
@@ -197,6 +197,7 @@ export type InnerColumnExtension = {
     rowMarkerChecked?: BooleanIndeterminate | boolean;
     headerRowMarkerTheme?: Partial<Theme>;
     headerRowMarkerAlwaysVisible?: boolean;
+    headerRowMarkerDisabled?: boolean;
 };
 
 /** @category Columns */

diff --git a/packages/core/src/internal/data-grid/render/data-grid-lib.ts b/packages/core/src/internal/data-grid/render/data-grid-lib.ts
@@ -47,6 +47,7 @@ export function useMappedColumns(
                     rowMarkerChecked: c.rowMarkerChecked,
                     headerRowMarkerTheme: c.headerRowMarkerTheme,
                     headerRowMarkerAlwaysVisible: c.headerRowMarkerAlwaysVisible,
+                    headerRowMarkerDisabled: c.headerRowMarkerDisabled,
                 })
             ),
         [columns, freezeColumns]

diff --git a/packages/core/src/internal/data-grid/render/data-grid-render.header.ts b/packages/core/src/internal/data-grid/render/data-grid-render.header.ts
@@ -428,7 +428,7 @@ function drawHeaderInner(
     isRtl: boolean,
     headerLayout: HeaderLayout
 ) {
-    if (c.rowMarker !== undefined) {
+    if (c.rowMarker !== undefined && c.headerRowMarkerDisabled !== true) {
         const checked = c.rowMarkerChecked;
         if (checked !== true && c.headerRowMarkerAlwaysVisible !== true) {
             ctx.globalAlpha = hoverAmount;

diff --git a/packages/core/test/data-grid-lib.test.ts b/packages/core/test/data-grid-lib.test.ts
@@ -21,6 +21,7 @@ function makeCol(title: string, sourceIndex: number, sticky: boolean, width: num
         grow: undefined,
         headerRowMarkerAlwaysVisible: undefined,
         headerRowMarkerTheme: undefined,
+        headerRowMarkerDisabled: undefined,
         hasMenu: undefined,
         icon: undefined,
         id: undefined,