fix(TableFavoritable): better favorite / unfavorite state of the head…

…er favorite button
patternfly · Aug 14, 2024 · ec579f6 · ec579f6
1 parent e2ca556
commit ec579f6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/packages/react-table/src/components/Table/Th.tsx b/packages/react-table/src/components/Table/Th.tsx
@@ -102,7 +102,6 @@ const ThBase: React.FunctionComponent<ThProps> = ({
     );
   }
 
-  const [favorited, setFavorited] = React.useState(false);
   const [showTooltip, setShowTooltip] = React.useState(false);
   const [truncated, setTruncated] = React.useState(false);
   const cellRef = innerRef ? innerRef : React.createRef();
@@ -123,11 +122,8 @@ const ThBase: React.FunctionComponent<ThProps> = ({
         sortBy: sort.sortBy,
         tooltip: tooltip as string,
         tooltipProps,
-        onFavorite: (event: React.MouseEvent, isFavorited: boolean) => {
-          setFavorited(isFavorited);
-          sort.onFavorite(event, isFavorited);
-        },
-        favorited
+        onFavorite: (event: React.MouseEvent, isFavorited: boolean) => sort.onFavorite(event, isFavorited),
+        favorited: sort.favorited
       })();
     } else {
       sortParams = sortable(children as IFormatterValueType, {
@@ -223,7 +219,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
         hasRightBorder && scrollStyles.modifiers.borderRight,
         hasLeftBorder && scrollStyles.modifiers.borderLeft,
         modifier && styles.modifiers[modifier as 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap'],
-        favorited && styles.modifiers.favorited,
+        sort?.favorited && styles.modifiers.favorited,
         mergedClassName
       )}
       {...mergedProps}

diff --git a/packages/react-table/src/components/Table/base/types.tsx b/packages/react-table/src/components/Table/base/types.tsx
@@ -167,6 +167,8 @@ export interface ThSortType {
   isFavorites?: boolean;
   /** Click callback on the star icon button (only for favoritable cell). */
   onFavorite?: OnFavorite;
+  /** Flag if the cell is favorited, only used for favoritable cells. */
+  favorited?: boolean;
 }
 
 export interface ThSelectType {

diff --git a/packages/react-table/src/components/Table/examples/TableFavoritable.tsx b/packages/react-table/src/components/Table/examples/TableFavoritable.tsx
@@ -42,6 +42,9 @@ export const TableFavoritable: React.FunctionComponent = () => {
     });
   const isRepoFavorited = (repo: Repository) => favoriteRepoNames.includes(repo.name);
 
+  // State of the header cell to favorite / unfavorite all rows
+  const [headerFavorited, setHeaderFavorited] = React.useState(false);
+
   // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
   // In this example we only deal with booleans here because we only sort on the favorites column.
   // For more complex sorting, see Sortable.
@@ -80,9 +83,11 @@ export const TableFavoritable: React.FunctionComponent = () => {
       setActiveSortIndex(index);
       setActiveSortDirection(direction);
     },
-    onFavorite: (_event, isFavorited) => {
+    onFavorite: (_event, isFavorited: boolean) => {
       repositories.forEach((repo) => setRepoFavorited(repo, isFavorited));
+      setHeaderFavorited(isFavorited);
     },
+    favorited: headerFavorited,
     columnIndex
   });
 
@@ -104,7 +109,20 @@ export const TableFavoritable: React.FunctionComponent = () => {
             <Td
               favorites={{
                 isFavorited: isRepoFavorited(repo),
-                onFavorite: (_event, isFavoriting) => setRepoFavorited(repo, isFavoriting),
+                onFavorite: (_event, isFavoriting) => {
+                  setRepoFavorited(repo, isFavoriting);
+
+                  if (
+                    isFavoriting &&
+                    repositories.filter((r) => r !== repo).every((r) => favoriteRepoNames.includes(r.name))
+                  ) {
+                    setHeaderFavorited(true);
+                  }
+
+                  if (!isFavoriting && favoriteRepoNames.length === 1 && favoriteRepoNames.includes(repo.name)) {
+                    setHeaderFavorited(false);
+                  }
+                },
                 rowIndex
               }}
             />