38 lines
1.0 KiB
JavaScript
38 lines
1.0 KiB
JavaScript
import React, { Component } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
|
|
import './nav.css'
|
|
|
|
export default class Nav extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {query: ""}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<nav>
|
|
<input className="search" type="search" placeholder="Search for commands"
|
|
value={this.props.query} onChange={this.props.onQueryChange} results="0" />
|
|
<ul>
|
|
{Object.keys(this.props.commands).map(item => this.renderItem(item))}
|
|
</ul>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
renderItem(name) {
|
|
let cmd = this.props.commands[name]
|
|
if (cmd.name.indexOf(this.props.query) === -1) {
|
|
return null
|
|
}
|
|
|
|
let className = this.props.active && cmd.name === this.props.active ? "active" : ""
|
|
return (
|
|
<li key={cmd.name}>
|
|
<Link to={"/cmd/" + cmd.name} className={className}>{cmd.name}</Link>
|
|
</li>
|
|
)
|
|
}
|
|
}
|