All files / hourly-chart/components/Dropdown List.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
72
73
74
75
76
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
1x
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
1x
 
 
 
 
 
 
 
 
1x
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
import {
  Text,
  Button,
} from '@bufferapp/components';
 
import ColorIcon from '../ColorIcon';
 
const dropdownItem = {
  listStyle: 'none',
  padding: '10px',
};
 
const dropdownItemContent = {
  width: '100%',
  display: 'inline-block',
  textAlign: 'left',
};
 
const DropdownItem = ({ metric, handleClick }) => (
  <li style={dropdownItem}>
    <Button noStyle fillContainer onClick={handleClick}>
      <span style={dropdownItemContent}>
        <ColorIcon metric={metric.label} circle />
        <Text size="small">{metric.label}</Text>
      </span>
    </Button>
  </li>
);
 
DropdownItem.defaultProps = {
  metric: {},
  handleClick: () => {},
};
 
DropdownItem.propTypes = {
  metric: PropTypes.shape({
    label: PropTypes.string,
    color: PropTypes.string,
    hourlyMetrics: PropTypes.arrayOf(PropTypes.number),
  }),
  handleClick: PropTypes.func,
};
 
const dropdownList = {
  padding: 0,
  margin: 0,
};
 
const List = ({ metrics, selectMetric }) => (
  <ol style={dropdownList}>
    { metrics.map(metric =>
      <DropdownItem
        key={metric.label}
        metric={metric}
        handleClick={() => selectMetric(metric.label)}
      />)}
  </ol>
);
 
List.defaultProps = {
  metrics: []
};
 
List.propTypes = {
  selectMetric: PropTypes.func.isRequired,
  metrics: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
    color: PropTypes.string,
    hourlyMetrics: PropTypes.arrayOf(PropTypes.number),
  })),
};
 
export default List;