aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/page-container
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/page-container')
-rw-r--r--ui/app/components/page-container/index.js1
-rw-r--r--ui/app/components/page-container/page-container-content.component.js18
-rw-r--r--ui/app/components/page-container/page-container-footer/index.js1
-rw-r--r--ui/app/components/page-container/page-container-footer/page-container-footer.component.js54
-rw-r--r--ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js0
-rw-r--r--ui/app/components/page-container/page-container-header.component.js35
-rw-r--r--ui/app/components/page-container/page-container-header/index.js1
-rw-r--r--ui/app/components/page-container/page-container-header/page-container-header.component.js57
-rw-r--r--ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js0
-rw-r--r--ui/app/components/page-container/page-container.component.js72
-rw-r--r--ui/app/components/page-container/tests/page-container.component.test.js0
11 files changed, 239 insertions, 0 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
new file mode 100644
index 000000000..a1d6988cc
--- /dev/null
+++ b/ui/app/components/page-container/page-container-content.component.js
@@ -0,0 +1,18 @@
+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/page-container-footer.component.js b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
new file mode 100644
index 000000000..0458ae78a
--- /dev/null
+++ b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../button'
+
+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,
+ cancelText,
+ onSubmit,
+ submitText,
+ disabled,
+ } = this.props
+
+ return (
+ <div className="page-container__footer">
+
+ <Button
+ type="default"
+ large={true}
+ className="page-container__footer-button"
+ onClick={() => onCancel()}
+ >
+ { cancelText || this.context.t('cancel') }
+ </Button>
+
+ <Button
+ type="primary"
+ large={true}
+ className="page-container__footer-button"
+ disabled={disabled}
+ onClick={e => onSubmit(e)}
+ >
+ { submitText || this.context.t('next') }
+ </Button>
+
+ </div>
+ )
+ }
+
+}
diff --git a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ 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
new file mode 100644
index 000000000..5c9d63221
--- /dev/null
+++ b/ui/app/components/page-container/page-container-header.component.js
@@ -0,0 +1,35 @@
+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/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
diff --git a/ui/app/components/page-container/page-container.component.js b/ui/app/components/page-container/page-container.component.js
new file mode 100644
index 000000000..9bfb99ade
--- /dev/null
+++ b/ui/app/components/page-container/page-container.component.js
@@ -0,0 +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 = {
+ // 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">
+ <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.component.test.js b/ui/app/components/page-container/tests/page-container.component.test.js
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/ui/app/components/page-container/tests/page-container.component.test.js