Merge pull request brave#7155 from cezaraugusto/refactor/7153

Split settings toggle component to its own files

app/renderer/components/preferences/paymentsTab.js

@@ -11,13 +11,15 @@ const getSetting = require('../../../../js/settings').getSetting
 const settings = require('../../../../js/constants/settings')
 const ModalOverlay = require('../../../../js/components/modalOverlay')
 const coinbaseCountries = require('../../../../js/constants/coinbaseCountries')
+const {changeSetting} = require('../../lib/settingsUtil')
 const moment = require('moment')
 moment.locale(navigator.language)
 
 // Components
 const Button = require('../../../../js/components/button')
 const {FormTextbox, RecoveryKeyTextbox} = require('../textbox')
 const {FormDropdown, SettingDropdown} = require('../dropdown')
+const {SettingsList, SettingItem, SettingCheckbox} = require('../settings')
 
 class PaymentsTab extends ImmutableComponent {
   constructor () {
@@ -228,7 +230,6 @@ class PaymentsTab extends ImmutableComponent {
   get advancedSettingsContent () {
     const minDuration = this.props.ledgerData.getIn(['synopsisOptions', 'minDuration'])
     const minPublisherVisits = this.props.ledgerData.getIn(['synopsisOptions', 'minPublisherVisits'])
-    const {SettingsList, SettingItem, SettingCheckbox, changeSetting} = require('../../../../js/about/preferences')
 
     return <div className='board'>
       <div className='panel advancedSettings'>
@@ -326,8 +327,6 @@ class PaymentsTab extends ImmutableComponent {
   }
 
   get ledgerRecoveryContent () {
-    const {SettingsList, SettingItem} = require('../../../../js/about/preferences')
-
     const l10nDataArgs = {
       balance: this.btcToCurrencyString(this.props.ledgerData.get('balance'))
     }
@@ -476,7 +475,6 @@ class PaymentsTab extends ImmutableComponent {
   }
 
   get enabledContent () {
-    const {SettingsList, SettingItem, changeSetting} = require('../../../../js/about/preferences')
     // TODO: report when funds are too low
     // TODO: support non-USD currency
     return <div>
@@ -541,7 +539,6 @@ class PaymentsTab extends ImmutableComponent {
   }
 
   render () {
-    const {SettingCheckbox} = require('../../../../js/about/preferences')
     return <div className='paymentsContainer'>
       {
       this.enabled && this.props.addFundsOverlayVisible

app/renderer/components/settings.js

@@ -4,6 +4,10 @@
 
 const React = require('react')
 const ImmutableComponent = require('../../../js/components/immutableComponent')
+const aboutActions = require('../../../js/about/aboutActions')
+const getSetting = require('../../../js/settings').getSetting
+const {changeSetting} = require('../lib/settingsUtil')
+const SwitchControl = require('../../../js/components/switchControl')
 
 class SettingsList extends ImmutableComponent {
   render () {
@@ -33,7 +37,72 @@ class SettingItem extends ImmutableComponent {
   }
 }
 
+class SettingCheckbox extends ImmutableComponent {
+  constructor () {
+    super()
+    this.onClick = this.onClick.bind(this)
+  }
+
+  onClick (e) {
+    if (this.props.disabled) {
+      return
+    }
+    return this.props.onChange ? this.props.onChange(e) : changeSetting(this.props.onChangeSetting, this.props.prefKey, e)
+  }
+
+  render () {
+    const props = {
+      style: this.props.style,
+      className: 'settingItem'
+    }
+    if (this.props.id) {
+      props.id = this.props.id
+    }
+    return <div {...props}>
+      <SwitchControl id={this.props.prefKey}
+        small={this.props.small}
+        disabled={this.props.disabled}
+        onClick={this.onClick}
+        checkedOn={this.props.checked !== undefined ? this.props.checked : getSetting(this.props.prefKey, this.props.settings)} />
+      <label data-l10n-id={this.props.dataL10nId} htmlFor={this.props.prefKey} />
+      {this.props.options}
+    </div>
+  }
+}
+
+class SiteSettingCheckbox extends ImmutableComponent {
+  constructor () {
+    super()
+    this.onClick = this.onClick.bind(this)
+  }
+
+  onClick (e) {
+    if (this.props.disabled || !this.props.hostPattern) {
+      return
+    } else {
+      const value = !!e.target.value
+      value === this.props.defaultValue
+        ? aboutActions.removeSiteSetting(this.props.hostPattern,
+            this.props.prefKey)
+        : aboutActions.changeSiteSetting(this.props.hostPattern,
+            this.props.prefKey, value)
+    }
+  }
+
+  render () {
+    return <div style={this.props.style} className='settingItem siteSettingItem'>
+      <SwitchControl
+        small={this.props.small}
+        disabled={this.props.disabled}
+        onClick={this.onClick}
+        checkedOn={this.props.checked} />
+    </div>
+  }
+}
+
 module.exports = {
   SettingsList,
-  SettingItem
+  SettingItem,
+  SettingCheckbox,
+  SiteSettingCheckbox
 }

app/renderer/lib/settingsUtil.js

@@ -0,0 +1,25 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+module.exports.changeSetting = (cb, key, e) => {
+  if (e.target.type === 'checkbox') {
+    cb(key, e.target.value)
+  } else {
+    let value = e.target.value
+    if (e.target.dataset && e.target.dataset.type === 'number') {
+      value = parseInt(value, 10)
+    } else if (e.target.dataset && e.target.dataset.type === 'float') {
+      value = parseFloat(value)
+    }
+    if (e.target.type === 'number') {
+      value = value.replace(/\D/g, '')
+      value = parseInt(value, 10)
+      if (Number.isNaN(value)) {
+        return
+      }
+      value = Math.min(e.target.getAttribute('max'), Math.max(value, e.target.getAttribute('min')))
+    }
+    cb(key, value)
+  }
+}

js/about/preferences.js

@@ -9,9 +9,8 @@ const Immutable = require('immutable')
 const UrlUtil = require('../lib/urlutil')
 
 // Components
-const SwitchControl = require('../components/switchControl')
 const ModalOverlay = require('../components/modalOverlay')
-const {SettingsList, SettingItem} = require('../../app/renderer/components/settings')
+const {SettingsList, SettingItem, SettingCheckbox, SiteSettingCheckbox} = require('../../app/renderer/components/settings')
 const {SettingTextbox} = require('../../app/renderer/components/textbox')
 const {SettingDropdown} = require('../../app/renderer/components/dropdown')
 const Button = require('../components/button')
@@ -33,6 +32,7 @@ const appConfig = require('../constants/appConfig')
 const preferenceTabs = require('../constants/preferenceTabs')
 const messages = require('../constants/messages')
 const settings = require('../constants/settings')
+const {changeSetting} = require('../../app/renderer/lib/settingsUtil')
 const coinbaseCountries = require('../constants/coinbaseCountries')
 const {passwordManagers, extensionIds} = require('../constants/passwordManagers')
 const {startsWithOption, newTabMode, bookmarksToolbarMode, tabCloseAction, fullscreenOption} = require('../../app/common/constants/settingsEnums')
@@ -94,91 +94,6 @@ const braveryPermissionNames = {
   'noScript': ['boolean', 'number']
 }
 
-const changeSetting = (cb, key, e) => {
-  if (e.target.type === 'checkbox') {
-    cb(key, e.target.value)
-  } else {
-    let value = e.target.value
-    if (e.target.dataset && e.target.dataset.type === 'number') {
-      value = parseInt(value, 10)
-    } else if (e.target.dataset && e.target.dataset.type === 'float') {
-      value = parseFloat(value)
-    }
-    if (e.target.type === 'number') {
-      value = value.replace(/\D/g, '')
-      value = parseInt(value, 10)
-      if (Number.isNaN(value)) {
-        return
-      }
-      value = Math.min(e.target.getAttribute('max'), Math.max(value, e.target.getAttribute('min')))
-    }
-    cb(key, value)
-  }
-}
-
-class SettingCheckbox extends ImmutableComponent {
-  constructor () {
-    super()
-    this.onClick = this.onClick.bind(this)
-  }
-
-  onClick (e) {
-    if (this.props.disabled) {
-      return
-    }
-    return this.props.onChange ? this.props.onChange(e) : changeSetting(this.props.onChangeSetting, this.props.prefKey, e)
-  }
-
-  render () {
-    const props = {
-      style: this.props.style,
-      className: 'settingItem'
-    }
-    if (this.props.id) {
-      props.id = this.props.id
-    }
-    return <div {...props}>
-      <SwitchControl id={this.props.prefKey}
-        small={this.props.small}
-        disabled={this.props.disabled}
-        onClick={this.onClick}
-        checkedOn={this.props.checked !== undefined ? this.props.checked : getSetting(this.props.prefKey, this.props.settings)} />
-      <label data-l10n-id={this.props.dataL10nId} htmlFor={this.props.prefKey} />
-      {this.props.options}
-    </div>
-  }
-}
-
-class SiteSettingCheckbox extends ImmutableComponent {
-  constructor () {
-    super()
-    this.onClick = this.onClick.bind(this)
-  }
-
-  onClick (e) {
-    if (this.props.disabled || !this.props.hostPattern) {
-      return
-    } else {
-      const value = !!e.target.value
-      value === this.props.defaultValue
-        ? aboutActions.removeSiteSetting(this.props.hostPattern,
-            this.props.prefKey)
-        : aboutActions.changeSiteSetting(this.props.hostPattern,
-            this.props.prefKey, value)
-    }
-  }
-
-  render () {
-    return <div style={this.props.style} className='settingItem siteSettingItem'>
-      <SwitchControl
-        small={this.props.small}
-        disabled={this.props.disabled}
-        onClick={this.onClick}
-        checkedOn={this.props.checked} />
-    </div>
-  }
-}
-
 class LedgerTable extends ImmutableComponent {
   get synopsis () {
     return this.props.ledgerData.get('synopsis')
@@ -1528,9 +1443,5 @@ module.exports = {
   AboutPreferences: <AboutPreferences />,
   BitcoinDashboard,
   LedgerTable,
-  SettingsList,
-  SettingItem,
-  SettingCheckbox,
-  PaymentHistory,
-  changeSetting
+  PaymentHistory
 }