Add appropriate classes to notices

This commit is contained in:
Josh Johnson 2017-08-03 13:15:49 +01:00
parent bfa7b1d97f
commit 8fa852e4b8
2 changed files with 19 additions and 10 deletions

View file

@ -107,25 +107,28 @@ Or include Choices directly:
itemSelectable: 'choices__item--selectable', itemSelectable: 'choices__item--selectable',
itemDisabled: 'choices__item--disabled', itemDisabled: 'choices__item--disabled',
itemChoice: 'choices__item--choice', itemChoice: 'choices__item--choice',
placeholder: 'choices__placeholder',
group: 'choices__group', group: 'choices__group',
groupHeading : 'choices__heading', groupHeading: 'choices__heading',
button: 'choices__button', button: 'choices__button',
activeState: 'is-active', activeState: 'is-active',
focusState: 'is-focused', focusState: 'is-focused',
openState: 'is-open', openState: 'is-open',
disabledState: 'is-disabled', disabledState: 'is-disaqbled',
highlightedState: 'is-highlighted', highlightedState: 'is-highlighted',
hiddenState: 'is-hidden', hiddenState: 'is-hidden',
flippedState: 'is-flipped', flippedState: 'is-flipped',
loadingState: 'is-loading', loadingState: 'is-loading',
noResults: 'has-no-results',
noChoices: 'has-no-choices'
}, },
// Choices uses the great Fuse library for searching. You // Choices uses the great Fuse library for searching. You
// can find more options here: https://github.com/krisk/Fuse#options // can find more options here: https://github.com/krisk/Fuse#options
fuseOptions: { fuseOptions: {
include: 'score', include: 'score'
}, },
callbackOnInit: null, callbackOnInit: null,
callbackOnCreateTemplates: null, callbackOnCreateTemplates: null
}); });
``` ```

View file

@ -115,12 +115,14 @@ class Choices {
hiddenState: 'is-hidden', hiddenState: 'is-hidden',
flippedState: 'is-flipped', flippedState: 'is-flipped',
loadingState: 'is-loading', loadingState: 'is-loading',
noResults: 'has-no-results',
noChoices: 'has-no-choices'
}, },
fuseOptions: { fuseOptions: {
include: 'score', include: 'score'
}, },
callbackOnInit: null, callbackOnInit: null,
callbackOnCreateTemplates: null, callbackOnCreateTemplates: null
}; };
this.idNames = { this.idNames = {
@ -534,13 +536,13 @@ class Choices {
this.config.noResultsText() : this.config.noResultsText() :
this.config.noResultsText; this.config.noResultsText;
dropdownItem = this._getTemplate('notice', notice); dropdownItem = this._getTemplate('notice', notice, 'no-results');
} else { } else {
notice = isType('Function', this.config.noChoicesText) ? notice = isType('Function', this.config.noChoicesText) ?
this.config.noChoicesText() : this.config.noChoicesText() :
this.config.noChoicesText; this.config.noChoicesText;
dropdownItem = this._getTemplate('notice', notice); dropdownItem = this._getTemplate('notice', notice, 'no-choices');
} }
this.choiceList.appendChild(dropdownItem); this.choiceList.appendChild(dropdownItem);
@ -2655,10 +2657,14 @@ class Choices {
</div> </div>
`); `);
}, },
notice: (label) => { notice: (label, type) => {
let localClasses = classNames( let localClasses = classNames(
globalClasses.item, globalClasses.item,
globalClasses.itemChoice globalClasses.itemChoice,
{
[globalClasses.noResults]: (type === 'no-results'),
[globalClasses.noChoices]: (type === 'no-choices'),
}
); );
return strToEl(` return strToEl(`