All files / client/components/SearchPage/SearchTypeNav SearchTypeDropdown.tsx

0% Statements 0/11
100% Branches 0/0
0% Functions 0/6
0% Lines 0/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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                                                                                                     
import React from 'react'
import { withTranslation, WithTranslation } from 'react-i18next'
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'
import { SearchType } from 'components/SearchPage/SearchToolbar'
 
interface Props extends WithTranslation {
  searchTypes: SearchType[]
  activeType: SearchType
  changeType: Function
}
 
interface State {
  open: boolean
}
 
class SearchTypeDropdown extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)
 
    this.toggle = this.toggle.bind(this)
    this.state = { open: false }
  }
 
  toggle() {
    const { open } = this.state
    this.setState({ open: !open })
  }
 
  render() {
    const { t, searchTypes, activeType, changeType } = this.props
    const { name: activeTypeName, icon: activeTypeIcon } = searchTypes.filter(e => e.key === activeType.key)[0]
 
    return (
      <Dropdown className="d-sm-none" isOpen={this.state.open} toggle={this.toggle}>
        <DropdownToggle className="ml-auto d-block" caret>
          {activeTypeIcon} {activeTypeName} ...
        </DropdownToggle>
        <DropdownMenu right>
          {searchTypes.map(({ key, icon, name }) => (
            <DropdownItem key={key} onClick={() => changeType(key)} active={key === activeType.key}>
              {icon} {name}
            </DropdownItem>
          ))}
        </DropdownMenu>
      </Dropdown>
    )
  }
}
 
export default withTranslation()(SearchTypeDropdown)