refactor overlay into general Modal component

vacuumlabs · Nov 19, 2018 · eaefcf9 · eaefcf9
1 parent 6d795e4
commit eaefcf9
Show file tree

Hide file tree

Showing 11 changed files with 358 additions and 388 deletions.
diff --git a/app/frontend/components/common/addressDetailDialog.js b/app/frontend/components/common/addressDetailDialog.js
@@ -4,8 +4,9 @@ const connect = require('unistore/preact').connect
 const actions = require('../../actions')
 
 const Tooltip = require('./tooltip')
+const Modal = require('./modal')
 const CopyOnClick = require('./copyOnClick')
-const {CloseIcon, LinkIcon} = require('./svg')
+const {LinkIcon} = require('./svg')
 
 class AddressDetailDialogClass extends Component {
   componentDidUpdate() {
@@ -17,107 +18,85 @@ class AddressDetailDialogClass extends Component {
     return (
       showDetail &&
       h(
-        'div',
+        Modal,
         {
-          class: 'overlay',
-          onKeyDown: (e) => e.key === 'Escape' && closeAddressDetail(),
+          closeHandler: closeAddressDetail,
         },
-        !showVerification &&
-          h('div', {
-            class: 'overlay-close-layer',
-            onClick: closeAddressDetail,
-          }),
+        h('b', undefined, 'Address:'),
         h(
           'div',
-          {class: 'box'},
+          {class: 'full-address-row'},
           h(
             'span',
             {
-              class: 'overlay-close-button',
-              onClick: closeAddressDetail,
+              class: 'full-address selectable',
             },
-            h(CloseIcon)
-          ),
-          h(
+            showDetail.address
+          )
+        ),
+        showVerification
+          ? h(
             'div',
             undefined,
-            h('b', undefined, 'Address:'),
+            h('b', undefined, 'Derivation path:'),
             h(
               'div',
               {class: 'full-address-row'},
-              h(
-                'span',
-                {
-                  class: 'full-address selectable',
-                },
-                showDetail.address
-              )
+              h('span', {class: 'full-address'}, showDetail.bip32path)
             ),
-            showVerification
-              ? h(
-                'div',
-                undefined,
-                h('b', undefined, 'Derivation path:'),
-                h(
-                  'div',
-                  {class: 'full-address-row'},
-                  h('span', {class: 'full-address'}, showDetail.bip32path)
-                ),
-                h(
-                  'div',
-                  {class: 'text-center'},
-                  h('button', {onClick: verifyAddress}, 'Verify on Trezor')
-                )
-              )
-              : h(
-                'div',
-                undefined,
-                h(
-                  'div',
-                  {class: 'centered-row'},
-                  h('img', {
-                    src: new QRious({
-                      value: showDetail.address,
-                      level: 'M',
-                      size: 200,
-                    }).toDataURL(),
-                  })
-                ),
+            h(
+              'div',
+              {class: 'text-center'},
+              h('button', {onClick: verifyAddress}, 'Verify on Trezor')
+            )
+          )
+          : h(
+            'div',
+            undefined,
+            h(
+              'div',
+              {class: 'centered-row'},
+              h('img', {
+                src: new QRious({
+                  value: showDetail.address,
+                  level: 'M',
+                  size: 200,
+                }).toDataURL(),
+              })
+            ),
+            h(
+              'div',
+              {class: 'centered-row'},
+              h(CopyOnClick, {
+                value: showDetail.address,
+                tabIndex: 0,
+                copyBtnRef: (element) => {
+                  this.copyBtn = element
+                },
+              }),
+              h(
+                Tooltip,
+                {tooltip: 'Examine via AdaScan.net'},
                 h(
-                  'div',
-                  {class: 'centered-row'},
-                  h(CopyOnClick, {
-                    value: showDetail.address,
+                  'a',
+                  {
+                    href: `https://adascan.net/address/${showDetail.address}`,
+                    target: '_blank',
+                    class: 'address-link margin-1rem centered-row',
                     tabIndex: 0,
-                    copyBtnRef: (element) => {
-                      this.copyBtn = element
+                    onKeyDown: (e) => {
+                      e.key === 'Enter' && e.target.click()
+                      if (e.key === 'Tab') {
+                        this.copyBtn.focus()
+                        e.preventDefault()
+                      }
                     },
-                  }),
-                  h(
-                    Tooltip,
-                    {tooltip: 'Examine via AdaScan.net'},
-                    h(
-                      'a',
-                      {
-                        href: `https://adascan.net/address/${showDetail.address}`,
-                        target: '_blank',
-                        class: 'address-link margin-1rem centered-row',
-                        tabIndex: 0,
-                        onKeyDown: (e) => {
-                          e.key === 'Enter' && e.target.click()
-                          if (e.key === 'Tab') {
-                            this.copyBtn.focus()
-                            e.preventDefault()
-                          }
-                        },
-                      },
-                      h(LinkIcon)
-                    )
-                  )
+                  },
+                  h(LinkIcon)
                 )
               )
+            )
           )
-        )
       )
     )
   }

diff --git a/app/frontend/components/common/modal.js b/app/frontend/components/common/modal.js
@@ -0,0 +1,27 @@
+const {h} = require('preact')
+const {CloseIcon} = require('./svg')
+
+const Modal = ({children, closeHandler, bodyClass = ''}) =>
+  h(
+    'div',
+    {
+      class: 'modal',
+    },
+    h('div', {
+      class: 'modal-overlay',
+      onClick: closeHandler,
+    }),
+    h(
+      'div',
+      {
+        class: `modal-body ${bodyClass}`,
+        onKeyDown: (e) => {
+          e.key === 'Escape' && closeHandler()
+        },
+      },
+      h('span', {class: 'modal-close-button', onClick: closeHandler}, h(CloseIcon)),
+      children
+    )
+  )
+
+module.exports = Modal