Add a new RadioButtons Component #3196

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

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, RadioButtons } from '../../ui';
-
-import { Button, Modal, Form, Input, InputAddress } 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
+      <RadioButtons
-        valueSelected={ abiTypeIndex }
         name='contractType'
+        value={ abiTypeIndex }
+        values={ this.getAbiTypes() }
         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 = () => {
@@ -218,8 +207,8 @@ export default class AddContract extends Component {
     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.onEditAbi(abiType.value);
   }

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

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

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

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

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,