Merge pull request #27 from Kuechlin/SegmentedControlBooleanFilter

Segmented control for boolean filter

.github/workflows/github-actions-publish.yml

@@ -8,13 +8,12 @@ jobs:
     build-and-publish:
         runs-on: ubuntu-latest
         steps:
-            - name: Checkout 🛎️
+            - name: checkout
               uses: actions/[email protected]
-            - name: Install and Build 🔧
+            - name: install and build
               run: |
                   npm i -g pnpm
                   pnpm i
                   pnpm run build
-            - run: pnpm publish --no-git-checks --access public
-              env:
-                  NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+            - name: publish
+              run: pnpm publish --no-git-checks --access public

.npmrc

@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mantine-data-grid",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "license": "MIT",
     "type": "module",
     "repository": {

src/filters/booleanFilter.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Radio } from '@mantine/core';
+import { SegmentedControl } from '@mantine/core';
 import { DataGridFilterFn, DataGridFilterProps } from '../types';
 
 export enum BooleanFilter {
@@ -31,20 +31,24 @@ booleanFilterFn.element = function ({
     filter,
     onFilterChange,
 }: DataGridFilterProps) {
-    const handleValueChange = (value: boolean) => () =>
-        onFilterChange({ ...filter, value });
+    const handleValueChange = (value: string) =>
+        onFilterChange({ ...filter, value: value === 'true' ? true : false });
 
     return (
-        <Button.Group>
-            {[true, false].map((value) => (
-                <Button
-                    key={String(value)}
-                    color={filter.value === value ? 'blue' : 'gray'}
-                    style={{ flexGrow: 1 }}
-                    children={String(value)}
-                    onClick={handleValueChange(value)}
-                />
-            ))}
-        </Button.Group>
+        <SegmentedControl
+            value={filter.value ? 'true' : 'false'}
+            onChange={handleValueChange}
+            data={[
+                { label: 'true', value: 'true' },
+                { label: 'false', value: 'false' },
+            ]}
+            fullWidth
+            styles={{
+                active: {
+                    // fix visual bug when opening filter dropdown
+                    height: 'calc(100% - 8px) !important',
+                },
+            }}
+        />
     );
 };