dropdowns

js/src/ui/Button/button.js

@@ -15,13 +15,13 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { PropTypes } from 'react';
-import { Button as SemButton } from 'semantic-ui-react';
+import { Button as ButtonUI } from 'semantic-ui-react';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
 
 export default function Button ({ active, animated, basic, className, color, disabled, fullWidth, icon, label, onClick, primary, size, toggle }) {
   return (
-    <SemButton
+    <ButtonUI
       active={ active }
       animated={ animated }
       basic={ basic }

js/src/ui/Dropdown/dropdown.css

@@ -0,0 +1,16 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/

js/src/ui/Dropdown/dropdown.js

@@ -0,0 +1,78 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+/** USAGE:
+  Options = [
+    {
+      text: 'Jenny Hess',
+      value: 'Jenny Hess',
+      image: { avatar: true, src: '/assets/images/avatar/small/jenny.jpg' },
+    },
+   ...
+  ]
+
+  <Dropdown placeholder='Select Friend' fluid selection options={Options} />
+**/
+
+import React, { PropTypes } from 'react';
+import { Dropdown as DropdownUI } from 'semantic-ui-react';
+
+export default function Dropdown ({ defaultValue, disabled, fluid, icon, name, onChange, onClick, onClose, onFocus, options, placeholder, scrolling, search, selection, text, value }) {
+  return (
+    <DropdownUI
+      defaultValue={ defaultValue }
+      disabled={ disabled }
+      fluid={ fluid }
+      icon={ icon }
+      name={ name }
+      onChange={ onChange }
+      onClick={ onClick }
+      onClose={ onClose }
+      onFocus={ onFocus }
+      options={ options }
+      placeholder={ placeholder }
+      scrolling={ scrolling }
+      search={ search }
+      selection={ selection }
+      text={ text }
+      value={ value }
+    />
+  );
+}
+
+Dropdown.propTypes = {
+  defaultValue: PropTypes.number,    // Initial value via index
+  disabled: PropTypes.bool,          // A disabled dropdown menu or item does not allow user interaction.
+  fluid: PropTypes.bool,             // A dropdown can take the full width of its parent
+  icon: PropTypes.any,               // Shorthand for Icon.
+  name: PropTypes.func,              // Name of the hidden input which holds the value.
+  onChange: PropTypes.func,          // Called when the user attempts to change the value.
+  onClick: PropTypes.func,           // Called on click.
+  onClose: PropTypes.func,           // Called on close.
+  onFocus: PropTypes.func,           // Called on focus.
+  options: PropTypes.any,            // Array of Dropdown.Item props e.g. `{ text: '', value: '' }`
+  placeholder: PropTypes.string,     // Placeholder text.
+  scrolling: PropTypes.bool,         // A dropdown can have its menu scroll.
+  search: PropTypes.bool,            // A selection dropdown can allow a user to search through a large list of choices.
+  selection: PropTypes.any,          // A dropdown can be used to select between choices in a form.
+  text: PropTypes.string,            // The text displayed in the dropdown, usually for the active item.
+  value: PropTypes.any               // Current value. Creates a controlled component.
+};
+
+Dropdown.defaultProps = {
+  disabled: false
+};

js/src/ui/Dropdown/index.js

@@ -0,0 +1,18 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+export default from './dropdown';

js/src/ui/index.js

@@ -31,6 +31,7 @@ export CurrencySymbol from './CurrencySymbol';
 export DappCard from './DappCard';
 export DappIcon from './DappIcon';
 export DappLink from './DappLink';
+export Dropdown from './Dropdown';
 export Errors from './Errors';
 export Features, { FEATURES, FeaturesStore } from './Features';
 export Form, { AddressSelect, Checkbox, DappUrlInput, FileSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput, VaultSelect } from './Form';

js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js

@@ -14,12 +14,11 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { MenuItem } from 'material-ui';
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Checkbox, Form, Input, Select, Warning } from '~/ui';
+import { Checkbox, Dropdown, Form, Input, Warning } from '~/ui';
 
 import Price from '../Price';
 import { WARNING_NO_PRICE } from '../store';
@@ -41,7 +40,8 @@ export default class OptionsStep extends Component {
   };
 
   render () {
-    const { coinSymbol, coins, hasAcceptedTerms, price, refundAddress, warning } = this.props.store;
+    const { coinSymbol, hasAcceptedTerms, price, refundAddress, warning } = this.props.store;
+    let { coins } = this.props.store;
 
     if (!coins.length) {
       return (
@@ -54,30 +54,26 @@ export default class OptionsStep extends Component {
       );
     }
 
+    coins = coins.map(this.renderCoinSelectItem);
+
     return (
       <div className={ styles.body }>
         <Form>
-          <Select
+          <div style={ { display: 'block', height: '22px', fontSize: '16px', position: 'relative', lineHeight: '22px', top: '38px', pointerEvents: 'none', userSelect: 'none', color: 'rgba(0, 0, 0, 0.298039)' } }>
-            className={ styles.coinselector }
-            hint={
-              <FormattedMessage
-                id='shapeshift.optionsStep.typeSelect.hint'
-                defaultMessage='the type of crypto conversion to do'
-              />
-            }
-            label={
             <FormattedMessage
               id='shapeshift.optionsStep.typeSelect.label'
-                defaultMessage='fund account from'
+              defaultMessage='Fund account from'
             />
-            }
+          </div>
+          <Dropdown
+            placeholder='Choose a crypto-currency'
+            fluid
+            search
+            selection
+            options={ coins }
             onChange={ this.onSelectCoin }
             value={ coinSymbol }
-          >
+          />
-            {
-              coins.map(this.renderCoinSelectItem)
-            }
-          </Select>
           <Input
             hint={
               <FormattedMessage
@@ -119,40 +115,21 @@ export default class OptionsStep extends Component {
   renderCoinSelectItem = (coin) => {
     const { image, name, symbol } = coin;
 
-    const item = (
+    return {
-      <div className={ styles.coinselect }>
+      image: image,
-        <img
+      value: symbol,
-          className={ styles.coinimage }
+      text: name
-          src={ image }
+    };
-        />
-        <div className={ styles.coindetails }>
-          <div className={ styles.coinsymbol }>
-            { symbol }
-          </div>
-          <div className={ styles.coinname }>
-            { name }
-          </div>
-        </div>
-      </div>
-    );
-
-    return (
-      <MenuItem
-        key={ symbol }
-        value={ symbol }
-        label={ item }
-      >
-        { item }
-      </MenuItem>
-    );
   }
 
   onChangeRefundAddress = (event, refundAddress) => {
     this.props.store.setRefundAddress(refundAddress);
   }
 
-  onSelectCoin = (event, index, coinSymbol) => {
+  onSelectCoin = (event, data) => {
-    this.props.store.setCoinSymbol(coinSymbol);
+    const { value } = data;
+
+    this.props.store.setCoinSymbol(value);
   }
 
   onToggleAcceptTerms = () => {