From 7047f9b572e583499106240c017ddcfd07ce721c Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 29 Aug 2018 14:34:01 +0200
Subject: [PATCH] Introduce Tabs component for in-app menus (#267)

* Introduce Tabs component for in-app menus

* Change Addresses & Toolbox to Tabs

* Cleanup Tabs (directory -> file)

* Adjust disabled button opacity down
---
 packages/app-accounts/src/Creator.tsx   |  1 +
 packages/app-accounts/src/Editor.tsx    |  1 +
 packages/app-accounts/src/index.tsx     | 39 +++++++-------
 packages/app-addresses/src/Creator.tsx  |  1 +
 packages/app-addresses/src/Editor.tsx   |  1 +
 packages/app-addresses/src/index.tsx    | 38 +++++++------
 packages/app-toolbox/src/index.tsx      | 72 +++++++++----------------
 packages/ui-app/src/Tabs.tsx            | 69 ++++++++++++++++++++++++
 packages/ui-app/src/styles/semantic.css |  2 +-
 9 files changed, 135 insertions(+), 89 deletions(-)
 create mode 100644 packages/ui-app/src/Tabs.tsx

diff --git a/packages/app-accounts/src/Creator.tsx b/packages/app-accounts/src/Creator.tsx
index 533608a1ca..99be3790c2 100644
--- a/packages/app-accounts/src/Creator.tsx
+++ b/packages/app-accounts/src/Creator.tsx
@@ -93,6 +93,7 @@ class Creator extends React.PureComponent<Props, State> {
             defaultValue: 'Reset'
           })}
         />
+        <Button.Or />
         <Button
           isDisabled={!isValid}
           isPrimary
diff --git a/packages/app-accounts/src/Editor.tsx b/packages/app-accounts/src/Editor.tsx
index 5131db5fe7..4f5cb3c92d 100644
--- a/packages/app-accounts/src/Editor.tsx
+++ b/packages/app-accounts/src/Editor.tsx
@@ -71,6 +71,7 @@ class Editor extends React.PureComponent<Props, State> {
             defaultValue: 'Reset'
           })}
         />
+        <Button.Or />
         <Button
           isDisabled={!isEdited}
           isPrimary
diff --git a/packages/app-accounts/src/index.tsx b/packages/app-accounts/src/index.tsx
index 4f8a553585..afb9f71ad9 100644
--- a/packages/app-accounts/src/index.tsx
+++ b/packages/app-accounts/src/index.tsx
@@ -7,8 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import './index.css';
 
 import React from 'react';
-
-import Button from '@polkadot/ui-app/Button';
+import Tabs from '@polkadot/ui-app/Tabs';
 
 import Creator from './Creator';
 import Editor from './Editor';
@@ -37,35 +36,33 @@ class AccountsApp extends React.PureComponent<Props, State> {
     const { t } = this.props;
     const { action } = this.state;
     const Component = Components[action];
+    const items = [
+      {
+        name: 'edit',
+        text: t('app.edit', { defaultValue: 'Edit account' })
+      },
+      {
+        name: 'create',
+        text: t('app.create', { defaultValue: 'Create account' })
+      }
+    ];
 
     return (
       <main className='accounts--App'>
         <header>
-          <Button.Group>
-            <Button
-              isPrimary={action === 'edit'}
-              onClick={this.selectEdit}
-              text={t('app.edit', {
-                defaultValue: 'Edit account'
-              })}
-            />
-            <Button.Or />
-            <Button
-              isPrimary={action === 'create'}
-              onClick={this.selectCreate}
-              text={t('app.create', {
-                defaultValue: 'Create account'
-              })}
-            />
-          </Button.Group>
+          <Tabs
+            activeItem={action}
+            items={items}
+            onChange={this.onMenuChange}
+          />
         </header>
         <Component onBack={this.selectEdit} />
       </main>
     );
   }
 
-  selectCreate = (): void => {
-    this.setState({ action: 'create' });
+  onMenuChange = (action: Actions) => {
+    this.setState({ action });
   }
 
   selectEdit = (): void => {
diff --git a/packages/app-addresses/src/Creator.tsx b/packages/app-addresses/src/Creator.tsx
index d82d521292..36982e8a9b 100644
--- a/packages/app-addresses/src/Creator.tsx
+++ b/packages/app-addresses/src/Creator.tsx
@@ -66,6 +66,7 @@ class Creator extends React.PureComponent<Props, State> {
             defaultValue: 'Reset'
           })}
         />
+        <Button.Or />
         <Button
           isDisabled={!isValid}
           isPrimary
diff --git a/packages/app-addresses/src/Editor.tsx b/packages/app-addresses/src/Editor.tsx
index 38e4724978..27f16c9f42 100644
--- a/packages/app-addresses/src/Editor.tsx
+++ b/packages/app-addresses/src/Editor.tsx
@@ -71,6 +71,7 @@ class Editor extends React.PureComponent<Props, State> {
             defaultValue: 'Reset'
           })}
         />
+        <Button.Or />
         <Button
           isDisabled={!isEdited}
           isPrimary
diff --git a/packages/app-addresses/src/index.tsx b/packages/app-addresses/src/index.tsx
index 38dc861637..4898003d21 100644
--- a/packages/app-addresses/src/index.tsx
+++ b/packages/app-addresses/src/index.tsx
@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import './index.css';
 
 import React from 'react';
-import Button from '@polkadot/ui-app/Button';
+import Tabs from '@polkadot/ui-app/Tabs';
 
 import Creator from './Creator';
 import Editor from './Editor';
@@ -36,35 +36,33 @@ class AddressesApp extends React.PureComponent<Props, State> {
     const { t } = this.props;
     const { action } = this.state;
     const Component = Components[action];
+    const items = [
+      {
+        name: 'edit',
+        text: t('app.edit', { defaultValue: 'Edit address' })
+      },
+      {
+        name: 'create',
+        text: t('app.create', { defaultValue: 'Add address' })
+      }
+    ];
 
     return (
       <main className='addresses--App'>
         <header>
-          <Button.Group>
-            <Button
-              isPrimary={action === 'edit'}
-              onClick={this.selectEdit}
-              text={t('app.edit', {
-                defaultValue: 'Edit address'
-              })}
-            />
-            <Button.Or />
-            <Button
-              isPrimary={action === 'create'}
-              onClick={this.selectCreate}
-              text={t('app.create', {
-                defaultValue: 'Add address'
-              })}
-            />
-          </Button.Group>
+          <Tabs
+            activeItem={action}
+            items={items}
+            onChange={this.onMenuChange}
+          />
         </header>
         <Component onBack={this.selectEdit} />
       </main>
     );
   }
 
-  selectCreate = (): void => {
-    this.setState({ action: 'create' });
+  onMenuChange = (action: Actions) => {
+    this.setState({ action });
   }
 
   selectEdit = (): void => {
diff --git a/packages/app-toolbox/src/index.tsx b/packages/app-toolbox/src/index.tsx
index 2589bcf191..0a8555be9f 100644
--- a/packages/app-toolbox/src/index.tsx
+++ b/packages/app-toolbox/src/index.tsx
@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import './index.css';
 
 import React from 'react';
-import Button from '@polkadot/ui-app/Button';
+import Tabs from '@polkadot/ui-app/Tabs';
 
 import Hash from './Hash';
 import Sign from './Sign';
@@ -37,62 +37,40 @@ class ToolboxApp extends React.PureComponent<Props, State> {
   };
 
   render () {
+    const { t } = this.props;
     const { action } = this.state;
     const Component = Components[action];
+    const items = [
+      {
+        name: 'hash',
+        text: t('app.hash', { defaultValue: 'Hash data' })
+      },
+      {
+        name: 'sign',
+        text: t('app.sign', { defaultValue: 'Sign message' })
+      },
+      {
+        name: 'verify',
+        text: t('app.verify', { defaultValue: 'Verify signature' })
+      }
+    ];
 
     return (
       <main className='toolbox--App'>
-        {this.renderButtons()}
+        <header>
+          <Tabs
+            activeItem={action}
+            items={items}
+            onChange={this.onMenuChange}
+          />
+        </header>
         <Component />
       </main>
     );
   }
 
-  renderButtons () {
-    const { t } = this.props;
-    const { action } = this.state;
-
-    return (
-      <header>
-        <Button.Group>
-          <Button
-            isPrimary={action === 'hash'}
-            onClick={this.selectHash}
-            text={t('app.hash', {
-              defaultValue: 'Hash data'
-            })}
-          />
-          <Button.Or />
-          <Button
-            isPrimary={action === 'sign'}
-            onClick={this.selectSign}
-            text={t('app.sign', {
-              defaultValue: 'Sign message'
-            })}
-          />
-          <Button.Or />
-          <Button
-            isPrimary={action === 'verify'}
-            onClick={this.selectVerify}
-            text={t('app.verify', {
-              defaultValue: 'Verify signature'
-            })}
-          />
-        </Button.Group>
-      </header>
-    );
-  }
-
-  selectHash = (): void => {
-    this.setState({ action: 'hash' });
-  }
-
-  selectSign = (): void => {
-    this.setState({ action: 'sign' });
-  }
-
-  selectVerify = (): void => {
-    this.setState({ action: 'verify' });
+  onMenuChange = (action: Actions) => {
+    this.setState({ action });
   }
 }
 
diff --git a/packages/ui-app/src/Tabs.tsx b/packages/ui-app/src/Tabs.tsx
new file mode 100644
index 0000000000..4b44fe3509
--- /dev/null
+++ b/packages/ui-app/src/Tabs.tsx
@@ -0,0 +1,69 @@
+// Copyright 2017-2018 @polkadot/ui-app authors & contributors
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+
+import { BareProps } from './types';
+
+import React from 'react';
+
+import classes from './util/classes';
+
+type Item = {
+  name: string,
+  text: React.ReactNode
+};
+
+type Props = BareProps & {
+  activeItem: string,
+  items: Array<Item>,
+  onChange: (name: any) => void
+};
+
+type State = {
+  active: string
+};
+
+export default class Tabs extends React.PureComponent<Props, State> {
+  state: State;
+
+  constructor (props: Props) {
+    super(props);
+
+    this.state = {
+      active: props.activeItem
+    };
+  }
+
+  render () {
+    const { className, activeItem, items, style } = this.props;
+    const { active } = this.state;
+    const currentItem = active || activeItem;
+
+    return (
+      <div
+        className={classes('ui--Menu', 'ui menu tabular', className)}
+        style={style}
+      >
+        {items.map(({ name, text }) => (
+          <a
+            className={classes('item', currentItem === name ? 'active' : '')}
+            key={name}
+            onClick={this.onSelect(name)}
+          >
+            {text}
+          </a>
+        ))}
+      </div>
+    );
+  }
+
+  private onSelect = (name: string) => {
+    return (): void => {
+      const { onChange } = this.props;
+
+      this.setState({ active: name }, () => {
+        onChange(name);
+      });
+    };
+  }
+}
diff --git a/packages/ui-app/src/styles/semantic.css b/packages/ui-app/src/styles/semantic.css
index 75aa660bac..8b0d535b75 100644
--- a/packages/ui-app/src/styles/semantic.css
+++ b/packages/ui-app/src/styles/semantic.css
@@ -93,7 +93,7 @@
 .ui.disabled.active.button,
 .ui.disabled.button,
 .ui.disabled.button:hover {
-  opacity: 0.4 !important;
+  opacity: 0.1 !important;
 }
 
 .ui.primary.button,