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

Associate options and items

Browse source
This commit is contained in:
Josh Johnson 2016-04-14 14:43:36 +01:00
parent c7ff02146a
commit 9679a42966
5 changed files with 69 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

16
assets/scripts/src/actions/index.js
View file

@ -1,22 +1,24 @@
export const addItem = (value, id) => { export const addItem = (value, id, optionId) => {
return { return {
type: 'ADD_ITEM', type: 'ADD_ITEM',
value: value, value: value,
id: id, id: parseInt(id),
optionId: parseInt(optionId)
} }
}; };
export const removeItem = (id) => { export const removeItem = (id, optionId) => {
return { return {
type: 'REMOVE_ITEM', type: 'REMOVE_ITEM',
id: id, id: parseInt(id),
optionId: parseInt(optionId)
} }
}; };
export const selectItem = (id, selected) => { export const selectItem = (id, selected) => {
return { return {
type: 'SELECT_ITEM', type: 'SELECT_ITEM',
id: id, id: parseInt(id),
selected: selected, selected: selected,
} }
}; };
@ -25,14 +27,14 @@ export const addOption = (value, id) => {
return { return {
type: 'ADD_OPTION', type: 'ADD_OPTION',
value: value, value: value,
id: id, id: parseInt(id),
} }
}; };
export const selectOption = (id, selected) => { export const selectOption = (id, selected) => {
return { return {
type: 'SELECT_OPTION', type: 'SELECT_OPTION',
id: id, id: parseInt(id),
selected: selected, selected: selected,
} }
}; };

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

@ -278,7 +278,7 @@ export class Choices {
if(!option.selected) { if(!option.selected) {
this.selectOption(id, true); this.selectOption(id, true);
this.addItem(option.value); this.addItem(option.value, option.id);
} }
} }
@ -376,7 +376,7 @@ export class Choices {
}); });
} }
selectOption(id, value) { selectOption(id, value = true) {
if(!id) return; if(!id) return;
this.store.dispatch(selectOption(id, value)); this.store.dispatch(selectOption(id, value));
} }
@ -385,7 +385,7 @@ export class Choices {
* Add item to store with correct value * Add item to store with correct value
* @param {String} value Value to add to store * @param {String} value Value to add to store
*/ */
addItem(value, callback = this.options.callbackOnAddItem) { addItem(value, optionId = -1, callback = this.options.callbackOnAddItem) {
if (this.options.debug) console.debug('Add item'); if (this.options.debug) console.debug('Add item');
let passedValue = value; let passedValue = value;
@ -417,7 +417,7 @@ export class Choices {
} }
} }
this.store.dispatch(addItem(passedValue, id)); this.store.dispatch(addItem(passedValue, id, optionId));
} }
/** /**
@ -432,6 +432,7 @@ export class Choices {
let id = item.id; let id = item.id;
let value = item.value; let value = item.value;
let optionId = item.optionId;
// Run callback // Run callback
if(callback){ if(callback){
@ -442,7 +443,7 @@ export class Choices {
} }
} }
this.store.dispatch(removeItem(id)); this.store.dispatch(removeItem(id, optionId));
} }
/** /**
@ -477,11 +478,19 @@ export class Choices {
this.dropdown.classList[isActive ? 'remove' : 'add']('is-active'); this.dropdown.classList[isActive ? 'remove' : 'add']('is-active');
} }
addOptionToDropdown(value) { addOptionToDropdown(option) {
// Generate unique id // Generate unique id
let state = this.store.getState(); const state = this.store.getState();
let id = state.options.length + 1; const id = state.options.length + 1;
const value = option.value;
const isSelected = option.selected;
this.store.dispatch(addOption(value, id)); this.store.dispatch(addOption(value, id));
if(isSelected) {
this.selectOption(id);
this.addItem(option.value, id);
}
} }
/* Getters */ /* Getters */
@ -645,15 +654,10 @@ export class Choices {
this.input = input; this.input = input;
this.list = list; this.list = list;
this.dropdown = dropdown; this.dropdown = dropdown;
// Add any preset values seperated by delimiter
this.presetItems.forEach((value) => {
this.addItem(value);
});
const passedOptions = Array.prototype.slice.call(this.passedElement.options); const passedOptions = Array.prototype.slice.call(this.passedElement.options);
passedOptions.forEach((option) => { passedOptions.forEach((option) => {
this.addOptionToDropdown(option.value); this.addOptionToDropdown(option);
}); });
// Subscribe to store // Subscribe to store
@ -807,15 +811,15 @@ document.addEventListener('DOMContentLoaded', () => {
delimiter: ' ', delimiter: ' ',
editItems: true, editItems: true,
maxItems: 5, maxItems: 5,
callbackOnRemoveItem: function(value) { // callbackOnRemoveItem: function(value) {
console.log(value); // console.log(value);
}, // },
callbackOnAddItem: function(id, value) { // callbackOnAddItem: function(id, value) {
console.log(id, value); // console.log(id, value);
}, // },
callbackOnRender: function(items) { // callbackOnRender: function(items) {
console.log(items); // console.log(items);
} // }
}); });
const choices2 = new Choices('#choices-2', { const choices2 = new Choices('#choices-2', {
@ -846,14 +850,18 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
const choices7 = new Choices('#choices-7', { const choices7 = new Choices('#choices-7', {
callbackOnRender: function(items, options) { // callbackOnRender: function(items, options) {
console.log(items); // console.log(items);
} // },
}); });
const choicesMultiple = new Choices(); const choicesMultiple = new Choices('[data-choice]', {
callbackOnRender: function(items, options) {
console.log(items);
},
});
choices6.addItem('josh2@joshuajohnson.co.uk', () => { console.log('Custom add item callback')}); // choices6.addItem('josh2@joshuajohnson.co.uk', () => { console.log('Custom add item callback')});
choices6.removeItem('josh@joshuajohnson.co.uk'); // choices6.removeItem('josh@joshuajohnson.co.uk');
console.log(choices6.getItemById(1)); // console.log(choices6.getItemById(1));
}); });

7
assets/scripts/src/reducers/items.js
View file

@ -3,7 +3,8 @@ const items = (state = [], action) => {
case 'ADD_ITEM': case 'ADD_ITEM':
// Add object to items array // Add object to items array
let newState = [...state, { let newState = [...state, {
id: parseInt(action.id), id: action.id,
optionId: action.optionId,
value: action.value, value: action.value,
active: true, active: true,
selected: false selected: false
@ -19,7 +20,7 @@ const items = (state = [], action) => {
case 'REMOVE_ITEM': case 'REMOVE_ITEM':
// Set item to inactive // Set item to inactive
return state.map((item) => { return state.map((item) => {
if(item.id === parseInt(action.id)) { if(item.id === action.id) {
item.active = false; item.active = false;
} }
return item; return item;
@ -27,7 +28,7 @@ const items = (state = [], action) => {
case 'SELECT_ITEM': case 'SELECT_ITEM':
return state.map((item) => { return state.map((item) => {
if(item.id === parseInt(action.id)) { if(item.id === action.id) {
item.selected = action.selected; item.selected = action.selected;
} }

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

@ -1,15 +1,12 @@
const options = (state = [], action) => { const options = (state = [], action) => {
switch (action.type) { switch (action.type) {
case 'ADD_OPTION': case 'ADD_OPTION':
// Add object to items array return [...state, {
let newState = [...state, {
id: parseInt(action.id), id: parseInt(action.id),
value: action.value, value: action.value,
disabled: false, disabled: false,
selected: false selected: false
}]; }];;
return newState;
case 'SELECT_OPTION': case 'SELECT_OPTION':
return state.map((option) => { return state.map((option) => {
@ -20,6 +17,21 @@ const options = (state = [], action) => {
return option; 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;
}
default: default:
return state; return state;
} }