TopPostsDropdown index.jsx

33.33% Statements 4/12
0% Branches 0/6
0% Functions 0/3
33.33% Lines 4/12

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
  import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
 
import Dropdown, {
  DropdownTrigger,
  DropdownContent,
} from '@bufferapp/react-simple-dropdown';
 
import {
  ArrowDownIcon,
  ArrowUpIcon,
  Text,
} from '@bufferapp/components';
 
import {
  dropdownContainer,
  dropdownContent,
  dropdownContentActive,
  dropdownList,
  dropdownTrigger,
  dropdownTriggerActive,
} from './style.less';
 
import DropdownItem from './components/DropdownItem';
 
const MetricText = styled.span`
  display: inline-block;
`;
 
const TopPostsDropdown = ({
  metrics,
  selectedMetric,
  isDropdownOpen,
  selectMetric,
  toggleDropdown,
}) => {
  const contentClasses = classNames(dropdownContent, {
    [dropdownContentActive]: isDropdownOpen,
  });
 
  const triggerClasses = classNames(dropdownTrigger, {
    [dropdownTriggerActive]: isDropdownOpen,
  });
 
  if (metrics.length) {
    const dropdownListClasses = classNames(dropdownList);
    return (
      <div style={{ marginLeft: 'auto', marginRight: '1em' }}>
        <Text size="small">Sort by</Text>
        <Dropdown
          className={dropdownContainer}
          onShow={toggleDropdown}
          onHide={toggleDropdown}
        >
          <DropdownTrigger className={triggerClasses} style={{ display: 'flex' }} >
            <MetricText>
              <Text size="small" color="outerSpace" weight="medium">{selectedMetric.label}</Text>
            </MetricText>
            <span>&nbsp;</span>
            <span style={{ marginLeft: 'auto' }} >
              {isDropdownOpen && <ArrowUpIcon size="small" />}
              {!isDropdownOpen && <ArrowDownIcon size="small" />}
            </span>
          </DropdownTrigger>
          <DropdownContent className={contentClasses}>
            <ul className={dropdownListClasses}>
              {
                metrics.map(metric =>
                  (
                    <span key={metric.key}>
                      <DropdownItem
                        key={`${metric.key}_desc`}
                        metric={metric}
                        handleClick={() => selectMetric({ metric })}
                        selected={metric.key === selectedMetric.key}
                      />
                    </span>
                  ))
              }
            </ul>
          </DropdownContent>
        </Dropdown>
      </div>);
  }
 
  return null;
};
 
TopPostsDropdown.propTypes = {
  metrics: PropTypes.arrayOf(PropTypes.shape({
    key: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
  })).isRequired,
  selectedMetric: PropTypes.shape({
    key: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
  }).isRequired,
  isDropdownOpen: PropTypes.bool,
  // actions
  selectMetric: PropTypes.func.isRequired,
  toggleDropdown: PropTypes.func.isRequired,
};
 
TopPostsDropdown.defaultProps = {
  isDropdownOpen: false,
};
 
export default TopPostsDropdown;