react-mapfilter/src/containers/top_bar.js at e223778567103ad4304b00b579eb5610e74c8e75 · digidem/react-mapfilter · GitHub

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
import PropTypes from 'prop-types'
import React from 'react'
import AppBar from 'material-ui/AppBar'
import {defineMessages, FormattedMessage} from 'react-intl'
import assign from 'object-assign'

import CustomContainer from './custom_container'
import {SettingsButton, PrintButton} from '../components/buttons'

const styles = {
  topBar: {
    height: 56
  },
  title: {
    height: 56,
    lineHeight: '56px'
  },
  tabs: {
    flex: 1,
    maxWidth: 300,
    display: 'flex'
  },
  tab: {
    display: 'flex',
    flex: 1,
    fontFamily: 'Roboto, sans-serif',
    fontWeight: 400,
    color: 'rgba(255, 255, 255, 0.701961)',
    textDecoration: 'none',
    textTransform: 'uppercase',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    boxSizing: 'border-box',
    cursor: 'pointer'
  },
  activeTab: {
    color: 'rgba(255, 255, 255, 1)',
    fontWeight: 500,
    borderBottom: '2px solid rgb(255, 64, 129)',
    paddingTop: 2
  },
  right: {
    flex: 1,
    display: 'flex',
    justifyContent: 'flex-end',
    alignItems: 'center'
  }
}

const messages = defineMessages({
  map: {
    id: 'topbar.map',
    defaultMessage: 'Map',
    description: 'Map tab name'
  },
  media: {
    id: 'topbar.media',
    defaultMessage: 'Media',
    description: 'Media tab name'
  },
  report: {
    id: 'topbar.report',
    defaultMessage: 'Report',
    description: 'Report tab name'
  },
  table: {
    id: 'topbar.table',
    defaultMessage: 'Table',
    description: 'Table tab name'
  }
})

function TopBar ({activeView, views, onChangeTab, buttons, title}) {
  return (
    <AppBar
      className='nav container'
      title={title}
      style={styles.topBar}
      titleStyle={styles.title}
      showMenuIconButton={false}>
      <div style={styles.tabs}>
        {views.map(view => {
          var tabStyle = view.id === activeView ? assign({}, styles.tab, styles.activeTab) : styles.tab
          return <a key={view.id} style={tabStyle} onClick={onChangeTab.bind(null, view.id)}>
            <FormattedMessage {...messages[view.id]} />
          </a>
        })}
      </div>
      <div style={styles.right}>
        {buttons.map((button, i) => <CustomContainer key={i} component={button} />)}
      </div>
    </AppBar>
  )
}

TopBar.defaultProps = {
  buttons: [
    PrintButton,
    SettingsButton
  ],
  title: 'MapFilter'
}

TopBar.propTypes = {
  buttons: PropTypes.arrayOf(PropTypes.func),
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
}

export default TopBar