mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-08 08:52:19 +02:00
Adding an item comparer configuration to allow custom comparisons of items.
This commit is contained in:
parent
5f11caae1b
commit
0519b99397
10
README.md
10
README.md
|
@ -99,6 +99,9 @@ Or include Choices directly:
|
|||
maxItemText: (maxItemCount) => {
|
||||
return `Only ${maxItemCount} values can be added.`;
|
||||
},
|
||||
itemComparer: (choice, item) => {
|
||||
return choice === item;
|
||||
},
|
||||
classNames: {
|
||||
containerOuter: 'choices',
|
||||
containerInner: 'choices__inner',
|
||||
|
@ -458,6 +461,13 @@ const example = new Choices(element, {
|
|||
|
||||
**Usage:** The text that is shown when a user has focus on the input but has already reached the [max item count](https://github.com/jshjohnson/Choices#maxitemcount). To access the max item count, pass a function with a `maxItemCount` argument (see the [default config](https://github.com/jshjohnson/Choices#setup) for an example), otherwise pass a string.
|
||||
|
||||
### itemComparer
|
||||
**Type:** `Function` **Default:** `strict equality`
|
||||
|
||||
**Input types affected:** `select-one`, `select-multiple`
|
||||
|
||||
**Usage:** Compare choice and value in appropriate way (e.g. deep equality for objects). To compare choice and value, pass a function with a `itemComparer` argument (see the [default config](https://github.com/jshjohnson/Choices#setup) for an example).
|
||||
|
||||
### classNames
|
||||
**Type:** `Object` **Default:**
|
||||
|
||||
|
|
|
@ -90,6 +90,9 @@ class Choices {
|
|||
maxItemText: (maxItemCount) => {
|
||||
return `Only ${maxItemCount} values can be added.`;
|
||||
},
|
||||
itemComparer: (choice, item) => {
|
||||
return choice === item;
|
||||
},
|
||||
uniqueItemText: 'Only unique values can be added.',
|
||||
classNames: {
|
||||
containerOuter: 'choices',
|
||||
|
@ -947,7 +950,7 @@ class Choices {
|
|||
choiceValue.forEach((val) => {
|
||||
const foundChoice = choices.find((choice) => {
|
||||
// Check 'value' property exists and the choice isn't already selected
|
||||
return choice.value === val;
|
||||
return this.config.itemComparer(choice.value, val);
|
||||
});
|
||||
|
||||
if (foundChoice) {
|
||||
|
|
|
@ -78,6 +78,7 @@ describe('Choices', () => {
|
|||
expect(this.choices.config.noChoicesText).toEqual(jasmine.any(String));
|
||||
expect(this.choices.config.itemSelectText).toEqual(jasmine.any(String));
|
||||
expect(this.choices.config.classNames).toEqual(jasmine.any(Object));
|
||||
expect(this.choices.config.itemComparer).toEqual(jasmine.any(Function));
|
||||
expect(this.choices.config.callbackOnInit).toEqual(null);
|
||||
expect(this.choices.config.callbackOnCreateTemplates).toEqual(null);
|
||||
});
|
||||
|
@ -1217,4 +1218,56 @@ describe('Choices', () => {
|
|||
expect(selectedItems[0].customProperties).toBe(expectedCustomProperties);
|
||||
});
|
||||
});
|
||||
|
||||
describe('should allow to use object in value', function() {
|
||||
beforeEach(function() {
|
||||
this.input = document.createElement('select');
|
||||
this.input.className = 'js-choices';
|
||||
this.input.setAttribute('multiple', '');
|
||||
|
||||
document.body.appendChild(this.input);
|
||||
|
||||
this.choicesArray = [
|
||||
{
|
||||
label: 'One',
|
||||
value: {
|
||||
id: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Two',
|
||||
value: {
|
||||
id: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Three',
|
||||
value: {
|
||||
id: 3
|
||||
}
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
this.choices.destroy();
|
||||
});
|
||||
|
||||
it('should allow the user to supply itemComparer via options', function() {
|
||||
function comparer(choice, item) {
|
||||
return choice.id === item.id;
|
||||
}
|
||||
|
||||
this.choices = new Choices(this.input, {
|
||||
itemComparer: comparer,
|
||||
choices: this.choicesArray
|
||||
});
|
||||
|
||||
this.choices.setValueByChoice({
|
||||
id: 1
|
||||
});
|
||||
|
||||
expect(this.choices.currentState.items[0].label).toBe(this.choicesArray[0].label);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue