diff options
Diffstat (limited to 'ui/app/components/page-container/page-container.component.js')
-rw-r--r-- | ui/app/components/page-container/page-container.component.js | 60 |
1 files changed, 57 insertions, 3 deletions
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> - ); + ) } } |