aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/page-container/page-container.component.js
blob: 3a2274a297415fcdcd1301b91d2b8cade2a3e1ff (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import PageContainerHeader from './page-container-header'
import PageContainerFooter from './page-container-footer'

export default class PageContainer extends PureComponent {
  static propTypes = {
    // PageContainerHeader props
    backButtonString: PropTypes.string,
    backButtonStyles: PropTypes.object,
    onBackButtonClick: PropTypes.func,
    onClose: PropTypes.func,
    showBackButton: PropTypes.bool,
    subtitle: PropTypes.string,
    title: PropTypes.string.isRequired,
    // Tabs-related props
    defaultActiveTabIndex: PropTypes.number,
    tabsComponent: PropTypes.node,
    // Content props
    contentComponent: PropTypes.node,
    // PageContainerFooter props
    cancelText: PropTypes.string,
    disabled: PropTypes.bool,
    onCancel: PropTypes.func,
    onSubmit: PropTypes.func,
    submitText: PropTypes.string,
  }

  state = {
    activeTabIndex: this.props.defaultActiveTabIndex || 0,
  }

  handleTabClick (activeTabIndex) {
    this.setState({ activeTabIndex })
  }

  renderTabs () {
    const { tabsComponent } = this.props

    if (!tabsComponent) {
      return
    }

    const numberOfTabs = React.Children.count(tabsComponent.props.children)

    return React.Children.map(tabsComponent.props.children, (child, tabIndex) => {
      return child && React.cloneElement(child, {
        onClick: index => this.handleTabClick(index),
        tabIndex,
        isActive: numberOfTabs > 1 && tabIndex === this.state.activeTabIndex,
        key: tabIndex,
        className: 'page-container__tab',
        activeClassName: 'page-container__tab--selected',
      })
    })
  }

  renderActiveTabContent () {
    const { tabsComponent } = this.props
    const { children } = tabsComponent.props
    const { activeTabIndex } = this.state

    return children[activeTabIndex]
      ? children[activeTabIndex].props.children
      : children.props.children
  }

  renderContent () {
    const { contentComponent, tabsComponent } = this.props

    if (contentComponent) {
      return contentComponent
    } else if (tabsComponent) {
      return this.renderActiveTabContent()
    } else {
      return null
    }
  }

  render () {
    const {
      title,
      subtitle,
      onClose,
      showBackButton,
      onBackButtonClick,
      backButtonStyles,
      backButtonString,
      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}
          tabs={this.renderTabs()}
        />
        <div className="page-container__content">
          { this.renderContent() }
        </div>
        <PageContainerFooter
          onCancel={onCancel}
          cancelText={cancelText}
          onSubmit={onSubmit}
          submitText={submitText}
          disabled={disabled}
        />
      </div>
    )
  }
}