@linzjs/step-ag-grid 12.0.1 → 12.1.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "12.0.1",
+  "version": "12.1.1",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/GridFilter.ts

@@ -1,12 +1,15 @@
 import { useContext, useEffect } from "react";
 import { GridContext, GridFilterExternal } from "../contexts/GridContext";
+import { GridBaseRow } from "./Grid";
 
-export const useGridFilter = (filter: GridFilterExternal) => {
+export const useGridFilter = <RowType extends GridBaseRow>(filter: GridFilterExternal<RowType> | undefined) => {
   const { addExternalFilter, removeExternalFilter } = useContext(GridContext);
 
   useEffect(() => {
     const thisFilter = filter;
-    addExternalFilter(thisFilter);
-    return () => removeExternalFilter(thisFilter);
+    thisFilter && addExternalFilter(thisFilter);
+    return () => {
+      thisFilter && removeExternalFilter(thisFilter);
+    };
   }, [addExternalFilter, filter, removeExternalFilter]);
 };

package/src/components/gridFilter/GridFilterButtons.tsx

@@ -0,0 +1,52 @@
+import clsx, { ClassValue } from "clsx";
+import { useMemo, useState } from "react";
+import { LuiButton, LuiButtonGroup } from "@linzjs/lui";
+import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
+import { GridBaseRow } from "../Grid";
+import { GridFilterExternal } from "../../contexts/GridContext";
+import { useGridFilter } from "../GridFilter";
+
+interface GridFilterButtonsOption<RowType extends GridBaseRow> {
+  defaultSelected?: boolean;
+  filter?: GridFilterExternal<RowType>;
+  label: string;
+}
+
+export type GridFilterButtonsProps<RowType extends GridBaseRow> = {
+  className?: ClassValue;
+  luiButtonProps?: Partial<LuiButtonProps>;
+  options: GridFilterButtonsOption<RowType>[];
+};
+
+export const GridFilterButtons = <RowType extends GridBaseRow>({
+  className,
+  luiButtonProps,
+  options,
+}: GridFilterButtonsProps<RowType>): JSX.Element => {
+  // Select defaultSelected option, otherwise first option.  If no options select none.
+  const [selectedOption, setSelectedOption] = useState(options.find((option) => option.defaultSelected) ?? options[0]);
+
+  const filter = useMemo(() => selectedOption?.filter, [selectedOption]);
+  useGridFilter(filter);
+
+  return (
+    <div className={clsx("lui-margin-top-xxs lui-margin-bottom-xxs", className)}>
+      <LuiButtonGroup>
+        {options.map((option, index) => (
+          <LuiButton
+            key={`${index}`}
+            {...luiButtonProps}
+            className={clsx(
+              `lui-button lui-button-secondary`,
+              selectedOption?.label === option.label && `lui-button-active`,
+              luiButtonProps?.className,
+            )}
+            onClick={() => setSelectedOption(option)}
+          >
+            {option.label}
+          </LuiButton>
+        ))}
+      </LuiButtonGroup>
+    </div>
+  );
+};

package/src/contexts/GridContext.tsx

@@ -1,10 +1,10 @@
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 import { GridApi, RowNode } from "ag-grid-community";
 import { GridBaseRow } from "../components/Grid";
 
-export type GridFilterExternal = (data: any, rowNode: RowNode) => boolean;
+export type GridFilterExternal<RowType extends GridBaseRow> = (data: RowType, rowNode: RowNode) => boolean;
 
-export interface GridContextType {
+export interface GridContextType<RowType extends GridBaseRow> {
   gridReady: boolean;
   setGridApi: (gridApi: GridApi | undefined) => void;
   prePopupOps: () => void;
@@ -33,13 +33,13 @@ export interface GridContextType {
   externallySelectedItemsAreInSync: boolean;
   setExternallySelectedItemsAreInSync: (inSync: boolean) => void;
   waitForExternallySelectedItemsToBeInSync: () => Promise<void>;
-  addExternalFilter: (filter: GridFilterExternal) => void;
-  removeExternalFilter: (filter: GridFilterExternal) => void;
+  addExternalFilter: (filter: GridFilterExternal<RowType>) => void;
+  removeExternalFilter: (filter: GridFilterExternal<RowType>) => void;
   isExternalFilterPresent: () => boolean;
   doesExternalFilterPass: (node: RowNode) => boolean;
 }
 
-export const GridContext = createContext<GridContextType>({
+export const GridContext = createContext<GridContextType<any>>({
   gridReady: false,
   prePopupOps: () => {
     console.error("no context provider for prePopupOps");
@@ -125,3 +125,5 @@ export const GridContext = createContext<GridContextType>({
     return true;
   },
 });
+
+export const useGridContext = <RowType extends GridBaseRow>() => useContext<GridContextType<RowType>>(GridContext);

package/src/contexts/GridContextProvider.tsx

@@ -16,7 +16,7 @@ interface GridContextProps {
  * Make sure you wrap AgGrid in this.
  * Also, make sure the provider is created in a separate component, otherwise it won't be found.
  */
-export const GridContextProvider = (props: GridContextProps): ReactElement => {
+export const GridContextProvider = <RowType extends GridBaseRow>(props: GridContextProps): ReactElement => {
   const { modifyUpdating } = useContext(GridUpdatingContext);
   const [gridApi, _setGridApi] = useState<GridApi>();
   const [gridReady, setGridReady] = useState(false);
@@ -24,7 +24,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
   const idsBeforeUpdate = useRef<number[]>([]);
   const prePopupFocusedCell = useRef<CellPosition>();
   const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
-  const externalFilters = useRef<GridFilterExternal[]>([]);
+  const externalFilters = useRef<GridFilterExternal<RowType>[]>([]);
 
   /**
    * Set quick filter directly on grid, based on previously save quickFilter state.
@@ -390,12 +390,12 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     [gridApi],
   );
 
-  const addExternalFilter = (filter: GridFilterExternal) => {
+  const addExternalFilter = (filter: GridFilterExternal<RowType>) => {
     externalFilters.current.push(filter);
     onFilterChanged();
   };
 
-  const removeExternalFilter = (filter: GridFilterExternal) => {
+  const removeExternalFilter = (filter: GridFilterExternal<RowType>) => {
     remove(externalFilters.current, (v) => v === filter);
     onFilterChanged();
   };

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -18,6 +18,7 @@ import { GridIcon } from "../../components/GridIcon";
 import { useGridFilter } from "../../components/GridFilter";
 import { GridFilterQuick } from "../../components/gridFilter/GridFilterQuick";
 import { GridFilters } from "../../components/gridFilter/GridFilters";
+import { GridFilterButtons } from "../../components/gridFilter/GridFilterButtons";
 import { GridWrapper } from "../../components/GridWrapper";
 
 export default {
@@ -204,13 +205,25 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   ]);
 
   return (
-    <GridWrapper maxHeight={200}>
+    <GridWrapper maxHeight={300}>
       <GridFilters>
         <GridFilterQuick quickFilterPlaceholder={"Custom placeholder..."} />
         <div>
           Custom filter: Age less than:
           <GridFilterLessThan field={"age"} />
         </div>
+        <GridFilterButtons<ITestRow>
+          luiButtonProps={{ style: { whiteSpace: "nowrap" } }}
+          options={[
+            {
+              label: "All",
+            },
+            {
+              label: "< 30",
+              filter: (row) => row.age < 30,
+            },
+          ]}
+        />
       </GridFilters>
       <Grid
         {...props}