Extract i18n from shared UI components (#4834)

* Actionbar i18n

* ui Errors i18n

* Features i18n

* GapPriceSelector i18n

* WIP

* WIP #2

* Update methodDecoding

* ModalBox -> functional

* Signer pages i18n (missed previously)

* Update ModalBox tests

* Update variable
This commit is contained in:
Jaco Greeff
2017-03-10 12:04:40 +01:00
committed by GitHub
parent d98b7aab61
commit 4e5fd92e67
13 changed files with 452 additions and 199 deletions

View File

@@ -0,0 +1,35 @@
// 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 <http://www.gnu.org/licenses/>.
import React, { PropTypes } from 'react';
import styles from './modalBox.css';
export default function Body ({ children }) {
if (!children) {
return null;
}
return (
<div className={ styles.body }>
{ children }
</div>
);
}
Body.propTypes = {
children: PropTypes.node
};

View File

@@ -14,60 +14,30 @@
// 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 React, { PropTypes } from 'react';
import { nodeOrStringProptype } from '~/util/proptypes';
import Body from './body';
import Summary from './summary';
import styles from './modalBox.css';
export default class ModalBox extends Component {
static propTypes = {
children: PropTypes.node,
icon: PropTypes.node.isRequired,
summary: nodeOrStringProptype()
}
render () {
const { icon } = this.props;
return (
<div className={ styles.body }>
<div className={ styles.icon }>
{ icon }
</div>
<div className={ styles.content }>
{ this.renderSummary() }
{ this.renderBody() }
</div>
export default function ModalBox ({ children, icon, summary }) {
return (
<div className={ styles.body }>
<div className={ styles.icon }>
{ icon }
</div>
);
}
renderBody () {
const { children } = this.props;
if (!children) {
return null;
}
return (
<div className={ styles.body }>
{ children }
<div className={ styles.content }>
<Summary summary={ summary } />
<Body children={ children } />
</div>
);
}
renderSummary () {
const { summary } = this.props;
if (!summary) {
return null;
}
return (
<div className={ styles.summary }>
{ summary }
</div>
);
}
</div>
);
}
ModalBox.propTypes = {
children: PropTypes.node,
icon: PropTypes.node.isRequired,
summary: nodeOrStringProptype()
};

View File

@@ -21,12 +21,16 @@ import ModalBox from './';
let component;
const CHILDREN = <div id='testChild'>testChild</div>;
const ICON = <div id='testIcon'>testIcon</div>;
const SUMMARY = <div id='testSummary'>testSummary</div>;
function render () {
component = shallow(
<ModalBox
children={ <div id='testChild'>testChild</div> }
icon={ <div id='testIcon'>testIcon</div> }
summary={ <div id='testSummary'>testSummary</div> }
children={ CHILDREN }
icon={ ICON }
summary={ SUMMARY }
/>
);
@@ -42,15 +46,17 @@ describe('ui/ModalBox', () => {
expect(component).to.be.ok;
});
it('adds the children as supplied', () => {
expect(component.find('#testChild').text()).to.equal('testChild');
});
it('adds the icon as supplied', () => {
expect(component.find('#testIcon').text()).to.equal('testIcon');
});
it('adds the summary as supplied', () => {
expect(component.find('#testSummary').text()).to.equal('testSummary');
describe('components', () => {
it('adds the Body as supplied', () => {
expect(component.find('Body').props().children).to.deep.equal(CHILDREN);
});
it('adds the Summary as supplied', () => {
expect(component.find('Summary').props().summary).to.deep.equal(SUMMARY);
});
});
});

View File

@@ -0,0 +1,37 @@
// 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 <http://www.gnu.org/licenses/>.
import React from 'react';
import { nodeOrStringProptype } from '~/util/proptypes';
import styles from './modalBox.css';
export default function Summary ({ summary }) {
if (!summary) {
return null;
}
return (
<div className={ styles.summary }>
{ summary }
</div>
);
}
Summary.propTypes = {
summary: nodeOrStringProptype()
};