From 964821a97ae5f1fbfec3c9542e6f6b31be92ee65 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Wed, 12 Jul 2023 17:14:38 +0000
Subject: [PATCH] support render tab footer

---
 .../settings/components/SettingTab/index.jsx  | 82 ++++++++++++-------
 1 file changed, 51 insertions(+), 31 deletions(-)

diff --git a/packages/app/src/pages/settings/components/SettingTab/index.jsx b/packages/app/src/pages/settings/components/SettingTab/index.jsx
index 96067104..857b6e89 100644
--- a/packages/app/src/pages/settings/components/SettingTab/index.jsx
+++ b/packages/app/src/pages/settings/components/SettingTab/index.jsx
@@ -76,42 +76,62 @@ export default class SettingTab extends React.Component {
         if (this.props.withGroups) {
             const group = composeGroupsFromSettingsTab(this.tab.settings)
 
-            return Object.entries(group).map(([groupKey, settings], index) => {
-                const fromDecoratorIcon = groupsDecorators[groupKey]?.icon
-                const fromDecoratorTitle = groupsDecorators[groupKey]?.title
+            return <>
+                {
+                    Object.entries(group).map(([groupKey, settings], index) => {
+                        const fromDecoratorIcon = groupsDecorators[groupKey]?.icon
+                        const fromDecoratorTitle = groupsDecorators[groupKey]?.title
 
-                return <div id={groupKey} key={index} className="settings_content_group">
-                    <div className="settings_content_group_header">
-                        <h1>
-                            {
-                                fromDecoratorIcon ? React.createElement(Icons[fromDecoratorIcon]) : null
-                            }
-                            <Translation>
+                        return <div id={groupKey} key={index} className="settings_content_group">
+                            <div className="settings_content_group_header">
+                                <h1>
+                                    {
+                                        fromDecoratorIcon ? React.createElement(Icons[fromDecoratorIcon]) : null
+                                    }
+                                    <Translation>
+                                        {
+                                            t => t(fromDecoratorTitle ?? groupKey)
+                                        }
+                                    </Translation>
+                                </h1>
+                            </div>
+
+                            <div className="settings_list">
                                 {
-                                    t => t(fromDecoratorTitle ?? groupKey)
+                                    settings.map((setting) => <SettingItemComponent
+                                        setting={setting}
+                                        ctx={this.state.processedCtx}
+                                    />)
                                 }
-                            </Translation>
-                        </h1>
-                    </div>
+                            </div>
+                        </div>
+                    })
+                }
 
-                    <div className="settings_list">
-                        {
-                            settings.map((setting) => <SettingItemComponent
-                                setting={setting}
-                                ctx={this.state.processedCtx}
-                            />)
-                        }
-                    </div>
-                </div>
-            })
+                {
+                    this.tab.footer && React.createElement(this.tab.footer, {
+                        ctx: this.state.processedCtx
+                    })
+                }
+            </>
         }
 
-        return this.tab.settings.map((setting, index) => {
-            return <SettingItemComponent
-                key={index}
-                setting={setting}
-                ctx={this.state.processedCtx}
-            />
-        })
+        return <>
+            {
+                this.tab.settings.map((setting, index) => {
+                    return <SettingItemComponent
+                        key={index}
+                        setting={setting}
+                        ctx={this.state.processedCtx}
+                    />
+                })
+            }
+
+            {
+                this.tab.footer && React.createElement(this.tab.footer, {
+                    ctx: this.state.processedCtx
+                })
+            }
+        </>
     }
 }
\ No newline at end of file