interface: refactor toggle into common component

pkg/interface/src/apps/chat/components/settings.js

@@ -6,6 +6,7 @@ import { Spinner } from '../../../components/Spinner';
 import { ChatTabBar } from './lib/chat-tabbar';
 import { InviteSearch } from '../../../components/InviteSearch';
 import SidebarSwitcher from '../../../components/SidebarSwitch';
+import Toggle from '../../../components/toggle';
 
 export class SettingsScreen extends Component {
   constructor(props) {
@@ -195,18 +196,12 @@ export class SettingsScreen extends Component {
     } else {
       let inclusiveToggle = <div />;
       if (state.targetGroup) {
-        // TODO toggle component into /lib
-        const inclusiveClasses = state.inclusive
-          ? 'relative checked bg-green2 br3 h1 toggle v-mid z-0'
-          : 'relative bg-gray4 bg-gray1-d br3 h1 toggle v-mid z-0';
         inclusiveToggle = (
           <div className="mt4">
-            <input
-              type="checkbox"
-              style={{ WebkitAppearance: 'none', width: 28 }}
-              className={inclusiveClasses}
-              onChange={this.changeInclusive}
-            />
+          <Toggle
+            boolean={state.inclusive}
+            change={this.changeInclusive}
+          />
             <span className="dib f9 white-d inter ml3">
               Add all members to group
             </span>

pkg/interface/src/apps/groups/components/new.tsx

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import { InviteSearch, Invites } from '../../../components/InviteSearch';
 import { Spinner } from '../../../components/Spinner';
+import { Toggle } from '../../../components/toggle';
 import { RouteComponentProps } from 'react-router-dom';
 import { Groups, GroupPolicy, Resource } from '../../../types/group-update';
 import { Contacts, Rolodex } from '../../../types/contact-update';
@@ -129,9 +130,6 @@ export class NewScreen extends Component<NewScreenProps, NewScreenState> {
         </span>
       );
     }
-    const privacySwitchClasses = this.state.privacy
-      ? 'relative checked bg-green2 br3 h1 toggle v-mid z-0'
-      : 'relative bg-gray4 bg-gray1-d br3 h1 toggle v-mid z-0';
 
     return (
       <div className='h-100 w-100 mw6 pa3 pt4 overflow-x-hidden bg-gray0-d white-d flex flex-column'>
@@ -174,11 +172,9 @@ export class NewScreen extends Component<NewScreenProps, NewScreenState> {
             onChange={this.descriptionChange}
           />
           <div className='mv7'>
-            <input
-              type='checkbox'
-              style={{ WebkitAppearance: 'none', width: 28 }}
-              onChange={this.groupPrivacyChange}
-              className={privacySwitchClasses}
+            <Toggle
+            boolean={this.state.privacy}
+            change={this.groupPrivacyChange}
             />
             <span className='dib f9 white-d inter ml3'>Private Group</span>
             <p className='f9 gray2 pt1' style={{ paddingLeft: 40 }}>

pkg/interface/src/apps/publish/components/lib/settings.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import { writeText } from '../../../../lib/util';
 import { Spinner } from '../../../../components/Spinner';
 import { InviteSearch } from '../../../../components/InviteSearch';
+import Toggle from '../../../../components/toggle';
 
 export class Settings extends Component {
   constructor(props) {
@@ -137,18 +137,12 @@ export class Settings extends Component {
         : false;
       let inclusiveToggle = <div />;
       if (targetOwned) {
-        // TODO toggle component into /lib
-        const inclusiveClasses = state.inclusive
-          ? 'relative checked bg-green2 br3 h1 toggle v-mid z-0'
-          : 'relative bg-gray4 bg-gray1-d br3 h1 toggle v-mid z-0';
         inclusiveToggle = (
           <div className="mt4">
-            <input
-              type="checkbox"
-              style={{ WebkitAppearance: 'none', width: 28 }}
-              className={inclusiveClasses}
-              onChange={this.changeInclusive}
-            />
+          <Toggle
+            boolean={state.inclusive}
+            change={this.changeInclusive}
+          />
             <span className="dib f9 white-d inter ml3">
               Add all members to group
             </span>
@@ -201,10 +195,6 @@ export class Settings extends Component {
   }
 
   render() {
-    const commentsSwitchClasses = (this.state.comments)
-      ? 'relative checked bg-green2 br3 h1 toggle v-mid z-0'
-      : 'relative bg-gray4 bg-gray1-d br3 h1 toggle v-mid z-0';
-
     if (this.props.host.slice(1) === window.ship) {
       return (
         <div className="flex-column">
@@ -274,11 +264,9 @@ export class Settings extends Component {
             />
           </div>
           <div className="mv6">
-            <input
-              type="checkbox"
-              style={{ WebkitAppearance: 'none', width: 28 }}
-              className={commentsSwitchClasses}
-              onChange={this.changeComments}
+            <Toggle
+              boolean={this.state.comments}
+              change={this.changeComments}
             />
             <span className="dib f9 white-d inter ml3">Comments</span>
             <p className="f9 gray2 pt1" style={{ paddingLeft: 40 }}>
@@ -293,7 +281,7 @@ export class Settings extends Component {
         </div>
       );
     } else {
-      return copyShortcode;
+      return '';
     }
   }
 }

pkg/interface/src/components/toggle.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+export class Toggle extends Component {
+  render() {
+    const switchClasses = (this.props.boolean)
+      ? 'relative checked bg-green2 br3 h1 toggle v-mid z-0'
+      : 'relative bg-gray4 bg-gray1-d br3 h1 toggle v-mid z-0';
+
+    return (
+      <input
+        type="checkbox"
+        style={{ WebkitAppearance: 'none', width: 28 }}
+        className={switchClasses}
+        onChange={this.props.change}
+      />
+    );
+  }
+}
+
+export default Toggle;