aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/page-container/page-container.component.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/page-container/page-container.component.js')
-rw-r--r--ui/app/components/page-container/page-container.component.js60
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>
- );
+ )
}
}