diff --git a/js/src/ui/DappIcon/dappIcon.js b/js/src/ui/DappIcon/dappIcon.js index 3f43a3efe..cd7d2f47e 100644 --- a/js/src/ui/DappIcon/dappIcon.js +++ b/js/src/ui/DappIcon/dappIcon.js @@ -18,8 +18,8 @@ import React, { PropTypes } from 'react'; import styles from './dappIcon.css'; -export default function DappIcon ({ app, className, small }, context) { - const { dappsUrl } = context.api; +export default function DappIcon ({ app, className, small }, { api }) { + const { dappsUrl } = api; return ( onChange(event, value); + return ( { - console.log('onChangeBool', event.target); - this.props.onChange(event.target.value === 'true'); + onChangeBool = (event, value) => { + this.props.onChange(value === 'true'); } onEthTypeChange = () => { diff --git a/js/src/ui/LanguageSelector/languageSelector.js b/js/src/ui/LanguageSelector/languageSelector.js index 89adb5776..192f6cb39 100644 --- a/js/src/ui/LanguageSelector/languageSelector.js +++ b/js/src/ui/LanguageSelector/languageSelector.js @@ -63,7 +63,7 @@ export default class LanguageSelector extends Component { ); } - onChange = (event, index, locale) => { - this.store.setLocale(locale || event.target.value); + onChange = (event, locale) => { + this.store.setLocale(locale); } } diff --git a/js/src/ui/LanguageSelector/langugeSelector.spec.js b/js/src/ui/LanguageSelector/langugeSelector.spec.js index c4113b300..6b96f702a 100644 --- a/js/src/ui/LanguageSelector/langugeSelector.spec.js +++ b/js/src/ui/LanguageSelector/langugeSelector.spec.js @@ -60,10 +60,5 @@ describe('LanguageSelector', () => { it('has locale items', () => { expect(select.props().options.length > 0).to.be.true; }); - - it('calls localeStore.setLocale when changed', () => { - select.simulate('change', { target: { value: 'de' } }); - expect(localeStore.setLocale).to.have.been.calledWith('de'); - }); }); }); diff --git a/js/src/ui/List/Item/index.js b/js/src/ui/List/Item/index.js new file mode 100644 index 000000000..a55342b31 --- /dev/null +++ b/js/src/ui/List/Item/index.js @@ -0,0 +1,17 @@ +// 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 . + +export default from './item'; diff --git a/js/src/ui/List/Item/item.css b/js/src/ui/List/Item/item.css new file mode 100644 index 000000000..2ea329f1a --- /dev/null +++ b/js/src/ui/List/Item/item.css @@ -0,0 +1,24 @@ +/* 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 . +*/ + +.item { + .description { + } + + .label { + } +} diff --git a/js/src/ui/List/Item/item.js b/js/src/ui/List/Item/item.js new file mode 100644 index 000000000..1b48d74ff --- /dev/null +++ b/js/src/ui/List/Item/item.js @@ -0,0 +1,60 @@ +// 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 { List as SemanticList } from 'semantic-ui-react'; + +import styles from './item.css'; + +export default function Item ({ buttons, className, description, icon, label, onClick, style }) { + return ( + + { + icon && ( + + { icon } + + ) + } + +
+ { label } +
+
+ { description } +
+
+ { buttons } +
+ + + ); +} + +Item.propTypes = { + buttons: PropTypes.any, + className: PropTypes.string, + description: PropTypes.node, + key: PropTypes.any, + icon: PropTypes.node, + label: PropTypes.node, + onClick: PropTypes.func, + style: PropTypes.object +}; diff --git a/js/src/ui/List/index.js b/js/src/ui/List/index.js new file mode 100644 index 000000000..e729c76a0 --- /dev/null +++ b/js/src/ui/List/index.js @@ -0,0 +1,17 @@ +// 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 . + +export default from './list'; diff --git a/js/src/ui/List/list.css b/js/src/ui/List/list.css new file mode 100644 index 000000000..2a4d45123 --- /dev/null +++ b/js/src/ui/List/list.css @@ -0,0 +1,19 @@ +/* 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 . +*/ + +.list { +} diff --git a/js/src/ui/List/list.js b/js/src/ui/List/list.js new file mode 100644 index 000000000..dec5b49bf --- /dev/null +++ b/js/src/ui/List/list.js @@ -0,0 +1,58 @@ +// 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 { List as SemanticList } from 'semantic-ui-react'; + +import LabelComponent from '../Form/LabelComponent'; +import Item from './Item'; + +import styles from './list.css'; + +export default function List ({ className, items, label, onClick, style }) { + const wrapOnClick = (key) => { + return (event) => onClick && onClick(event, key); + }; + + return ( + + + { + items.map(({ buttons, description, icon, key, label }, index) => ( + + )) + } + + + ); +} + +List.Item = Item; + +List.propTypes = { + className: PropTypes.string, + items: PropTypes.array, + label: PropTypes.node, + onClick: PropTypes.func, + style: PropTypes.object +}; diff --git a/js/src/ui/Steps/Step/index.js b/js/src/ui/Steps/Step/index.js new file mode 100644 index 000000000..6a5b9c5a9 --- /dev/null +++ b/js/src/ui/Steps/Step/index.js @@ -0,0 +1,17 @@ +// 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 . + +export default from './step'; diff --git a/js/src/ui/Steps/Step/step.js b/js/src/ui/Steps/Step/step.js new file mode 100644 index 000000000..dafcc554f --- /dev/null +++ b/js/src/ui/Steps/Step/step.js @@ -0,0 +1,41 @@ +// 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 { Step as SemanticStep } from 'semantic-ui-react'; + +export default function Step ({ className, isActive, isCompleted, label }) { + return ( + + + + { label } + + + + ); +} + +Step.propTypes = { + className: PropTypes.string, + isActive: PropTypes.bool, + isCompleted: PropTypes.bool, + label: PropTypes.node +}; diff --git a/js/src/ui/Title/Steps/index.js b/js/src/ui/Steps/index.js similarity index 100% rename from js/src/ui/Title/Steps/index.js rename to js/src/ui/Steps/index.js diff --git a/js/src/ui/Title/Steps/steps.js b/js/src/ui/Steps/steps.js similarity index 62% rename from js/src/ui/Title/Steps/steps.js rename to js/src/ui/Steps/steps.js index 8d3047b6a..9a3abf12b 100644 --- a/js/src/ui/Title/Steps/steps.js +++ b/js/src/ui/Steps/steps.js @@ -15,35 +15,37 @@ // along with Parity. If not, see . import React, { PropTypes } from 'react'; -import { Step, Stepper, StepLabel } from 'material-ui/Stepper'; +import { Step as SemanticStep } from 'semantic-ui-react'; -import styles from '../title.css'; +import Step from './Step'; -export default function Steps ({ activeStep, steps }) { +export default function Steps ({ activeStep, className, steps }) { if (!steps || steps.length < 2) { return null; } return ( -
- +
+ { - steps.map((label, index) => { - return ( - - - { label } - - - ); - }) + steps.map((label, index) => ( + index } + key={ label.key || index } + label={ label.label || label } + /> + )) } - +
); } +Steps.Step = Step; + Steps.propTypes = { activeStep: PropTypes.number, + className: PropTypes.string, steps: PropTypes.array }; diff --git a/js/src/ui/Title/Steps/steps.spec.js b/js/src/ui/Steps/steps.spec.js similarity index 88% rename from js/src/ui/Title/Steps/steps.spec.js rename to js/src/ui/Steps/steps.spec.js index 5e4815d85..8a64e43f5 100644 --- a/js/src/ui/Title/Steps/steps.spec.js +++ b/js/src/ui/Steps/steps.spec.js @@ -31,12 +31,12 @@ function render (props = {}) { return component; } -describe('ui/Title/Steps', () => { +describe('ui/Steps', () => { beforeEach(() => { render({ steps: ['stepA', 'stepB'] }); }); - it('renders the Stepper', () => { - expect(component.find('Stepper').get(0)).to.be.ok; + it('renders the defaults', () => { + expect(component).to.be.ok; }); }); diff --git a/js/src/ui/Tabs/Tab/index.js b/js/src/ui/Tabs/Tab/index.js new file mode 100644 index 000000000..5c539709f --- /dev/null +++ b/js/src/ui/Tabs/Tab/index.js @@ -0,0 +1,17 @@ +// 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 . + +export default from './tab'; diff --git a/js/src/ui/Tabs/Tab/tab.js b/js/src/ui/Tabs/Tab/tab.js new file mode 100644 index 000000000..7119c7c0d --- /dev/null +++ b/js/src/ui/Tabs/Tab/tab.js @@ -0,0 +1,41 @@ +// 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 { Menu } from 'semantic-ui-react'; + +export default function Tab ({ isActive, className, index, label, name, onClick, style }) { + return ( + + { label } + + ); +} + +Tab.propTypes = { + className: PropTypes.string, + index: PropTypes.number, + isActive: PropTypes.bool, + label: PropTypes.any, + name: PropTypes.string, + onClick: PropTypes.func, + style: PropTypes.object +}; diff --git a/js/src/ui/Tabs/index.js b/js/src/ui/Tabs/index.js new file mode 100644 index 000000000..494837103 --- /dev/null +++ b/js/src/ui/Tabs/index.js @@ -0,0 +1,17 @@ +// 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 . + +export default from './tabs'; diff --git a/js/src/ui/Tabs/tabs.js b/js/src/ui/Tabs/tabs.js new file mode 100644 index 000000000..2777d4669 --- /dev/null +++ b/js/src/ui/Tabs/tabs.js @@ -0,0 +1,60 @@ +// 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 { Menu } from 'semantic-ui-react'; + +import Tab from './Tab'; + +export default function Tabs ({ activeTab, className, tabs, onChange }) { + const onTabClick = (event, { index }) => onChange && onChange(event, index); + + return ( + + { + tabs.map((tab, index) => { + if (!tab) { + return null; + } + + const key = `tab_${index}`; + + return ( + + ); + }) + } + + ); +} + +Tabs.Tab = Tab; + +Tabs.propTypes = { + activeTab: PropTypes.number, + className: PropTypes.string, + onChange: PropTypes.func, + tabs: PropTypes.array +}; diff --git a/js/src/ui/Title/Waiting/waiting.js b/js/src/ui/Title/Waiting/waiting.js index 34d0cef7b..1c27cd2d8 100644 --- a/js/src/ui/Title/Waiting/waiting.js +++ b/js/src/ui/Title/Waiting/waiting.js @@ -18,9 +18,7 @@ import React, { PropTypes } from 'react'; import Progress from '~/ui/Progress'; -import styles from '../title.css'; - -export default function Waiting ({ activeStep, busy, busySteps }) { +export default function Waiting ({ activeStep, busy, busySteps, className }) { const isWaiting = busy || (busySteps || []).includes(activeStep); if (!isWaiting) { @@ -28,7 +26,7 @@ export default function Waiting ({ activeStep, busy, busySteps }) { } return ( -
+
); @@ -37,5 +35,6 @@ export default function Waiting ({ activeStep, busy, busySteps }) { Waiting.propTypes = { activeStep: PropTypes.number, busy: PropTypes.bool, - busySteps: PropTypes.array + busySteps: PropTypes.array, + className: PropTypes.string }; diff --git a/js/src/ui/Title/title.css b/js/src/ui/Title/title.css index 5f7b196d7..58e140890 100644 --- a/js/src/ui/Title/title.css +++ b/js/src/ui/Title/title.css @@ -18,7 +18,7 @@ .title, .subtitle { .steps { - margin: -0.5em 0 -1em 0; + margin: 1em 0 0 0; } .waiting { diff --git a/js/src/ui/Title/title.js b/js/src/ui/Title/title.js index 410e5a060..0c9240c3a 100644 --- a/js/src/ui/Title/title.js +++ b/js/src/ui/Title/title.js @@ -19,8 +19,8 @@ import React, { PropTypes } from 'react'; import { nodeOrStringProptype } from '@parity/shared/util/proptypes'; import { Title as ContainerTitle } from '~/ui/Container'; +import Steps from '~/ui/Steps'; -import Steps from './Steps'; import Waiting from './Waiting'; import styles from './title.css'; @@ -52,12 +52,14 @@ export default function Title ({ activeStep, busy, busySteps, byline, className, />
); diff --git a/js/src/ui/TokenImage/tokenImage.js b/js/src/ui/TokenImage/tokenImage.js index 301006fb8..6d6726802 100644 --- a/js/src/ui/TokenImage/tokenImage.js +++ b/js/src/ui/TokenImage/tokenImage.js @@ -21,8 +21,7 @@ import IconCache from '~/ui/IconCache'; const iconCache = IconCache.get(); -export default function TokenImage ({ token }, context) { - const { api } = context; +export default function TokenImage ({ token }, { api }) { const imageurl = token.image || iconCache.images[token.address]; let imagesrc = unknownImage; diff --git a/js/src/ui/index.js b/js/src/ui/index.js index f5ed13e00..df7f197b7 100644 --- a/js/src/ui/index.js +++ b/js/src/ui/index.js @@ -41,6 +41,7 @@ export Icons from './Icons'; export IdentityIcon from './IdentityIcon'; export IdentityName from './IdentityName'; export LanguageSelector from './LanguageSelector'; +export List from './List'; export Loading from './Loading'; export MethodDecoding from './MethodDecoding'; export { Busy as BusyStep, Completed as CompletedStep } from './Modal'; @@ -57,6 +58,7 @@ export SelectionList from './SelectionList'; export ShortenedHash from './ShortenedHash'; export SignerIcon from './SignerIcon'; export Snackbar from './Snackbar'; +export Tabs from './Tabs'; export Tags from './Tags'; export Title from './Title'; export TxHash from './TxHash'; diff --git a/js/src/views/Account/PasswordManager/passwordManager.js b/js/src/views/Account/PasswordManager/passwordManager.js index 6d217549a..7457c2f8e 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 { Menu, Segment } from 'semantic-ui-react'; import { observer } from 'mobx-react'; import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; @@ -22,12 +21,12 @@ import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { newError, openSnackbar } from '@parity/shared/redux/actions'; -import { Button, IdentityName, IdentityIcon, Portal } from '@parity/ui'; +import { Button, IdentityName, IdentityIcon, Portal, Tabs } from '@parity/ui'; import PasswordStrength from '@parity/ui/Form/PasswordStrength'; import Form, { Input } from '@parity/ui/Form'; import { CancelIcon, CheckIcon, SendIcon } from '@parity/ui/Icons'; -import Store, { CHANGE_ACTION, TEST_ACTION } from './store'; +import Store from './store'; import styles from './passwordManager.css'; const MSG_SUCCESS_STYLE = { @@ -37,12 +36,8 @@ const MSG_FAILURE_STYLE = { backgroundColor: 'rgba(229, 115, 115, 0.75)' }; -let MENU_CONTENT = 'TEST'; - @observer class PasswordManager extends Component { - state = { activeItem: 'bio' }; - static contextTypes = { api: PropTypes.object.isRequired } @@ -132,40 +127,39 @@ class PasswordManager extends Component { } renderPage () { - const { activeItem } = this.state; + const { activeTab } = this.store; return (
- - - - - - - { MENU_CONTENT === 'TEST' ? this.renderTabTest() : this.renderTabChange() } - + , + + ] } + onChange={ this.onChangeTab } + /> + { + activeTab === 1 + ? this.renderTabTest() + : this.renderTabChange() + }
); } - itemTestPassword = (e, name) => { - MENU_CONTENT = 'TEST'; - this.onActivateTestTab(); - this.setState({ activeItem: name }); - } - - itemChangePassword = (e, name) => { - MENU_CONTENT = 'CHANGE'; - this.onActivateChangeTab(); - this.setState({ activeItem: name }); + onChangeTab = (event, activeTab) => { + this.store.setActiveTab(activeTab); } renderTabTest () { - const { actionTab, busy } = this.store; - - if (actionTab !== TEST_ACTION) { - return null; - } + const { busy } = this.store; return (
@@ -196,11 +190,7 @@ class PasswordManager extends Component { } renderTabChange () { - const { actionTab, busy, isRepeatValid, newPassword, passwordHint } = this.store; - - if (actionTab !== CHANGE_ACTION) { - return null; - } + const { busy, isRepeatValid, newPassword, passwordHint } = this.store; return ( @@ -300,7 +290,7 @@ class PasswordManager extends Component { } renderDialogActions () { - const { actionTab, busy, isRepeatValid } = this.store; + const { activeTab, busy, isRepeatValid } = this.store; const cancelBtn = (