From 9374fd29946ba81d3fadcad57ff4d25739fb256b Mon Sep 17 00:00:00 2001
From: Miika Turunen <miika.turunen@gmail.com>
Date: Tue, 12 Sep 2017 23:07:01 +0300
Subject: [PATCH] Split settings tabs to components

---
 .../components/dashboard/settings/settings.js | 60 +++----------------
 .../dashboard/settings/settings.render.js     | 24 ++++----
 2 files changed, 20 insertions(+), 64 deletions(-)

diff --git a/react/src/components/dashboard/settings/settings.js b/react/src/components/dashboard/settings/settings.js
index 42434f6..59d5343 100644
--- a/react/src/components/dashboard/settings/settings.js
+++ b/react/src/components/dashboard/settings/settings.js
@@ -42,40 +42,12 @@ class Settings extends React.Component {
     super();
     this.state = {
       activeTab: 0,
-      activeTabHeight: '0',
       tabElId: null,
       seedInputVisibility: false,
       nativeOnly: Config.iguanaLessMode,
       disableWalletSpecificUI: false,
     };
     this.updateInput = this.updateInput.bind(this);
-    this.updateTabDimensions = this.updateTabDimensions.bind(this);
-  }
-
-  updateTabDimensions() {
-    setTimeout(() => {
-      if(document.querySelector(`#${this.state.tabElId} .panel-collapse .panel-body`)){
-      const _height = document.querySelector(`#${this.state.tabElId} .panel-collapse .panel-body`).offsetHeight;
-      } else {
-        _height = '100%';
-      }
-      this.setState(Object.assign({}, this.state, {
-        activeTabHeight: _height,
-      }));
-    }, 100);
-  }
-
-  componentWillMount() {
-    window.addEventListener('resize', this.updateTabDimensions);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.updateTabDimensions);
-
-    if (!this.state.disableWalletSpecificUI) {
-      document.documentElement.style.height = '100%';
-      document.body.style.height = '100%';
-    }
   }
 
   componentDidMount(props) {
@@ -85,15 +57,14 @@ class Settings extends React.Component {
 
     Store.dispatch(getAppConfig());
     Store.dispatch(getAppInfo());
+
+    document.getElementById('section-iguana-wallet-settings').setAttribute("style", "height:auto; min-height: 100%");
   }
 
   componentWillReceiveProps(props) {
     if (this.state.tabElId) {
-      const _height = document.querySelector(`#${this.state.tabElId} .panel-collapse .panel-body`).offsetHeight;
-
       this.setState(Object.assign({}, this.state, {
         activeTab: this.state.activeTab,
-        activeTabHeight: _height,
         tabElId: this.state.tabElId,
         disableWalletSpecificUI: this.props.disableWalletSpecificUI,
       }));
@@ -101,26 +72,17 @@ class Settings extends React.Component {
   }
 
   openTab(elemId, tab) {
-    setTimeout(() => {
-      const _height = document.querySelector(`#${elemId} .panel-collapse .panel-body`).offsetHeight;
-
-      this.setState(Object.assign({}, this.state, {
+       this.setState(Object.assign({}, this.state, {
         activeTab: tab,
-        activeTabHeight: _height,
         tabElId: elemId,
       }));
 
-      // body size hack
-      if (!this.state.disableWalletSpecificUI) {
-        document.documentElement.style.height = '100%';
-        document.body.style.height = '100%';
+  }
 
-        setTimeout(() => {
-          document.documentElement.style.height = _height <= 200 ? '100%' : 'inherit';
-          document.body.style.height = _height <= 200 ? '100%' : 'inherit';
-        }, 100);
-      }
-    }, 100);
+  updateInput(e) {
+    this.setState({
+      [e.target.name]: e.target.value,
+    });
   }
  
   renderAppInfoTab() {
@@ -176,12 +138,6 @@ class Settings extends React.Component {
     return <SupportPanel />
   }
 
-  updateInput(e) {
-      this.setState({
-        [e.target.name]: e.target.value,
-      });
-  }
-
   render() {
     return SettingsRender.call(this);
   }
diff --git a/react/src/components/dashboard/settings/settings.render.js b/react/src/components/dashboard/settings/settings.render.js
index ececb05..33682a8 100644
--- a/react/src/components/dashboard/settings/settings.render.js
+++ b/react/src/components/dashboard/settings/settings.render.js
@@ -28,7 +28,7 @@ export const SettingsRender = function() {
                       </div>
                       <div
                         className={ 'panel-collapse collapse' + (this.state.activeTab === 0 ? ' in' : '') }
-                        style={{ height: this.state.activeTab === 0 ? `${this.state.activeTabHeight}px` : '0' }}>
+                        style={{ height: this.state.activeTab === 0 ? `auto` : '0' }}>
                         { this.renderWalletInfo() }
                       </div>
                     </div>
@@ -45,7 +45,7 @@ export const SettingsRender = function() {
                     </div>
                     <div
                       className={ 'panel-collapse collapse' + (this.state.activeTab === 1 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 1 ? `${this.state.activeTabHeight}px` : '0' }}>
+                      style={{ height: this.state.activeTab === 1 ? `auto` : '0' }}>
                       { this.renderAddNode() }
                     </div>
                   </div>
@@ -62,7 +62,7 @@ export const SettingsRender = function() {
                     </div>
                     <div
                       className={ 'panel-collapse collapse' + (this.state.activeTab === 2 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 2 ? `${this.state.activeTabHeight}px` : '0' }}>
+                      style={{ height: this.state.activeTab === 2 ? `auto` : '0' }}>
                       { this.renderWalletBackup() }
                   </div>
                   </div>
@@ -79,7 +79,7 @@ export const SettingsRender = function() {
                     </div>
                     <div
                       className={ 'panel-collapse collapse' + (this.state.activeTab === 3 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 3 ? `${this.state.activeTabHeight}px` : '0' }}>
+                      style={{ height: this.state.activeTab === 3 ? `auto` : '0' }}>
                       { this.renderFiatCurrency() }  </div>
                   </div>
                   }
@@ -95,7 +95,7 @@ export const SettingsRender = function() {
                     </div>
                     <div
                       className={ 'panel-collapse collapse' + (this.state.activeTab === 4 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 4 ? `${this.state.activeTabHeight}px` : '0' }}>
+                      style={{ height: this.state.activeTab === 4 ? `auto` : '0' }}>
                       { this.renderExportKeys() }
                     </div>
                   </div>
@@ -112,7 +112,7 @@ export const SettingsRender = function() {
                     </div>
                     <div
                       className={ 'panel-collapse collapse' + (this.state.activeTab === 5 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 5 ? `${this.state.activeTabHeight}px` : '0' }}>
+                      style={{ height: this.state.activeTab === 5 ? `auto` : '0' }}>
                       { this.renderImportKeys() }
                     </div>
                   </div>
@@ -129,7 +129,7 @@ export const SettingsRender = function() {
                     </div>
                     <div
                       className={ 'panel-collapse collapse' + (this.state.activeTab === 6 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 6 ? `${this.state.activeTabHeight}px` : '0' }}>
+                      style={{ height: this.state.activeTab === 6 ? `auto` : '0' }}>
                       { this.renderDebugLog() }
                     </div>
                   </div>
@@ -145,7 +145,7 @@ export const SettingsRender = function() {
                     </div>
                     <div
                       className={ 'panel-collapse collapse' + (this.state.activeTab === 7 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 7 ? `${this.state.activeTabHeight}px` : '0' }}>
+                      style={{ height: this.state.activeTab === 7 ? `auto` : '0' }}>
                       { this.renderAppSettings() }
                     </div>
                   </div>
@@ -161,7 +161,7 @@ export const SettingsRender = function() {
                     </div>
                     <div
                       className={ 'panel-collapse collapse' + (this.state.activeTab === 8 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 8 ? `${this.state.activeTabHeight}px` : '0' }}>
+                      style={{ height: this.state.activeTab === 8 ? `auto` : '0' }}>
                       { this.renderAppInfoTab() }
                     </div>
                   </div>
@@ -178,7 +178,7 @@ export const SettingsRender = function() {
                       </div>
                       <div
                         className={ 'panel-collapse collapse' + (this.state.activeTab === 9 ? ' in' : '') }
-                        style={{ height: this.state.activeTab === 9 ? `${this.state.activeTabHeight}px` : '0' }}>
+                        style={{ height: this.state.activeTab === 9 ? `auto` : '0' }}>
                         { this.renderCliPanel() }
                       </div>
                     </div>
@@ -195,7 +195,7 @@ export const SettingsRender = function() {
                     </div>
                     <div
                       className={ 'panel-collapse collapse' + (this.state.activeTab === 10 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 10 ? `${this.state.activeTabHeight}px` : '0' }}>
+                      style={{ height: this.state.activeTab === 10 ? `auto` : '0' }}>
                       { this.renderAppUpdateTab() }
                     </div>
                   </div>
@@ -211,7 +211,7 @@ export const SettingsRender = function() {
                     </div>
                     <div
                       className={ 'panel-collapse collapse' + (this.state.activeTab === 11 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 11 ? `${this.state.activeTabHeight}px` : '0' }}>
+                      style={{ height: this.state.activeTab === 11 ? `auto` : '0' }}>
                       { this.renderSupportPanel() }
                     </div>
                   </div>