From 34bdf61cf067148072c5bb12dfe4915736418a3b Mon Sep 17 00:00:00 2001 From: oconnorct1 Date: Fri, 5 May 2017 03:04:48 -0400 Subject: [PATCH] dropdowns --- js/src/ui/Button/button.js | 4 +- js/src/ui/Dropdown/dropdown.css | 16 ++++ js/src/ui/Dropdown/dropdown.js | 78 +++++++++++++++++++ js/src/ui/Dropdown/index.js | 18 +++++ js/src/ui/index.js | 1 + .../Shapeshift/OptionsStep/optionsStep.js | 77 +++++++----------- 6 files changed, 142 insertions(+), 52 deletions(-) create mode 100644 js/src/ui/Dropdown/dropdown.css create mode 100644 js/src/ui/Dropdown/dropdown.js create mode 100644 js/src/ui/Dropdown/index.js 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 (
- + /> { const { image, name, symbol } = coin; - const item = ( -
- -
-
- { symbol } -
-
- { name } -
-
-
- ); - - return ( - - { item } - - ); + return { + image: image, + value: symbol, + text: name + }; } onChangeRefundAddress = (event, refundAddress) => { this.props.store.setRefundAddress(refundAddress); } - onSelectCoin = (event, index, coinSymbol) => { - this.props.store.setCoinSymbol(coinSymbol); + onSelectCoin = (event, data) => { + const { value } = data; + + this.props.store.setCoinSymbol(value); } onToggleAcceptTerms = () => {