Merge pull request #3496 from ethcore/ng-solc-output

Handle solc combined output
This commit is contained in:
Gav Wood 2016-11-18 19:17:49 +08:00 committed by GitHub
commit dd50c63912
13 changed files with 492 additions and 122 deletions

View File

@ -14,19 +14,3 @@
/* 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/>.
*/ */
.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;
}
}

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

View File

@ -15,13 +15,12 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import { MenuItem } from 'material-ui';
import { AddressSelect, Form, Input, TypedInput } from '../../../ui'; import { AddressSelect, Form, Input, Select } from '../../../ui';
import { validateAbi } from '../../../util/validation'; import { validateAbi } from '../../../util/validation';
import { parseAbiType } from '../../../util/abi'; import { parseAbiType } from '../../../util/abi';
import styles from '../deployContract.css';
export default class DetailsStep extends Component { export default class DetailsStep extends Component {
static contextTypes = { static contextTypes = {
api: PropTypes.object.isRequired api: PropTypes.object.isRequired
@ -29,24 +28,26 @@ export default class DetailsStep extends Component {
static propTypes = { static propTypes = {
accounts: PropTypes.object.isRequired, accounts: PropTypes.object.isRequired,
abi: PropTypes.string,
abiError: PropTypes.string, onFromAddressChange: PropTypes.func.isRequired,
code: PropTypes.string, onNameChange: PropTypes.func.isRequired,
codeError: PropTypes.string, onDescriptionChange: PropTypes.func.isRequired,
description: PropTypes.string, onAbiChange: PropTypes.func.isRequired,
descriptionError: PropTypes.string, onCodeChange: PropTypes.func.isRequired,
onParamsChange: PropTypes.func.isRequired,
onInputsChange: PropTypes.func.isRequired,
fromAddress: PropTypes.string, fromAddress: PropTypes.string,
fromAddressError: PropTypes.string, fromAddressError: PropTypes.string,
name: PropTypes.string, name: PropTypes.string,
nameError: PropTypes.string, nameError: PropTypes.string,
params: PropTypes.array, description: PropTypes.string,
paramsError: PropTypes.array, descriptionError: PropTypes.string,
onAbiChange: PropTypes.func.isRequired, abi: PropTypes.string,
onCodeChange: PropTypes.func.isRequired, abiError: PropTypes.string,
onFromAddressChange: PropTypes.func.isRequired, code: PropTypes.string,
onDescriptionChange: PropTypes.func.isRequired, codeError: PropTypes.string,
onNameChange: PropTypes.func.isRequired,
onParamsChange: PropTypes.func.isRequired,
readOnly: PropTypes.bool readOnly: PropTypes.bool
}; };
@ -55,7 +56,9 @@ export default class DetailsStep extends Component {
}; };
state = { state = {
inputs: [] solcOutput: '',
contracts: {},
selectedContractIndex: 0
} }
componentDidMount () { componentDidMount () {
@ -63,6 +66,7 @@ export default class DetailsStep extends Component {
if (abi) { if (abi) {
this.onAbiChange(abi); this.onAbiChange(abi);
this.setState({ solcOutput: abi });
} }
if (code) { if (code) {
@ -71,8 +75,19 @@ export default class DetailsStep extends Component {
} }
render () { render () {
const { accounts } = this.props; const {
const { abi, abiError, code, codeError, fromAddress, fromAddressError, name, nameError, readOnly } = this.props; accounts,
readOnly,
fromAddress, fromAddressError,
name, nameError,
description, descriptionError,
abiError,
code, codeError
} = this.props;
const { solcOutput, contracts } = this.state;
const solc = contracts && Object.keys(contracts).length > 0;
return ( return (
<Form> <Form>
@ -83,18 +98,30 @@ export default class DetailsStep extends Component {
error={ fromAddressError } error={ fromAddressError }
accounts={ accounts } accounts={ accounts }
onChange={ this.onFromAddressChange } /> onChange={ this.onFromAddressChange } />
<Input <Input
label='contract name' label='contract name'
hint='a name for the deployed contract' hint='a name for the deployed contract'
error={ nameError } error={ nameError }
value={ name } value={ name }
onSubmit={ this.onNameChange } /> onChange={ this.onNameChange } />
<Input <Input
label='abi' label='contract description (optional)'
hint='the abi of the contract to deploy' hint='a description for the contract'
error={ descriptionError }
value={ description }
onChange={ this.onDescriptionChange } />
{ this.renderContractSelect() }
<Input
label='abi / solc combined-output'
hint='the abi of the contract to deploy or solc combined-output'
error={ abiError } error={ abiError }
value={ abi } value={ solcOutput }
onSubmit={ this.onAbiChange } onChange={ this.onSolcChange }
onSubmit={ this.onSolcSubmit }
readOnly={ readOnly } /> readOnly={ readOnly } />
<Input <Input
label='code' label='code'
@ -102,66 +129,104 @@ export default class DetailsStep extends Component {
error={ codeError } error={ codeError }
value={ code } value={ code }
onSubmit={ this.onCodeChange } onSubmit={ this.onCodeChange }
readOnly={ readOnly } /> readOnly={ readOnly || solc } />
{ this.renderConstructorInputs() }
</Form> </Form>
); );
} }
renderConstructorInputs () { renderContractSelect () {
const { accounts, params, paramsError } = this.props; const { contracts } = this.state;
const { inputs } = this.state;
if (!inputs || !inputs.length) { if (!contracts || Object.keys(contracts).length === 0) {
return null; return null;
} }
return inputs.map((input, index) => { const { selectedContractIndex } = this.state;
const onChange = (value) => this.onParamChange(index, value); const contractsItems = Object.keys(contracts).map((name, index) => (
<MenuItem
key={ index }
label={ name }
value={ index }
>
{ name }
</MenuItem>
));
const label = `${input.name ? `${input.name}: ` : ''}${input.type}`; return (
const value = params[index]; <Select
const error = paramsError[index]; label='select a contract'
const param = parseAbiType(input.type); onChange={ this.onContractChange }
value={ selectedContractIndex }
>
{ contractsItems }
</Select>
);
}
return ( onContractChange = (event, index) => {
<div key={ index } className={ styles.funcparams }> const { contracts } = this.state;
<TypedInput const contractName = Object.keys(contracts)[index];
label={ label } const contract = contracts[contractName];
value={ value }
error={ error } const { abi, bin } = contract;
accounts={ accounts } const code = /^0x/.test(bin) ? bin : `0x${bin}`;
onChange={ onChange }
param={ param } this.setState({ selectedContractIndex: index }, () => {
/> this.onAbiChange(abi);
</div> this.onCodeChange(code);
);
}); });
} }
onSolcChange = (event, value) => {
// Change triggered only if valid
if (this.props.abiError) {
return null;
}
this.onSolcSubmit(value);
}
onSolcSubmit = (value) => {
try {
const solcParsed = JSON.parse(value);
if (!solcParsed || !solcParsed.contracts) {
throw new Error('Wrong solc output');
}
this.setState({ contracts: solcParsed.contracts }, () => {
this.onContractChange(null, 0);
});
} catch (e) {
this.setState({ contracts: null });
this.onAbiChange(value);
}
this.setState({ solcOutput: value });
}
onFromAddressChange = (event, fromAddress) => { onFromAddressChange = (event, fromAddress) => {
const { onFromAddressChange } = this.props; const { onFromAddressChange } = this.props;
onFromAddressChange(fromAddress); onFromAddressChange(fromAddress);
} }
onNameChange = (name) => { onNameChange = (event, name) => {
const { onNameChange } = this.props; const { onNameChange } = this.props;
onNameChange(name); onNameChange(name);
} }
onParamChange = (index, value) => { onDescriptionChange = (event, description) => {
const { params, onParamsChange } = this.props; const { onDescriptionChange } = this.props;
params[index] = value; onDescriptionChange(description);
onParamsChange(params);
} }
onAbiChange = (abi) => { onAbiChange = (abi) => {
const { api } = this.context; const { api } = this.context;
const { onAbiChange, onParamsChange } = this.props; const { onAbiChange, onParamsChange, onInputsChange } = this.props;
const { abiError, abiParsed } = validateAbi(abi, api); const { abiError, abiParsed } = validateAbi(abi, api);
if (!abiError) { if (!abiError) {
@ -176,10 +241,10 @@ export default class DetailsStep extends Component {
}); });
onParamsChange(params); onParamsChange(params);
this.setState({ inputs }); onInputsChange(inputs);
} else { } else {
onParamsChange([]); onParamsChange([]);
this.setState({ inputs: [] }); onInputsChange([]);
} }
onAbiChange(abi); onAbiChange(abi);

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 './parametersStep';

View File

@ -0,0 +1,105 @@
// 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/>.
// 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 { Form, TypedInput } from '../../../ui';
import { parseAbiType } from '../../../util/abi';
import styles from '../deployContract.css';
export default class ParametersStep extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
};
static propTypes = {
accounts: PropTypes.object.isRequired,
onParamsChange: PropTypes.func.isRequired,
inputs: PropTypes.array,
params: PropTypes.array,
paramsError: PropTypes.array
};
render () {
return (
<Form>
{ this.renderConstructorInputs() }
</Form>
);
}
renderConstructorInputs () {
const { accounts, params, paramsError } = this.props;
const { inputs } = this.props;
if (!inputs || !inputs.length) {
return null;
}
const inputsComponents = inputs.map((input, index) => {
const onChange = (value) => this.onParamChange(index, value);
const label = `${input.name ? `${input.name}: ` : ''}${input.type}`;
const value = params[index];
const error = paramsError[index];
const param = parseAbiType(input.type);
return (
<div key={ index } className={ styles.funcparams }>
<TypedInput
label={ label }
value={ value }
error={ error }
accounts={ accounts }
onChange={ onChange }
param={ param }
/>
</div>
);
});
return (
<div>
<p>Choose the contract parameters</p>
{ inputsComponents }
</div>
);
}
onParamChange = (index, value) => {
const { params, onParamsChange } = this.props;
params[index] = value;
onParamsChange(params);
}
}

View File

@ -31,3 +31,7 @@
.funcparams { .funcparams {
padding-left: 3em; padding-left: 3em;
} }
p {
color: rgba(255, 255, 255, 0.498039);
}

View File

@ -22,13 +22,19 @@ import { BusyStep, CompletedStep, CopyToClipboard, Button, IdentityIcon, Modal,
import { ERRORS, validateAbi, validateCode, validateName } from '../../util/validation'; import { ERRORS, validateAbi, validateCode, validateName } from '../../util/validation';
import DetailsStep from './DetailsStep'; import DetailsStep from './DetailsStep';
import ParametersStep from './ParametersStep';
import ErrorStep from './ErrorStep'; import ErrorStep from './ErrorStep';
import styles from './deployContract.css'; import styles from './deployContract.css';
import { ERROR_CODES } from '../../api/transport/error'; import { ERROR_CODES } from '../../api/transport/error';
const steps = ['contract details', 'deployment', 'completed']; const STEPS = {
CONTRACT_DETAILS: { title: 'contract details' },
CONTRACT_PARAMETERS: { title: 'contract parameters' },
DEPLOYMENT: { title: 'deployment', waiting: true },
COMPLETED: { title: 'completed' }
};
export default class DeployContract extends Component { export default class DeployContract extends Component {
static contextTypes = { static contextTypes = {
@ -55,7 +61,6 @@ export default class DeployContract extends Component {
abiError: ERRORS.invalidAbi, abiError: ERRORS.invalidAbi,
code: '', code: '',
codeError: ERRORS.invalidCode, codeError: ERRORS.invalidCode,
deployState: '',
description: '', description: '',
descriptionError: null, descriptionError: null,
fromAddress: Object.keys(this.props.accounts)[0], fromAddress: Object.keys(this.props.accounts)[0],
@ -64,9 +69,12 @@ export default class DeployContract extends Component {
nameError: ERRORS.invalidName, nameError: ERRORS.invalidName,
params: [], params: [],
paramsError: [], paramsError: [],
step: 0, inputs: [],
deployState: '',
deployError: null, deployError: null,
rejected: false rejected: false,
step: 'CONTRACT_DETAILS'
} }
componentWillMount () { componentWillMount () {
@ -95,20 +103,30 @@ export default class DeployContract extends Component {
} }
render () { render () {
const { step, deployError, rejected } = this.state; const { step, deployError, rejected, inputs } = this.state;
const realStep = Object.keys(STEPS).findIndex((k) => k === step);
const realSteps = deployError || rejected
? null
: Object.keys(STEPS)
.filter((k) => k !== 'CONTRACT_PARAMETERS' || inputs.length > 0)
.map((k) => STEPS[k]);
const realSteps = deployError || rejected ? null : steps;
const title = realSteps const title = realSteps
? null ? null
: (deployError ? 'deployment failed' : 'rejected'); : (deployError ? 'deployment failed' : 'rejected');
const waiting = realSteps
? realSteps.map((s, i) => s.waiting ? i : false).filter((v) => v !== false)
: null;
return ( return (
<Modal <Modal
actions={ this.renderDialogActions() } actions={ this.renderDialogActions() }
current={ step } current={ realStep }
steps={ realSteps } steps={ realSteps ? realSteps.map((s) => s.title) : null }
title={ title } title={ title }
waiting={ realSteps ? [1] : null } waiting={ waiting }
visible visible
scroll> scroll>
{ this.renderStep() } { this.renderStep() }
@ -146,20 +164,29 @@ export default class DeployContract extends Component {
} }
switch (step) { switch (step) {
case 0: case 'CONTRACT_DETAILS':
return [ return [
cancelBtn, cancelBtn,
<Button <Button
disabled={ !isValid } disabled={ !isValid }
icon={ <IdentityIcon button address={ fromAddress } /> }
label='Next'
onClick={ this.onParametersStep } />
];
case 'CONTRACT_PARAMETERS':
return [
cancelBtn,
<Button
icon={ <IdentityIcon button address={ fromAddress } /> } icon={ <IdentityIcon button address={ fromAddress } /> }
label='Create' label='Create'
onClick={ this.onDeployStart } /> onClick={ this.onDeployStart } />
]; ];
case 1: case 'DEPLOYMENT':
return [ closeBtn ]; return [ closeBtn ];
case 2: case 'COMPLETED':
return [ closeBtnOk ]; return [ closeBtnOk ];
} }
} }
@ -184,21 +211,33 @@ export default class DeployContract extends Component {
} }
switch (step) { switch (step) {
case 0: case 'CONTRACT_DETAILS':
return ( return (
<DetailsStep <DetailsStep
{ ...this.state } { ...this.state }
readOnly={ readOnly }
accounts={ accounts } accounts={ accounts }
onAbiChange={ this.onAbiChange } readOnly={ readOnly }
onCodeChange={ this.onCodeChange }
onFromAddressChange={ this.onFromAddressChange } onFromAddressChange={ this.onFromAddressChange }
onDescriptionChange={ this.onDescriptionChange } onDescriptionChange={ this.onDescriptionChange }
onNameChange={ this.onNameChange } onNameChange={ this.onNameChange }
onParamsChange={ this.onParamsChange } /> onAbiChange={ this.onAbiChange }
onCodeChange={ this.onCodeChange }
onParamsChange={ this.onParamsChange }
onInputsChange={ this.onInputsChange }
/>
); );
case 1: case 'CONTRACT_PARAMETERS':
return (
<ParametersStep
{ ...this.state }
readOnly={ readOnly }
accounts={ accounts }
onParamsChange={ this.onParamsChange }
/>
);
case 'DEPLOYMENT':
const body = txhash const body = txhash
? <TxHash hash={ txhash } /> ? <TxHash hash={ txhash } />
: null; : null;
@ -210,7 +249,7 @@ export default class DeployContract extends Component {
</BusyStep> </BusyStep>
); );
case 2: case 'COMPLETED':
return ( return (
<CompletedStep> <CompletedStep>
<div>Your contract has been deployed at</div> <div>Your contract has been deployed at</div>
@ -225,12 +264,23 @@ export default class DeployContract extends Component {
} }
} }
onParametersStep = () => {
const { inputs } = this.state;
if (inputs.length) {
return this.setState({ step: 'CONTRACT_PARAMETERS' });
}
return this.onDeployStart();
}
onDescriptionChange = (description) => { onDescriptionChange = (description) => {
this.setState({ description, descriptionError: null }); this.setState({ description, descriptionError: null });
} }
onFromAddressChange = (fromAddress) => { onFromAddressChange = (fromAddress) => {
const { api } = this.context; const { api } = this.context;
const fromAddressError = api.util.isAddressValid(fromAddress) const fromAddressError = api.util.isAddressValid(fromAddress)
? null ? null
: 'a valid account as the contract owner needs to be selected'; : 'a valid account as the contract owner needs to be selected';
@ -246,6 +296,10 @@ export default class DeployContract extends Component {
this.setState({ params }); this.setState({ params });
} }
onInputsChange = (inputs) => {
this.setState({ inputs });
}
onAbiChange = (abi) => { onAbiChange = (abi) => {
const { api } = this.context; const { api } = this.context;
@ -267,7 +321,7 @@ export default class DeployContract extends Component {
from: fromAddress from: fromAddress
}; };
this.setState({ step: 1 }); this.setState({ step: 'DEPLOYMENT' });
api api
.newContract(abiParsed) .newContract(abiParsed)
@ -286,7 +340,7 @@ export default class DeployContract extends Component {
]) ])
.then(() => { .then(() => {
console.log(`contract deployed at ${address}`); console.log(`contract deployed at ${address}`);
this.setState({ step: 2, address }); this.setState({ step: 'DEPLOYMENT', address });
}); });
}) })
.catch((error) => { .catch((error) => {

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

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;
}
}

View File

@ -0,0 +1,100 @@
// 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 = this.getKey(selectedValue, 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 = this.getKey(value, 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>
) }
/>
);
});
}
getKey (value, index) {
if (typeof value !== 'string') {
return typeof value.key === 'undefined' ? index : value.key;
}
return index;
}
onChange = (event, index) => {
const { onChange, values } = this.props;
const value = values[index] || values.find((v) => v.key === index);
onChange(value, index);
}
}

View File

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

View File

@ -43,7 +43,7 @@ class Modal extends Component {
waiting: PropTypes.array, waiting: PropTypes.array,
scroll: PropTypes.bool, scroll: PropTypes.bool,
steps: PropTypes.array, steps: PropTypes.array,
title: React.PropTypes.oneOfType([ title: PropTypes.oneOfType([
PropTypes.node, PropTypes.string PropTypes.node, PropTypes.string
]), ]),
visible: PropTypes.bool.isRequired, visible: PropTypes.bool.isRequired,

View File

@ -29,7 +29,7 @@ import ContextProvider from './ContextProvider';
import CopyToClipboard from './CopyToClipboard'; import CopyToClipboard from './CopyToClipboard';
import Editor from './Editor'; import Editor from './Editor';
import Errors from './Errors'; 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 IdentityIcon from './IdentityIcon';
import IdentityName from './IdentityName'; import IdentityName from './IdentityName';
import MethodDecoding from './MethodDecoding'; import MethodDecoding from './MethodDecoding';
@ -78,6 +78,7 @@ export {
muiTheme, muiTheme,
Page, Page,
ParityBackground, ParityBackground,
RadioButtons,
SignerIcon, SignerIcon,
Tags, Tags,
Tooltip, Tooltip,