From 78b6de55b3d471f48c217b0ef67214eb46eb5fe2 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Thu, 11 May 2017 14:02:27 +0200 Subject: [PATCH] Ui 2 Select component conversion (#5598) * Remove mui/Paper from PasswordManager * Aliasses for @parity packages * Remove mui/Card from contract queries * Toggle component replacement (mui-only) * Semantic-ui toggle component * LabelComponent warpper for Toggle * Convert Selectors * Test fixes * Fix case --- js/src/shared/util/messages.js | 2 +- js/src/ui/Form/AddressSelect/addressSelect.js | 4 +- js/src/ui/Form/Dropdown/dropdown.js | 30 ++- js/src/ui/Form/Input/input.js | 4 +- js/src/ui/Form/Select/select.js | 101 --------- js/src/ui/Form/{Select => Toggle}/index.js | 2 +- js/src/ui/Form/Toggle/toggle.js | 42 ++++ js/src/ui/Form/TypedInput/typedInput.js | 37 ++-- js/src/ui/Form/TypedInput/typedInput.spec.js | 20 -- js/src/ui/Form/index.js | 2 +- .../ui/LanguageSelector/languageSelector.js | 35 ++- .../LanguageSelector/langugeSelector.spec.js | 4 +- js/src/ui/index.js | 2 +- .../PasswordManager/passwordManager.css | 4 +- .../PasswordManager/passwordManager.js | 8 +- .../Account/Transfer/Details/tokenSelect.js | 25 +-- .../DetailsStep/detailsStep.js | 44 ++-- js/src/views/Contract/Queries/inputQuery.js | 20 +- js/src/views/Contract/Queries/queries.css | 4 + js/src/views/Contract/Queries/queries.js | 24 +- .../views/ContractDevelop/contractDevelop.js | 69 +++--- .../DeployContract/DetailsStep/detailsStep.js | 31 ++- js/src/views/Settings/Node/node.js | 206 ++++++++---------- js/webpack/app.js | 2 + js/webpack/libraries.js | 2 + js/webpack/npm.js | 2 + js/webpack/test.js | 4 +- 27 files changed, 306 insertions(+), 424 deletions(-) delete mode 100644 js/src/ui/Form/Select/select.js rename js/src/ui/Form/{Select => Toggle}/index.js (95%) create mode 100644 js/src/ui/Form/Toggle/toggle.js diff --git a/js/src/shared/util/messages.js b/js/src/shared/util/messages.js index c34028f72..e9017e85a 100644 --- a/js/src/shared/util/messages.js +++ b/js/src/shared/util/messages.js @@ -23,7 +23,7 @@ * element * @return {String} */ -export function toString (context, value) { +export function parseI18NString (context, value) { if (!context.intl) { console.warn(`remember to add: static contextTypes = { diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js index cf7a21621..b4bbc3ce3 100644 --- a/js/src/ui/Form/AddressSelect/addressSelect.js +++ b/js/src/ui/Form/AddressSelect/addressSelect.js @@ -24,7 +24,7 @@ import TextFieldUnderline from 'material-ui/TextField/TextFieldUnderline'; import apiutil from '@parity/api/util'; import { nodeOrStringProptype } from '@parity/shared/util/proptypes'; -import { toString } from '@parity/shared/util/messages'; +import { parseI18NString } from '@parity/shared/util/messages'; import { validateAddress } from '@parity/shared/util/validation'; import AccountCard from '~/ui/AccountCard'; @@ -187,7 +187,7 @@ class AddressSelect extends Component { } const id = `addressSelect_${++currentId}`; - const ilHint = toString(this.context, hint); + const ilHint = parseI18NString(this.context, hint); return ( ); } +Dropdown.contextTypes = { + intl: PropTypes.object.isRequired +}; + Dropdown.propTypes = { + children: PropTypes.node, className: PropTypes.string, disabled: PropTypes.bool, // A disabled dropdown menu or item does not allow user interaction. + error: PropTypes.any, fullWidth: PropTypes.bool, // A dropdown can take the full width of its parent. - hint: PropTypes.string, // Placeholder text. + hint: PropTypes.node, // Placeholder text. label: PropTypes.node, name: PropTypes.func, // Name of the hidden input which holds the value. onChange: PropTypes.func, // Called when the user attempts to change the value. + onBlur: PropTypes.func, + onKeyDown: PropTypes.func, options: PropTypes.any, // Array of Dropdown.Item props e.g. `{ text: '', value: '' }` - value: PropTypes.any // Current value. Creates a controlled component. + text: PropTypes.any, + value: PropTypes.any, // Current value. Creates a controlled component. + values: PropTypes.array }; diff --git a/js/src/ui/Form/Input/input.js b/js/src/ui/Form/Input/input.js index f6a265916..497f7ebc0 100644 --- a/js/src/ui/Form/Input/input.js +++ b/js/src/ui/Form/Input/input.js @@ -20,7 +20,7 @@ import { noop } from 'lodash'; import keycode from 'keycode'; import { nodeOrStringProptype } from '@parity/shared/util/proptypes'; -import { toString } from '@parity/shared/util/messages'; +import { parseI18NString } from '@parity/shared/util/messages'; import CopyToClipboard from '~/ui/CopyToClipboard'; @@ -150,7 +150,7 @@ export default class Input extends Component { ? UNDERLINE_FOCUSED : readOnly && typeof focused !== 'boolean' ? { display: 'none' } : null; - const textValue = toString(this.context, value); + const textValue = parseI18NString(this.context, value); return (
diff --git a/js/src/ui/Form/Select/select.js b/js/src/ui/Form/Select/select.js deleted file mode 100644 index 3edf583c2..000000000 --- a/js/src/ui/Form/Select/select.js +++ /dev/null @@ -1,101 +0,0 @@ -// Copyright 2015-2017 Parity Technologies (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 { MenuItem, SelectField } from 'material-ui'; - -import { nodeOrStringProptype } from '@parity/shared/util/proptypes'; - -// TODO: duplicated in Input -const UNDERLINE_DISABLED = { - borderColor: 'rgba(255, 255, 255, 0.298039)' // 'transparent' // 'rgba(255, 255, 255, 0.298039)' -}; - -const UNDERLINE_NORMAL = { - borderBottom: 'solid 2px' -}; - -const NAME_ID = ' '; - -export default class Select extends Component { - static propTypes = { - children: PropTypes.node, - className: PropTypes.string, - disabled: PropTypes.bool, - error: nodeOrStringProptype(), - hint: nodeOrStringProptype(), - label: nodeOrStringProptype(), - onBlur: PropTypes.func, - onChange: PropTypes.func, - onKeyDown: PropTypes.func, - type: PropTypes.string, - value: PropTypes.any, - values: PropTypes.array - } - - render () { - const { className, disabled, error, hint, label, onBlur, onChange, onKeyDown, value } = this.props; - - return ( - - { this.renderChildren() } - - ); - } - - renderChildren () { - const { children, values } = this.props; - - if (children) { - return children; - } - - if (!values) { - return null; - } - - return values.map((data, index) => { - const { name = index, value = index } = data; - - return ( - - { name } - - ); - }); - } -} diff --git a/js/src/ui/Form/Select/index.js b/js/src/ui/Form/Toggle/index.js similarity index 95% rename from js/src/ui/Form/Select/index.js rename to js/src/ui/Form/Toggle/index.js index 58cb5243b..3941ab2b3 100644 --- a/js/src/ui/Form/Select/index.js +++ b/js/src/ui/Form/Toggle/index.js @@ -14,4 +14,4 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -export default from './select'; +export default from './toggle'; diff --git a/js/src/ui/Form/Toggle/toggle.js b/js/src/ui/Form/Toggle/toggle.js new file mode 100644 index 000000000..7608e3e2e --- /dev/null +++ b/js/src/ui/Form/Toggle/toggle.js @@ -0,0 +1,42 @@ +// Copyright 2015-2017 Parity Technologies (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, { PropTypes } from 'react'; +import { Radio as SemanticRadio } from 'semantic-ui-react'; + +import LabelComponent from '../LabelComponent'; + +export default function Toggle ({ className, label, onToggle, style, toggled }) { + return ( + + + + ); +} + +Toggle.propTypes = { + className: PropTypes.string, + label: PropTypes.node, + onToggle: PropTypes.func, + style: PropTypes.object, + toggled: PropTypes.bool +}; diff --git a/js/src/ui/Form/TypedInput/typedInput.js b/js/src/ui/Form/TypedInput/typedInput.js index 33a89531c..7182a1326 100644 --- a/js/src/ui/Form/TypedInput/typedInput.js +++ b/js/src/ui/Form/TypedInput/typedInput.js @@ -15,7 +15,6 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; -import { MenuItem, Toggle } from 'material-ui'; import { range } from 'lodash'; import BigNumber from 'bignumber.js'; @@ -26,9 +25,10 @@ import { bytesToHex } from '@parity/api/util/format'; import { ABI_TYPES, parseAbiType } from '@parity/shared/util/abi'; import { nodeOrStringProptype } from '@parity/shared/util/proptypes'; +import Dropdown from '~/ui/Form/Dropdown'; import Input from '~/ui/Form/Input'; import InputAddressSelect from '~/ui/Form/InputAddressSelect'; -import Select from '~/ui/Form/Select'; +import Toggle from '~/ui/Form/Toggle'; import { AddIcon, RemoveIcon } from '~/ui/Icons'; import styles from './typedInput.css'; @@ -366,20 +366,8 @@ export default class TypedInput extends Component { return this.renderDefault(); } - const boolitems = ['false', 'true'].map((bool) => { - return ( - - { bool } - - ); - }); - return ( - + options={ + ['false', 'true'].map((bool) => { + return { + key: bool, + text: bool, + value: bool + }; + }) + } + /> ); } - onChangeBool = (event, _index, value) => { - // NOTE: event.target.value added for enzyme simulated event testing - this.props.onChange((value || event.target.value) === 'true'); + onChangeBool = (event) => { + console.log('onChangeBool', event.target); + this.props.onChange(event.target.value === 'true'); } onEthTypeChange = () => { diff --git a/js/src/ui/Form/TypedInput/typedInput.spec.js b/js/src/ui/Form/TypedInput/typedInput.spec.js index a552ca12b..41f6f8d2c 100644 --- a/js/src/ui/Form/TypedInput/typedInput.spec.js +++ b/js/src/ui/Form/TypedInput/typedInput.spec.js @@ -23,7 +23,6 @@ import { ABI_TYPES } from '@parity/shared/util/abi'; import TypedInput from './'; let component; -let select; let onChange; function render (props) { @@ -34,7 +33,6 @@ function render (props) { onChange={ onChange } /> ); - select = component.find('Select'); return component; } @@ -48,23 +46,5 @@ describe('ui/Form/TypedInput', () => { it('renders', () => { expect(component).to.be.ok; }); - - it('calls onChange when value changes', () => { - select.shallow().simulate('change', { target: { value: 'true' } }); - - expect(onChange).to.have.been.called; - }); - - it("calls onChange(true) when value changes to 'true'", () => { - select.shallow().simulate('change', { target: { value: 'true' } }); - - expect(onChange).to.have.been.calledWith(true); - }); - - it("calls onChange(false) when value changes to 'false'", () => { - select.shallow().simulate('change', { target: { value: 'false' } }); - - expect(onChange).to.have.been.calledWith(false); - }); }); }); diff --git a/js/src/ui/Form/index.js b/js/src/ui/Form/index.js index 0a6995104..aee64a1e2 100644 --- a/js/src/ui/Form/index.js +++ b/js/src/ui/Form/index.js @@ -29,7 +29,7 @@ export InputInline from './InputInline'; export InputTime from './InputTime'; export Label from './Label'; export RadioButtons from './RadioButtons'; -export Select from './Select'; +export Toggle from './Toggle'; export TypedInput from './TypedInput'; export VaultSelect from './VaultSelect'; diff --git a/js/src/ui/LanguageSelector/languageSelector.js b/js/src/ui/LanguageSelector/languageSelector.js index 369ca6f28..89adb5776 100644 --- a/js/src/ui/LanguageSelector/languageSelector.js +++ b/js/src/ui/LanguageSelector/languageSelector.js @@ -14,7 +14,6 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import { MenuItem } from 'material-ui'; import { observer } from 'mobx-react'; import React, { Component } from 'react'; import { FormattedMessage } from 'react-intl'; @@ -22,7 +21,7 @@ import { FormattedMessage } from 'react-intl'; import { LocaleStore } from '~/i18n'; import { FeaturesStore, FEATURES } from '../Features'; -import Select from '../Form/Select'; +import Dropdown from '../Form/Dropdown'; @observer export default class LanguageSelector extends Component { @@ -35,7 +34,7 @@ export default class LanguageSelector extends Component { } return ( - + options={ + this.store.locales.map((locale) => { + return { + key: locale, + value: locale, + text: locale, + content: + }; + }) + } + /> ); } - renderOptions () { - return this.store.locales.map((locale) => { - const label = ; - - return ( - - { label } - - ); - }); - } - onChange = (event, index, locale) => { this.store.setLocale(locale || event.target.value); } diff --git a/js/src/ui/LanguageSelector/langugeSelector.spec.js b/js/src/ui/LanguageSelector/langugeSelector.spec.js index 6c45413a9..c4113b300 100644 --- a/js/src/ui/LanguageSelector/langugeSelector.spec.js +++ b/js/src/ui/LanguageSelector/langugeSelector.spec.js @@ -46,7 +46,7 @@ describe('LanguageSelector', () => { sinon.stub(localeStore, 'setLocale'); render(); - select = component.find('Select'); + select = component.find('Dropdown'); }); afterEach(() => { @@ -58,7 +58,7 @@ describe('LanguageSelector', () => { }); it('has locale items', () => { - expect(select.find('MenuItem').length > 0).to.be.true; + expect(select.props().options.length > 0).to.be.true; }); it('calls localeStore.setLocale when changed', () => { diff --git a/js/src/ui/index.js b/js/src/ui/index.js index bd5f29bb7..f5ed13e00 100644 --- a/js/src/ui/index.js +++ b/js/src/ui/index.js @@ -33,7 +33,7 @@ export DappIcon from './DappIcon'; export DappLink from './DappLink'; export Errors from './Errors'; export Features, { FEATURES, FeaturesStore } from './Features'; -export Form, { AddressSelect, Checkbox, DappUrlInput, Dropdown, FileSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput, VaultSelect } from './Form'; +export Form, { AddressSelect, Checkbox, DappUrlInput, Dropdown, FileSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Toggle, TypedInput, VaultSelect } from './Form'; export GasPriceEditor from './GasPriceEditor'; export GasPriceSelector from './GasPriceSelector'; export IconCache from './IconCache'; diff --git a/js/src/views/Account/PasswordManager/passwordManager.css b/js/src/views/Account/PasswordManager/passwordManager.css index f16f4f369..61f4cb4b1 100644 --- a/js/src/views/Account/PasswordManager/passwordManager.css +++ b/js/src/views/Account/PasswordManager/passwordManager.css @@ -62,13 +62,15 @@ } .message { + border: 1px solid #ddd; margin-top: 1rem; width: 100%; height: 2.5rem; text-align: center; line-height: 2.5rem; - transition: height 350ms 0 !important; + transition: height 350ms 0; overflow: hidden; + z-index: 1; } .hideMessage { diff --git a/js/src/views/Account/PasswordManager/passwordManager.js b/js/src/views/Account/PasswordManager/passwordManager.js index 3201f57e0..47407cbb4 100644 --- a/js/src/views/Account/PasswordManager/passwordManager.js +++ b/js/src/views/Account/PasswordManager/passwordManager.js @@ -14,7 +14,6 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import Paper from 'material-ui/Paper'; import { Menu, Segment } from 'semantic-ui-react'; import { observer } from 'mobx-react'; import React, { Component, PropTypes } from 'react'; @@ -89,17 +88,16 @@ class PasswordManager extends Component { } return ( - { infoMessage.value } - +
); } diff --git a/js/src/views/Account/Transfer/Details/tokenSelect.js b/js/src/views/Account/Transfer/Details/tokenSelect.js index 7f18e304b..ba3e9b778 100644 --- a/js/src/views/Account/Transfer/Details/tokenSelect.js +++ b/js/src/views/Account/Transfer/Details/tokenSelect.js @@ -17,10 +17,9 @@ import BigNumber from 'bignumber.js'; import React, { Component, PropTypes } from 'react'; import { connect } from 'react-redux'; -import { MenuItem } from 'material-ui'; import { isEqual } from 'lodash'; -import { Select } from '~/ui/Form'; +import { Dropdown } from '~/ui/Form'; import TokenImage from '~/ui/TokenImage'; import styles from '../transfer.css'; @@ -89,15 +88,12 @@ class TokenSelect extends Component { ); - return ( - - { label } - - ); + return { + key: tokenId, + text: label, + value: token.id, + content: label + }; }) .filter((node) => node); @@ -109,15 +105,14 @@ class TokenSelect extends Component { const { items } = this.state; return ( - + options={ items } + /> ); } } diff --git a/js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js b/js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js index 9bb5ab3bc..6e42bc9cf 100644 --- a/js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js +++ b/js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js @@ -14,11 +14,10 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import { MenuItem } from 'material-ui'; import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; -import { AddressSelect, Checkbox, Form, Input, Select, TypedInput } from '~/ui'; +import { AddressSelect, Checkbox, Dropdown, Form, Input, TypedInput } from '~/ui'; import styles from '../executeContract.css'; @@ -123,16 +122,15 @@ export default class DetailsStep extends Component { .filter((func) => !func.constant) .sort((a, b) => (a.name || '').localeCompare(b.name || '')) .map((func) => { - const params = (func.abi.inputs || []) - .map((input, index) => { - return ( - - { index ? ', ' : '' } - { input.name }: - { input.type } - - ); - }); + const params = (func.abi.inputs || []).map((input, index) => { + return ( + + { index ? ', ' : '' } + { input.name }: + { input.type } + + ); + }); const name = (
{ func.name } @@ -142,19 +140,16 @@ export default class DetailsStep extends Component {
); - return ( - - { name } - - ); + return { + key: func.signature, + text: func.name || '()', + value: func.signature, + content: name + }; }); return ( - + options={ functions } + /> ); } diff --git a/js/src/views/Contract/Queries/inputQuery.js b/js/src/views/Contract/Queries/inputQuery.js index c45effc17..c0826ff66 100644 --- a/js/src/views/Contract/Queries/inputQuery.js +++ b/js/src/views/Contract/Queries/inputQuery.js @@ -17,7 +17,6 @@ import { isEqual } from 'lodash'; import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; -import { Card, CardActions, CardTitle, CardText } from 'material-ui/Card'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; @@ -25,7 +24,7 @@ import { newError } from '@parity/shared/redux/actions'; import { arrayOrObjectProptype } from '@parity/shared/util/proptypes'; import { parseAbiType } from '@parity/shared/util/abi'; -import { Button, Progress, TypedInput } from '~/ui'; +import { Button, Container, Progress, TypedInput } from '~/ui'; import styles from './queries.css'; @@ -79,13 +78,10 @@ class InputQuery extends Component { const { name, className } = this.props; return ( - - + +

{ name }

{ this.renderContent() } - + ); } @@ -98,13 +94,13 @@ class InputQuery extends Component { return (
- +
{ this.renderResults() }
{ inputsFields } - - +
+
); } diff --git a/js/src/views/Contract/Queries/queries.css b/js/src/views/Contract/Queries/queries.css index 430b95601..67a380f26 100644 --- a/js/src/views/Contract/Queries/queries.css +++ b/js/src/views/Contract/Queries/queries.css @@ -55,6 +55,10 @@ padding-bottom: 8px !important; } +.methodActions { + text-align: right; +} + .methodResults { } diff --git a/js/src/views/Contract/Queries/queries.js b/js/src/views/Contract/Queries/queries.js index eef428eed..58618870f 100644 --- a/js/src/views/Contract/Queries/queries.js +++ b/js/src/views/Contract/Queries/queries.js @@ -16,7 +16,6 @@ import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; -import { Card, CardTitle, CardText } from 'material-ui/Card'; import InputQuery from './inputQuery'; import { Container, TypedInput } from '~/ui'; @@ -120,21 +119,18 @@ export default class Queries extends Component { } return ( -
- - - +
+ +

{ fn.name }

+
{ - abi.outputs - .map((output, index) => this.renderValue(values[index], output, index)) + abi.outputs.map((output, index) => this.renderValue(values[index], output, index)) } - - +
+
); } diff --git a/js/src/views/ContractDevelop/contractDevelop.js b/js/src/views/ContractDevelop/contractDevelop.js index 0d7345215..83a546692 100644 --- a/js/src/views/ContractDevelop/contractDevelop.js +++ b/js/src/views/ContractDevelop/contractDevelop.js @@ -17,12 +17,11 @@ import React, { PropTypes, Component } from 'react'; import { FormattedMessage } from 'react-intl'; import { observer } from 'mobx-react'; -import { MenuItem, Toggle } from 'material-ui'; import { connect } from 'react-redux'; import moment from 'moment'; import { throttle } from 'lodash'; -import { Actionbar, ActionbarExport, ActionbarImport, Button, Input, Loading, Page, Select } from '~/ui'; +import { Actionbar, ActionbarExport, ActionbarImport, Button, Dropdown, Input, Loading, Page, Toggle } from '~/ui'; import { CancelIcon, ListIcon, SaveIcon, SendIcon, SettingsIcon } from '~/ui/Icons'; import Editor from '~/ui/Editor'; @@ -405,27 +404,9 @@ class ContractDevelop extends Component { renderSolidityVersions () { const { builds, selectedBuild } = this.store; - const buildsList = builds.map((build, index) => ( - - { - build.release - ? ( - - { build.version } - - ) - : build.longVersion - } - - )); - return (
- + options={ + builds.map((build, index) => { + return { + key: index, + text: build.release ? build.version : build.longVersion, + value: index, + content: + build.release + ? ( + + { build.version } + + ) + : build.longVersion + }; + }) + } + />
); } @@ -546,19 +542,9 @@ class ContractDevelop extends Component { ); } - const contractsList = contractKeys.map((name, index) => ( - - { name } - - )); - return (
- + options={ + contractKeys.map((name, index) => { + return { + key: index, + value: index, + text: name + }; + }) + } + /> { this.renderContract(contract) }

( - - { name } - - )); return ( - + options={ + Object + .keys(contracts) + .map((name, index) => { + return { + key: index, + text: name, + value: index + }; + }) + } + /> ); } diff --git a/js/src/views/Settings/Node/node.js b/js/src/views/Settings/Node/node.js index 9fa403e10..61598a7cf 100644 --- a/js/src/views/Settings/Node/node.js +++ b/js/src/views/Settings/Node/node.js @@ -14,12 +14,12 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import { Dropdown, Menu } from 'semantic-ui-react'; +import { Menu } from 'semantic-ui-react'; import { observer } from 'mobx-react'; import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; -import { Select, Container, LanguageSelector } from '~/ui'; +import { Container, Dropdown, LanguageSelector } from '~/ui'; import Features, { FeaturesStore, FEATURES } from '~/ui/Features'; import Store, { LOGLEVEL_OPTIONS } from './store'; @@ -68,16 +68,12 @@ export default class Node extends Component { } renderItem (name, func, label) { - return ( - - { label } - - ); + return { + key: name, + text: name, + value: name, + content: label + }; } renderLogsConfig () { @@ -118,7 +114,7 @@ export default class Node extends Component { return (

{ desc }

-