deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-21 06:56:34 +02:00
Code Issues Projects Releases Wiki Activity

Reinstate option updating on item removal

Browse source
This commit is contained in:
Josh Johnson 2016-04-25 14:59:58 +01:00
parent d07517fe96
commit eb80a373df
3 changed files with 56 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/scripts/dist/bundle.js vendored
View file

File diff suppressed because one or more lines are too long

66
assets/scripts/src/choices.js
View file

@ -240,6 +240,7 @@ export class Choices {
const deleteKey = 8 || 46;
const enterKey = 13;
const aKey = 65;
const escapeKey = 27;
// If we are typing in the input
if(e.target === this.input) {
@ -255,6 +256,10 @@ export class Choices {
const value = this.input.value;
this.handleEnter(activeItems, value);
}
if(e.keyCode === escapeKey && this.dropdown) {
this.toggleDropdown();
}
}
if(inputIsFocussed) {
@ -301,7 +306,7 @@ export class Choices {
onClick(e) {
const shiftKey = e.shiftKey;
if(this.inputType === 'multipleSelect') {
if(this.dropdown) {
this.toggleDropdown();
}
@ -682,11 +687,15 @@ export class Choices {
getGroupsFilteredByActive() {
const groups = this.getGroups();
const valueArray = groups.filter((group) => {
return group.active === true;
},[]);
const options = this.getOptions();
console.log(groups);
const valueArray = groups.filter((group) => {
const isActive = group.active === true && group.disabled === false;
const hasActiveOptions = options.some((option) => {
return option.active === true && option.disabled === false;
});
return isActive && hasActiveOptions ? true : false;
},[]);
return valueArray;
}
@ -852,11 +861,16 @@ export class Choices {
render(callback = this.options.callbackOnRender) {
const classNames = this.options.classNames;
const activeItems = this.getItemsFilteredByActive();
const activeOptions = this.getOptionsFilteredByActive();
const activeGroups = this.getGroupsFilteredByActive();
// OPTIONS
if(this.inputType === 'multipleSelect') {
const activeOptions = this.getOptionsFilteredByActive();
const activeGroups = this.getGroupsFilteredByActive();
console.log(activeGroups);
// Clear options
this.dropdown.innerHTML = '';
@ -865,32 +879,32 @@ export class Choices {
// If we have grouped options
if(activeGroups.length >= 1) {
activeGroups.forEach((group) => {
activeGroups.forEach((group, index) => {
// Grab options that are children of this group
const groupOptions = activeOptions.filter((option) => {
return option.groupId === group.id;
});
// IF group actually has options within it
if(groupOptions.length >= 1) {
const dropdownGroup = strToEl(`
<div class="${ classNames.group } ${ group.disabled ? classNames.itemDisabled : '' }" data-choice-value="${ group.value }" data-choice-group-id="${ group.id }">
<div class="${ classNames.groupHeading }">${ group.value }</div>
const dropdownGroup = strToEl(`
<div class="${ classNames.group } ${ group.disabled ? classNames.itemDisabled : '' }" data-choice-value="${ group.value }" data-choice-group-id="${ group.id }">
<div class="${ classNames.groupHeading }">${ group.value }</div>
</div>
`);
groupOptions.forEach((option) => {
const dropdownItem = strToEl(`
<div class="${ classNames.item } ${ classNames.itemOption } ${ option.selected ? classNames.selectedState + ' ' + classNames.itemDisabled : classNames.itemSelectable }" data-choice-option data-choice-id="${ option.id }" data-choice-value="${ option.value }">
${ option.label }
</div>
`);
groupOptions.forEach((option) => {
const dropdownItem = strToEl(`
<div class="${ classNames.item } ${ classNames.itemOption } ${ option.selected ? classNames.selectedState + ' ' + classNames.itemDisabled : classNames.itemSelectable }" data-choice-option data-choice-id="${ option.id }" data-choice-value="${ option.value }">
${ option.label }
</div>
`);
dropdownGroup.appendChild(dropdownItem);
});
dropdownGroup.appendChild(dropdownItem);
});
optionListFragment.appendChild(dropdownGroup);
}
optionListFragment.appendChild(dropdownGroup);
});
} else if(activeOptions.length >= 1) {
activeOptions.forEach((option) => {
const dropdownItem = strToEl(`
@ -898,10 +912,10 @@ export class Choices {
${ option.label }
</div>
`);
optionListFragment.appendChild(dropdownItem);
});
} else {
// Show 'no options' message
const dropdownItem = strToEl(`<div class="${ classNames.item }">No options to select</div>`);
optionListFragment.appendChild(dropdownItem);
}
@ -943,7 +957,7 @@ export class Choices {
// Run callback if it is a function
if(callback){
if(isType('Function', callback)) {
callback(activeItems, activeOptions, activeGroups);
callback(activeItems);
} else {
console.error('callbackOnRender: Callback is not a function');
}

14
assets/scripts/src/reducers/options.js
View file

@ -20,6 +20,20 @@ const options = (state = [], action) => {
return option;
});
case 'REMOVE_ITEM':
// When an item is removed and it has an associated option,
// we want to re-enable it so it can be chosen again
if(action.optionId > -1) {
return state.map((option) => {
if(option.id === parseInt(action.optionId)) {
option.selected = action.selected;
}
return option;
});
} else {
return state;
}
case 'FILTER_OPTIONS':
const filteredResults = action.results.items;
const newState = state.map((option, index) => {