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:
35
js/src/ui/ModalBox/body.js
Normal file
35
js/src/ui/ModalBox/body.js
Normal 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
|
||||
};
|
||||
@@ -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()
|
||||
};
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
37
js/src/ui/ModalBox/summary.js
Normal file
37
js/src/ui/ModalBox/summary.js
Normal 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()
|
||||
};
|
||||
Reference in New Issue
Block a user