Merge pull request #287 from qoretechnologies/foxhoundn/bug-fix-reqor…

…epanel-actions-286
qoretechnologies · Mar 11, 2023 · cd2fc49 · cd2fc49
2 parents 4f1e408 + 4eb063c
commit cd2fc49
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.34.6",
+  "version": "0.34.7",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/Panel/NonResponsiveActions.tsx b/src/components/Panel/NonResponsiveActions.tsx
@@ -42,7 +42,7 @@ export const ReqorePanelNonResponsiveActions = memo(
     return (
       <ReqoreControlGroup
         fixed={isSmall ? false : hasResponsiveActions}
-        fluid={isSmall ? true : !hasResponsiveActions}
+        fluid={isSmall}
         horizontalAlign='flex-end'
         {...rest}
       >

diff --git a/src/components/Panel/index.tsx b/src/components/Panel/index.tsx
@@ -1,6 +1,6 @@
 import { size } from 'lodash';
 import { darken, rgba } from 'polished';
-import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
+import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
 import { useMeasure, useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
@@ -375,7 +375,10 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       [label, icon, badge]
     );
 
-    const isSmall = useMemo(() => width < 480 && process.env.NODE_ENV !== 'test', [width]);
+    const isSmall = useMemo(
+      () => responsiveTitle && width < 480 && process.env.NODE_ENV !== 'test',
+      [width, responsiveTitle]
+    );
 
     // If collapsible is true, toggle the isCollapsed state
     // If the isCollapsed state is true, the component is expanded
@@ -418,22 +421,24 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
 
     const hasNonResponsiveActions = useCallback(
       (data: TReqorePanelActions) =>
+        (!responsiveActions && size(data)) ||
         data.some((action) => action.responsive === false && action.show !== false),
-      [actions, bottomActions]
+      [actions, bottomActions, responsiveActions]
     );
 
     const hasResponsiveActions = useCallback(
       (data: TReqorePanelActions) =>
+        responsiveActions &&
         data.some((action) => action.responsive !== false && action.show !== false),
-      [actions, bottomActions]
+      [actions, bottomActions, responsiveActions]
     );
 
     const renderNonResponsiveActions = useCallback(
       (align: 'flex-start' | 'center' | 'flex-end' = 'flex-end') =>
         (action: IReqorePanelAction, index: number) => {
           return renderActions(action, index, false, align);
         },
-      [actions]
+      [actions, bottomActions, responsiveActions]
     );
 
     const renderActions = useCallback(
@@ -446,7 +451,9 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         if (
           action.show === false ||
           (includeResponsive && action.responsive === false) ||
-          (!includeResponsive && (action.responsive === true || !('responsive' in action)))
+          (!includeResponsive &&
+            responsiveActions &&
+            (action.responsive === true || !('responsive' in action)))
         ) {
           return null;
         }
@@ -563,6 +570,26 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
     const opacity = rest.transparent ? 0 : rest.opacity;
     const noHorizontalPadding = opacity === 0 && flat && !intent;
 
+    const showNonResponsiveGroup = useCallback((): boolean => {
+      let show: boolean = false;
+
+      // SHOULD THIS GROUP SHOW CONTROL BUTTONS?
+      // This group should only show control buttons
+      // if the panel is not small
+      if (!isSmall && (onClose || collapsible)) {
+        show = true;
+      }
+
+      // OTHERWISE, ARE THERE ANY NON RESPONSIVE ACTIONS TO BE SHOWN?
+      // This either means actions where user specified responsive: false
+      // or user passed responsiveActions: false
+      if (hasNonResponsiveActions(actions)) {
+        show = true;
+      }
+
+      return show;
+    }, [isSmall, collapsible, actions, hasNonResponsiveActions]);
+
     return (
       <StyledPanel
         {...rest}
@@ -648,7 +675,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                   />
                 ) : null}
                 <ReqorePanelNonResponsiveActions
-                  show={isSmall}
+                  show={isSmall && (!!onClose || collapsible)}
                   isSmall={isSmall}
                   showControlButtons
                   size={panelSize}
@@ -675,25 +702,22 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                 {actions.map(renderResponsiveActions())}
               </ReqoreControlGroup>
             )}
-            {collapsible || onClose || hasNonResponsiveActions(actions) ? (
-              <>
-                <ReqorePanelNonResponsiveActions
-                  show
-                  isSmall={isSmall}
-                  showControlButtons={!isSmall}
-                  size={panelSize}
-                  hasResponsiveActions={hasResponsiveActions(actions)}
-                  customTheme={theme}
-                  isCollapsed={_isCollapsed}
-                  onCollapseClick={collapsible ? handleCollapseClick : undefined}
-                  onCloseClick={onClose}
-                  closeButtonProps={closeButtonProps}
-                  collapseButtonProps={collapseButtonProps}
-                >
-                  {actions.map(renderNonResponsiveActions())}
-                </ReqorePanelNonResponsiveActions>
-              </>
-            ) : null}
+            <ReqorePanelNonResponsiveActions
+              show={showNonResponsiveGroup()}
+              isSmall={isSmall}
+              showControlButtons={!isSmall}
+              size={panelSize}
+              hasResponsiveActions={hasResponsiveActions(actions)}
+              customTheme={theme}
+              isCollapsed={_isCollapsed}
+              onCollapseClick={collapsible ? handleCollapseClick : undefined}
+              onCloseClick={onClose}
+              closeButtonProps={closeButtonProps}
+              collapseButtonProps={collapseButtonProps}
+              fluid={!hasTitleHeader || isSmall}
+            >
+              {actions.map(renderNonResponsiveActions())}
+            </ReqorePanelNonResponsiveActions>
           </StyledPanelTitle>
         )}
         {!_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? (

diff --git a/src/stories/Panel/Panel.stories.tsx b/src/stories/Panel/Panel.stories.tsx
@@ -1,8 +1,11 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { noop } from 'lodash';
+import ReqoreControlGroup from '../../components/ControlGroup';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../../components/Panel';
 import { ReqoreVerticalSpacer } from '../../components/Spacer';
+import ReqoreTag from '../../components/Tag';
+import { IReqoreIconName } from '../../types/icons';
 import { argManager, FlatArg, IconArg, IntentArg, SizeArg } from '../utils/args';
 
 const { createArg } = argManager<IReqorePanelProps>();
@@ -110,19 +113,51 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
           This is a fluid panel
         </ReqorePanel>
         <ReqoreVerticalSpacer height={10} />
-        <ReqorePanel
-          {...args}
-          style={{ width: 400 }}
-          fluid={false}
-          badge='Not Fluid'
-          actions={actions}
-          bottomActions={[
-            ...actions,
-            ...actions.map((action) => ({ ...action, position: 'right' })),
-          ]}
-        >
-          Thisisnotafluidpanelbutapanelthathasalongstringwithoutspacesthatneedstobewrapperotherwiseitwilladdahorizontalscrollbar
-        </ReqorePanel>
+        <ReqoreControlGroup>
+          <ReqorePanel
+            {...args}
+            style={{ width: 400 }}
+            fluid={false}
+            badge='Not Fluid'
+            actions={actions}
+            bottomActions={[
+              ...actions,
+              ...actions.map((action) => ({ ...action, position: 'right' })),
+            ]}
+          >
+            Thisisnotafluidpanelbutapanelthathasalongstringwithoutspacesthatneedstobewrapperotherwiseitwilladdahorizontalscrollbar
+          </ReqorePanel>
+          <ReqorePanel
+            {...args}
+            style={{ width: 400 }}
+            fluid={false}
+            label='This is a simple test to establish the proper balance of your loud speakers'
+            responsiveActions={false}
+            responsiveTitle={false}
+            collapsible={false}
+            actions={[
+              {
+                as: ReqoreTag,
+                props: {
+                  icon: 'AlarmLine' as IReqoreIconName,
+                  intent: 'danger',
+                },
+              },
+              {
+                group: [
+                  {
+                    icon: 'EditLine',
+                  },
+                  {
+                    icon: 'DeleteBinLine',
+                  },
+                ],
+              },
+            ]}
+          >
+            Thisisnotafluidpanelbutapanelthathasalongstringwithoutspacesthatneedstobewrapperotherwiseitwilladdahorizontalscrollbar
+          </ReqorePanel>
+        </ReqoreControlGroup>
         <ReqoreVerticalSpacer height={10} />
         <ReqorePanel
           {...args}
@@ -315,6 +350,7 @@ NonResponsiveActions.args = {
   badge: undefined,
   actions: [
     {
+      fluid: false,
       responsive: false,
       group: [
         {
@@ -329,6 +365,7 @@ NonResponsiveActions.args = {
       ],
     },
     {
+      fluid: false,
       group: [
         { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
         { icon: 'CopperCoinFill', intent: 'danger' },