fix: fixing lint errors

Author: Jakub007d

packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/TreeFilterExample.tsx

@@ -41,19 +41,6 @@ const repositories: Repository[] = [
   { name: 'Server-009', workspace: 'Testing Workspace', tags: ['test', 'backend'], os: 'Fedora 38', lastSeen: '4 hours ago' }
 ];
 
-const treeOptions: TreeViewDataItem[] = [
-  {
-    name: 'Production Workspace',
-    id: 'workspace-prod',
-    checkProps: { 'aria-label': 'prod-workspace-check', checked: false }
-  },
-  {
-    name: 'Testing Workspace',
-    id: 'workspace-test',
-    checkProps: { 'aria-label': 'test-workspace-check', checked: false }
-  }
-];
-
 const osOptions: TreeViewDataItem[] = [
   {
     name: 'Linux',
@@ -231,19 +218,13 @@ const MyTable: React.FunctionComponent = () => {
               title="Operating System"
               items={osOptions}
               defaultExpanded={true}
-              onSelect={(selectedItems: TreeViewDataItem[]) => {
-                console.log('Selected OS items:', selectedItems);
-              }}
             />
             <DataViewTreeFilter
               filterId="tags"
               title="Tags"
               items={tagOptions}
               defaultExpanded={false}
               defaultSelected={['tag-web', 'tag-api']}
-              onSelect={(selectedItems: TreeViewDataItem[]) => {
-                console.log('Selected tag items:', selectedItems);
-              }}
             />
           </DataViewFilters>
         }

packages/module/src/DataViewTreeFilter/DataViewTreeFilter.tsx

@@ -1,5 +1,5 @@
 import { Dropdown, MenuToggle, MenuToggleElement, ToolbarFilter, ToolbarFilterProps, TreeView, TreeViewDataItem } from '@patternfly/react-core'
-import React, { FC, useState, useRef, useEffect } from 'react'
+import React, { FC, useState, useRef, useEffect, useCallback } from 'react'
 import { createUseStyles } from 'react-jss'
 
 /** This style is needed so the tree filter dropdown looks like the basic filter dropdow */
@@ -59,17 +59,16 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
   const hasCalledInitialOnChange = useRef(false);
 
   // Helper function to expand all nodes in the tree
-  const expandAllNodes = (items: TreeViewDataItem[]): TreeViewDataItem[] => {
-    return items.map(item => ({
+  const expandAllNodes = useCallback((items: TreeViewDataItem[]): TreeViewDataItem[] =>
+    items.map(item => ({
       ...item,
       defaultExpanded: true,
       children: item.children ? expandAllNodes(item.children) : undefined
-    }));
-  };
+    })), []);
 
   // Helper function to set pre-selected items
-  const setPreSelectedItems = (items: TreeViewDataItem[], selectedIds: string[]): TreeViewDataItem[] => {
-    return items.map(item => {
+  const setPreSelectedItems = useCallback((items: TreeViewDataItem[], selectedIds: string[]): TreeViewDataItem[] =>
+    items.map(item => {
       const isSelected = selectedIds.includes(String(item.id));
       const hasSelectedChildren = item.children?.some(child => selectedIds.includes(String(child.id))) ?? false;
 
@@ -81,11 +80,10 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
         } : undefined,
         children: item.children ? setPreSelectedItems(item.children, selectedIds) : undefined
       };
-    });
-  };
+    }), []);
 
   // Generic helper to collect items from tree based on predicate
-  const collectTreeItems = (
+  const collectTreeItems = useCallback((
     items: TreeViewDataItem[],
     predicate: (item: TreeViewDataItem) => boolean,
     leafOnly = false
@@ -104,16 +102,25 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
 
     items.forEach(item => collect(item));
     return collected;
-  };
+  }, []);
 
   // Helper function to get all checked items (not just leaf nodes)
-  const getAllCheckedItems = (items: TreeViewDataItem[]): TreeViewDataItem[] => {
-    return collectTreeItems(items, item => item.checkProps?.checked === true, false);
-  };
+  const getAllCheckedItems = useCallback((items: TreeViewDataItem[]): TreeViewDataItem[] =>
+    collectTreeItems(items, item => item.checkProps?.checked === true, false), [collectTreeItems]);
+
+  // Get all checked leaf items (returns array of names)
+  const getAllCheckedLeafItems = useCallback((items: TreeViewDataItem[]): string[] =>
+    collectTreeItems(
+      items,
+      item => item.checkProps?.checked === true,
+      true
+    ).map(item => String(item.name)), [collectTreeItems]);
 
   // Initialize tree data with defaultExpanded and defaultSelected (only on first mount)
   useEffect(() => {
-    if (!items) return;
+    if (!items) {
+      return;
+    }
 
     let initializedData = [...items];
 
@@ -132,7 +139,7 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
     if (isInitialMount.current) {
       isInitialMount.current = false;
     }
-  }, [items, defaultExpanded]);
+  }, [items, defaultExpanded, expandAllNodes, setPreSelectedItems, defaultSelected]);
 
   // Call onChange and onSelect after tree data is initialized with default selections
   useEffect(() => {
@@ -156,7 +163,7 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
         hasCalledInitialOnChange.current = true;
       }
     }
-  }, [treeData]);
+  }, [treeData, defaultSelected.length, onChange, onSelect, getAllCheckedItems, getAllCheckedLeafItems]);
 
   // Sync tree checkboxes when value prop changes (when clearAllFilters is called)
   useEffect(() => {
@@ -165,18 +172,17 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
 
       // Only update if there are checked items that need to be unchecked
       if (currentCheckedItems.length > 0) {
-        const uncheckRecursive = (items: TreeViewDataItem[]): TreeViewDataItem[] => {
-          return items.map(item => ({
+        const uncheckRecursive = (items: TreeViewDataItem[]): TreeViewDataItem[] =>
+          items.map(item => ({
             ...item,
             checkProps: item.checkProps ? { ...item.checkProps, checked: false } : undefined,
             children: item.children ? uncheckRecursive(item.children) : undefined
           }));
-        };
 
         setTreeData(uncheckRecursive(treeData));
       }
     }
-  }, [value]);
+  }, [value, treeData, getAllCheckedLeafItems]);
 
   // Check if all children are checked (recursive)
   const areAllChildrenChecked = (item: TreeViewDataItem): boolean => {
@@ -202,7 +208,9 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
       }
       if (item.children) {
         const found = findItemByName(item.children, name);
-        if (found) return found;
+        if (found) {
+          return found;
+        }
       }
     }
     return null;
@@ -216,31 +224,32 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
       }
       if (item.children) {
         const found = findParentById(item.children, childId);
-        if (found) return found;
+        if (found) {
+          return found;
+        }
       }
     }
     return null;
   };
 
-  // Get all checked leaf items (returns array of names)
-  const getAllCheckedLeafItems = (items: TreeViewDataItem[]): string[] => {
-    return collectTreeItems(
-      items,
-      item => item.checkProps?.checked === true,
-      true
-    ).map(item => String(item.name));
-  };
-
   // Update parent checkbox states based on children (recursive)
   const onCheckParentHandle = (childId: string): void => {
     const parent = findParentById(treeData, childId);
-    if (!parent) return;
+    if (!parent) {
+      return;
+    }
 
     if (parent.checkProps) {
       const allChildrenChecked = areAllChildrenChecked(parent);
       const someChildrenChecked = areSomeChildrenChecked(parent);
 
-      parent.checkProps.checked = allChildrenChecked ? true : someChildrenChecked ? null : false;
+      if (allChildrenChecked) {
+        parent.checkProps.checked = true;
+      } else if (someChildrenChecked) {
+        parent.checkProps.checked = null;
+      } else {
+        parent.checkProps.checked = false;
+      }
     }
 
     if (parent.id) {
@@ -270,7 +279,7 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
     setTreeData(prev => [...prev]);
 
     const selectedValues = getAllCheckedLeafItems(treeData);
-    onChange?.(event as any, selectedValues);
+    onChange?.(undefined, selectedValues);
 
     if (onSelect) {
       const selectedItems = getAllCheckedItems(treeData);
@@ -281,7 +290,9 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
   // Clear a specific filter by name (when label chip is removed)
   const onFilterSelectorClear = (itemName: string) => {
     const treeViewItem = findItemByName(treeData, itemName);
-    if (!treeViewItem) return;
+    if (!treeViewItem) {
+      return;
+    }
 
     onCheckHandle(treeViewItem, false);
     if (treeViewItem.id) {
@@ -291,13 +302,12 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
 
   // Uncheck all items in the tree
   const uncheckAllItems = () => {
-    const uncheckRecursive = (items: TreeViewDataItem[]): TreeViewDataItem[] => {
-      return items.map(item => ({
+    const uncheckRecursive = (items: TreeViewDataItem[]): TreeViewDataItem[] =>
+      items.map(item => ({
         ...item,
         checkProps: item.checkProps ? { ...item.checkProps, checked: false } : undefined,
         children: item.children ? uncheckRecursive(item.children) : undefined
       }));
-    };
 
     const updatedTreeData = uncheckRecursive(treeData);
     setTreeData(updatedTreeData);
@@ -329,20 +339,20 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
 
   return (
     <ToolbarFilter
-        key={filterId}
-        data-ouia-component-id={ouiaId}
-        labels={value.map(item => ({ key: item, node: item }))}
-        deleteLabel={(_, label) => {
-          const labelKey = typeof label === 'string' ? label : label.key;
-          onChange?.(undefined, value.filter(item => item !== labelKey));
-          onFilterSelectorClear(labelKey);
-        }}
-        deleteLabelGroup={uncheckAllItems}
-        categoryName={title}
-        showToolbarItem={showToolbarItem}>
-        {dropdown}
-      </ToolbarFilter>
+      key={filterId}
+      data-ouia-component-id={ouiaId}
+      labels={value.map(item => ({ key: item, node: item }))}
+      deleteLabel={(_, label) => {
+        const labelKey = typeof label === 'string' ? label : label.key;
+        onChange?.(undefined, value.filter(item => item !== labelKey));
+        onFilterSelectorClear(labelKey);
+      }}
+      deleteLabelGroup={uncheckAllItems}
+      categoryName={title}
+      showToolbarItem={showToolbarItem}>
+      {dropdown}
+    </ToolbarFilter>
   )
 }
 
-export default DataViewTreeFilter;
+export default DataViewTreeFilter;