|
|
|
@ -1,16 +1,70 @@ |
|
|
|
|
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> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|