mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-17 21:16:34 +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 addItemToStore = (value, element, id) => {
|
||||||
export const addItem = (value, element) => {
|
|
||||||
return {
|
return {
|
||||||
id: initialId++;
|
|
||||||
type: 'ADD_ITEM',
|
type: 'ADD_ITEM',
|
||||||
value: value,
|
value: value,
|
||||||
element: element,
|
element: element,
|
||||||
active: true
|
id: id
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const removeItem = (element) => {
|
export const removeItemFromStore = (id) => {
|
||||||
return {
|
return {
|
||||||
type: 'REMOVE_ITEM',
|
type: 'REMOVE_ITEM',
|
||||||
active: false
|
id: id,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const updateItem = (value, element) => {
|
export const updateItemInStore = (value) => {
|
||||||
return {
|
return {
|
||||||
type: 'UPDATE_ITEM',
|
type: 'UPDATE_ITEM',
|
||||||
value: value
|
value: value
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
import { createStore } from 'redux';
|
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';
|
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.options = this.extend(DEFAULT_OPTIONS, USER_OPTIONS || {});
|
||||||
this.store = STORE;
|
this.store = STORE;
|
||||||
|
|
||||||
console.log(this.store);
|
|
||||||
|
|
||||||
this.initialised = false;
|
this.initialised = false;
|
||||||
this.supports = 'querySelector' in document && 'addEventListener' in document && 'classList' in FAKE_EL;
|
this.supports = 'querySelector' in document && 'addEventListener' in document && 'classList' in FAKE_EL;
|
||||||
|
|
||||||
// Retrieve elements
|
// Retrieve elements
|
||||||
this.element = this.options.element;
|
this.element = this.options.element;
|
||||||
|
|
||||||
// If input already has values, parse the array, otherwise create a blank array
|
// If input already has values, parse the array, otherwise create a blank array
|
||||||
this.valueArray = this.element.value !== '' ? this.cleanInputValue(this.element.value) : [];
|
this.valueArray = this.element.value !== '' ? this.cleanInputValue(this.element.value) : [];
|
||||||
|
|
||||||
// How many values in array
|
// How many values in array
|
||||||
this.valueCount = this.valueArray.length;
|
this.valueCount = this.valueArray.length;
|
||||||
|
|
||||||
|
@ -330,10 +331,13 @@ export class Choices {
|
||||||
passedValue = passedValue + this.options.appendValue.toString();
|
passedValue = passedValue + this.options.appendValue.toString();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let id = this.store.getState().length + 1;
|
||||||
|
|
||||||
// Create new list element
|
// Create new list element
|
||||||
let item = document.createElement('li');
|
let item = document.createElement('li');
|
||||||
item.classList.add('choices__item');
|
item.classList.add('choices__item');
|
||||||
item.textContent = passedValue;
|
item.textContent = passedValue;
|
||||||
|
item.id = id;
|
||||||
|
|
||||||
// Append it to list
|
// Append it to list
|
||||||
parent.appendChild(item);
|
parent.appendChild(item);
|
||||||
|
@ -346,6 +350,9 @@ export class Choices {
|
||||||
console.error('callbackOnAddItem: Callback is not a function');
|
console.error('callbackOnAddItem: Callback is not a function');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.store.dispatch(addItemToStore(passedValue, item, id));
|
||||||
|
console.log(this.store.getState());
|
||||||
}
|
}
|
||||||
|
|
||||||
removeItem(item) {
|
removeItem(item) {
|
||||||
|
@ -354,6 +361,7 @@ export class Choices {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let id = item.id;
|
||||||
let value = item.innerHTML;
|
let value = item.innerHTML;
|
||||||
item.parentNode.removeChild(item);
|
item.parentNode.removeChild(item);
|
||||||
|
|
||||||
|
@ -365,6 +373,9 @@ export class Choices {
|
||||||
console.error('callbackOnRemoveItem: Callback is not a function');
|
console.error('callbackOnRemoveItem: Callback is not a function');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.store.dispatch(removeItemFromStore(id));
|
||||||
|
console.log(this.store.getState());
|
||||||
}
|
}
|
||||||
|
|
||||||
removeAll(items) {
|
removeAll(items) {
|
||||||
|
@ -378,8 +389,6 @@ export class Choices {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
if (!this.supports) console.error('init: Your browser doesn\'nt support shit');
|
if (!this.supports) console.error('init: Your browser doesn\'nt support shit');
|
||||||
this.initialised = true;
|
this.initialised = true;
|
||||||
|
@ -551,12 +560,12 @@ export class Choices {
|
||||||
element : input1,
|
element : input1,
|
||||||
delimiter: ' ',
|
delimiter: ' ',
|
||||||
maxItems: 5,
|
maxItems: 5,
|
||||||
callbackOnRemoveItem: function(value) {
|
// callbackOnRemoveItem: function(value) {
|
||||||
console.log(value);
|
// console.log(value);
|
||||||
},
|
// },
|
||||||
callbackOnAddItem: function(item, value) {
|
// callbackOnAddItem: function(item, value) {
|
||||||
console.log(item, value);
|
// console.log(item, value);
|
||||||
}
|
// }
|
||||||
});
|
});
|
||||||
|
|
||||||
let choices2 = new Choices({
|
let choices2 = new Choices({
|
||||||
|
|
|
@ -1,33 +1,23 @@
|
||||||
const choice = (state = [], action) => {
|
// Array of choices
|
||||||
console.log('Choice', action);
|
const choices = (state = [], action) => {
|
||||||
switch(action.type) {
|
switch (action.type) {
|
||||||
case 'ADD_VALUE':
|
case 'ADD_ITEM':
|
||||||
return {
|
// Add object to items array
|
||||||
|
return [...state, {
|
||||||
|
id: parseInt(action.id),
|
||||||
value: action.value,
|
value: action.value,
|
||||||
element: action.element,
|
element: action.element,
|
||||||
active: true
|
active: true
|
||||||
};
|
}];
|
||||||
case 'REMOVE_VALUE':
|
|
||||||
return Object.assign({}, state, {
|
case 'REMOVE_ITEM':
|
||||||
active: false
|
// Remove item from items array
|
||||||
});
|
return state.filter(function(item) {
|
||||||
default:
|
if(item.id !== parseInt(action.id)) {
|
||||||
return state;
|
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:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue