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

Add a new RadioButtons Component #3196

Browse Source
This commit is contained in:
Nicolas Gotchac 2016-11-17 12:06:35 +01:00
parent 4c41195d5c
commit c8fadbec69
7 changed files with 160 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
js/src/modals/AddContract/addContract.css
View File

@ -14,19 +14,3 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/
.spaced {
margin: 0.25em 0;
}
.typeContainer {
display: flex;
flex-direction: column;
.desc {
font-size: 0.8em;
margin-bottom: 0.5em;
color: #ccc;
z-index: 2;
}
}

39
js/src/modals/AddContract/addContract.js
View File

@ -20,13 +20,10 @@ import ContentClear from 'material-ui/svg-icons/content/clear';
import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
import { Button, Modal, Form, Input, InputAddress } from '../../ui';
import { Button, Modal, Form, Input, InputAddress, RadioButtons } from '../../ui';
import { ERRORS, validateAbi, validateAddress, validateName } from '../../util/validation';
import { eip20, wallet } from '../../contracts/abi';
import styles from './addContract.css';
const ABI_TYPES = [
{
@ -105,13 +102,12 @@ export default class AddContract extends Component {
const { abiTypeIndex } = this.state;
return (
<RadioButtonGroup
valueSelected={ abiTypeIndex }
<RadioButtons
name='contractType'
value={ abiTypeIndex }
values={ this.getAbiTypes() }
onChange={ this.onChangeABIType }
>
{ this.renderAbiTypes() }
</RadioButtonGroup>
/>
);
}
@ -194,20 +190,13 @@ export default class AddContract extends Component {
);
}
renderAbiTypes () {
return ABI_TYPES.map((type, index) => (
<RadioButton
className={ styles.spaced }
value={ index }
label={ (
<div className={ styles.typeContainer }>
<span>{ type.label }</span>
<span className={ styles.desc }>{ type.description }</span>
</div>
) }
key={ index }
/>
));
getAbiTypes () {
return ABI_TYPES.map((type, index) => ({
label: type.label,
description: type.description,
key: index,
...type
}));
}
onNext = () => {
@ -218,8 +207,8 @@ export default class AddContract extends Component {
this.setState({ step: this.state.step - 1 });
}
onChangeABIType = (event, index) => {
const abiType = ABI_TYPES[index];
onChangeABIType = (value, index) => {
const abiType = value || ABI_TYPES[index];
this.setState({ abiTypeIndex: index, abiType });
this.onEditAbi(abiType.value);
}

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

@ -0,0 +1,17 @@
// Copyright 2015, 2016 Ethcore (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 './radioButtons';

32
js/src/ui/Form/RadioButtons/radioButtons.css Normal file
View File

@ -0,0 +1,32 @@
/* Copyright 2015, 2016 Ethcore (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/>.
*/
.spaced {
margin: 0.25em 0;
}
.typeContainer {
display: flex;
flex-direction: column;
.desc {
font-size: 0.8em;
margin-bottom: 0.5em;
color: #ccc;
z-index: 2;
}
}

92
js/src/ui/Form/RadioButtons/radioButtons.js Normal file
View File

@ -0,0 +1,92 @@
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
import styles from './radioButtons.css';
export default class RadioButtons extends Component {
static propTypes = {
onChange: PropTypes.func.isRequired,
values: PropTypes.array.isRequired,
value: PropTypes.any,
name: PropTypes.string
};
static defaultProps = {
value: 0,
name: ''
};
render () {
const { value, values } = this.props;
const index = parseInt(value);
const selectedValue = typeof value !== 'object' ? values[index] : value;
const key = (typeof selectedValue !== 'string' && selectedValue.key) || index;
return (
<RadioButtonGroup
valueSelected={ key }
name={ name }
onChange={ this.onChange }
>
{ this.renderContent() }
</RadioButtonGroup>
);
}
renderContent () {
const { values } = this.props;
return values.map((value, index) => {
const label = typeof value === 'string' ? value : value.label || '';
const description = (typeof value !== 'string' && value.description) || null;
const key = (typeof value !== 'string' && value.key) || index;
return (
<RadioButton
className={ styles.spaced }
key={ index }
value={ key }
label={ (
<div className={ styles.typeContainer }>
<span>{ label }</span>
{
description
? (
<span className={ styles.desc }>{ description }</span>
)
: null
}
</div>
) }
/>
);
});
}
onChange = (event, index) => {
const { onChange, values } = this.props;
const value = values[index];
onChange(value, index);
}
}

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

@ -23,6 +23,7 @@ import InputAddressSelect from './InputAddressSelect';
import InputChip from './InputChip';
import InputInline from './InputInline';
import Select from './Select';
import RadioButtons from './RadioButtons';
export default from './form';
export {
@ -34,5 +35,6 @@ export {
InputAddressSelect,
InputChip,
InputInline,
Select
Select,
RadioButtons
};

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

@ -29,7 +29,7 @@ import ContextProvider from './ContextProvider';
import CopyToClipboard from './CopyToClipboard';
import Editor from './Editor';
import Errors from './Errors';
import Form, { AddressSelect, FormWrap, TypedInput, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select } from './Form';
import Form, { AddressSelect, FormWrap, TypedInput, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select, RadioButtons } from './Form';
import IdentityIcon from './IdentityIcon';
import IdentityName from './IdentityName';
import MethodDecoding from './MethodDecoding';
@ -78,6 +78,7 @@ export {
muiTheme,
Page,
ParityBackground,
RadioButtons,
SignerIcon,
Tags,
Tooltip,