mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-08 08:52:19 +02:00
Working data entry and removal from store'
This commit is contained in:
parent
9f778fffc9
commit
c4598aeccb
2
assets/scripts/dist/bundle.js
vendored
2
assets/scripts/dist/bundle.js
vendored
File diff suppressed because one or more lines are too long
|
@ -1,22 +1,20 @@
|
|||
let initialId = 0;
|
||||
export const addItem = (value, element) => {
|
||||
export const addItemToStore = (value, element, id) => {
|
||||
return {
|
||||
id: initialId++;
|
||||
type: 'ADD_ITEM',
|
||||
value: value,
|
||||
element: element,
|
||||
active: true
|
||||
id: id
|
||||
}
|
||||
}
|
||||
|
||||
export const removeItem = (element) => {
|
||||
export const removeItemFromStore = (id) => {
|
||||
return {
|
||||
type: 'REMOVE_ITEM',
|
||||
active: false
|
||||
id: id,
|
||||
}
|
||||
}
|
||||
|
||||
export const updateItem = (value, element) => {
|
||||
export const updateItemInStore = (value) => {
|
||||
return {
|
||||
type: 'UPDATE_ITEM',
|
||||
value: value
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
'use strict';
|
||||
|
||||
import { createStore } from 'redux';
|
||||
import choices from './reducers/index.js'
|
||||
import choices from './reducers/index.js';
|
||||
import { addItemToStore, removeItemFromStore } from './actions/index';
|
||||
import { hasClass, wrap, getSiblings, isType } from './lib/utils.js';
|
||||
|
||||
|
||||
|
@ -44,15 +45,15 @@ export class Choices {
|
|||
this.options = this.extend(DEFAULT_OPTIONS, USER_OPTIONS || {});
|
||||
this.store = STORE;
|
||||
|
||||
console.log(this.store);
|
||||
|
||||
this.initialised = false;
|
||||
this.supports = 'querySelector' in document && 'addEventListener' in document && 'classList' in FAKE_EL;
|
||||
|
||||
// Retrieve elements
|
||||
this.element = this.options.element;
|
||||
|
||||
// If input already has values, parse the array, otherwise create a blank array
|
||||
this.valueArray = this.element.value !== '' ? this.cleanInputValue(this.element.value) : [];
|
||||
|
||||
// How many values in array
|
||||
this.valueCount = this.valueArray.length;
|
||||
|
||||
|
@ -330,10 +331,13 @@ export class Choices {
|
|||
passedValue = passedValue + this.options.appendValue.toString();
|
||||
}
|
||||
|
||||
let id = this.store.getState().length + 1;
|
||||
|
||||
// Create new list element
|
||||
let item = document.createElement('li');
|
||||
item.classList.add('choices__item');
|
||||
item.textContent = passedValue;
|
||||
item.id = id;
|
||||
|
||||
// Append it to list
|
||||
parent.appendChild(item);
|
||||
|
@ -346,6 +350,9 @@ export class Choices {
|
|||
console.error('callbackOnAddItem: Callback is not a function');
|
||||
}
|
||||
}
|
||||
|
||||
this.store.dispatch(addItemToStore(passedValue, item, id));
|
||||
console.log(this.store.getState());
|
||||
}
|
||||
|
||||
removeItem(item) {
|
||||
|
@ -354,6 +361,7 @@ export class Choices {
|
|||
return;
|
||||
}
|
||||
|
||||
let id = item.id;
|
||||
let value = item.innerHTML;
|
||||
item.parentNode.removeChild(item);
|
||||
|
||||
|
@ -365,6 +373,9 @@ export class Choices {
|
|||
console.error('callbackOnRemoveItem: Callback is not a function');
|
||||
}
|
||||
}
|
||||
|
||||
this.store.dispatch(removeItemFromStore(id));
|
||||
console.log(this.store.getState());
|
||||
}
|
||||
|
||||
removeAll(items) {
|
||||
|
@ -378,8 +389,6 @@ export class Choices {
|
|||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
init() {
|
||||
if (!this.supports) console.error('init: Your browser doesn\'nt support shit');
|
||||
this.initialised = true;
|
||||
|
@ -551,12 +560,12 @@ export class Choices {
|
|||
element : input1,
|
||||
delimiter: ' ',
|
||||
maxItems: 5,
|
||||
callbackOnRemoveItem: function(value) {
|
||||
console.log(value);
|
||||
},
|
||||
callbackOnAddItem: function(item, value) {
|
||||
console.log(item, value);
|
||||
}
|
||||
// callbackOnRemoveItem: function(value) {
|
||||
// console.log(value);
|
||||
// },
|
||||
// callbackOnAddItem: function(item, value) {
|
||||
// console.log(item, value);
|
||||
// }
|
||||
});
|
||||
|
||||
let choices2 = new Choices({
|
||||
|
|
|
@ -1,33 +1,23 @@
|
|||
const choice = (state = [], action) => {
|
||||
console.log('Choice', action);
|
||||
switch(action.type) {
|
||||
case 'ADD_VALUE':
|
||||
return {
|
||||
// Array of choices
|
||||
const choices = (state = [], action) => {
|
||||
switch (action.type) {
|
||||
case 'ADD_ITEM':
|
||||
// Add object to items array
|
||||
return [...state, {
|
||||
id: parseInt(action.id),
|
||||
value: action.value,
|
||||
element: action.element,
|
||||
active: true
|
||||
};
|
||||
case 'REMOVE_VALUE':
|
||||
return Object.assign({}, state, {
|
||||
active: false
|
||||
});
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
}];
|
||||
|
||||
case 'REMOVE_ITEM':
|
||||
// Remove item from items array
|
||||
return state.filter(function(item) {
|
||||
if(item.id !== parseInt(action.id)) {
|
||||
return item;
|
||||
}
|
||||
});
|
||||
|
||||
const choices = (state = {}, action) => {
|
||||
console.log('Choices', action);
|
||||
switch(action.type) {
|
||||
case 'ADD_VALUE':
|
||||
return [
|
||||
...state,
|
||||
choice(undefined, action)
|
||||
]
|
||||
case 'REMOVE_VALUE':
|
||||
return state.map(t =>
|
||||
choice(t, action)
|
||||
)
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue