Redux Autocomlete
by evgkch
Babel + JSX
const REFRESH = 'REFRESH';
const SET_INPUT_VALUE = 'SET_INPUT_VALUE';
const SELECT_AUTOCOMPLETE_ITEM = 'SELECT_AUTOCOMPLETE_ITEM';
const GET_SEARCH_RESULT = 'GET_SEARCH_RESULT';
const SHOW_AUTOCOMPLETE = 'SHOW_AUTOCOMPLETE';
const initial = {
searchStores: [
{
id: 'SERACH_STORE_1',
data: {
value: '',
selectedItemId: null,
autocompleteData: [],
showAutocomplete: false,
}
},
{
id: 'SERACH_STORE_2',
data: {
value: '',
selectedItemId: null,
autocompleteData: [],
showAutocomplete: false,
}
}
],
resultStore: { value: '' }
}
const createController = (data, searchStore, resultStore) => class ctrl {
static REFRESH() {
searchStore.update({
value: '',
selectedItemId: null,
autocompleteData: [],
showAutocomplete: false,
})
resultStore.update({ value: '' })
searchStore.view();
}
static SET_INPUT_VALUE(e) {
const autocompleteData = getAutocomplete(data.data)(e);
searchStore.update({
value: e,
selectedItemId: null,
autocompleteData: autocompleteData,
showAutocomplete: (e.length > 2 && autocompleteData.length !== 0)
? true
: false,
});
searchStore.view();
}
static SELECT_AUTOCOMPLETE_ITEM(e) {
console.log('SELECT_AUTOCOMPLETE_ITEM');
const value = data.data[e].el;
searchStore.update({
value: value,
selectedItemId: e,
showAutocomplete: false,
});
resultStore.update({ value: value })
searchStore.view();
resultStore.view();
}
static GET_SEARCH_RESULT() {
const value = searchStore.data.value;
(value !== '') ? resultStore.update({ value: value }) : null;
this.SHOW_AUTOCOMPLETE(false);
resultStore.view();
}
static SHOW_AUTOCOMPLETE(bool) {
searchStore.update({ showAutocomplete: bool });
searchStore.view();
}
}
// Модель и ее обновление
const updateApp = () => React.render(
<App
...