mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-01 21:42:30 +02:00
Clearer store naming conventions
This commit is contained in:
parent
f02abdaacf
commit
54b8935aee
|
@ -431,8 +431,8 @@ class Choices {
|
||||||
|
|
||||||
if (this.isSelectElement) {
|
if (this.isSelectElement) {
|
||||||
// Get active groups/choices
|
// Get active groups/choices
|
||||||
const activeGroups = this.store.groupsFilteredByActive;
|
const activeGroups = this.store.activeGroups;
|
||||||
const activeChoices = this.store.choicesFilteredByActive;
|
const activeChoices = this.store.activeChoices;
|
||||||
|
|
||||||
let choiceListFragment = document.createDocumentFragment();
|
let choiceListFragment = document.createDocumentFragment();
|
||||||
|
|
||||||
|
@ -464,7 +464,7 @@ class Choices {
|
||||||
|
|
||||||
// If we have choices to show
|
// If we have choices to show
|
||||||
if (choiceListFragment.childNodes && choiceListFragment.childNodes.length > 0) {
|
if (choiceListFragment.childNodes && choiceListFragment.childNodes.length > 0) {
|
||||||
const activeItems = this.store.itemsFilteredByActive;
|
const activeItems = this.store.activeItems;
|
||||||
const canAddItem = this._canAddItem(activeItems, this.input.value);
|
const canAddItem = this._canAddItem(activeItems, this.input.value);
|
||||||
|
|
||||||
// ...and we can select them
|
// ...and we can select them
|
||||||
|
@ -502,7 +502,7 @@ class Choices {
|
||||||
/* Items */
|
/* Items */
|
||||||
if (this.currentState.items !== this.prevState.items) {
|
if (this.currentState.items !== this.prevState.items) {
|
||||||
// Get active items (items that can be selected)
|
// Get active items (items that can be selected)
|
||||||
const activeItems = this.store.itemsFilteredByActive || [];
|
const activeItems = this.store.activeItems || [];
|
||||||
// Clear list
|
// Clear list
|
||||||
this.itemList.clear();
|
this.itemList.clear();
|
||||||
|
|
||||||
|
@ -608,7 +608,7 @@ class Choices {
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
const items = this.store.itemsFilteredByActive;
|
const items = this.store.activeItems;
|
||||||
|
|
||||||
items.forEach((item) => {
|
items.forEach((item) => {
|
||||||
if (item.value === value) {
|
if (item.value === value) {
|
||||||
|
@ -627,7 +627,7 @@ class Choices {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
removeActiveItems(excludedId) {
|
removeActiveItems(excludedId) {
|
||||||
const items = this.store.itemsFilteredByActive;
|
const items = this.store.activeItems;
|
||||||
|
|
||||||
items.forEach((item) => {
|
items.forEach((item) => {
|
||||||
if (excludedId !== item.id) {
|
if (excludedId !== item.id) {
|
||||||
|
@ -645,7 +645,7 @@ class Choices {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
removeHighlightedItems(runEvent = false) {
|
removeHighlightedItems(runEvent = false) {
|
||||||
const items = this.store.itemsFilteredByHighlighted;
|
const items = this.store.highlightedActiveItems;
|
||||||
|
|
||||||
items.forEach((item) => {
|
items.forEach((item) => {
|
||||||
this._removeItem(item);
|
this._removeItem(item);
|
||||||
|
@ -727,7 +727,7 @@ class Choices {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
getValue(valueOnly = false) {
|
getValue(valueOnly = false) {
|
||||||
const items = this.store.itemsFilteredByActive;
|
const items = this.store.activeItems;
|
||||||
|
|
||||||
const values = items.reduce((selectedItems, item) => {
|
const values = items.reduce((selectedItems, item) => {
|
||||||
const itemValue = valueOnly ? item.value : item;
|
const itemValue = valueOnly ? item.value : item;
|
||||||
|
@ -1322,7 +1322,7 @@ class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
const target = e.target;
|
const target = e.target;
|
||||||
const activeItems = this.store.itemsFilteredByActive;
|
const activeItems = this.store.activeItems;
|
||||||
const hasFocusedInput = this.input.isFocussed;
|
const hasFocusedInput = this.input.isFocussed;
|
||||||
const hasActiveDropdown = this.dropdown.isActive;
|
const hasActiveDropdown = this.dropdown.isActive;
|
||||||
const hasItems = this.itemList.hasChildren;
|
const hasItems = this.itemList.hasChildren;
|
||||||
|
@ -1491,7 +1491,7 @@ class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
const value = this.input.value;
|
const value = this.input.value;
|
||||||
const activeItems = this.store.itemsFilteredByActive;
|
const activeItems = this.store.activeItems;
|
||||||
const canAddItem = this._canAddItem(activeItems, value);
|
const canAddItem = this._canAddItem(activeItems, value);
|
||||||
|
|
||||||
// We are typing into a text input and have a value, we want to show a dropdown
|
// We are typing into a text input and have a value, we want to show a dropdown
|
||||||
|
@ -1587,7 +1587,7 @@ class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.containerOuter.element.contains(target) && target !== this.input.element) {
|
if (this.containerOuter.element.contains(target) && target !== this.input.element) {
|
||||||
const activeItems = this.store.itemsFilteredByActive;
|
const activeItems = this.store.activeItems;
|
||||||
const hasShiftKey = e.shiftKey;
|
const hasShiftKey = e.shiftKey;
|
||||||
|
|
||||||
const buttonTarget = findAncestorByAttrName(target, 'data-button');
|
const buttonTarget = findAncestorByAttrName(target, 'data-button');
|
||||||
|
@ -1633,7 +1633,7 @@ class Choices {
|
||||||
_onClick(e) {
|
_onClick(e) {
|
||||||
const target = e.target;
|
const target = e.target;
|
||||||
const hasActiveDropdown = this.dropdown.isActive;
|
const hasActiveDropdown = this.dropdown.isActive;
|
||||||
const activeItems = this.store.itemsFilteredByActive;
|
const activeItems = this.store.activeItems;
|
||||||
|
|
||||||
// If target is something that concerns us
|
// If target is something that concerns us
|
||||||
if (this.containerOuter.element.contains(target)) {
|
if (this.containerOuter.element.contains(target)) {
|
||||||
|
@ -1720,7 +1720,7 @@ class Choices {
|
||||||
const target = e.target;
|
const target = e.target;
|
||||||
// If target is something that concerns us
|
// If target is something that concerns us
|
||||||
if (this.containerOuter.element.contains(target) && !this.isScrollingOnIe) {
|
if (this.containerOuter.element.contains(target) && !this.isScrollingOnIe) {
|
||||||
const activeItems = this.store.itemsFilteredByActive;
|
const activeItems = this.store.activeItems;
|
||||||
const hasHighlightedItems = activeItems.some(item => item.highlighted);
|
const hasHighlightedItems = activeItems.some(item => item.highlighted);
|
||||||
const blurActions = {
|
const blurActions = {
|
||||||
text: () => {
|
text: () => {
|
||||||
|
|
|
@ -1107,7 +1107,7 @@ describe('choices', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('getValue', () => {
|
describe('getValue', () => {
|
||||||
let itemsFilteredByActiveStub;
|
let activeItemsStub;
|
||||||
const items = [
|
const items = [
|
||||||
{
|
{
|
||||||
id: '1',
|
id: '1',
|
||||||
|
@ -1120,11 +1120,11 @@ describe('choices', () => {
|
||||||
];
|
];
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
itemsFilteredByActiveStub = stub(instance.store, 'itemsFilteredByActive').get(() => items);
|
activeItemsStub = stub(instance.store, 'activeItems').get(() => items);
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
itemsFilteredByActiveStub.reset();
|
activeItemsStub.reset();
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('passing true valueOnly flag', () => {
|
describe('passing true valueOnly flag', () => {
|
||||||
|
@ -1186,7 +1186,7 @@ describe('choices', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('passing valid value', () => {
|
describe('passing valid value', () => {
|
||||||
let itemsFilteredByActiveStub;
|
let activeItemsStub;
|
||||||
let removeItemStub;
|
let removeItemStub;
|
||||||
const value = 'Removed';
|
const value = 'Removed';
|
||||||
const items = [
|
const items = [
|
||||||
|
@ -1206,14 +1206,14 @@ describe('choices', () => {
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
removeItemStub = stub();
|
removeItemStub = stub();
|
||||||
itemsFilteredByActiveStub = stub(instance.store, 'itemsFilteredByActive').get(() => items);
|
activeItemsStub = stub(instance.store, 'activeItems').get(() => items);
|
||||||
instance._removeItem = removeItemStub;
|
instance._removeItem = removeItemStub;
|
||||||
|
|
||||||
output = instance.removeActiveItemsByValue(value);
|
output = instance.removeActiveItemsByValue(value);
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
itemsFilteredByActiveStub.reset();
|
activeItemsStub.reset();
|
||||||
instance._removeItem.reset();
|
instance._removeItem.reset();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -1226,7 +1226,7 @@ describe('choices', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('removeActiveItems', () => {
|
describe('removeActiveItems', () => {
|
||||||
let itemsFilteredByActiveStub;
|
let activeItemsStub;
|
||||||
let removeItemStub;
|
let removeItemStub;
|
||||||
const items = [
|
const items = [
|
||||||
{
|
{
|
||||||
|
@ -1245,12 +1245,12 @@ describe('choices', () => {
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
removeItemStub = stub();
|
removeItemStub = stub();
|
||||||
itemsFilteredByActiveStub = stub(instance.store, 'itemsFilteredByActive').get(() => items);
|
activeItemsStub = stub(instance.store, 'activeItems').get(() => items);
|
||||||
instance._removeItem = removeItemStub;
|
instance._removeItem = removeItemStub;
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
itemsFilteredByActiveStub.reset();
|
activeItemsStub.reset();
|
||||||
instance._removeItem.reset();
|
instance._removeItem.reset();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -1283,7 +1283,7 @@ describe('choices', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('removeHighlightedItems', () => {
|
describe('removeHighlightedItems', () => {
|
||||||
let itemsFilteredByHighlightedStub;
|
let highlightedActiveItemsStub;
|
||||||
let removeItemStub;
|
let removeItemStub;
|
||||||
let triggerChangeStub;
|
let triggerChangeStub;
|
||||||
|
|
||||||
|
@ -1300,7 +1300,7 @@ describe('choices', () => {
|
||||||
|
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
itemsFilteredByHighlightedStub = stub(instance.store, 'itemsFilteredByHighlighted').get(() => items);
|
highlightedActiveItemsStub = stub(instance.store, 'highlightedActiveItems').get(() => items);
|
||||||
removeItemStub = stub();
|
removeItemStub = stub();
|
||||||
triggerChangeStub = stub();
|
triggerChangeStub = stub();
|
||||||
|
|
||||||
|
@ -1309,7 +1309,7 @@ describe('choices', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
itemsFilteredByHighlightedStub.reset();
|
highlightedActiveItemsStub.reset();
|
||||||
instance._removeItem.reset();
|
instance._removeItem.reset();
|
||||||
instance._triggerChange.reset();
|
instance._triggerChange.reset();
|
||||||
});
|
});
|
||||||
|
|
|
@ -49,7 +49,7 @@ export default class Store {
|
||||||
* Get active items from store
|
* Get active items from store
|
||||||
* @return {Array} Item objects
|
* @return {Array} Item objects
|
||||||
*/
|
*/
|
||||||
get itemsFilteredByActive() {
|
get activeItems() {
|
||||||
return this.items.filter(item => item.active === true);
|
return this.items.filter(item => item.active === true);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -57,7 +57,7 @@ export default class Store {
|
||||||
* Get highlighted items from store
|
* Get highlighted items from store
|
||||||
* @return {Array} Item objects
|
* @return {Array} Item objects
|
||||||
*/
|
*/
|
||||||
get itemsFilteredByHighlighted() {
|
get highlightedActiveItems() {
|
||||||
return this.items.filter(item => item.active && item.highlighted);
|
return this.items.filter(item => item.active && item.highlighted);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -73,7 +73,7 @@ export default class Store {
|
||||||
* Get active choices from store
|
* Get active choices from store
|
||||||
* @return {Array} Option objects
|
* @return {Array} Option objects
|
||||||
*/
|
*/
|
||||||
get choicesFilteredByActive() {
|
get activeChoices() {
|
||||||
const choices = this.choices;
|
const choices = this.choices;
|
||||||
const values = choices.filter(choice => choice.active === true);
|
const values = choices.filter(choice => choice.active === true);
|
||||||
|
|
||||||
|
@ -84,7 +84,7 @@ export default class Store {
|
||||||
* Get selectable choices from store
|
* Get selectable choices from store
|
||||||
* @return {Array} Option objects
|
* @return {Array} Option objects
|
||||||
*/
|
*/
|
||||||
get choicesFilteredBySelectable() {
|
get selectableChoices() {
|
||||||
return this.choices.filter(choice => choice.disabled !== true);
|
return this.choices.filter(choice => choice.disabled !== true);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -93,7 +93,7 @@ export default class Store {
|
||||||
* @return {Array} Option objects
|
* @return {Array} Option objects
|
||||||
*/
|
*/
|
||||||
get searchableChoices() {
|
get searchableChoices() {
|
||||||
return this.choicesFilteredBySelectable.filter(choice => choice.placeholder !== true);
|
return this.selectableChoices.filter(choice => choice.placeholder !== true);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -118,7 +118,7 @@ export default class Store {
|
||||||
* Get active groups from store
|
* Get active groups from store
|
||||||
* @return {Array} Group objects
|
* @return {Array} Group objects
|
||||||
*/
|
*/
|
||||||
get groupsFilteredByActive() {
|
get activeGroups() {
|
||||||
const groups = this.groups;
|
const groups = this.groups;
|
||||||
const choices = this.choices;
|
const choices = this.choices;
|
||||||
|
|
||||||
|
@ -137,7 +137,7 @@ export default class Store {
|
||||||
*/
|
*/
|
||||||
getChoiceById(id) {
|
getChoiceById(id) {
|
||||||
if (id) {
|
if (id) {
|
||||||
const choices = this.choicesFilteredByActive;
|
const choices = this.activeChoices;
|
||||||
const foundChoice = choices.find(choice => choice.id === parseInt(id, 10));
|
const foundChoice = choices.find(choice => choice.id === parseInt(id, 10));
|
||||||
return foundChoice;
|
return foundChoice;
|
||||||
}
|
}
|
||||||
|
|
|
@ -161,17 +161,17 @@ describe('reducers/store', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('itemsFilteredByActive getter', () => {
|
describe('activeItems getter', () => {
|
||||||
it('returns items that are active', () => {
|
it('returns items that are active', () => {
|
||||||
const expectedResponse = state.items.filter((item => item.active));
|
const expectedResponse = state.items.filter((item => item.active));
|
||||||
expect(instance.itemsFilteredByActive).to.eql(expectedResponse);
|
expect(instance.activeItems).to.eql(expectedResponse);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('itemsFilteredByHighlighted getter', () => {
|
describe('highlightedActiveItems getter', () => {
|
||||||
it('returns items that are active and highlighted', () => {
|
it('returns items that are active and highlighted', () => {
|
||||||
const expectedResponse = state.items.filter((item => item.highlighted && item.active));
|
const expectedResponse = state.items.filter((item => item.highlighted && item.active));
|
||||||
expect(instance.itemsFilteredByHighlighted).to.eql(expectedResponse);
|
expect(instance.highlightedActiveItems).to.eql(expectedResponse);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -182,17 +182,17 @@ describe('reducers/store', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('choicesFilteredByActive getter', () => {
|
describe('activeChoices getter', () => {
|
||||||
it('returns choices that are active', () => {
|
it('returns choices that are active', () => {
|
||||||
const expectedResponse = state.choices.filter((choice => choice.active));
|
const expectedResponse = state.choices.filter((choice => choice.active));
|
||||||
expect(instance.choicesFilteredByActive).to.eql(expectedResponse);
|
expect(instance.activeChoices).to.eql(expectedResponse);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('choicesFilteredBySelectable getter', () => {
|
describe('selectableChoices getter', () => {
|
||||||
it('returns choices that are not disabled', () => {
|
it('returns choices that are not disabled', () => {
|
||||||
const expectedResponse = state.choices.filter((choice => !choice.disabled));
|
const expectedResponse = state.choices.filter((choice => !choice.disabled));
|
||||||
expect(instance.choicesFilteredBySelectable).to.eql(expectedResponse);
|
expect(instance.selectableChoices).to.eql(expectedResponse);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -235,10 +235,10 @@ describe('reducers/store', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('groupsFilteredByActive getter', () => {
|
describe('activeGroups getter', () => {
|
||||||
it('returns active groups', () => {
|
it('returns active groups', () => {
|
||||||
const expectedResponse = state.groups.filter(group => group.active);
|
const expectedResponse = state.groups.filter(group => group.active);
|
||||||
expect(instance.groupsFilteredByActive).to.eql(expectedResponse);
|
expect(instance.activeGroups).to.eql(expectedResponse);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue