dropdowns
This commit is contained in:
parent
c1f07c3329
commit
34bdf61cf0
@ -15,13 +15,13 @@
|
|||||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
import React, { PropTypes } from 'react';
|
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';
|
import { nodeOrStringProptype } from '~/util/proptypes';
|
||||||
|
|
||||||
export default function Button ({ active, animated, basic, className, color, disabled, fullWidth, icon, label, onClick, primary, size, toggle }) {
|
export default function Button ({ active, animated, basic, className, color, disabled, fullWidth, icon, label, onClick, primary, size, toggle }) {
|
||||||
return (
|
return (
|
||||||
<SemButton
|
<ButtonUI
|
||||||
active={ active }
|
active={ active }
|
||||||
animated={ animated }
|
animated={ animated }
|
||||||
basic={ basic }
|
basic={ basic }
|
||||||
|
16
js/src/ui/Dropdown/dropdown.css
Normal file
16
js/src/ui/Dropdown/dropdown.css
Normal file
@ -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/>.
|
||||||
|
*/
|
78
js/src/ui/Dropdown/dropdown.js
Normal file
78
js/src/ui/Dropdown/dropdown.js
Normal file
@ -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
|
||||||
|
};
|
18
js/src/ui/Dropdown/index.js
Normal file
18
js/src/ui/Dropdown/index.js
Normal file
@ -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';
|
@ -31,6 +31,7 @@ export CurrencySymbol from './CurrencySymbol';
|
|||||||
export DappCard from './DappCard';
|
export DappCard from './DappCard';
|
||||||
export DappIcon from './DappIcon';
|
export DappIcon from './DappIcon';
|
||||||
export DappLink from './DappLink';
|
export DappLink from './DappLink';
|
||||||
|
export Dropdown from './Dropdown';
|
||||||
export Errors from './Errors';
|
export Errors from './Errors';
|
||||||
export Features, { FEATURES, FeaturesStore } from './Features';
|
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, FileSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput, VaultSelect } from './Form';
|
||||||
|
@ -14,12 +14,11 @@
|
|||||||
// You should have received a copy of the GNU General Public License
|
// You should have received a copy of the GNU General Public License
|
||||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
import { MenuItem } from 'material-ui';
|
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import React, { Component, PropTypes } from 'react';
|
import React, { Component, PropTypes } from 'react';
|
||||||
import { FormattedMessage } from 'react-intl';
|
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 Price from '../Price';
|
||||||
import { WARNING_NO_PRICE } from '../store';
|
import { WARNING_NO_PRICE } from '../store';
|
||||||
@ -41,7 +40,8 @@ export default class OptionsStep extends Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
render () {
|
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) {
|
if (!coins.length) {
|
||||||
return (
|
return (
|
||||||
@ -54,30 +54,26 @@ export default class OptionsStep extends Component {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
coins = coins.map(this.renderCoinSelectItem);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={ styles.body }>
|
<div className={ styles.body }>
|
||||||
<Form>
|
<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 }
|
<FormattedMessage
|
||||||
hint={
|
id='shapeshift.optionsStep.typeSelect.label'
|
||||||
<FormattedMessage
|
defaultMessage='Fund account from'
|
||||||
id='shapeshift.optionsStep.typeSelect.hint'
|
/>
|
||||||
defaultMessage='the type of crypto conversion to do'
|
</div>
|
||||||
/>
|
<Dropdown
|
||||||
}
|
placeholder='Choose a crypto-currency'
|
||||||
label={
|
fluid
|
||||||
<FormattedMessage
|
search
|
||||||
id='shapeshift.optionsStep.typeSelect.label'
|
selection
|
||||||
defaultMessage='fund account from'
|
options={ coins }
|
||||||
/>
|
|
||||||
}
|
|
||||||
onChange={ this.onSelectCoin }
|
onChange={ this.onSelectCoin }
|
||||||
value={ coinSymbol }
|
value={ coinSymbol }
|
||||||
>
|
/>
|
||||||
{
|
|
||||||
coins.map(this.renderCoinSelectItem)
|
|
||||||
}
|
|
||||||
</Select>
|
|
||||||
<Input
|
<Input
|
||||||
hint={
|
hint={
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
@ -119,40 +115,21 @@ export default class OptionsStep extends Component {
|
|||||||
renderCoinSelectItem = (coin) => {
|
renderCoinSelectItem = (coin) => {
|
||||||
const { image, name, symbol } = 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) => {
|
onChangeRefundAddress = (event, refundAddress) => {
|
||||||
this.props.store.setRefundAddress(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 = () => {
|
onToggleAcceptTerms = () => {
|
||||||
|
Loading…
Reference in New Issue
Block a user