Mo Elzubeir
62 lines
1.9 KiB
JavaScript
62 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { translate } from 'react-i18next'
|
|
import { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap'
|
|
export class SearchingBlock extends React.Component {
|
|
static propTypes = {
|
|
searchResultsErrors: PropTypes.array.isRequired,
|
|
loadedFeedQuery: PropTypes.string,
|
|
onSearchQuery: PropTypes.func.isRequired,
|
|
actions: PropTypes.object.isRequired,
|
|
t: PropTypes.func.isRequired
|
|
}
|
|
|
|
onPressEnter = (e) => {
|
|
if (e.keyCode === 13) {
|
|
this.props.onSearchQuery()
|
|
}
|
|
}
|
|
|
|
onChangeQuery = (e) => {
|
|
const { actions } = this.props
|
|
const value = e.target.value;
|
|
// replace smart quotation marks with normal
|
|
let filterQuotes = value.replace(/[\u2018\u2019]/g, '\'').replace(/[\u201C\u201D]/g, '"')
|
|
// add space before operator if not
|
|
filterQuotes = filterQuotes.replace(/\s*\+/g, ' +').replace(/\s*\-/g, ' -').trimStart()
|
|
actions.changeFeedQuery(filterQuotes)
|
|
}
|
|
|
|
render() {
|
|
let { t, loadedFeedQuery } = this.props
|
|
loadedFeedQuery = loadedFeedQuery || ''
|
|
|
|
return (
|
|
<div className="search-input-field mb-2">
|
|
<InputGroup>
|
|
<Input
|
|
type="text"
|
|
value={loadedFeedQuery}
|
|
data-tour="input-field-search"
|
|
onChange={this.onChangeQuery}
|
|
placeholder={t('searchTab.searchInputPlaceholder')}
|
|
onKeyUp={this.onPressEnter}
|
|
/>
|
|
<InputGroupAddon addonType="append">
|
|
<Button
|
|
color="primary"
|
|
className="btn-icon btn-icon-only px-3"
|
|
data-tour="search-button"
|
|
onClick={this.props.onSearchQuery}
|
|
>
|
|
<i className="lnr-magnifier btn-icon-wrapper font-weight-bold"></i>
|
|
</Button>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default translate(['tabsContent'], { wait: true })(SearchingBlock)
|