diff options
Diffstat (limited to 'ui/app/components')
12 files changed, 136 insertions, 66 deletions
diff --git a/ui/app/components/page-container/index.js b/ui/app/components/page-container/index.js new file mode 100644 index 000000000..415870b37 --- /dev/null +++ b/ui/app/components/page-container/index.js @@ -0,0 +1 @@ +export { default } from './page-container.component' diff --git a/ui/app/components/page-container/page-container-content.component.js b/ui/app/components/page-container/page-container-content.component.js deleted file mode 100644 index ffd62894c..000000000 --- a/ui/app/components/page-container/page-container-content.component.js +++ /dev/null @@ -1,18 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' - -export default class PageContainerContent extends Component { - - static propTypes = { - children: PropTypes.node.isRequired, - }; - - render () { - return ( - <div className="page-container__content"> - {this.props.children} - </div> - ); - } - -} diff --git a/ui/app/components/page-container/page-container-footer/index.js b/ui/app/components/page-container/page-container-footer/index.js new file mode 100644 index 000000000..7825c4520 --- /dev/null +++ b/ui/app/components/page-container/page-container-footer/index.js @@ -0,0 +1 @@ +export { default } from './page-container-footer.component' diff --git a/ui/app/components/page-container/page-container-footer.component.js b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js index 0ef14c9d7..fafe1c19e 100644 --- a/ui/app/components/page-container/page-container-footer.component.js +++ b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js @@ -5,12 +5,24 @@ export default class PageContainerFooter extends Component { static propTypes = { onCancel: PropTypes.func, + cancelText: PropTypes.string, onSubmit: PropTypes.func, + submitText: PropTypes.string, disabled: PropTypes.bool, - }; + } + + static contextTypes = { + t: PropTypes.func, + } render () { - const { onCancel, onSubmit, disabled } = this.props + const { + onCancel, + cancelText, + onSubmit, + submitText, + disabled, + } = this.props return ( <div className="page-container__footer"> @@ -19,23 +31,19 @@ export default class PageContainerFooter extends Component { className="btn-secondary--lg page-container__footer-button" onClick={() => onCancel()} > - {this.context.t('cancel')} + { this.context.t('cancel') || cancelText } </button> <button className="btn-primary--lg page-container__footer-button" disabled={disabled} - onClick={(e) => onSubmit(e)} + onClick={e => onSubmit(e)} > - {this.context.t('next')} + { this.context.t('next') || submitText } </button> </div> - ); + ) } } - -PageContainerFooter.contextTypes = { - t: PropTypes.func, -} diff --git a/ui/app/components/page-container/tests/page-container-content-component.test.js b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js index e69de29bb..e69de29bb 100644 --- a/ui/app/components/page-container/tests/page-container-content-component.test.js +++ b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js diff --git a/ui/app/components/page-container/page-container-header.component.js b/ui/app/components/page-container/page-container-header.component.js deleted file mode 100644 index 9adc88fb3..000000000 --- a/ui/app/components/page-container/page-container-header.component.js +++ /dev/null @@ -1,35 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' - -export default class PageContainerHeader extends Component { - - static propTypes = { - title: PropTypes.string, - subtitle: PropTypes.string, - onClose: PropTypes.func, - }; - - render () { - const { title, subtitle, onClose } = this.props - - return ( - <div className="page-container__header"> - - <div className="page-container__title"> - {title} - </div> - - <div className="page-container__subtitle"> - {subtitle} - </div> - - <div - className="page-container__header-close" - onClick={() => onClose()} - /> - - </div> - ); - } - -} diff --git a/ui/app/components/page-container/page-container-header/index.js b/ui/app/components/page-container/page-container-header/index.js new file mode 100644 index 000000000..b194af057 --- /dev/null +++ b/ui/app/components/page-container/page-container-header/index.js @@ -0,0 +1 @@ +export { default } from './page-container-header.component' diff --git a/ui/app/components/page-container/page-container-header/page-container-header.component.js b/ui/app/components/page-container/page-container-header/page-container-header.component.js new file mode 100644 index 000000000..28882edce --- /dev/null +++ b/ui/app/components/page-container/page-container-header/page-container-header.component.js @@ -0,0 +1,57 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +export default class PageContainerHeader extends Component { + + static propTypes = { + title: PropTypes.string.isRequired, + subtitle: PropTypes.string, + onClose: PropTypes.func, + showBackButton: PropTypes.bool, + onBackButtonClick: PropTypes.func, + backButtonStyles: PropTypes.object, + backButtonString: PropTypes.string, + }; + + renderHeaderRow () { + const { showBackButton, onBackButtonClick, backButtonStyles, backButtonString } = this.props + + return showBackButton && ( + <div className="page-container__header-row"> + <span + className="page-container__back-button" + onClick={onBackButtonClick} + style={backButtonStyles} + > + { backButtonString || 'Back' } + </span> + </div> + ) + } + + render () { + const { title, subtitle, onClose } = this.props + + return ( + <div className="page-container__header"> + + { this.renderHeaderRow() } + + <div className="page-container__title"> + {title} + </div> + + <div className="page-container__subtitle"> + {subtitle} + </div> + + <div + className="page-container__header-close" + onClick={() => onClose()} + /> + + </div> + ) + } + +} diff --git a/ui/app/components/page-container/tests/page-container-footer-component.test.js b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js index e69de29bb..e69de29bb 100644 --- a/ui/app/components/page-container/tests/page-container-footer-component.test.js +++ b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js diff --git a/ui/app/components/page-container/page-container.component.js b/ui/app/components/page-container/page-container.component.js index 7df1d48d8..9bfb99ade 100644 --- a/ui/app/components/page-container/page-container.component.js +++ b/ui/app/components/page-container/page-container.component.js @@ -1,18 +1,72 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import PageContainerHeader from './page-container-header' +import PageContainerFooter from './page-container-footer' + export default class PageContainer extends Component { static propTypes = { - children: PropTypes.node.isRequired, + // PageContainerHeader props + title: PropTypes.string.isRequired, + subtitle: PropTypes.string, + onClose: PropTypes.func, + showBackButton: PropTypes.bool, + onBackButtonClick: PropTypes.func, + backButtonStyles: PropTypes.object, + backButtonString: PropTypes.string, + // Content props + ContentComponent: PropTypes.func, + contentComponentProps: PropTypes.object, + // PageContainerFooter props + onCancel: PropTypes.func, + cancelText: PropTypes.string, + onSubmit: PropTypes.func, + submitText: PropTypes.string, + disabled: PropTypes.bool, }; render () { + const { + title, + subtitle, + onClose, + showBackButton, + onBackButtonClick, + backButtonStyles, + backButtonString, + ContentComponent, + contentComponentProps, + onCancel, + cancelText, + onSubmit, + submitText, + disabled, + } = this.props + return ( <div className="page-container"> - {this.props.children} + <PageContainerHeader + title={title} + subtitle={subtitle} + onClose={onClose} + showBackButton={showBackButton} + onBackButtonClick={onBackButtonClick} + backButtonStyles={backButtonStyles} + backButtonString={backButtonString} + /> + <div className="page-container__content"> + <ContentComponent { ...contentComponentProps } /> + </div> + <PageContainerFooter + onCancel={onCancel} + cancelText={cancelText} + onSubmit={onSubmit} + submitText={submitText} + disabled={disabled} + /> </div> - ); + ) } } diff --git a/ui/app/components/page-container/tests/page-container-header-component.test.js b/ui/app/components/page-container/tests/page-container.component.test.js index e69de29bb..e69de29bb 100644 --- a/ui/app/components/page-container/tests/page-container-header-component.test.js +++ b/ui/app/components/page-container/tests/page-container.component.test.js diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js index 08c26a91f..edd0657f7 100644 --- a/ui/app/components/send/send-v2-container.js +++ b/ui/app/components/send/send-v2-container.js @@ -53,6 +53,7 @@ function mapStateToProps (state) { tokenContract: getSelectedTokenContract(state), unapprovedTxs: state.metamask.unapprovedTxs, network: state.metamask.network, + isToken: Boolean(getSelectedToken(state)), } } |