Merge pull request #4296 from primefaces/issue-4200

Fix #4200: Panel Footer Option
primefaces · Apr 27, 2023 · d960d2c · d960d2c
2 parents d423f87 + 26714b3
commit d960d2c
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/components/lib/panel/Panel.js b/components/lib/panel/Panel.js
@@ -194,6 +194,33 @@ export const Panel = React.forwardRef((inProps, ref) => {
         );
     };
 
+    const createFooter = () => {
+        const footer = ObjectUtils.getJSXElement(props.footer, props);
+
+        const footerProps = mergeProps(
+            {
+                className: 'p-panel-footer'
+            },
+            ptm('footer')
+        );
+
+        const content = <div {...footerProps}>{footer}</div>;
+
+        if (props.footerTemplate) {
+            const defaultContentOptions = {
+                className: 'p-panel-footer',
+                element: content,
+                props
+            };
+
+            return ObjectUtils.getJSXElement(props.footerTemplate, defaultContentOptions);
+        } else if (props.footer) {
+            return content;
+        }
+
+        return null;
+    };
+
     const rootProps = mergeProps(
         {
             id: idState,
@@ -212,11 +239,13 @@ export const Panel = React.forwardRef((inProps, ref) => {
     );
     const header = createHeader();
     const content = createContent();
+    const footer = createFooter();
 
     return (
         <div {...rootProps}>
             {header}
             {content}
+            {footer}
         </div>
     );
 });

diff --git a/components/lib/panel/PanelBase.js b/components/lib/panel/PanelBase.js
@@ -6,6 +6,8 @@ export const PanelBase = ComponentBase.extend({
         id: null,
         header: null,
         headerTemplate: null,
+        footer: null,
+        footerTemplate: null,
         toggleable: null,
         style: null,
         className: null,

diff --git a/components/lib/panel/panel.d.ts b/components/lib/panel/panel.d.ts
@@ -67,6 +67,23 @@ interface PanelHeaderTemplateOptions {
      */
     collapsed: boolean;
 }
+/**
+ * Custom panel footer template options.
+ */
+interface PanelFooterTemplateOptions {
+    /**
+     * Style class of the panel.
+     */
+    className: string;
+    /**
+     * The JSX element that represents the panel.
+     */
+    element: JSX.Element;
+    /**
+     * The props of the Panel component.
+     */
+    props: PanelProps;
+}
 
 /**
  * Custom toggle event.
@@ -159,11 +176,20 @@ export interface PanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
      * Custom header template of the panel.
      */
     header?: React.ReactNode | undefined;
+    /**
+     * Custom footer template of the panel.
+     */
+    footer?: React.ReactNode | undefined;
     /**
      * Header template of the panel to customize more.
      * @param {PanelHeaderTemplateOptions} options - Options to customize the header template.
      */
     headerTemplate?: React.ReactNode | ((options: PanelHeaderTemplateOptions) => React.ReactNode);
+    /**
+     * Footer template of the panel to customize more.
+     * @param {PanelFooterTemplateOptions} options - Options to customize the footer template.
+     */
+    footerTemplate?: React.ReactNode | ((options: PanelFooterTemplateOptions) => React.ReactNode);
     /**
      * Defines if content of panel can be expanded and collapsed.
      * @defaultValue false