All files / app/containers CommitsActionMenu.tsx

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                                        3x                   3x     5x 5x                   1x                 1x                     2x 2x     3x            
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { style } from 'app/styles';
 
import { DispatchProps } from 'app/interfaces';
import { getCommitsActionMenuState } from 'app/selectors';
import { RadioMenuItem } from 'app/components/RadioMenuItem';
import { ActionMenu } from 'app/components/ActionMenu';
 
import { setCommitsContainerSort } from 'app/actions';
import { CommitsContainerSorts } from 'app/actions/ActionTypes';
 
interface CommitsActionMenuProps {
  commitsContainerSort?: CommitsContainerSorts;
}
 
interface CommitsActionMenuState {
  isMenuOpen: boolean;
}
 
const containerStyle = {
  _extends: 'normalText',
  position: 'absolute',
  right: 10,
};
 
export class CommitsActionMenu extends Component<
  CommitsActionMenuProps & DispatchProps,
  CommitsActionMenuState
> {
  readonly state = { isMenuOpen: false };
 
  render() {
    const { commitsContainerSort } = this.props;
    return (
      <ActionMenu
        style={style(containerStyle)}
        isMenuOpen={this.state.isMenuOpen}
        onMenuToggle={this.onMenuToggle}
      >
        <div style={style('h5Text')}>Sort by</div>
        <RadioMenuItem
          testId="sortTime"
          onClick={() => {
            this.sortCommits(CommitsContainerSorts.TIME);
          }}
          isSelected={commitsContainerSort === CommitsContainerSorts.TIME}
        >
          by time
        </RadioMenuItem>
        <RadioMenuItem
          testId="sortLines"
          onClick={() => {
            this.sortCommits(CommitsContainerSorts.LINES);
          }}
          isSelected={commitsContainerSort === CommitsContainerSorts.LINES}
        >
          by lines changed
        </RadioMenuItem>
      </ActionMenu>
    );
  }
 
  sortCommits(newCommitsContainerSort: CommitsContainerSorts) {
    this.props.dispatch(setCommitsContainerSort(newCommitsContainerSort));
    this.setState({ isMenuOpen: false });
  }
 
  onMenuToggle = () => {
    this.setState({ isMenuOpen: !this.state.isMenuOpen });
  };
}
 
export default connect(getCommitsActionMenuState)(CommitsActionMenu);