All files / hourly-chart/components/Dropdown index.jsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
1x
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
 
import {
  ArrowDownIcon,
  ArrowUpIcon,
  Text,
} from '@bufferapp/components';
 
import Dropdown, {
  DropdownContent,
} from '@bufferapp/analyze-shared-components/Dropdown';
 
import List from './List';
import ColorIcon from '../ColorIcon';
 
const triggerContainer = {
  padding: '5px 0',
  display: 'flex',
  alignItems: 'center',
  width: '100%',
};
 
const dropdown = {
  width: '16rem',
  display: 'inline-block',
};
 
const MetricDropdown =
  ({ metrics, open, selectedMetricData, toggleDropdown, selectMetric }) => (
    <div style={dropdown}>
      <Dropdown toggleDropdown={toggleDropdown} isDropdownOpen={open}>
        <div style={triggerContainer}>
          <ColorIcon metric={selectedMetricData.label} circle />
          <Text weight="medium" size="small" color="outerSpace">{selectedMetricData.label}</Text>
          <span style={{ marginLeft: 'auto' }} >
            { open && <ArrowUpIcon size="small" /> }
            { !open && <ArrowDownIcon size="small" /> }
          </span>
        </div>
        <DropdownContent isDropdownOpen={open}>
          <List
            metrics={metrics}
            selectedMetricData={selectedMetricData}
            selectMetric={selectMetric}
          />
        </DropdownContent>
      </Dropdown>
    </div>
  );
 
MetricDropdown.defaultProps = {
  metrics: [],
  open: false
};
 
MetricDropdown.propTypes = {
  open: PropTypes.bool,
  selectedMetricData: PropTypes.shape({
    label: PropTypes.string,
    hourlyMetrics: PropTypes.arrayOf(PropTypes.number),
  }).isRequired,
  selectMetric: PropTypes.func.isRequired,
  toggleDropdown: PropTypes.func.isRequired,
  metrics: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
    hourlyMetrics: PropTypes.arrayOf(PropTypes.number),
  })),
};
export default MetricDropdown;