From 26714b3e1b70b1e1af725e64e073c110ced4d938 Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Thu, 27 Apr 2023 15:35:58 +0300
Subject: [PATCH] Fix #4200: Panel Footer Option

---
 components/lib/panel/Panel.js     | 29 +++++++++++++++++++++++++++++
 components/lib/panel/PanelBase.js |  2 ++
 components/lib/panel/panel.d.ts   | 26 ++++++++++++++++++++++++++
 3 files changed, 57 insertions(+)

diff --git a/components/lib/panel/Panel.js b/components/lib/panel/Panel.js
index ea3dec022c..2691570fd3 100644
--- 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
index 66500026ea..7dd7e35daf 100644
--- 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
index 87b0a94692..fdf3ed8b02 100644
--- 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