import * as React from 'react' ; import { connect } from 'react-redux' ; import { changeSorting } from '../../actions/sorting' ; import { SortingOption , RootState } from '../../types' ; import { Button } from '@shopify/polaris' ; import { Popover , Menu , MenuItem , MenuDivider , Intent , Position } from '@blueprintjs/core' ; interface Props { readonly value : SortingOption ; } interface Handlers { readonly onChange : ( option : SortingOption ) => void ; } class SortingMenu extends React . PureComponent < Props & Handlers , never > { private generateIntent = ( option ) : Intent => { return option !== this . props . value ? Intent . PRIMARY : Intent . NONE ; } ; private handleChange = ( option ) => ( ) => this . props . onChange ( option ) ; public render ( ) { const { value } = this . props ; return ( < Popover position = { Position . BOTTOM_RIGHT } canEscapeKeyClose > < Button plain disclosure > { `Sorted By: ${ value }` } < /Button> < Menu > < MenuDivider title = "Sorting Options" / > < MenuItem shouldDismissPopover = { false } icon = "time" intent = { this . generateIntent ( 'Latest' ) } onClick = { this . handleChange ( 'Latest' ) } text = "Latest" / > < MenuItem shouldDismissPopover = { false } icon = "series-derived" intent = { this . generateIntent ( 'Weighted T.O.' ) } onClick = { this . handleChange ( 'Weighted T.O.' ) } text = "Weighted T.O." / > < MenuItem shouldDismissPopover = { false } icon = "dollar" intent = { this . generateIntent ( 'Reward' ) } onClick = { this . handleChange ( 'Reward' ) } text = "Reward" / > < MenuItem shouldDismissPopover = { false } intent = { this . generateIntent ( 'Batch Size' ) } icon = "sort-numerical-desc" onClick = { this . handleChange ( 'Batch Size' ) } text = "Batch Size" / > < /Menu> < /Popover>); } } const mapDispatch = { onChange : changeSorting } ; const mapState = ( state ) : Props => ( { value : state . sortingOption } ) ; export default connect ( mapState , mapDispatch ) ( SortingMenu ) ;