import React, { Component } from 'react';
import { connect } from 'react-redux';
import { style } from 'app/styles';
import { DispatchProps } from 'app/interfaces';
import { getAuthorsActionMenuState } from 'app/selectors';
import { RadioMenuItem } from 'app/components/RadioMenuItem';
import { ActionMenu } from 'app/components/ActionMenu';
import { setAuthorsContainerSort } from 'app/actions';
import { AuthorsContainerSorts } from 'app/actions/ActionTypes';
interface AuthorsActionMenuProps {
authorsContainerSort?: AuthorsContainerSorts;
}
interface AuthorsActionMenuState {
isMenuOpen: boolean;
}
const containerStyle = {
_extends: 'normalText',
position: 'absolute',
right: 10,
};
export class AuthorsActionMenu extends Component<
AuthorsActionMenuProps & DispatchProps,
AuthorsActionMenuState
> {
readonly state = { isMenuOpen: false };
render() {
const { authorsContainerSort } = 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.sortAuthors(AuthorsContainerSorts.TIME);
}}
isSelected={authorsContainerSort === AuthorsContainerSorts.TIME}
>
by time
</RadioMenuItem>
<RadioMenuItem
testId="sortCommits"
onClick={() => {
this.sortAuthors(AuthorsContainerSorts.COMMITS);
}}
isSelected={authorsContainerSort === AuthorsContainerSorts.COMMITS}
>
by number of commits
</RadioMenuItem>
<RadioMenuItem
testId="sortLines"
onClick={() => {
this.sortAuthors(AuthorsContainerSorts.LINES);
}}
isSelected={authorsContainerSort === AuthorsContainerSorts.LINES}
>
by lines changed
</RadioMenuItem>
</ActionMenu>
);
}
sortAuthors(newAuthorsContainerSort: AuthorsContainerSorts) {
this.props.dispatch(setAuthorsContainerSort(newAuthorsContainerSort));
this.setState({ isMenuOpen: false });
}
onMenuToggle = () => {
this.setState({ isMenuOpen: !this.state.isMenuOpen });
};
}
export default connect(getAuthorsActionMenuState)(AuthorsActionMenu);
|