diff options
author | kumavis <aaron@kumavis.me> | 2018-06-08 01:07:36 +0800 |
---|---|---|
committer | kumavis <aaron@kumavis.me> | 2018-06-08 01:07:36 +0800 |
commit | 66b703b1a4ba25ddaf8278f020967b4d20351027 (patch) | |
tree | 41520dbc3ad35b3c9968cfc390ecb99db5456a33 /ui/app/components/page-container/page-container-header | |
parent | 2198276bd533bec767cad954ef8b21c47c0f8c09 (diff) | |
parent | 988283778a2be52640b27a359ef3fb1130e95711 (diff) | |
download | tangerine-wallet-browser-66b703b1a4ba25ddaf8278f020967b4d20351027.tar.gz tangerine-wallet-browser-66b703b1a4ba25ddaf8278f020967b4d20351027.tar.zst tangerine-wallet-browser-66b703b1a4ba25ddaf8278f020967b4d20351027.zip |
Merge branch 'develop' of github.com:MetaMask/metamask-extension into network-remove-provider-engine
Diffstat (limited to 'ui/app/components/page-container/page-container-header')
3 files changed, 58 insertions, 0 deletions
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/page-container-header/tests/page-container-header.component.test.js b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js |