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

Simplify Dropdown, pass label correctly

Browse Source
This commit is contained in:
Jaco Greeff 2017-05-10 14:27:04 +02:00
parent 1c262b2172
commit c3ee7f04e5
11 changed files with 157 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
js/src/ui/Dropdown/dropdown.js
View File

@ -1,87 +0,0 @@
// 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 SemanticDropdown } from 'semantic-ui-react';
import styles from './dropdown.css';
export default function Dropdown ({ defaultValue, disabled, fullWidth, fluid, hint, icon, name, onBlur, onChange, onClick, onClose, onFocus, options, placeholder, scrolling, search, selection, text, value }) {
return (
<SemanticDropdown
className={ styles.dropdown }
defaultValue={ defaultValue }
disabled={ disabled }
fluid={ fullWidth | fluid }
icon={ icon }
name={ name }
onBlur={ onBlur }
onChange={ onChange }
onClick={ onClick }
onClose={ onClose }
onFocus={ onFocus }
options={ options }
placeholder={ hint | 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.
fullWidth: PropTypes.bool, // A dropdown can take the full width of its parent.
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.
onBlur: PropTypes.func, // Called on blur.
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: '' }`
hint: PropTypes.string, // Placeholder text.
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,
fluid: true,
search: true,
selection: true
};

0
js/src/ui/Dropdown/dropdown.css → js/src/ui/Form/Dropdown/dropdown.css
View File

54
js/src/ui/Form/Dropdown/dropdown.js Normal file
View File

@ -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 <http://www.gnu.org/licenses/>.
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 (
<LabelComponent label={ label }>
<SemanticDropdown
className={ `${styles.dropdown} ${className}` }
disabled={ disabled }
fluid={ fullWidth }
onChange={ onChange }
options={ options }
placeholder={ hint }
scrolling
search
selection
value={ value }
/>
</LabelComponent>
);
}
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.
};

0
js/src/ui/Dropdown/index.js → js/src/ui/Form/Dropdown/index.js
View File

17
js/src/ui/Form/LabelComponent/index.js Normal file
View File

@ -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 <http://www.gnu.org/licenses/>.
export default from './labelComponent';

24
js/src/ui/Form/LabelComponent/labelComponent.css Normal file
View File

@ -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 <http://www.gnu.org/licenses/>.
*/
.container {
.label {
color: rgba(0, 0, 0, 0.3);
pointer-events: none;
user-select: none;
}
}

44
js/src/ui/Form/LabelComponent/labelComponent.js Normal file
View File

@ -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 <http://www.gnu.org/licenses/>.
import React, { PropTypes } from 'react';
import styles from './labelComponent.css';
export default function LabelComponent ({ children, label }) {
return (
<div className={ styles.container }>
{
label
? (
<label
className={ styles.label }
htmlFor=''
>
{ label }
</label>
)
: null
}
{ children }
</div>
);
}
LabelComponent.propTypes = {
label: PropTypes.node,
children: PropTypes.node.isRequired
};

1
js/src/ui/Form/form.css
View File

@ -15,7 +15,6 @@
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/
.form {
margin-top: -1em;
width: 100%;
}

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

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

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

@ -31,10 +31,9 @@ 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';
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';

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

@ -33,16 +33,6 @@ const WARNING_LABELS = {
)
};
const FUND_ACCCOUNT_FROM = {
display: 'block',
paddingTop: '15px',
paddingBottom: '5px',
fontSize: '16px',
pointerEvents: 'none',
userSelect: 'none',
color: 'rgba(0, 0, 0, 0.298039)'
};
@observer
export default class OptionsStep extends Component {
static propTypes = {
@ -69,17 +59,20 @@ export default class OptionsStep extends Component {
return (
<div className={ styles.body }>
<Form>
<div style={ FUND_ACCCOUNT_FROM }>
<FormattedMessage
id='shapeshift.optionsStep.typeSelect.label'
defaultMessage='Fund account from'
/>
</div>
<Dropdown
placeholder='Choose a crypto-currency'
fluid
search
selection
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'
/>
}
options={ coins }
onChange={ this.onSelectCoin }
value={ coinSymbol }
@ -126,9 +119,9 @@ export default class OptionsStep extends Component {
const { image, name, symbol } = coin;
return {
image: image,
value: symbol,
text: name
image,
text: name,
value: symbol
};
}