use filters as functions

Kuechlin · Jul 21, 2022 · 9220ccc · 9220ccc
1 parent ca85542
commit 9220ccc
Show file tree

Hide file tree

Showing 17 changed files with 152 additions and 200 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,7 +15,6 @@ dist-docs
 stats.html
 
 # Editor directories and files
-.vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store

diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -0,0 +1,15 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "shell",
+            "label": "tsc-watch",
+            "command": "tsc",
+            "args": ["-w", "-p", ".", "--noEmit"],
+            "isBackground": true,
+            "problemMatcher": "$tsc-watch"
+        }
+    ]
+}
diff --git a/docs/components/Demo.tsx b/docs/components/Demo.tsx
@@ -14,8 +14,16 @@ import {
 } from '@mantine/core';
 import { useState } from 'react';
 
-import { DataGrid, DataGridFilterFn, PaginationArg } from '../../src';
-import { highlightFilterValue } from '../../src/ColumnFilter/stringFilter';
+import {
+    booleanFilterFn,
+    DataGrid,
+    DataGridFilterFn,
+    dateFilterFn,
+    highlightFilterValue,
+    numberFilterFn,
+    PaginationArg,
+    stringFilterFn,
+} from '../../src';
 
 type Data = {
     text: string;
@@ -86,12 +94,12 @@ const useStyles = createStyles((theme) => ({
     gridWrapper: {
         display: 'flex',
         alignItems: 'stretch',
-        width: "100%",
-        marginTop: theme.spacing.lg
+        width: '100%',
+        marginTop: theme.spacing.lg,
     },
     gridProps: {
         borderLeftWidth: 1,
-        borderLeftStyle: "solid",
+        borderLeftStyle: 'solid',
         borderLeftColor: theme.colors.gray[6],
     },
 }));
@@ -151,7 +159,7 @@ export default function Demo() {
                         {
                             accessorKey: 'text',
                             header: 'Text that is too long for a Header',
-                            filterFn: 'stringFilterFn',
+                            filterFn: stringFilterFn,
                             size: 300,
                             cell: highlightFilterValue,
                         },
@@ -161,20 +169,20 @@ export default function Demo() {
                                 { accessorKey: 'cat', filterFn: catFilter },
                                 {
                                     accessorKey: 'fish',
-                                    filterFn: 'stringFilterFn',
+                                    filterFn: stringFilterFn,
                                 },
                             ],
                         },
                         {
                             accessorKey: 'city',
-                            filterFn: 'stringFilterFn',
+                            filterFn: stringFilterFn,
                         },
-                        { accessorKey: 'value', filterFn: 'numberFilterFn' },
+                        { accessorKey: 'value', filterFn: numberFilterFn },
                         {
                             accessorKey: 'date',
                             cell: (cell) =>
                                 cell.getValue()?.toLocaleDateString(),
-                            filterFn: 'dateFilterFn',
+                            filterFn: dateFilterFn,
                         },
                         {
                             accessorKey: 'bool',
@@ -184,7 +192,7 @@ export default function Demo() {
                                 }
                                 return <Badge color="red">false</Badge>;
                             },
-                            filterFn: 'booleanFilterFn',
+                            filterFn: booleanFilterFn,
                         },
                     ]}
                 />

diff --git a/docs/components/Documentation.tsx b/docs/components/Documentation.tsx
@@ -47,7 +47,14 @@ var data: Data[] = new Array(100).fill({}).map((i) => ({
 `;
 
 const grid_usage = `
-import { DataGrid, highlightFilterValue } from 'mantine-data-grid';
+import { 
+    DataGrid, 
+    highlightFilterValue, 
+    stringFilterFn, 
+    numberFilterFn, 
+    dateFilterFn, 
+    booleanFilterFn 
+} from 'mantine-data-grid';
 
 function Demo() {
     return (
@@ -61,7 +68,7 @@ function Demo() {
                 {
                     accessorKey: 'text',
                     header: 'Text that is too long for a Header',
-                    filterFn: 'stringFilterFn',
+                    filterFn: stringFilterFn,
                     size: 300,
                     cell: highlightFilterValue,
                 },
@@ -71,24 +78,24 @@ function Demo() {
                         { accessorKey: 'cat', filterFn: catFilter },
                         {
                             accessorKey: 'fish',
-                            filterFn: 'stringFilterFn',
+                            filterFn: stringFilterFn,
                         },
                     ],
                 },
                 {
                     accessorKey: 'city',
                     filterFn: 'stringFilterFn',
                 },
-                { accessorKey: 'value', filterFn: 'numberFilterFn' },
+                { accessorKey: 'value', filterFn: numberFilterFn },
                 {
                     accessorKey: 'date',
                     cell: (cell) =>
                         cell.getValue()?.toLocaleDateString(),
-                    filterFn: 'dateFilterFn',
+                    filterFn: dateFilterFn,
                 },
                 {
                     accessorKey: 'bool',
-                    filterFn: 'booleanFilterFn',
+                    filterFn: booleanFilterFn,
                 },
             ]}
         />
@@ -129,7 +136,7 @@ catFilter.element = function ({ filter, onFilterChange }) {
 function Demo() {
     return (
         <DataGrid
-            data={/* data source */}
+            data={data}
             columns={[
                 {
                     accessorKey: 'cat',

diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     },
     "scripts": {
         "dev": "vite -c vite.config.docs.ts",
-        "build": "tsc && vite build",
+        "build": "vite build && tsc --emitDeclarationOnly",
         "build:docs": "vite build -c vite.config.docs.ts"
     },
     "peerDependencies": {

diff --git a/src/ColumnFilter/ColumnFilter.tsx → src/ColumnFilter.tsx b/src/ColumnFilter/ColumnFilter.tsx → src/ColumnFilter.tsx
@@ -2,20 +2,7 @@ import { ActionIcon, Button, Group, Popover, Stack } from '@mantine/core';
 import { Column, FilterFn, RowData } from '@tanstack/react-table';
 import { ComponentType, useState } from 'react';
 import { Check, Filter, X } from 'tabler-icons-react';
-import { dataGridfilterFns } from '.';
-
-export type DataGridFilterFn<TData extends RowData> = FilterFn<TData> & {
-    element: ComponentType<DataGridFilterProps>;
-    init(): any;
-};
-export function isDataGridFilter(val: any): val is DataGridFilterFn<any> {
-    return typeof val === 'function' && 'element' in val && 'init' in val;
-}
-
-export type DataGridFilterProps = {
-    filter: any;
-    onFilterChange(value: any): void;
-};
+import { isDataGridFilter } from './types';
 
 export interface ColumnFilterProps {
     column: Column<any>;
@@ -27,15 +14,9 @@ export const ColumnFilter = ({ column, className }: ColumnFilterProps) => {
 
     const filterFn = column.columnDef.filterFn;
 
-    const filter = isDataGridFilter(filterFn)
-        ? filterFn
-        : typeof filterFn === 'string' && filterFn in dataGridfilterFns
-        ? dataGridfilterFns[filterFn as keyof typeof dataGridfilterFns]
-        : null;
-
-    if (filter === null) return null;
+    if (!isDataGridFilter(filterFn)) return null;
 
-    const { element: Element, init } = filter;
+    const { element: Element, init } = filterFn;
 
     const open = () =>
         setState({

diff --git a/src/ColumnFilter/index.ts b/src/ColumnFilter/index.ts