Merge pull request #5559 from paritytech/menu

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 SemanticButton } from 'semantic-ui-react';
 
 import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
 
 export default function Button ({ active, animated, basic, className, color, disabled, fullWidth, icon, label, onClick, primary, size, toggle }) {
   return (
-    <SemButton
+    <SemanticButton
       active={ active }
       animated={ animated }
       basic={ basic }

js/src/ui/Container/container.js

@@ -16,7 +16,6 @@
 
 import React, { Component, PropTypes } from 'react';
 import { Link } from 'react-router';
-import { Card } from 'material-ui/Card';
 
 import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
 
@@ -50,7 +49,7 @@ export default class Container extends Component {
     }
 
     const card = (
-      <Card
+      <div
         className={
           compact
             ? styles.compact
@@ -61,7 +60,7 @@ export default class Container extends Component {
       >
         { this.renderTitle() }
         { children }
-      </Card>
+      </div>
     );
 
     return (
@@ -126,9 +125,9 @@ export default class Container extends Component {
     }
 
     return (
-      <Card className={ styles.hoverOverlay }>
+      <div className={ styles.hoverOverlay }>
         { hover }
-      </Card>
+      </div>
     );
   }
 

js/src/ui/Container/container.spec.js

@@ -35,24 +35,4 @@ describe('ui/Container', () => {
       expect(render({ className: 'testClass' })).to.have.className('testClass');
     });
   });
-
-  describe('sections', () => {
-    it('renders the default Card', () => {
-      expect(render().find('Card')).to.have.length(1);
-    });
-
-    it('renders Hover Card when available', () => {
-      const cards = render({ hover: <div>testingHover</div> }).find('Card');
-
-      expect(cards).to.have.length(2);
-      expect(cards.get(1).props.children.props.children).to.equal('testingHover');
-    });
-
-    it('renders the Title', () => {
-      const title = render({ title: 'title' }).find('Title');
-
-      expect(title).to.have.length(1);
-      expect(title.props().title).to.equal('title');
-    });
-  });
 });

js/src/ui/Form/Dropdown/dropdown.css

@@ -0,0 +1,21 @@
+/* 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/>.
+*/
+
+.dropdown {
+  position: relative;
+  display: block;
+}

js/src/ui/Form/Dropdown/dropdown.js

@@ -0,0 +1,54 @@
+// 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/>.
+
+import React, { PropTypes } from 'react';
+import { Dropdown as SemanticDropdown } from 'semantic-ui-react';
+
+import LabelComponent from '../labelComponent';
+
+import styles from './dropdown.css';
+
+// FIXME: Currently does not display the selected icon alongside
+export default function Dropdown ({ className, disabled = false, fullWidth = true, hint, label, onChange, options, value }) {
+  return (
+    <LabelComponent label={ label }>
+      <SemanticDropdown
+        className={ `${styles.dropdown} ${className}` }
+        disabled={ disabled }
+        fluid={ fullWidth }
+        onChange={ onChange }
+        options={ options }
+        placeholder={ hint }
+        scrolling
+        search
+        selection
+        value={ value }
+      />
+    </LabelComponent>
+  );
+}
+
+Dropdown.propTypes = {
+  className: PropTypes.string,
+  disabled: PropTypes.bool,          // A disabled dropdown menu or item does not allow user interaction.
+  fullWidth: PropTypes.bool,         // A dropdown can take the full width of its parent.
+  hint: PropTypes.string,            // Placeholder text.
+  label: PropTypes.node,
+  name: PropTypes.func,              // Name of the hidden input which holds the value.
+  onChange: PropTypes.func,          // Called when the user attempts to change the value.
+  options: PropTypes.any,            // Array of Dropdown.Item props e.g. `{ text: '', value: '' }`
+  value: PropTypes.any               // Current value. Creates a controlled component.
+};

js/src/ui/Form/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/Form/LabelComponent/index.js

@@ -0,0 +1,17 @@
+// 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 './labelComponent';

js/src/ui/Form/LabelComponent/labelComponent.css

@@ -0,0 +1,24 @@
+/* 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/>.
+*/
+
+.container {
+  .label {
+    color: rgba(0, 0, 0, 0.3);
+    pointer-events: none;
+    user-select: none;
+  }
+}

js/src/ui/Form/LabelComponent/labelComponent.js

@@ -0,0 +1,44 @@
+// 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/>.
+
+import React, { PropTypes } from 'react';
+
+import styles from './labelComponent.css';
+
+export default function LabelComponent ({ children, label }) {
+  return (
+    <div className={ styles.container }>
+      {
+        label
+          ? (
+            <label
+              className={ styles.label }
+              htmlFor=''
+            >
+              { label }
+            </label>
+          )
+          : null
+      }
+      { children }
+    </div>
+  );
+}
+
+LabelComponent.propTypes = {
+  label: PropTypes.node,
+  children: PropTypes.node.isRequired
+};

js/src/ui/Form/form.css

@@ -15,7 +15,6 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .form {
-  margin-top: -1em;
   width: 100%;
 }
 

js/src/ui/Form/index.js

@@ -17,6 +17,7 @@
 export AddressSelect from './AddressSelect';
 export Checkbox from './Checkbox';
 export DappUrlInput from './DappUrlInput';
+export Dropdown from './Dropdown';
 export FileSelect from './FileSelect';
 export FormWrap from './FormWrap';
 export Input from './Input';

js/src/ui/index.js

@@ -33,7 +33,7 @@ export DappIcon from './DappIcon';
 export DappLink from './DappLink';
 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';
+export Form, { AddressSelect, Checkbox, DappUrlInput, Dropdown, FileSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput, VaultSelect } from './Form';
 export GasPriceEditor from './GasPriceEditor';
 export GasPriceSelector from './GasPriceSelector';
 export IconCache from './IconCache';

js/src/views/Account/Shapeshift/AwaitingDepositStep/awaitingDepositStep.spec.js

@@ -38,7 +38,7 @@ function render () {
   return component;
 }
 
-describe('modals/Shapeshift/AwaitingDepositStep', () => {
+describe('views/Account/Shapeshift/AwaitingDepositStep', () => {
   it('renders defaults', () => {
     expect(render()).to.be.ok;
   });

js/src/views/Account/Shapeshift/AwaitingExchangeStep/awaitingExchangeStep.spec.js

@@ -33,7 +33,7 @@ function render () {
   return component;
 }
 
-describe('modals/Shapeshift/AwaitingExchangeStep', () => {
+describe('views/Account/Shapeshift/AwaitingExchangeStep', () => {
   it('renders defaults', () => {
     expect(render()).to.be.ok;
   });

js/src/views/Account/Shapeshift/CompletedStep/completedStep.spec.js

@@ -34,7 +34,7 @@ function render () {
   return component;
 }
 
-describe('modals/Shapeshift/CompletedStep', () => {
+describe('views/Account/Shapeshift/CompletedStep', () => {
   it('renders defaults', () => {
     expect(render()).to.be.ok;
   });

js/src/views/Account/Shapeshift/ErrorStep/errorStep.spec.js

@@ -33,7 +33,7 @@ function render () {
   return component;
 }
 
-describe('modals/Shapeshift/ErrorStep', () => {
+describe('views/Account/Shapeshift/ErrorStep', () => {
   it('renders defaults', () => {
     expect(render()).to.be.ok;
   });

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,10 +54,12 @@ export default class OptionsStep extends Component {
       );
     }
 
+    coins = coins.map(this.renderCoinSelectItem);
+
     return (
       <div className={ styles.body }>
         <Form>
-          <Select
+          <Dropdown
             className={ styles.coinselector }
             hint={
               <FormattedMessage
@@ -71,13 +73,10 @@ export default class OptionsStep extends Component {
                 defaultMessage='fund account from'
               />
             }
+            options={ coins }
             onChange={ this.onSelectCoin }
             value={ coinSymbol }
-          >
+          />
-            {
-              coins.map(this.renderCoinSelectItem)
-            }
-          </Select>
           <Input
             hint={
               <FormattedMessage
@@ -119,40 +118,21 @@ export default class OptionsStep extends Component {
   renderCoinSelectItem = (coin) => {
     const { image, name, symbol } = coin;
 
-    const item = (
+    return {
-      <div className={ styles.coinselect }>
+      image,
-        <img
+      text: name,
-          className={ styles.coinimage }
+      value: symbol
-          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 = () => {

js/src/views/Account/Shapeshift/OptionsStep/optionsSteps.spec.js

@@ -38,7 +38,7 @@ function render () {
   return component;
 }
 
-describe('modals/Shapeshift/OptionsStep', () => {
+describe('views/Account/Shapeshift/OptionsStep', () => {
   beforeEach(() => {
     render();
   });
@@ -103,7 +103,7 @@ describe('modals/Shapeshift/OptionsStep', () => {
       });
 
       it('sets the coinSymbol on the store', () => {
-        instance.onSelectCoin(null, 0, 'XMR');
+        instance.onSelectCoin(null, { value: 'XMR' });
         expect(store.setCoinSymbol).to.have.been.calledWith('XMR');
       });
     });

js/src/views/Account/Shapeshift/Price/price.spec.js

@@ -34,7 +34,7 @@ function render (props = {}) {
   return component;
 }
 
-describe('modals/Shapeshift/Price', () => {
+describe('views/Account/Shapeshift/Price', () => {
   it('renders defaults', () => {
     expect(render()).to.be.ok;
   });

js/src/views/Account/Shapeshift/Value/value.spec.js

@@ -29,7 +29,7 @@ function render (props = {}) {
   return component;
 }
 
-describe('modals/Shapeshift/Value', () => {
+describe('views/Account/Shapeshift/Value', () => {
   it('renders defaults', () => {
     expect(render()).to.be.ok;
   });

js/src/views/Account/Shapeshift/shapeshift.spec.js

@@ -42,7 +42,7 @@ function render (props = {}) {
   return component;
 }
 
-describe('modals/Shapeshift', () => {
+describe('views/Account/Shapeshift', () => {
   it('renders defaults', () => {
     expect(render()).to.be.ok;
   });