diff --git a/js/src/ui/Button/button.js b/js/src/ui/Button/button.js index 9f903dacf..0e0219a50 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 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 ( - { this.renderTitle() } { children } - + ); return ( @@ -126,9 +125,9 @@ export default class Container extends Component { } return ( - +
{ hover } - +
); } diff --git a/js/src/ui/Container/container.spec.js b/js/src/ui/Container/container.spec.js index 78b625e39..1fff66549 100644 --- a/js/src/ui/Container/container.spec.js +++ b/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:
testingHover
}).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'); - }); - }); }); diff --git a/js/src/ui/Form/Dropdown/dropdown.css b/js/src/ui/Form/Dropdown/dropdown.css new file mode 100644 index 000000000..07f3e3df9 --- /dev/null +++ b/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 . +*/ + +.dropdown { + position: relative; + display: block; +} diff --git a/js/src/ui/Form/Dropdown/dropdown.js b/js/src/ui/Form/Dropdown/dropdown.js new file mode 100644 index 000000000..be3710bd7 --- /dev/null +++ b/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 . + +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 ( + + + + ); +} + +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. +}; diff --git a/js/src/ui/Form/Dropdown/index.js b/js/src/ui/Form/Dropdown/index.js new file mode 100644 index 000000000..6673f32ef --- /dev/null +++ b/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 . +*/ + +export default from './dropdown'; diff --git a/js/src/ui/Form/LabelComponent/index.js b/js/src/ui/Form/LabelComponent/index.js new file mode 100644 index 000000000..df586f3e8 --- /dev/null +++ b/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 . + +export default from './labelComponent'; diff --git a/js/src/ui/Form/LabelComponent/labelComponent.css b/js/src/ui/Form/LabelComponent/labelComponent.css new file mode 100644 index 000000000..b10a55213 --- /dev/null +++ b/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 . +*/ + +.container { + .label { + color: rgba(0, 0, 0, 0.3); + pointer-events: none; + user-select: none; + } +} diff --git a/js/src/ui/Form/LabelComponent/labelComponent.js b/js/src/ui/Form/LabelComponent/labelComponent.js new file mode 100644 index 000000000..47dca7e80 --- /dev/null +++ b/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 . + +import React, { PropTypes } from 'react'; + +import styles from './labelComponent.css'; + +export default function LabelComponent ({ children, label }) { + return ( +
+ { + label + ? ( + + ) + : null + } + { children } +
+ ); +} + +LabelComponent.propTypes = { + label: PropTypes.node, + children: PropTypes.node.isRequired +}; diff --git a/js/src/ui/Form/form.css b/js/src/ui/Form/form.css index ff9ff9e84..16b4e0137 100644 --- a/js/src/ui/Form/form.css +++ b/js/src/ui/Form/form.css @@ -15,7 +15,6 @@ /* along with Parity. If not, see . */ .form { - margin-top: -1em; width: 100%; } diff --git a/js/src/ui/Form/index.js b/js/src/ui/Form/index.js index 32d824aab..0a6995104 100644 --- a/js/src/ui/Form/index.js +++ b/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'; diff --git a/js/src/ui/index.js b/js/src/ui/index.js index 6479e04a6..bd5f29bb7 100644 --- a/js/src/ui/index.js +++ b/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'; diff --git a/js/src/views/Account/Shapeshift/AwaitingDepositStep/awaitingDepositStep.spec.js b/js/src/views/Account/Shapeshift/AwaitingDepositStep/awaitingDepositStep.spec.js index 2e8cedf28..58fc41664 100644 --- a/js/src/views/Account/Shapeshift/AwaitingDepositStep/awaitingDepositStep.spec.js +++ b/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; }); diff --git a/js/src/views/Account/Shapeshift/AwaitingExchangeStep/awaitingExchangeStep.spec.js b/js/src/views/Account/Shapeshift/AwaitingExchangeStep/awaitingExchangeStep.spec.js index 0433bfb56..253660e46 100644 --- a/js/src/views/Account/Shapeshift/AwaitingExchangeStep/awaitingExchangeStep.spec.js +++ b/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; }); diff --git a/js/src/views/Account/Shapeshift/CompletedStep/completedStep.spec.js b/js/src/views/Account/Shapeshift/CompletedStep/completedStep.spec.js index 4a51c7561..51b553a8e 100644 --- a/js/src/views/Account/Shapeshift/CompletedStep/completedStep.spec.js +++ b/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; }); diff --git a/js/src/views/Account/Shapeshift/ErrorStep/errorStep.spec.js b/js/src/views/Account/Shapeshift/ErrorStep/errorStep.spec.js index 92086a1eb..515eaf1a0 100644 --- a/js/src/views/Account/Shapeshift/ErrorStep/errorStep.spec.js +++ b/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; }); diff --git a/js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js b/js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js index e09373e12..81514d69a 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,10 +54,12 @@ 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, + text: name, + value: symbol + }; } 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 = () => { diff --git a/js/src/views/Account/Shapeshift/OptionsStep/optionsSteps.spec.js b/js/src/views/Account/Shapeshift/OptionsStep/optionsSteps.spec.js index e0a71752e..d4d158d54 100644 --- a/js/src/views/Account/Shapeshift/OptionsStep/optionsSteps.spec.js +++ b/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'); }); }); diff --git a/js/src/views/Account/Shapeshift/Price/price.spec.js b/js/src/views/Account/Shapeshift/Price/price.spec.js index 4c815b652..98ffa351f 100644 --- a/js/src/views/Account/Shapeshift/Price/price.spec.js +++ b/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; }); diff --git a/js/src/views/Account/Shapeshift/Value/value.spec.js b/js/src/views/Account/Shapeshift/Value/value.spec.js index f4b1f646e..950dc3fb8 100644 --- a/js/src/views/Account/Shapeshift/Value/value.spec.js +++ b/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; }); diff --git a/js/src/views/Account/Shapeshift/shapeshift.spec.js b/js/src/views/Account/Shapeshift/shapeshift.spec.js index b591de390..e539f889e 100644 --- a/js/src/views/Account/Shapeshift/shapeshift.spec.js +++ b/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; });