diff --git a/js/src/ui/Button/button.js b/js/src/ui/Button/button.js
index a05e1e0e1..86bb1c96c 100644
--- a/js/src/ui/Button/button.js
+++ b/js/src/ui/Button/button.js
@@ -15,13 +15,13 @@
// along with Parity. If not, see .
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 (
- .
+*/
diff --git a/js/src/ui/Dropdown/dropdown.js b/js/src/ui/Dropdown/dropdown.js
new file mode 100644
index 000000000..0a3b0f314
--- /dev/null
+++ b/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 .
+*/
+
+/** USAGE:
+ Options = [
+ {
+ text: 'Jenny Hess',
+ value: 'Jenny Hess',
+ image: { avatar: true, src: '/assets/images/avatar/small/jenny.jpg' },
+ },
+ ...
+ ]
+
+
+**/
+
+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 (
+
+ );
+}
+
+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
+};
diff --git a/js/src/ui/Dropdown/index.js b/js/src/ui/Dropdown/index.js
new file mode 100644
index 000000000..6673f32ef
--- /dev/null
+++ b/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 .
+*/
+
+export default from './dropdown';
diff --git a/js/src/ui/index.js b/js/src/ui/index.js
index 6479e04a6..0443c6c88 100644
--- a/js/src/ui/index.js
+++ b/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';
diff --git a/js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js b/js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js
index e09373e12..eeb569a76 100644
--- a/js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js
+++ b/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 .
-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 (