All files / app/containers FilesActionMenu.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 76 77 78 79 80 81 82 83 84                                        3x                   4x     7x 7x                   1x                 1x                 1x                     3x 3x     4x            
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { style } from 'app/styles';
 
import { DispatchProps } from 'app/interfaces';
import { getFilesActionMenuState } from 'app/selectors';
import { RadioMenuItem } from 'app/components/RadioMenuItem';
import { ActionMenu } from 'app/components/ActionMenu';
 
import { setFilesContainerSort } from 'app/actions';
import { FilesContainerSorts } from 'app/actions/ActionTypes';
 
interface FilesActionMenuProps {
  filesContainerSort?: FilesContainerSorts;
}
 
interface CommitsActionMenuState {
  isMenuOpen: boolean;
}
 
const containerStyle = {
  _extends: 'normalText',
  position: 'absolute',
  right: 10,
};
 
export class FilesActionMenu extends Component<
  FilesActionMenuProps & DispatchProps,
  CommitsActionMenuState
> {
  readonly state = { isMenuOpen: false };
 
  render() {
    const { filesContainerSort } = 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.sortFiles(FilesContainerSorts.TIME);
          }}
          isSelected={filesContainerSort === FilesContainerSorts.TIME}
        >
          by time
        </RadioMenuItem>
        <RadioMenuItem
          testId="sortCommits"
          onClick={() => {
            this.sortFiles(FilesContainerSorts.COMMITS);
          }}
          isSelected={filesContainerSort === FilesContainerSorts.COMMITS}
        >
          by number of commits
        </RadioMenuItem>
        <RadioMenuItem
          testId="sortLines"
          onClick={() => {
            this.sortFiles(FilesContainerSorts.LINES);
          }}
          isSelected={filesContainerSort === FilesContainerSorts.LINES}
        >
          by lines changed
        </RadioMenuItem>
      </ActionMenu>
    );
  }
 
  sortFiles(newFilesContainerSort: FilesContainerSorts) {
    this.props.dispatch(setFilesContainerSort(newFilesContainerSort));
    this.setState({ isMenuOpen: false });
  }
 
  onMenuToggle = () => {
    this.setState({ isMenuOpen: !this.state.isMenuOpen });
  };
}
 
export default connect(getFilesActionMenuState)(FilesActionMenu);