All files / posts-table/components/PostsTable/components/PostsHeader/components/PostsCountBar 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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
 
import {
  Text,
} from '@bufferapp/components';
 
import classNames from 'classnames';
 
import {
  container,
  buttonItem,
  buttonActive,
} from './style.less';
 
function getButtons (postsCounts, activePostsCount, handlePostsCountClick) {
  return postsCounts.map((button) => {
    const active = button.value === String(activePostsCount);
    const buttonClass = classNames(buttonItem, {
      [buttonActive]: active,
    });
    return (
      <li  // eslint-disable-line
        key={button.value}
        className={buttonClass}
        onClick={() => handlePostsCountClick({ postsCount: button.value })}
      >
        {button.value}
      </li>
    );
  });
}
 
const PostsCountBar = ({ postsCounts, activePostsCount, handlePostsCountClick }) => (
  <div>
    <Text size="small">Show</Text>
    <ul className={container}>
      {getButtons(postsCounts, activePostsCount, handlePostsCountClick)}
    </ul>
  </div>
);
 
PostsCountBar.propTypes = {
  postsCounts: PropTypes.arrayOf(PropTypes.shape({
    value: PropTypes.string,
  })),
  activePostsCount: PropTypes.number.isRequired,
  handlePostsCountClick: PropTypes.func.isRequired,
};
 
PostsCountBar.defaultProps = {
  postsCounts: [
    {
      value: '5',
    },
    {
      value: '10',
    },
    {
      value: '25',
    },
    {
      value: '50',
    },
  ],
};
 
export default PostsCountBar;