mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-23 16:02:21 +02:00
Reapply changes from PR #310
This commit is contained in:
parent
3431d03ef0
commit
d891660407
6
src/scripts/actions/general.js
Normal file
6
src/scripts/actions/general.js
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
/* eslint-disable import/prefer-default-export */
|
||||||
|
|
||||||
|
export const setIsLoading = isLoading => ({
|
||||||
|
type: 'LOADING',
|
||||||
|
isLoading,
|
||||||
|
});
|
15
src/scripts/actions/general.test.js
Normal file
15
src/scripts/actions/general.test.js
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import { expect } from 'chai';
|
||||||
|
import * as actions from './general';
|
||||||
|
|
||||||
|
describe('actions/general', () => {
|
||||||
|
describe('setIsLoading action', () => {
|
||||||
|
it('returns LOADING action with passed loading flag', () => {
|
||||||
|
const expectedAction = {
|
||||||
|
type: 'LOADING',
|
||||||
|
isLoading: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
expect(actions.setIsLoading(true)).to.eql(expectedAction);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -22,6 +22,7 @@ import {
|
||||||
import { addItem, removeItem, highlightItem } from './actions/items';
|
import { addItem, removeItem, highlightItem } from './actions/items';
|
||||||
import { addGroup } from './actions/groups';
|
import { addGroup } from './actions/groups';
|
||||||
import { clearAll, resetTo } from './actions/misc';
|
import { clearAll, resetTo } from './actions/misc';
|
||||||
|
import { setIsLoading } from './actions/general';
|
||||||
import {
|
import {
|
||||||
isScrolledIntoView,
|
isScrolledIntoView,
|
||||||
getAdjacentEl,
|
getAdjacentEl,
|
||||||
|
@ -438,7 +439,9 @@ class Choices {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this._setLoading(true);
|
||||||
choices.forEach(addGroupsAndChoices);
|
choices.forEach(addGroupsAndChoices);
|
||||||
|
this._setLoading(false);
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
@ -478,6 +481,10 @@ class Choices {
|
||||||
============================================= */
|
============================================= */
|
||||||
|
|
||||||
_render() {
|
_render() {
|
||||||
|
if (this._store.isLoading()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this._currentState = this._store.state;
|
this._currentState = this._store.state;
|
||||||
|
|
||||||
const stateChanged =
|
const stateChanged =
|
||||||
|
@ -870,12 +877,16 @@ class Choices {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_handleLoadingState(isLoading = true) {
|
_setLoading(isLoading) {
|
||||||
|
this._store.dispatch(setIsLoading(isLoading));
|
||||||
|
}
|
||||||
|
|
||||||
|
_handleLoadingState(setLoading = true) {
|
||||||
let placeholderItem = this.itemList.getChild(
|
let placeholderItem = this.itemList.getChild(
|
||||||
`.${this.config.classNames.placeholder}`,
|
`.${this.config.classNames.placeholder}`,
|
||||||
);
|
);
|
||||||
|
|
||||||
if (isLoading) {
|
if (setLoading) {
|
||||||
this.disable();
|
this.disable();
|
||||||
this.containerOuter.addLoadingState();
|
this.containerOuter.addLoadingState();
|
||||||
|
|
||||||
|
@ -994,6 +1005,7 @@ class Choices {
|
||||||
) {
|
) {
|
||||||
// Remove loading states/text
|
// Remove loading states/text
|
||||||
this._handleLoadingState(false);
|
this._handleLoadingState(false);
|
||||||
|
this._setLoading(true);
|
||||||
// Add each result as a choice
|
// Add each result as a choice
|
||||||
parsedResults.forEach(result => {
|
parsedResults.forEach(result => {
|
||||||
if (result.choices) {
|
if (result.choices) {
|
||||||
|
@ -1015,6 +1027,8 @@ class Choices {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this._setLoading(false);
|
||||||
|
|
||||||
if (this._isSelectOneElement) {
|
if (this._isSelectOneElement) {
|
||||||
this._selectPlaceholderChoice();
|
this._selectPlaceholderChoice();
|
||||||
}
|
}
|
||||||
|
@ -1872,6 +1886,7 @@ class Choices {
|
||||||
|
|
||||||
this._highlightPosition = 0;
|
this._highlightPosition = 0;
|
||||||
this._isSearching = false;
|
this._isSearching = false;
|
||||||
|
this._setLoading(true);
|
||||||
|
|
||||||
if (passedGroups && passedGroups.length) {
|
if (passedGroups && passedGroups.length) {
|
||||||
// If we have a placeholder option
|
// If we have a placeholder option
|
||||||
|
@ -1961,6 +1976,8 @@ class Choices {
|
||||||
// Add each choice
|
// Add each choice
|
||||||
allChoices.forEach((choice, index) => handleChoice(choice, index));
|
allChoices.forEach((choice, index) => handleChoice(choice, index));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this._setLoading(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
_addPredefinedItems() {
|
_addPredefinedItems() {
|
||||||
|
|
19
src/scripts/reducers/general.js
Normal file
19
src/scripts/reducers/general.js
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
export const defaultState = {
|
||||||
|
loading: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const general = (state = defaultState, action) => {
|
||||||
|
switch (action.type) {
|
||||||
|
case 'LOADING': {
|
||||||
|
return {
|
||||||
|
loading: action.isLoading,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
default: {
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default general;
|
23
src/scripts/reducers/general.test.js
Normal file
23
src/scripts/reducers/general.test.js
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
import { expect } from 'chai';
|
||||||
|
import general, { defaultState } from './general';
|
||||||
|
|
||||||
|
describe('reducers/general', () => {
|
||||||
|
it('should return same state when no action matches', () => {
|
||||||
|
expect(general(defaultState, {})).to.equal(defaultState);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('LOADING', () => {
|
||||||
|
it('sets loading state', () => {
|
||||||
|
const expectedState = {
|
||||||
|
loading: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
const actualState = general(undefined, {
|
||||||
|
type: 'LOADING',
|
||||||
|
isLoading: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(expectedState).to.eql(actualState);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -2,12 +2,14 @@ import { combineReducers } from 'redux';
|
||||||
import items from './items';
|
import items from './items';
|
||||||
import groups from './groups';
|
import groups from './groups';
|
||||||
import choices from './choices';
|
import choices from './choices';
|
||||||
|
import general from './general';
|
||||||
import { cloneObject } from '../lib/utils';
|
import { cloneObject } from '../lib/utils';
|
||||||
|
|
||||||
const appReducer = combineReducers({
|
const appReducer = combineReducers({
|
||||||
items,
|
items,
|
||||||
groups,
|
groups,
|
||||||
choices,
|
choices,
|
||||||
|
general,
|
||||||
});
|
});
|
||||||
|
|
||||||
const rootReducer = (passedState, action) => {
|
const rootReducer = (passedState, action) => {
|
||||||
|
|
|
@ -33,6 +33,9 @@ describe('reducers/rootReducer', () => {
|
||||||
items: [],
|
items: [],
|
||||||
groups: [],
|
groups: [],
|
||||||
choices: [],
|
choices: [],
|
||||||
|
general: {
|
||||||
|
loading: false,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -129,6 +129,14 @@ export default class Store {
|
||||||
}, []);
|
}, []);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get loading state from store
|
||||||
|
* @return {Boolean} Loading State
|
||||||
|
*/
|
||||||
|
isLoading() {
|
||||||
|
return this.state.general.loading;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get single choice by it's ID
|
* Get single choice by it's ID
|
||||||
* @return {Object} Found choice
|
* @return {Object} Found choice
|
||||||
|
|
Loading…
Reference in a new issue