mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-03 06:22:25 +02:00
Resolve eslint errors
This commit is contained in:
parent
6b3437627d
commit
f82ddb3530
|
@ -10,6 +10,7 @@
|
||||||
"parser": "babel-eslint",
|
"parser": "babel-eslint",
|
||||||
"rules": {
|
"rules": {
|
||||||
"strict": 0,
|
"strict": 0,
|
||||||
"no-underscore-dangle": 0
|
"no-underscore-dangle": 0,
|
||||||
|
"no-console": ["warn", { allow: ["warn", "error"] }]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,13 @@
|
||||||
export const addItem = (value, label, id, choiceId, groupId, customProperties, placeholder, keyCode) => ({
|
export const addItem = (
|
||||||
|
value,
|
||||||
|
label,
|
||||||
|
id,
|
||||||
|
choiceId,
|
||||||
|
groupId,
|
||||||
|
customProperties,
|
||||||
|
placeholder,
|
||||||
|
keyCode,
|
||||||
|
) => ({
|
||||||
type: 'ADD_ITEM',
|
type: 'ADD_ITEM',
|
||||||
value,
|
value,
|
||||||
label,
|
label,
|
||||||
|
@ -22,7 +31,17 @@ export const highlightItem = (id, highlighted) => ({
|
||||||
highlighted,
|
highlighted,
|
||||||
});
|
});
|
||||||
|
|
||||||
export const addChoice = (value, label, id, groupId, disabled, elementId, customProperties, placeholder, keyCode) => ({
|
export const addChoice = (
|
||||||
|
value,
|
||||||
|
label,
|
||||||
|
id,
|
||||||
|
groupId,
|
||||||
|
disabled,
|
||||||
|
elementId,
|
||||||
|
customProperties,
|
||||||
|
placeholder,
|
||||||
|
keyCode,
|
||||||
|
) => ({
|
||||||
type: 'ADD_CHOICE',
|
type: 'ADD_CHOICE',
|
||||||
value,
|
value,
|
||||||
label,
|
label,
|
||||||
|
|
|
@ -1763,7 +1763,10 @@ class Choices {
|
||||||
// We are typing into a text input and have a value, we want to show a dropdown
|
// We are typing into a text input and have a value, we want to show a dropdown
|
||||||
// notice. Otherwise hide the dropdown
|
// notice. Otherwise hide the dropdown
|
||||||
if (this.isTextElement) {
|
if (this.isTextElement) {
|
||||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
const hasActiveDropdown = this.dropdown.classList.contains(
|
||||||
|
this.config.classNames.activeState,
|
||||||
|
);
|
||||||
|
|
||||||
if (value) {
|
if (value) {
|
||||||
if (canAddItem.notice) {
|
if (canAddItem.notice) {
|
||||||
const dropdownItem = this._getTemplate('notice', canAddItem.notice);
|
const dropdownItem = this._getTemplate('notice', canAddItem.notice);
|
||||||
|
@ -1836,7 +1839,10 @@ class Choices {
|
||||||
// If a user tapped within our container...
|
// If a user tapped within our container...
|
||||||
if (this.wasTap === true && this.containerOuter.contains(target)) {
|
if (this.wasTap === true && this.containerOuter.contains(target)) {
|
||||||
// ...and we aren't dealing with a single select box, show dropdown/focus input
|
// ...and we aren't dealing with a single select box, show dropdown/focus input
|
||||||
if ((target === this.containerOuter || target === this.containerInner) && !this.isSelectOneElement) {
|
if (
|
||||||
|
(target === this.containerOuter || target === this.containerInner) &&
|
||||||
|
!this.isSelectOneElement
|
||||||
|
) {
|
||||||
if (this.isTextElement) {
|
if (this.isTextElement) {
|
||||||
// If text element, we only want to focus the input (if it isn't already)
|
// If text element, we only want to focus the input (if it isn't already)
|
||||||
if (document.activeElement !== this.input) {
|
if (document.activeElement !== this.input) {
|
||||||
|
@ -1917,7 +1923,11 @@ class Choices {
|
||||||
this.showDropdown();
|
this.showDropdown();
|
||||||
this.containerOuter.focus();
|
this.containerOuter.focus();
|
||||||
}
|
}
|
||||||
} else if (this.isSelectOneElement && target !== this.input && !this.dropdown.contains(target)) {
|
} else if (
|
||||||
|
this.isSelectOneElement &&
|
||||||
|
target !== this.input &&
|
||||||
|
!this.dropdown.contains(target)
|
||||||
|
) {
|
||||||
this.hideDropdown(true);
|
this.hideDropdown(true);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -1974,7 +1984,9 @@ class Choices {
|
||||||
const target = e.target;
|
const target = e.target;
|
||||||
// If target is something that concerns us
|
// If target is something that concerns us
|
||||||
if (this.containerOuter.contains(target)) {
|
if (this.containerOuter.contains(target)) {
|
||||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
const hasActiveDropdown = this.dropdown.classList.contains(
|
||||||
|
this.config.classNames.activeState,
|
||||||
|
);
|
||||||
const focusActions = {
|
const focusActions = {
|
||||||
text: () => {
|
text: () => {
|
||||||
if (target === this.input) {
|
if (target === this.input) {
|
||||||
|
@ -2018,7 +2030,9 @@ class Choices {
|
||||||
// If target is something that concerns us
|
// If target is something that concerns us
|
||||||
if (this.containerOuter.contains(target) && !this.isScrollingOnIe) {
|
if (this.containerOuter.contains(target) && !this.isScrollingOnIe) {
|
||||||
const activeItems = this.store.getItemsFilteredByActive();
|
const activeItems = this.store.getItemsFilteredByActive();
|
||||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
const hasActiveDropdown = this.dropdown.classList.contains(
|
||||||
|
this.config.classNames.activeState,
|
||||||
|
);
|
||||||
const hasHighlightedItems = activeItems.some(item => item.highlighted);
|
const hasHighlightedItems = activeItems.some(item => item.highlighted);
|
||||||
const blurActions = {
|
const blurActions = {
|
||||||
text: () => {
|
text: () => {
|
||||||
|
@ -2188,7 +2202,15 @@ class Choices {
|
||||||
* @return {Object} Class instance
|
* @return {Object} Class instance
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
_addItem(value, label = null, choiceId = -1, groupId = -1, customProperties = null, placeholder = false, keyCode = null) {
|
_addItem(
|
||||||
|
value,
|
||||||
|
label = null,
|
||||||
|
choiceId = -1,
|
||||||
|
groupId = -1,
|
||||||
|
customProperties = null,
|
||||||
|
placeholder = false,
|
||||||
|
keyCode = null,
|
||||||
|
) {
|
||||||
let passedValue = isType('String', value) ? value.trim() : value;
|
let passedValue = isType('String', value) ? value.trim() : value;
|
||||||
const passedKeyCode = keyCode;
|
const passedKeyCode = keyCode;
|
||||||
const items = this.store.getItems();
|
const items = this.store.getItems();
|
||||||
|
@ -2300,7 +2322,16 @@ class Choices {
|
||||||
* @return
|
* @return
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_addChoice(value, label = null, isSelected = false, isDisabled = false, groupId = -1, customProperties = null, placeholder = false, keyCode = null) {
|
_addChoice(
|
||||||
|
value,
|
||||||
|
label = null,
|
||||||
|
isSelected = false,
|
||||||
|
isDisabled = false,
|
||||||
|
groupId = -1,
|
||||||
|
customProperties = null,
|
||||||
|
placeholder = false,
|
||||||
|
keyCode = null,
|
||||||
|
) {
|
||||||
if (typeof value === 'undefined' || value === null) {
|
if (typeof value === 'undefined' || value === null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -2420,25 +2451,30 @@ class Choices {
|
||||||
_createTemplates() {
|
_createTemplates() {
|
||||||
const globalClasses = this.config.classNames;
|
const globalClasses = this.config.classNames;
|
||||||
const templates = {
|
const templates = {
|
||||||
containerOuter: direction => strToEl(`
|
containerOuter: (direction) => {
|
||||||
<div
|
const tabIndex = this.isSelectOneElement ? 'tabindex="0"' : '';
|
||||||
class="${globalClasses.containerOuter}"
|
let role = this.isSelectElement ? 'role="listbox"' : '';
|
||||||
${this.isSelectElement ? (this.config.searchEnabled ?
|
let ariaAutoComplete = '';
|
||||||
'role="combobox" aria-autocomplete="list"' :
|
|
||||||
'role="listbox"') :
|
if (this.config.searchEnabled && this.isSelectElement) {
|
||||||
''
|
role = 'role="combobox"';
|
||||||
}
|
ariaAutoComplete = 'aria-autocomplete="list"';
|
||||||
data-type="${this.passedElement.type}"
|
}
|
||||||
${this.isSelectOneElement ?
|
|
||||||
'tabindex="0"' :
|
return strToEl(`
|
||||||
''
|
<div
|
||||||
}
|
class="${globalClasses.containerOuter}"
|
||||||
aria-haspopup="true"
|
data-type="${this.passedElement.type}"
|
||||||
aria-expanded="false"
|
${role}
|
||||||
dir="${direction}"
|
${tabIndex}
|
||||||
>
|
${ariaAutoComplete}
|
||||||
</div>
|
aria-haspopup="true"
|
||||||
`),
|
aria-expanded="false"
|
||||||
|
dir="${direction}"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
},
|
||||||
containerInner: () => strToEl(`
|
containerInner: () => strToEl(`
|
||||||
<div class="${globalClasses.containerInner}"></div>
|
<div class="${globalClasses.containerInner}"></div>
|
||||||
`),
|
`),
|
||||||
|
@ -2460,6 +2496,9 @@ class Choices {
|
||||||
</div>
|
</div>
|
||||||
`),
|
`),
|
||||||
item: (data) => {
|
item: (data) => {
|
||||||
|
const ariaSelected = data.active ? 'aria-selected="true"' : '';
|
||||||
|
const ariaDisabled = data.disabled ? 'aria-disabled="true"' : '';
|
||||||
|
|
||||||
let localClasses = classNames(
|
let localClasses = classNames(
|
||||||
globalClasses.item, {
|
globalClasses.item, {
|
||||||
[globalClasses.highlightedState]: data.highlighted,
|
[globalClasses.highlightedState]: data.highlighted,
|
||||||
|
@ -2484,14 +2523,8 @@ class Choices {
|
||||||
data-id="${data.id}"
|
data-id="${data.id}"
|
||||||
data-value="${data.value}"
|
data-value="${data.value}"
|
||||||
data-deletable
|
data-deletable
|
||||||
${data.active ?
|
${ariaSelected}
|
||||||
'aria-selected="true"' :
|
${ariaDisabled}
|
||||||
''
|
|
||||||
}
|
|
||||||
${data.disabled ?
|
|
||||||
'aria-disabled="true"' :
|
|
||||||
''
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
${data.label}<!--
|
${data.label}<!--
|
||||||
--><button
|
--><button
|
||||||
|
@ -2512,32 +2545,30 @@ class Choices {
|
||||||
data-item
|
data-item
|
||||||
data-id="${data.id}"
|
data-id="${data.id}"
|
||||||
data-value="${data.value}"
|
data-value="${data.value}"
|
||||||
${data.active ?
|
${ariaSelected}
|
||||||
'aria-selected="true"' :
|
${ariaDisabled}
|
||||||
''
|
|
||||||
}
|
|
||||||
${data.disabled ?
|
|
||||||
'aria-disabled="true"' :
|
|
||||||
''
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
${data.label}
|
${data.label}
|
||||||
</div>
|
</div>
|
||||||
`);
|
`);
|
||||||
},
|
},
|
||||||
choiceList: () => strToEl(`
|
choiceList: () => {
|
||||||
<div
|
const ariaMultiSelectable = !this.isSelectOneElement ?
|
||||||
class="${globalClasses.list}"
|
'aria-multiselectable="true"' :
|
||||||
dir="ltr"
|
'';
|
||||||
role="listbox"
|
|
||||||
${!this.isSelectOneElement ?
|
return strToEl(`
|
||||||
'aria-multiselectable="true"' :
|
<div
|
||||||
''
|
class="${globalClasses.list}"
|
||||||
}
|
dir="ltr"
|
||||||
>
|
role="listbox"
|
||||||
</div>
|
${ariaMultiSelectable}
|
||||||
`),
|
>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
},
|
||||||
choiceGroup: (data) => {
|
choiceGroup: (data) => {
|
||||||
|
const ariaDisabled = data.disabled ? 'aria-disabled="true"' : '';
|
||||||
const localClasses = classNames(
|
const localClasses = classNames(
|
||||||
globalClasses.group, {
|
globalClasses.group, {
|
||||||
[globalClasses.itemDisabled]: data.disabled,
|
[globalClasses.itemDisabled]: data.disabled,
|
||||||
|
@ -2551,16 +2582,14 @@ class Choices {
|
||||||
data-id="${data.id}"
|
data-id="${data.id}"
|
||||||
data-value="${data.value}"
|
data-value="${data.value}"
|
||||||
role="group"
|
role="group"
|
||||||
${data.disabled ?
|
${ariaDisabled}
|
||||||
'aria-disabled="true"' :
|
|
||||||
''
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<div class="${globalClasses.groupHeading}">${data.value}</div>
|
<div class="${globalClasses.groupHeading}">${data.value}</div>
|
||||||
</div>
|
</div>
|
||||||
`);
|
`);
|
||||||
},
|
},
|
||||||
choice: (data) => {
|
choice: (data) => {
|
||||||
|
const role = data.groupId > 0 ? 'role="treeitem"' : 'role="option"';
|
||||||
const localClasses = classNames(
|
const localClasses = classNames(
|
||||||
globalClasses.item,
|
globalClasses.item,
|
||||||
globalClasses.itemChoice, {
|
globalClasses.itemChoice, {
|
||||||
|
@ -2582,10 +2611,7 @@ class Choices {
|
||||||
'data-choice-selectable'
|
'data-choice-selectable'
|
||||||
}
|
}
|
||||||
id="${data.elementId}"
|
id="${data.elementId}"
|
||||||
${data.groupId > 0 ?
|
${role}
|
||||||
'role="treeitem"' :
|
|
||||||
'role="option"'
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
${data.label}
|
${data.label}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue