grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

dropdowns

Browse Source
This commit is contained in:
oconnorct1 2017-05-05 03:04:48 -04:00
parent c1f07c3329
commit 34bdf61cf0
6 changed files with 142 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/src/ui/Button/button.js
View File

@ -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 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 (
<SemButton
<ButtonUI
active={ active }
animated={ animated }
basic={ basic }

16
js/src/ui/Dropdown/dropdown.css Normal file
View 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
View 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
View 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';

1
js/src/ui/index.js
View File

@ -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';

77
js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js
View File

@ -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,30 +54,26 @@ export default class OptionsStep extends Component {
);
}
coins = coins.map(this.renderCoinSelectItem);
return (
<div className={ styles.body }>
<Form>
<Select
className={ styles.coinselector }
hint={
<FormattedMessage
id='shapeshift.optionsStep.typeSelect.hint'
defaultMessage='the type of crypto conversion to do'
/>
}
label={
<FormattedMessage
id='shapeshift.optionsStep.typeSelect.label'
defaultMessage='fund account from'
/>
}
<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)' } }>
<FormattedMessage
id='shapeshift.optionsStep.typeSelect.label'
defaultMessage='Fund account from'
/>
</div>
<Dropdown
placeholder='Choose a crypto-currency'
fluid
search
selection
options={ coins }
onChange={ this.onSelectCoin }
value={ coinSymbol }
>
{
coins.map(this.renderCoinSelectItem)
}
</Select>
/>
<Input
hint={
<FormattedMessage
@ -119,40 +115,21 @@ export default class OptionsStep extends Component {
renderCoinSelectItem = (coin) => {
const { image, name, symbol } = coin;
const item = (
<div className={ styles.coinselect }>
<img
className={ styles.coinimage }
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>
);
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 = () => {