Add SelectionList component to DRY up (#4639)

* Added SelectionList component for selections * Use SelectionList in DappPermisions * AddDapps uses SelectionList * Fix AccountCard to consistent height * Convert Signer defaults to SelectionList * Subtle selection border * Convert VaultAccounts to SelectionList * Add tests for SectionList component * Apply scroll fixes from lates commit in #4621 * Remove unneeded logs * Remove extra div, fixing ParityBar overflow
openethereum · Feb 24, 2017 · a6ed3dc · a6ed3dc
1 parent 5817cfd
commit a6ed3dc
Show file tree

Hide file tree

Showing 17 changed files with 376 additions and 266 deletions.
diff --git a/js/src/modals/AddDapps/addDapps.css b/js/src/modals/AddDapps/addDapps.css
@@ -19,10 +19,6 @@
   flex-direction: column;
 }
 
-.container {
-  overflow-y: auto;
-}
-
 .description {
   margin-top: .5em !important;
 }
@@ -49,26 +45,3 @@
     opacity: 0.75;
   }
 }
-
-.selectIcon {
-  position: absolute;
-  right: 0.5em;
-  top: 0.5em;
-}
-
-.selected,
-.unselected {
-  position: relative;
-}
-
-.unselected {
-  background: rgba(0, 0, 0, 0.4) !important;
-
-  .selectIcon {
-    opacity: 0.15;
-  }
-}
-
-.selected {
-  background: rgba(255, 255, 255, 0.15) !important;
-}
diff --git a/js/src/modals/AddDapps/addDapps.js b/js/src/modals/AddDapps/addDapps.js
@@ -18,8 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { DappCard, Portal, SectionList } from '~/ui';
-import { CheckIcon } from '~/ui/Icons';
+import { DappCard, Portal, SelectionList } from '~/ui';
 
 import styles from './addDapps.css';
 
@@ -48,45 +47,43 @@ export default class AddDapps extends Component {
           />
         }
       >
-        <div className={ styles.container }>
-          <div className={ styles.warning } />
-          {
-            this.renderList(store.sortedLocal, store.displayApps,
-              <FormattedMessage
-                id='dapps.add.local.label'
-                defaultMessage='Applications locally available'
-              />,
-              <FormattedMessage
-                id='dapps.add.local.desc'
-                defaultMessage='All applications installed locally on the machine by the user for access by the Parity client.'
-              />
-            )
-          }
-          {
-            this.renderList(store.sortedBuiltin, store.displayApps,
-              <FormattedMessage
-                id='dapps.add.builtin.label'
-                defaultMessage='Applications bundled with Parity'
-              />,
-              <FormattedMessage
-                id='dapps.add.builtin.desc'
-                defaultMessage='Experimental applications developed by the Parity team to show off dapp capabilities, integration, experimental features and to control certain network-wide client behaviour.'
-              />
-            )
-          }
-          {
-            this.renderList(store.sortedNetwork, store.displayApps,
-              <FormattedMessage
-                id='dapps.add.network.label'
-                defaultMessage='Applications on the global network'
-              />,
-              <FormattedMessage
-                id='dapps.add.network.desc'
-                defaultMessage='These applications are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.'
-              />
-            )
-          }
-        </div>
+        <div className={ styles.warning } />
+        {
+          this.renderList(store.sortedLocal, store.displayApps,
+            <FormattedMessage
+              id='dapps.add.local.label'
+              defaultMessage='Applications locally available'
+            />,
+            <FormattedMessage
+              id='dapps.add.local.desc'
+              defaultMessage='All applications installed locally on the machine by the user for access by the Parity client.'
+            />
+          )
+        }
+        {
+          this.renderList(store.sortedBuiltin, store.displayApps,
+            <FormattedMessage
+              id='dapps.add.builtin.label'
+              defaultMessage='Applications bundled with Parity'
+            />,
+            <FormattedMessage
+              id='dapps.add.builtin.desc'
+              defaultMessage='Experimental applications developed by the Parity team to show off dapp capabilities, integration, experimental features and to control certain network-wide client behaviour.'
+            />
+          )
+        }
+        {
+          this.renderList(store.sortedNetwork, store.displayApps,
+            <FormattedMessage
+              id='dapps.add.network.label'
+              defaultMessage='Applications on the global network'
+            />,
+            <FormattedMessage
+              id='dapps.add.network.desc'
+              defaultMessage='These applications are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.'
+            />
+          )
+        }
       </Portal>
     );
   }
@@ -102,40 +99,39 @@ export default class AddDapps extends Component {
           <div className={ styles.header }>{ header }</div>
           <div className={ styles.byline }>{ byline }</div>
         </div>
-        <SectionList
+        <SelectionList
+          isChecked={ this.isVisible }
           items={ items }
           noStretch
+          onSelectClick={ this.onSelect }
           renderItem={ this.renderApp }
         />
       </div>
     );
   }
 
   renderApp = (app) => {
-    const { store } = this.props;
-    const isVisible = store.displayApps[app.id].visible;
-
-    const onClick = () => {
-      if (isVisible) {
-        store.hideApp(app.id);
-      } else {
-        store.showApp(app.id);
-      }
-    };
-
     return (
       <DappCard
         app={ app }
-        className={
-          isVisible
-            ? styles.selected
-            : styles.unselected
-        }
         key={ app.id }
-        onClick={ onClick }
-      >
-        <CheckIcon className={ styles.selectIcon } />
-      </DappCard>
+      />
     );
   }
+
+  isVisible = (app) => {
+    const { store } = this.props;
+
+    return store.displayApps[app.id].visible;
+  }
+
+  onSelect = (app) => {
+    const { store } = this.props;
+
+    if (this.isVisible(app)) {
+      store.hideApp(app.id);
+    } else {
+      store.showApp(app.id);
+    }
+  }
 }
diff --git a/js/src/modals/DappPermissions/dappPermissions.css b/js/src/modals/DappPermissions/dappPermissions.css
@@ -15,51 +15,6 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-.container {
-  overflow-y: auto;
-}
-
-.item {
-  display: flex;
-  flex: 1;
-  position: relative;
-
-  .overlay {
-    position: absolute;
-    right: 0.5em;
-    top: 0.5em;
-  }
-}
-
-.selected,
-.unselected {
-  margin-bottom: 0.25em;
-  width: 100%;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.unselected {
-  background: rgba(0, 0, 0, 0.4) !important;
-}
-
-.selected {
-  background: rgba(255, 255, 255, 0.15) !important;
-
-  &.default {
-    background: rgba(255, 255, 255, 0.35) !important;
-  }
-}
-
-.unselected {
-}
-
-.iconDisabled {
-  opacity: 0.15;
-}
-
 .legend {
   opacity: 0.75;
 

diff --git a/js/src/modals/DappPermissions/dappPermissions.js b/js/src/modals/DappPermissions/dappPermissions.js
@@ -19,8 +19,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { AccountCard, Portal, SectionList } from '~/ui';
-import { CheckIcon, StarIcon, StarOutlineIcon } from '~/ui/Icons';
+import { AccountCard, Portal, SelectionList } from '~/ui';
+import { CheckIcon, StarIcon } from '~/ui/Icons';
 
 import styles from './dappPermissions.css';
 
@@ -61,60 +61,34 @@ class DappPermissions extends Component {
           />
         }
       >
-        <div className={ styles.container }>
-          <SectionList
-            items={ permissionStore.accounts }
-            noStretch
-            renderItem={ this.renderAccount }
-          />
-        </div>
+        <SelectionList
+          items={ permissionStore.accounts }
+          noStretch
+          onDefaultClick={ this.onMakeDefault }
+          onSelectClick={ this.onSelect }
+          renderItem={ this.renderAccount }
+        />
       </Portal>
     );
   }
 
-  renderAccount = (account) => {
-    const { balances, permissionStore } = this.props;
-    const balance = balances[account.address];
-
-    const onMakeDefault = () => {
-      permissionStore.setDefaultAccount(account.address);
-    };
-
-    const onSelect = () => {
-      permissionStore.selectAccount(account.address);
-    };
+  onMakeDefault = (account) => {
+    this.props.permissionStore.setDefaultAccount(account.address);
+  }
 
-    let className;
+  onSelect = (account) => {
+    this.props.permissionStore.selectAccount(account.address);
+  }
 
-    if (account.checked) {
-      className = account.default
-        ? `${styles.selected} ${styles.default}`
-        : styles.selected;
-    } else {
-      className = styles.unselected;
-    }
+  renderAccount = (account) => {
+    const { balances } = this.props;
+    const balance = balances[account.address];
 
     return (
-      <div className={ styles.item }>
-        <AccountCard
-          account={ account }
-          balance={ balance }
-          className={ className }
-          onClick={ onSelect }
-        />
-        <div className={ styles.overlay }>
-          {
-            account.checked && account.default
-              ? <StarIcon />
-              : <StarOutlineIcon className={ styles.iconDisabled } onClick={ onMakeDefault } />
-          }
-          {
-            account.checked
-              ? <CheckIcon onClick={ onSelect } />
-              : <CheckIcon className={ styles.iconDisabled } onClick={ onSelect } />
-          }
-        </div>
-      </div>
+      <AccountCard
+        account={ account }
+        balance={ balance }
+      />
     );
   }
 }