From c8fadbec69e6144ff5cae7ac09fe21e7092a3376 Mon Sep 17 00:00:00 2001 From: Nicolas Gotchac Date: Thu, 17 Nov 2016 12:06:35 +0100 Subject: [PATCH] Add a new RadioButtons Component #3196 --- js/src/modals/AddContract/addContract.css | 16 ---- js/src/modals/AddContract/addContract.js | 39 +++------ js/src/ui/Form/RadioButtons/index.js | 17 ++++ js/src/ui/Form/RadioButtons/radioButtons.css | 32 +++++++ js/src/ui/Form/RadioButtons/radioButtons.js | 92 ++++++++++++++++++++ js/src/ui/Form/index.js | 4 +- js/src/ui/index.js | 3 +- 7 files changed, 160 insertions(+), 43 deletions(-) create mode 100644 js/src/ui/Form/RadioButtons/index.js create mode 100644 js/src/ui/Form/RadioButtons/radioButtons.css create mode 100644 js/src/ui/Form/RadioButtons/radioButtons.js diff --git a/js/src/modals/AddContract/addContract.css b/js/src/modals/AddContract/addContract.css index ed92a86d5..0821a180e 100644 --- a/js/src/modals/AddContract/addContract.css +++ b/js/src/modals/AddContract/addContract.css @@ -14,19 +14,3 @@ /* You should have received a copy of the GNU General Public License /* along with Parity. If not, see . */ - -.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; - } -} diff --git a/js/src/modals/AddContract/addContract.js b/js/src/modals/AddContract/addContract.js index 4c73d3da0..110a91837 100644 --- a/js/src/modals/AddContract/addContract.js +++ b/js/src/modals/AddContract/addContract.js @@ -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 ( - - { this.renderAbiTypes() } - + /> ); } @@ -194,20 +190,13 @@ export default class AddContract extends Component { ); } - renderAbiTypes () { - return ABI_TYPES.map((type, index) => ( - - { type.label } - { type.description } - - ) } - 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); } diff --git a/js/src/ui/Form/RadioButtons/index.js b/js/src/ui/Form/RadioButtons/index.js new file mode 100644 index 000000000..c708eb728 --- /dev/null +++ b/js/src/ui/Form/RadioButtons/index.js @@ -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 . + +export default from './radioButtons'; diff --git a/js/src/ui/Form/RadioButtons/radioButtons.css b/js/src/ui/Form/RadioButtons/radioButtons.css new file mode 100644 index 000000000..ed92a86d5 --- /dev/null +++ b/js/src/ui/Form/RadioButtons/radioButtons.css @@ -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 . +*/ + +.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; + } +} diff --git a/js/src/ui/Form/RadioButtons/radioButtons.js b/js/src/ui/Form/RadioButtons/radioButtons.js new file mode 100644 index 000000000..3297c4ae1 --- /dev/null +++ b/js/src/ui/Form/RadioButtons/radioButtons.js @@ -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 . + +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 ( + + { this.renderContent() } + + ); + } + + 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 ( + + { label } + { + description + ? ( + { description } + ) + : null + } + + ) } + /> + ); + }); + } + + onChange = (event, index) => { + const { onChange, values } = this.props; + + const value = values[index]; + onChange(value, index); + } +} diff --git a/js/src/ui/Form/index.js b/js/src/ui/Form/index.js index 46bb106f4..113f3424a 100644 --- a/js/src/ui/Form/index.js +++ b/js/src/ui/Form/index.js @@ -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 }; diff --git a/js/src/ui/index.js b/js/src/ui/index.js index 69a7d26c3..d443d0dbc 100644 --- a/js/src/ui/index.js +++ b/js/src/ui/index.js @@ -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,