multiple groups second pass

patternfly · Jul 11, 2023 · e4e10c3 · e4e10c3
1 parent 0a71f0d
commit e4e10c3
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 74 deletions.
diff --git a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx
@@ -33,6 +33,8 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
   clearFiltersButtonText?: string;
   /** Id of the parent Toolbar component */
   toolbarId?: string;
+  /** Custom expandable content for the toolbar, for non-managed multiple toolbar toggle groups. */
+  expandableContent?: React.ReactNode;
 }
 
 export class ToolbarContent extends React.Component<ToolbarContentProps> {
@@ -58,6 +60,7 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
       showClearFiltersButton,
       clearFiltersButtonText,
       alignSelf,
+      expandableContent,
       ...props
     } = this.props;
 
@@ -103,15 +106,19 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
                     >
                       {children}
                     </div>
-                    <ToolbarExpandableContent
-                      id={expandableContentId}
-                      isExpanded={isExpanded}
-                      expandableContentRef={this.expandableContentRef}
-                      chipContainerRef={this.chipContainerRef}
-                      clearAllFilters={clearAllFilters || clearAllFiltersContext}
-                      showClearFiltersButton={showClearFiltersButton || showClearFiltersButtonContext}
-                      clearFiltersButtonText={clearFiltersButtonText || clearFiltersButtonContext}
-                    />
+                    {expandableContent ? (
+                      expandableContent
+                    ) : (
+                      <ToolbarExpandableContent
+                        id={expandableContentId}
+                        isExpanded={isExpanded}
+                        expandableContentRef={this.expandableContentRef}
+                        chipContainerRef={this.chipContainerRef}
+                        clearAllFilters={clearAllFilters || clearAllFiltersContext}
+                        showClearFiltersButton={showClearFiltersButton || showClearFiltersButtonContext}
+                        clearFiltersButtonText={clearFiltersButtonText || clearFiltersButtonContext}
+                      />
+                    )}
                   </ToolbarContentContext.Provider>
                 );
               }}

diff --git a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx
@@ -39,6 +39,8 @@ export interface ToolbarFilterProps extends ToolbarItemProps {
   categoryName: string | ToolbarChipGroup;
   /** Flag to show the toolbar item */
   showToolbarItem?: boolean;
+  /** Reference to a chip container created with a custom expandable content group, for non-managed multiple toolbar toggle groups. */
+  expandableChipContainerRef?: React.RefObject<HTMLDivElement>;
 }
 
 interface ToolbarFilterState {
@@ -93,6 +95,7 @@ export class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFi
       categoryName,
       showToolbarItem,
       isExpanded,
+      expandableChipContainerRef,
       ...props
     } = this.props;
     const { isExpanded: managedIsExpanded, chipGroupContentRef } = this.context;
@@ -142,6 +145,9 @@ export class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFi
           <React.Fragment>
             {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
             {chipContainerRef.current && ReactDOM.createPortal(chipGroup, chipContainerRef.current)}
+            {expandableChipContainerRef &&
+              expandableChipContainerRef.current &&
+              ReactDOM.createPortal(chipGroup, expandableChipContainerRef.current)}
           </React.Fragment>
         )}
       </ToolbarContentContext.Consumer>

diff --git a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
@@ -50,10 +50,13 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
     xl?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
     '2xl'?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
   };
+  /** Reference to a custom expandable content group, for non-managed multiple toolbar toggle groups. */
+  expandableContentRef?: React.RefObject<any>;
 }
 
 export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
   static displayName = 'ToolbarToggleGroup';
+
   isContentPopup = () => {
     const viewportSize = canUseDOM ? window.innerWidth : 1200;
     const lgBreakpointValue = parseInt(globalBreakpointLg.value);
@@ -72,6 +75,7 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
       className,
       children,
       isExpanded,
+      expandableContentRef,
       onToggle,
       ...props
     } = this.props;
@@ -91,16 +95,19 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
 
               return (
                 <ToolbarContentContext.Consumer>
-                  {({ expandableContentRef, expandableContentId }) => {
+                  {({ expandableContentRef: managedExpandableContentRef, expandableContentId }) => {
+                    const _contentRef =
+                      expandableContentRef !== undefined ? expandableContentRef : managedExpandableContentRef;
+
                     if (
                       isExpanded === undefined &&
-                      expandableContentRef.current &&
-                      expandableContentRef.current.classList
+                      managedExpandableContentRef.current &&
+                      managedExpandableContentRef.current.classList
                     ) {
                       if (_isExpanded) {
-                        expandableContentRef.current.classList.add(styles.modifiers.expanded);
+                        managedExpandableContentRef.current.classList.add(styles.modifiers.expanded);
                       } else {
-                        expandableContentRef.current.classList.remove(styles.modifiers.expanded);
+                        managedExpandableContentRef.current.classList.remove(styles.modifiers.expanded);
                       }
                     }
 
@@ -143,7 +150,7 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
                         {_isExpanded
                           ? (ReactDOM.createPortal(
                               children,
-                              expandableContentRef.current.firstElementChild
+                              _contentRef.current.firstElementChild
                             ) as React.ReactElement)
                           : children}
                       </div>