Add a new RadioButtons Component #3196

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,