109 lines
3.0 KiB
JavaScript
109 lines
3.0 KiB
JavaScript
|
import React, { Component, PropTypes } from 'react';
|
||
|
|
import Autosuggest from 'react-autosuggest';
|
||
|
|
import { connect } from 'react-redux';
|
||
|
|
import { debounce } from 'lodash';
|
||
|
|
import { Loader } from '../../components/UI/index';
|
||
|
|
import { query, clearSearch } from '../../actions/search';
|
||
|
|
|
||
|
|
|
||
|
|
function escapeRegexCharacters(str) {
|
||
|
|
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||
|
|
}
|
||
|
|
|
||
|
|
class RelationControl extends Component {
|
||
|
|
static propTypes = {
|
||
|
|
onChange: PropTypes.func.isRequired,
|
||
|
|
value: PropTypes.node,
|
||
|
|
field: PropTypes.node,
|
||
|
|
isFetching: PropTypes.bool,
|
||
|
|
query: PropTypes.func.isRequired,
|
||
|
|
clearSearch: PropTypes.func.isRequired,
|
||
|
|
queryHits: PropTypes.array, // eslint-disable-line
|
||
|
|
};
|
||
|
|
|
||
|
|
onChange = (event, { newValue }) => {
|
||
|
|
this.props.onChange(newValue);
|
||
|
|
};
|
||
|
|
|
||
|
|
onSuggestionsFetchRequested = debounce(({ value }) => {
|
||
|
|
if (value.length < 3) return;
|
||
|
|
const { field } = this.props;
|
||
|
|
const collection = field.get('collection');
|
||
|
|
const searchFields = field.get('searchFields').map(f => `data.${ f }`).toJS();
|
||
|
|
this.props.query(collection, searchFields, value);
|
||
|
|
}, 80);
|
||
|
|
|
||
|
|
onSuggestionsClearRequested = () => {
|
||
|
|
this.props.clearSearch();
|
||
|
|
};
|
||
|
|
|
||
|
|
getMatchingHits = (value) => {
|
||
|
|
const { field, queryHits } = this.props;
|
||
|
|
const searchFields = field.get('searchFields').toJS();
|
||
|
|
const escapedValue = escapeRegexCharacters(value.trim());
|
||
|
|
const regex = new RegExp(`^ ${ escapedValue }`, 'i');
|
||
|
|
|
||
|
|
if (escapedValue === '') {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
|
||
|
|
return queryHits.filter((hit) => {
|
||
|
|
let testResult = false;
|
||
|
|
searchFields.forEach((f) => {
|
||
|
|
testResult = testResult || regex.test(hit.data[f]);
|
||
|
|
});
|
||
|
|
return testResult;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
getSuggestionValue = (suggestion) => {
|
||
|
|
const { field } = this.props;
|
||
|
|
const valueField = field.get('valueField');
|
||
|
|
return suggestion.data[valueField];
|
||
|
|
};
|
||
|
|
|
||
|
|
renderSuggestion = (suggestion) => {
|
||
|
|
const { field } = this.props;
|
||
|
|
const valueField = field.get('valueField');
|
||
|
|
return <span>{suggestion.data[valueField]}</span>;
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { value, isFetching, queryHits } = this.props;
|
||
|
|
|
||
|
|
const inputProps = {
|
||
|
|
placeholder: '',
|
||
|
|
value: value || '',
|
||
|
|
onChange: this.onChange,
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Autosuggest
|
||
|
|
suggestions={queryHits}
|
||
|
|
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} // eslint-disable-line
|
||
|
|
onSuggestionsClearRequested={this.onSuggestionsClearRequested} // eslint-disable-line
|
||
|
|
getSuggestionValue={this.getSuggestionValue}
|
||
|
|
renderSuggestion={this.renderSuggestion}
|
||
|
|
inputProps={inputProps}
|
||
|
|
/>
|
||
|
|
<Loader active={isFetching} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function mapStateToProps(state) {
|
||
|
|
const isFetching = state.search.get('isFetching');
|
||
|
|
const queryHits = state.search.get('queryHits');
|
||
|
|
return { isFetching, queryHits };
|
||
|
|
}
|
||
|
|
|
||
|
|
export default connect(
|
||
|
|
mapStateToProps,
|
||
|
|
{
|
||
|
|
query,
|
||
|
|
clearSearch,
|
||
|
|
}
|
||
|
|
)(RelationControl);
|