deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-06-01 13:32:23 +02:00
Code Issues Projects Releases Wiki Activity

Use objects for args where necessary

Browse source
This commit is contained in:
Josh Johnson 2018-05-29 19:55:33 +01:00
parent 6f1d012ed2
commit 38cc568341
7 changed files with 175 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -77,7 +77,7 @@
<input class="form-control" id="choices-text-i18n" type="text"> <input class="form-control" id="choices-text-i18n" type="text">
<label for="choices-text-rtl">Right-to-left</label> <label for="choices-text-rtl">Right-to-left</label>
<input class="form-control" id="choices-text-rtl" type="text" value="Value 1, Value 2" dir="rtl"> <input data-trigger class="form-control" id="choices-text-rtl" type="text" value="Value 1, Value 2" dir="rtl">
<hr> <hr>

4
src/scripts/actions/choices.js
View file

@ -1,6 +1,6 @@
import { ACTION_TYPES } from './../constants'; import { ACTION_TYPES } from './../constants';
export const addChoice = ( export const addChoice = ({
value, value,
label, label,
id, id,
@ -10,7 +10,7 @@ export const addChoice = (
customProperties, customProperties,
placeholder, placeholder,
keyCode, keyCode,
) => ({ }) => ({
type: ACTION_TYPES.ADD_CHOICE, type: ACTION_TYPES.ADD_CHOICE,
value, value,
label, label,

4
src/scripts/actions/choices.test.js
View file

@ -28,7 +28,7 @@ describe('actions/choices', () => {
}; };
expect( expect(
actions.addChoice( actions.addChoice({
value, value,
label, label,
id, id,
@ -38,7 +38,7 @@ describe('actions/choices', () => {
customProperties, customProperties,
placeholder, placeholder,
keyCode, keyCode,
), }),
).to.eql(expectedAction); ).to.eql(expectedAction);
}); });
}); });

4
src/scripts/actions/items.js
View file

@ -1,6 +1,6 @@
import { ACTION_TYPES } from './../constants'; import { ACTION_TYPES } from './../constants';
export const addItem = ( export const addItem = ({
value, value,
label, label,
id, id,
@ -9,7 +9,7 @@ export const addItem = (
customProperties, customProperties,
placeholder, placeholder,
keyCode, keyCode,
) => ({ }) => ({
type: ACTION_TYPES.ADD_ITEM, type: ACTION_TYPES.ADD_ITEM,
value, value,
label, label,

4
src/scripts/actions/items.test.js
View file

@ -26,7 +26,7 @@ describe('actions/items', () => {
}; };
expect( expect(
actions.addItem( actions.addItem({
value, value,
label, label,
id, id,
@ -35,7 +35,7 @@ describe('actions/items', () => {
customProperties, customProperties,
placeholder, placeholder,
keyCode, keyCode,
), }),
).to.eql(expectedAction); ).to.eql(expectedAction);
}); });
}); });

283
src/scripts/choices.js
View file

@ -427,17 +427,21 @@ class Choices {
this.containerOuter.removeLoadingState(); this.containerOuter.removeLoadingState();
const addGroupsAndChoices = groupOrChoice => { const addGroupsAndChoices = groupOrChoice => {
if (groupOrChoice.choices) { if (groupOrChoice.choices) {
this._addGroup(groupOrChoice, groupOrChoice.id || null, value, label); this._addGroup({
group: groupOrChoice,
id: groupOrChoice.id || null,
valueKey: value,
labelKey: label,
});
} else { } else {
this._addChoice( this._addChoice({
groupOrChoice[value], value: groupOrChoice[value],
groupOrChoice[label], label: groupOrChoice[label],
groupOrChoice.selected, isSelected: groupOrChoice.selected,
groupOrChoice.disabled, isDisabled: groupOrChoice.disabled,
undefined, customProperties: groupOrChoice.customProperties,
groupOrChoice.customProperties, placeholder: groupOrChoice.placeholder,
groupOrChoice.placeholder, });
);
} }
}; };
@ -624,14 +628,14 @@ class Choices {
const placeholderChoice = this._store.placeholderChoice; const placeholderChoice = this._store.placeholderChoice;
if (placeholderChoice) { if (placeholderChoice) {
this._addItem( this._addItem({
placeholderChoice.value, value: placeholderChoice.value,
placeholderChoice.label, label: placeholderChoice.label,
placeholderChoice.id, choiceId: placeholderChoice.id,
placeholderChoice.groupId, groupId: placeholderChoice.groupId,
null, placeholder: placeholderChoice.placeholder,
placeholderChoice.placeholder, });
);
this._triggerChange(placeholderChoice.value); this._triggerChange(placeholderChoice.value);
} }
} }
@ -711,15 +715,16 @@ class Choices {
const canAddItem = this._canAddItem(activeItems, choice.value); const canAddItem = this._canAddItem(activeItems, choice.value);
if (canAddItem.response) { if (canAddItem.response) {
this._addItem( this._addItem({
choice.value, value: choice.value,
choice.label, label: choice.label,
choice.id, choiceId: choice.id,
choice.groupId, groupId: choice.groupId,
choice.customProperties, customProperties: choice.customProperties,
choice.placeholder, placeholder: choice.placeholder,
choice.keyCode, keyCode: choice.keyCode,
); });
this._triggerChange(choice.value); this._triggerChange(choice.value);
} }
} }
@ -857,17 +862,21 @@ class Choices {
parsedResults.forEach(result => { parsedResults.forEach(result => {
if (result.choices) { if (result.choices) {
const groupId = result.id || null; const groupId = result.id || null;
this._addGroup(result, groupId, value, label); this._addGroup({
group: result,
id: groupId,
valueKey: value,
labelKey: label,
});
} else { } else {
this._addChoice( this._addChoice({
fetchFromObject(result, value), value: fetchFromObject(result, value),
fetchFromObject(result, label), label: fetchFromObject(result, label),
result.selected, isSelected: result.selected,
result.disabled, isDisabled: result.disabled,
undefined, customProperties: result.customProperties,
result.customProperties, placeholder: result.placeholder,
result.placeholder, });
);
} }
}); });
@ -1036,7 +1045,7 @@ class Choices {
// All is good, add // All is good, add
if (canAddItem.response) { if (canAddItem.response) {
this.hideDropdown(true); this.hideDropdown(true);
this._addItem(value); this._addItem({ value });
this._triggerChange(value); this._triggerChange(value);
this.clearInput(); this.clearInput();
} }
@ -1443,7 +1452,7 @@ class Choices {
} }
} }
_addItem( _addItem({
value, value,
label = null, label = null,
choiceId = -1, choiceId = -1,
@ -1451,7 +1460,7 @@ class Choices {
customProperties = null, customProperties = null,
placeholder = false, placeholder = false,
keyCode = null, keyCode = null,
) { }) {
let passedValue = isType('String', value) ? value.trim() : value; let passedValue = isType('String', value) ? value.trim() : value;
const passedKeyCode = keyCode; const passedKeyCode = keyCode;
@ -1473,16 +1482,16 @@ class Choices {
} }
this._store.dispatch( this._store.dispatch(
addItem( addItem({
passedValue, value: passedValue,
passedLabel, label: passedLabel,
id, id,
passedOptionId, choiceId: passedOptionId,
groupId, groupId,
customProperties, customProperties,
placeholder, placeholder,
passedKeyCode, keyCode: passedKeyCode,
), }),
); );
if (this._isSelectOneElement) { if (this._isSelectOneElement) {
@ -1540,7 +1549,7 @@ class Choices {
return this; return this;
} }
_addChoice( _addChoice({
value, value,
label = null, label = null,
isSelected = false, isSelected = false,
@ -1549,7 +1558,7 @@ class Choices {
customProperties = null, customProperties = null,
placeholder = false, placeholder = false,
keyCode = null, keyCode = null,
) { }) {
if (typeof value === 'undefined' || value === null) { if (typeof value === 'undefined' || value === null) {
return; return;
} }
@ -1563,29 +1572,28 @@ class Choices {
}-${choiceId}`; }-${choiceId}`;
this._store.dispatch( this._store.dispatch(
addChoice( addChoice({
value, value,
choiceLabel, label: choiceLabel,
choiceId, id: choiceId,
groupId, groupId,
isDisabled, disabled: isDisabled,
choiceElementId, elementId: choiceElementId,
customProperties, customProperties,
placeholder, placeholder,
keyCode, keyCode,
), }),
); );
if (isSelected) { if (isSelected) {
this._addItem( this._addItem({
value, value,
choiceLabel, label: choiceLabel,
choiceId, choiceId,
undefined,
customProperties, customProperties,
placeholder, placeholder,
keyCode, keyCode,
); });
} }
} }
@ -1593,7 +1601,7 @@ class Choices {
this._store.dispatch(clearChoices()); this._store.dispatch(clearChoices());
} }
_addGroup(group, id, valueKey = 'value', labelKey = 'label') { _addGroup({ group, id, valueKey = 'value', labelKey = 'label' }) {
const groupChoices = isType('Object', group) const groupChoices = isType('Object', group)
? group.choices ? group.choices
: Array.from(group.getElementsByTagName('OPTION')); : Array.from(group.getElementsByTagName('OPTION'));
@ -1606,15 +1614,16 @@ class Choices {
const addGroupChoices = choice => { const addGroupChoices = choice => {
const isOptDisabled = const isOptDisabled =
choice.disabled || (choice.parentNode && choice.parentNode.disabled); choice.disabled || (choice.parentNode && choice.parentNode.disabled);
this._addChoice(
choice[valueKey], this._addChoice({
isType('Object', choice) ? choice[labelKey] : choice.innerHTML, value: choice[valueKey],
choice.selected, label: isType('Object', choice) ? choice[labelKey] : choice.innerHTML,
isOptDisabled, isSelected: choice.selected,
isDisabled: isOptDisabled,
groupId, groupId,
choice.customProperties, customProperties: choice.customProperties,
choice.placeholder, placeholder: choice.placeholder,
); });
}; };
groupChoices.forEach(addGroupChoices); groupChoices.forEach(addGroupChoices);
@ -1758,18 +1767,21 @@ class Choices {
placeholderChoice && placeholderChoice &&
placeholderChoice.parentNode.tagName === 'SELECT' placeholderChoice.parentNode.tagName === 'SELECT'
) { ) {
this._addChoice( this._addChoice({
placeholderChoice.value, value: placeholderChoice.value,
placeholderChoice.innerHTML, label: placeholderChoice.innerHTML,
placeholderChoice.selected, isSelected: placeholderChoice.selected,
placeholderChoice.disabled, isDisabled: placeholderChoice.disabled,
undefined, placeholder: true,
undefined, });
/* placeholder */ true,
);
} }
passedGroups.forEach(group => this._addGroup(group, group.id || null)); passedGroups.forEach(group =>
this._addGroup({
group,
id: group.id || null,
}),
);
} else { } else {
const passedOptions = this.passedElement.options; const passedOptions = this.passedElement.options;
const filter = this.config.sortFn; const filter = this.config.sortFn;
@ -1794,10 +1806,15 @@ class Choices {
// Determine whether there is a selected choice // Determine whether there is a selected choice
const hasSelectedChoice = allChoices.some(choice => choice.selected); const hasSelectedChoice = allChoices.some(choice => choice.selected);
const handleChoice = (choice, index) => { const handleChoice = (choice, index) => {
const { value, label, customProperties, placeholder } = choice;
if (this._isSelectElement) { if (this._isSelectElement) {
// If the choice is actually a group // If the choice is actually a group
if (choice.choices) { if (choice.choices) {
this._addGroup(choice, choice.id || null); this._addGroup({
group: choice,
id: choice.id || null,
});
} else { } else {
// If there is a selected choice already or the choice is not // If there is a selected choice already or the choice is not
// the first in the array, add each choice normally // the first in the array, add each choice normally
@ -1807,26 +1824,24 @@ class Choices {
const isSelected = shouldPreselect ? true : choice.selected; const isSelected = shouldPreselect ? true : choice.selected;
const isDisabled = shouldPreselect ? false : choice.disabled; const isDisabled = shouldPreselect ? false : choice.disabled;
this._addChoice( this._addChoice({
choice.value, value,
choice.label, label,
isSelected, isSelected,
isDisabled, isDisabled,
undefined, customProperties,
choice.customProperties, placeholder,
choice.placeholder, });
);
} }
} else { } else {
this._addChoice( this._addChoice({
choice.value, value,
choice.label, label,
choice.selected, isSelected: choice.selected,
choice.disabled, isDisabled: choice.disabled,
undefined, customProperties,
choice.customProperties, placeholder,
choice.placeholder, });
);
} }
}; };
@ -1842,16 +1857,17 @@ class Choices {
if (!item.value) { if (!item.value) {
return; return;
} }
this._addItem( this._addItem({
item.value, value: item.value,
item.label, label: item.label,
item.id, choiceId: item.id,
undefined, customProperties: item.customProperties,
item.customProperties, placeholder: item.placeholder,
item.placeholder, });
);
} else if (itemType === 'String') { } else if (itemType === 'String') {
this._addItem(item); this._addItem({
value: item,
});
} }
}; };
@ -1869,31 +1885,36 @@ class Choices {
// If we are dealing with a select input, we need to create an option first // If we are dealing with a select input, we need to create an option first
// that is then selected. For text inputs we can just add items normally. // that is then selected. For text inputs we can just add items normally.
if (!this._isTextElement) { if (!this._isTextElement) {
this._addChoice( this._addChoice({
item.value, value: item.value,
item.label, label: item.label,
true, isSelected: true,
false, isDisabled: false,
-1, customProperties: item.customProperties,
item.customProperties, placeholder: item.placeholder,
item.placeholder, });
);
} else { } else {
this._addItem( this._addItem({
item.value, value: item.value,
item.label, label: item.label,
item.id, choiceId: item.id,
undefined, customProperties: item.customProperties,
item.customProperties, placeholder: item.placeholder,
item.placeholder, });
);
} }
}, },
string: () => { string: () => {
if (!this._isTextElement) { if (!this._isTextElement) {
this._addChoice(item, item, true, false, -1, null); this._addChoice({
value: item,
label: item,
isSelected: true,
isDisabled: false,
});
} else { } else {
this._addItem(item); this._addItem({
value: item,
});
} }
}, },
}; };
@ -1909,15 +1930,15 @@ class Choices {
); );
if (foundChoice && !foundChoice.selected) { if (foundChoice && !foundChoice.selected) {
this._addItem( this._addItem({
foundChoice.value, value: foundChoice.value,
foundChoice.label, label: foundChoice.label,
foundChoice.id, id: foundChoice.id,
foundChoice.groupId, groupId: foundChoice.groupId,
foundChoice.customProperties, customProperties: foundChoice.customProperties,
foundChoice.placeholder, placeholder: foundChoice.placeholder,
foundChoice.keyCode, keyCode: foundChoice.keyCode,
); });
} }
} }

25
src/scripts/choices.test.js
View file

@ -1476,10 +1476,12 @@ describe('choices', () => {
it('adds groups', () => { it('adds groups', () => {
instance.setChoices(groups, value, label, false); instance.setChoices(groups, value, label, false);
expect(addGroupStub.callCount).to.equal(1); expect(addGroupStub.callCount).to.equal(1);
expect(addGroupStub.firstCall.args[0]).to.equal(groups[0]); expect(addGroupStub.firstCall.args[0]).to.eql({
expect(addGroupStub.firstCall.args[1]).to.equal(groups[0].id); group: groups[0],
expect(addGroupStub.firstCall.args[2]).to.equal(value); id: groups[0].id,
expect(addGroupStub.firstCall.args[3]).to.equal(label); valueKey: value,
labelKey: label,
});
}); });
}); });
@ -1488,13 +1490,14 @@ describe('choices', () => {
instance.setChoices(choices, value, label, false); instance.setChoices(choices, value, label, false);
expect(addChoiceStub.callCount).to.equal(2); expect(addChoiceStub.callCount).to.equal(2);
addChoiceStub.getCalls().forEach((call, index) => { addChoiceStub.getCalls().forEach((call, index) => {
expect(call.args[0]).to.equal(choices[index][value]); expect(call.args[0]).to.eql({
expect(call.args[1]).to.equal(choices[index][label]); value: choices[index][value],
expect(call.args[2]).to.equal(choices[index].selected); label: choices[index][label],
expect(call.args[3]).to.equal(choices[index].disabled); isSelected: choices[index].selected,
expect(call.args[4]).to.equal(undefined); isDisabled: choices[index].disabled,
expect(call.args[5]).to.equal(choices[index].customProperties); customProperties: choices[index].customProperties,
expect(call.args[6]).to.equal(choices[index].placeholder); placeholder: choices[index].placeholder,
});
}); });
}); });
}); });