From 1752cec20dd92d06e1fe05bdedb9a9c79838e750 Mon Sep 17 00:00:00 2001
From: Yuya Ochiai <yuya0321@gmail.com>
Date: Thu, 3 Nov 2016 00:35:07 +0900
Subject: [PATCH] Use latest react-bootstrap

---
 src/browser/components/SettingsPage.jsx | 99 +++++++++++--------------
 src/browser/components/TeamList.jsx     |  2 +-
 src/package.json                        |  2 +-
 test/specs/browser/settings_test.js     | 12 +--
 4 files changed, 51 insertions(+), 64 deletions(-)

diff --git a/src/browser/components/SettingsPage.jsx b/src/browser/components/SettingsPage.jsx
index 488115b0..0eaeeb2d 100644
--- a/src/browser/components/SettingsPage.jsx
+++ b/src/browser/components/SettingsPage.jsx
@@ -1,5 +1,5 @@
 const React = require('react');
-const {Col, Grid, Navbar, Input, Row} = require('react-bootstrap');
+const {Button, Checkbox, Col, FormGroup, Grid, Navbar, Row} = require('react-bootstrap');
 
 const {ipcRenderer, remote} = require('electron');
 const AutoLaunch = require('auto-launch');
@@ -92,16 +92,16 @@ const SettingsPage = React.createClass({
   },
   handleChangeDisableWebSecurity() {
     this.setState({
-      disablewebsecurity: this.refs.disablewebsecurity.getChecked()
+      disablewebsecurity: !this.refs.disablewebsecurity.props.checked
     });
   },
   handleChangeHideMenuBar() {
     this.setState({
-      hideMenuBar: this.refs.hideMenuBar.getChecked()
+      hideMenuBar: !this.refs.hideMenuBar.props.checked
     });
   },
   handleChangeShowTrayIcon() {
-    var shouldShowTrayIcon = this.refs.showTrayIcon.getChecked();
+    var shouldShowTrayIcon = !this.refs.showTrayIcon.props.checked;
     this.setState({
       showTrayIcon: shouldShowTrayIcon
     });
@@ -114,18 +114,18 @@ const SettingsPage = React.createClass({
   },
   handleChangeTrayIconTheme() {
     this.setState({
-      trayIconTheme: this.refs.trayIconTheme.getValue()
+      trayIconTheme: !this.refs.trayIconTheme.props.checked
     });
   },
   handleChangeAutoStart() {
     this.setState({
-      autostart: this.refs.autostart.getChecked()
+      autostart: !this.refs.autostart.props.checked
     });
   },
   handleChangeMinimizeToTray() {
     var shouldMinimizeToTray =
-      (process.platform !== 'darwin' || this.refs.showTrayIcon.getChecked()) &&
-      this.refs.minimizeToTray.getChecked();
+      (process.platform !== 'darwin' || !this.refs.showTrayIcon.props.checked) &&
+      !this.refs.minimizeToTray.props.checked;
 
     this.setState({
       minimizeToTray: shouldMinimizeToTray
@@ -133,7 +133,7 @@ const SettingsPage = React.createClass({
   },
   handleChangeToggleWindowOnTrayIconClick() {
     this.setState({
-      toggleWindowOnTrayIconClick: this.refs.toggleWindowOnTrayIconClick.getChecked()
+      toggleWindowOnTrayIconClick: !this.refs.toggleWindowOnTrayIconClick.props.checked
     });
   },
   toggleShowTeamForm() {
@@ -144,13 +144,13 @@ const SettingsPage = React.createClass({
   handleFlashWindow() {
     this.setState({
       notifications: {
-        flashWindow: this.refs.flashWindow.getChecked() ? 2 : 0
+        flashWindow: this.refs.flashWindow.props.checked ? 0 : 2
       }
     });
   },
   handleShowUnreadBadge() {
     this.setState({
-      showUnreadBadge: this.refs.showUnreadBadge.getChecked()
+      showUnreadBadge: !this.refs.showUnreadBadge.props.checked
     });
   },
   render() {
@@ -169,120 +169,103 @@ const SettingsPage = React.createClass({
     var options = [];
     if (process.platform === 'win32' || process.platform === 'linux') {
       options.push(
-        <Input
+        <Checkbox
           key='inputHideMenuBar'
           id='inputHideMenuBar'
           ref='hideMenuBar'
-          type='checkbox'
-          label='Hide menu bar (Press Alt to show menu bar)'
           checked={this.state.hideMenuBar}
           onChange={this.handleChangeHideMenuBar}
-        />);
+        >{'Hide menu bar (Press Alt to show menu bar)'}</Checkbox>);
     }
     if (process.platform === 'darwin' || process.platform === 'linux') {
       options.push(
-        <Input
+        <Checkbox
           key='inputShowTrayIcon'
           id='inputShowTrayIcon'
           ref='showTrayIcon'
-          type='checkbox'
-          label={process.platform === 'darwin' ?
-            'Show icon on menu bar (need to restart the application)' :
-            'Show icon in notification area (need to restart the application)'}
           checked={this.state.showTrayIcon}
           onChange={this.handleChangeShowTrayIcon}
-        />);
+        >{process.platform === 'darwin' ?
+          'Show icon on menu bar (need to restart the application)' :
+          'Show icon in notification area (need to restart the application)'}</Checkbox>);
     }
     if (process.platform === 'linux') {
       options.push(
-        <Input
+        <Checkbox
           key='inputTrayIconTheme'
           ref='trayIconTheme'
           type='select'
-          label='Icon theme (Need to restart the application)'
           value={this.state.trayIconTheme}
           onChange={this.handleChangeTrayIconTheme}
-        >
+        >{'Icon theme (Need to restart the application)'}
           <option value='light'>{'Light'}</option>
           <option value='dark'>{'Dark'}</option>
-        </Input>);
+        </Checkbox>);
     }
     options.push(
-      <Input
+      <Checkbox
         key='inputDisableWebSecurity'
         id='inputDisableWebSecurity'
         ref='disablewebsecurity'
-        type='checkbox'
-        label='Allow mixed content (Enabling allows both secure and insecure content, images and scripts to render and execute. Disabling allows only secure content.)'
         checked={this.state.disablewebsecurity}
         onChange={this.handleChangeDisableWebSecurity}
-      />);
+      >{'Allow mixed content (Enabling allows both secure and insecure content, images and scripts to render and execute. Disabling allows only secure content.)'}</Checkbox>);
 
     //OSX has an option in the Dock, to set the app to autostart, so we choose to not support this option for OSX
     if (process.platform === 'win32' || process.platform === 'linux') {
       options.push(
-        <Input
+        <Checkbox
           key='inputAutoStart'
           id='inputAutoStart'
           ref='autostart'
-          type='checkbox'
-          label='Start app on login.'
           checked={this.state.autostart}
           onChange={this.handleChangeAutoStart}
-        />);
+        >{'Start app on login.'}</Checkbox>);
     }
 
     if (process.platform === 'darwin' || process.platform === 'linux') {
       options.push(
-        <Input
+        <Checkbox
           key='inputMinimizeToTray'
           id='inputMinimizeToTray'
           ref='minimizeToTray'
-          type='checkbox'
-          label={this.state.trayWasVisible || !this.state.showTrayIcon ? 'Leave app running in notification area when the window is closed' : 'Leave app running in notification area when the window is closed (available on next restart)'}
           disabled={!this.state.showTrayIcon || !this.state.trayWasVisible}
           checked={this.state.minimizeToTray}
           onChange={this.handleChangeMinimizeToTray}
-        />);
+        >{this.state.trayWasVisible || !this.state.showTrayIcon ? 'Leave app running in notification area when the window is closed' : 'Leave app running in notification area when the window is closed (available on next restart)'}</Checkbox>);
     }
 
     if (process.platform === 'win32') {
       options.push(
-        <Input
+        <Checkbox
           key='inputToggleWindowOnTrayIconClick'
           id='inputToggleWindowOnTrayIconClick'
           ref='toggleWindowOnTrayIconClick'
-          type='checkbox'
-          label='Toggle window visibility when clicking on the tray icon.'
           checked={this.state.toggleWindowOnTrayIconClick}
           onChange={this.handleChangeToggleWindowOnTrayIconClick}
-        />);
+        >{'Toggle window visibility when clicking on the tray icon.'}</Checkbox>);
     }
 
     if (process.platform === 'darwin' || process.platform === 'win32') {
       options.push(
-        <Input
+        <Checkbox
           key='inputShowUnreadBadge'
           id='inputShowUnreadBadge'
           ref='showUnreadBadge'
-          type='checkbox'
-          label='Show red badge on taskbar icon to indicate unread messages. Regardless of this setting, mentions are always indicated with a red badge and item count on the taskbar icon.'
           checked={this.state.showUnreadBadge}
           onChange={this.handleShowUnreadBadge}
-        />);
+        >{'Show red badge on taskbar icon to indicate unread messages. Regardless of this setting, mentions are always indicated with a red badge and item count on the taskbar icon.'}</Checkbox>);
     }
 
     if (process.platform === 'win32' || process.platform === 'linux') {
       options.push(
-        <Input
+        <Checkbox
           key='flashWindow'
           id='inputflashWindow'
           ref='flashWindow'
-          type='checkbox'
-          label='Flash the taskbar icon when a new message is received.'
           checked={this.state.notifications.flashWindow === 2}
           onChange={this.handleFlashWindow}
-        />);
+        >{'Flash the taskbar icon when a new message is received.'}</Checkbox>);
     }
 
     const settingsPage = {
@@ -323,7 +306,11 @@ const SettingsPage = React.createClass({
       <Row>
         <Col md={12}>
           <h2 style={settingsPage.sectionHeading}>{'App options'}</h2>
-          { options }
+          { options.map((opt, i) => (
+            <FormGroup key={`fromGroup${i}`}>
+              {opt}
+            </FormGroup>
+          )) }
         </Col>
       </Row>
       ) : null;
@@ -377,19 +364,19 @@ const SettingsPage = React.createClass({
             className='text-right'
             style={settingsPage.footer}
           >
-            <button
+            <Button
               id='btnCancel'
-              className='btn btn-link'
+              className='btn-link'
               onClick={this.handleCancel}
-            >{'Cancel'}</button>
+            >{'Cancel'}</Button>
             { ' ' }
-            <button
+            <Button
               id='btnSave'
-              className='btn btn-primary navbar-btn'
+              className='navbar-btn'
               bsStyle='primary'
               onClick={this.handleSave}
               disabled={this.state.teams.length === 0}
-            >{'Save'}</button>
+            >{'Save'}</Button>
           </div>
         </Navbar>
       </div>
diff --git a/src/browser/components/TeamList.jsx b/src/browser/components/TeamList.jsx
index 1fb40451..fa64a014 100644
--- a/src/browser/components/TeamList.jsx
+++ b/src/browser/components/TeamList.jsx
@@ -96,7 +96,7 @@ const TeamList = React.createClass({
     }
 
     return (
-      <ListGroup class='teamList'>
+      <ListGroup className='teamList'>
         { teamNodes }
         { addTeamForm }
       </ListGroup>
diff --git a/src/package.json b/src/package.json
index c1fb167d..dc2dac09 100644
--- a/src/package.json
+++ b/src/package.json
@@ -21,7 +21,7 @@
     "electron-squirrel-startup": "^1.0.0",
     "os-locale": "^1.4.0",
     "react": "^15.3.0",
-    "react-bootstrap": "~0.29.0",
+    "react-bootstrap": "~0.30.6",
     "react-dom": "^15.3.0",
     "yargs": "^3.32.0"
   }
diff --git a/test/specs/browser/settings_test.js b/test/specs/browser/settings_test.js
index ff1e07a5..0859abcc 100644
--- a/test/specs/browser/settings_test.js
+++ b/test/specs/browser/settings_test.js
@@ -65,9 +65,9 @@ describe('browser/settings.html', function desc() {
           return this.app.client.
             loadSettingsPage().
             scroll('#inputHideMenuBar').
-            isSelected('#inputHideMenuBar input').then((isSelected) => {
+            isSelected('#inputHideMenuBar').then((isSelected) => {
               if (isSelected !== v) {
-                return this.app.client.click('#inputHideMenuBar input');
+                return this.app.client.click('#inputHideMenuBar');
               }
               return true;
             }).
@@ -83,7 +83,7 @@ describe('browser/settings.html', function desc() {
               return this.app.client. // confirm actual behavior
                 browserWindow.isMenuBarAutoHide().should.eventually.equal(v).
                 loadSettingsPage().
-                isSelected('#inputHideMenuBar input').should.eventually.equal(v);
+                isSelected('#inputHideMenuBar').should.eventually.equal(v);
             });
         });
       });
@@ -98,9 +98,9 @@ describe('browser/settings.html', function desc() {
           return this.app.client.
             loadSettingsPage().
             scroll('#inputDisableWebSecurity').
-            isSelected('#inputDisableWebSecurity input').then((isSelected) => {
+            isSelected('#inputDisableWebSecurity').then((isSelected) => {
               if (isSelected !== v) {
-                return this.app.client.click('#inputDisableWebSecurity input');
+                return this.app.client.click('#inputDisableWebSecurity');
               }
               return true;
             }).
@@ -125,7 +125,7 @@ describe('browser/settings.html', function desc() {
                   });
                 }).
                 loadSettingsPage().
-                isSelected('#inputDisableWebSecurity input').should.eventually.equal(v);
+                isSelected('#inputDisableWebSecurity').should.eventually.equal(v);
             });
         });
       });