{"size": 1537, "ext": "js", "max_stars_repo_path": "react-boilerplate/app/components/FilterableList/FilterButton.js", "max_stars_repo_name": "heyrict/cindy-realtime", "max_stars_repo_stars_event_min_datetime": "2017-12-31T08:38:25.000Z", "max_stars_repo_stars_event_max_datetime": "2020-07-20T10:23:21.000Z", "max_issues_repo_path": "react-boilerplate/app/components/FilterableList/FilterButton.js", "max_issues_repo_name": "heyrict/cindy-realtime", "max_issues_repo_issues_event_min_datetime": "2017-12-31T08:17:03.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-06T20:53:32.000Z", "max_forks_repo_path": "react-boilerplate/app/components/FilterableList/FilterButton.js", "max_forks_repo_name": "heyrict/cindy-realtime", "max_forks_repo_forks_event_min_datetime": "2018-03-06T05:29:36.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-20T14:35:28.000Z"}
{"max_stars_count": 9, "max_issues_count": 7, "max_forks_count": 10, "avg_line_length": 22.6029411765, "max_line_length": 63, "alphanum_fraction": 0.5959661679}
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { FormattedMessage } from 'react-intl';
import { ButtonTransparent } from 'rebass';

import messages from './messages';

const StyledButton = styled(ButtonTransparent)`
  border-radius: 10px;
  padding: 10px 5px;
  margin: 0;
  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
`;

const IndexSpan = styled.span`
  border-radius: 9999px;
  background-color: #b58900;
  color: #fcf4dc;
  padding: 2px;
  margin: 0 3px;
`;

function FilterButton(props) {
  const { name, index, asc } = props;
  const namestr = messages[name] ? (
    <FormattedMessage {...messages[name]} />
  ) : (
    name
  );

  return (
    <div>
      <StyledButton
        onClick={() => props.onMainButtonClick(name)}
        color="gray"
        bg="white"
      >
        {index !== undefined &&
          index !== null && <IndexSpan>{index + 1}</IndexSpan>}
        {namestr}
      </StyledButton>
      {props.asc !== null &&
        props.asc !== undefined && (
          <StyledButton
            onClick={() => props.onSortButtonClick(name)}
            color="gray"
            bg="white"
          >
            {asc === true ? '↓' : '↑'}
          </StyledButton>
        )}
    </div>
  );
}

FilterButton.propTypes = {
  name: PropTypes.string.isRequired,
  index: PropTypes.number,
  asc: PropTypes.bool,
  onMainButtonClick: PropTypes.func.isRequired,
  onSortButtonClick: PropTypes.func.isRequired,
};

export default FilterButton;
