2017-10-10 17:59:49 +02:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import { strToEl } from './lib/utils';
|
|
|
|
|
|
|
|
export const TEMPLATES = {
|
2017-10-18 10:08:27 +02:00
|
|
|
containerOuter(
|
|
|
|
globalClasses,
|
|
|
|
direction,
|
|
|
|
isSelectElement,
|
|
|
|
isSelectOneElement,
|
|
|
|
searchEnabled,
|
|
|
|
passedElementType,
|
|
|
|
) {
|
2017-10-18 09:54:23 +02:00
|
|
|
const tabIndex = isSelectOneElement ? 'tabindex="0"' : '';
|
|
|
|
let role = isSelectElement ? 'role="listbox"' : '';
|
2017-10-10 17:59:49 +02:00
|
|
|
let ariaAutoComplete = '';
|
|
|
|
|
2017-10-18 09:54:23 +02:00
|
|
|
if (isSelectElement && searchEnabled) {
|
2017-10-10 17:59:49 +02:00
|
|
|
role = 'role="combobox"';
|
|
|
|
ariaAutoComplete = 'aria-autocomplete="list"';
|
|
|
|
}
|
|
|
|
|
|
|
|
return strToEl(`
|
|
|
|
<div
|
|
|
|
class="${globalClasses.containerOuter}"
|
2017-10-18 09:54:23 +02:00
|
|
|
data-type="${passedElementType}"
|
2017-10-10 17:59:49 +02:00
|
|
|
${role}
|
|
|
|
${tabIndex}
|
|
|
|
${ariaAutoComplete}
|
|
|
|
aria-haspopup="true"
|
|
|
|
aria-expanded="false"
|
|
|
|
dir="${direction}"
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
`);
|
|
|
|
},
|
|
|
|
containerInner(globalClasses) {
|
|
|
|
return strToEl(`
|
|
|
|
<div class="${globalClasses.containerInner}"></div>
|
|
|
|
`);
|
|
|
|
},
|
2017-10-18 09:54:23 +02:00
|
|
|
itemList(globalClasses, isSelectOneElement) {
|
2017-10-10 17:59:49 +02:00
|
|
|
const localClasses = classNames(
|
|
|
|
globalClasses.list, {
|
2017-10-18 09:54:23 +02:00
|
|
|
[globalClasses.listSingle]: (isSelectOneElement),
|
|
|
|
[globalClasses.listItems]: (!isSelectOneElement),
|
2017-10-10 17:59:49 +02:00
|
|
|
},
|
|
|
|
);
|
|
|
|
|
|
|
|
return strToEl(`
|
|
|
|
<div class="${localClasses}"></div>
|
|
|
|
`);
|
|
|
|
},
|
|
|
|
placeholder(globalClasses, value) {
|
|
|
|
return strToEl(`
|
|
|
|
<div class="${globalClasses.placeholder}">
|
|
|
|
${value}
|
|
|
|
</div>
|
|
|
|
`);
|
|
|
|
},
|
2017-10-18 09:54:23 +02:00
|
|
|
item(globalClasses, data, removeItemButton) {
|
2017-10-10 17:59:49 +02:00
|
|
|
const ariaSelected = data.active ? 'aria-selected="true"' : '';
|
|
|
|
const ariaDisabled = data.disabled ? 'aria-disabled="true"' : '';
|
|
|
|
|
|
|
|
let localClasses = classNames(
|
|
|
|
globalClasses.item, {
|
|
|
|
[globalClasses.highlightedState]: data.highlighted,
|
|
|
|
[globalClasses.itemSelectable]: !data.highlighted,
|
|
|
|
[globalClasses.placeholder]: data.placeholder,
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
2017-10-18 09:54:23 +02:00
|
|
|
if (removeItemButton) {
|
2017-10-10 17:59:49 +02:00
|
|
|
localClasses = classNames(
|
|
|
|
globalClasses.item, {
|
|
|
|
[globalClasses.highlightedState]: data.highlighted,
|
|
|
|
[globalClasses.itemSelectable]: !data.disabled,
|
|
|
|
[globalClasses.placeholder]: data.placeholder,
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
|
|
|
return strToEl(`
|
|
|
|
<div
|
|
|
|
class="${localClasses}"
|
|
|
|
data-item
|
|
|
|
data-id="${data.id}"
|
|
|
|
data-value="${data.value}"
|
|
|
|
data-deletable
|
|
|
|
${ariaSelected}
|
|
|
|
${ariaDisabled}
|
|
|
|
>
|
|
|
|
${data.label}<!--
|
|
|
|
--><button
|
|
|
|
type="button"
|
|
|
|
class="${globalClasses.button}"
|
|
|
|
data-button
|
|
|
|
aria-label="Remove item: '${data.value}'"
|
|
|
|
>
|
|
|
|
Remove item
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
`);
|
|
|
|
}
|
|
|
|
|
|
|
|
return strToEl(`
|
|
|
|
<div
|
|
|
|
class="${localClasses}"
|
|
|
|
data-item
|
|
|
|
data-id="${data.id}"
|
|
|
|
data-value="${data.value}"
|
|
|
|
${ariaSelected}
|
|
|
|
${ariaDisabled}
|
|
|
|
>
|
|
|
|
${data.label}
|
|
|
|
</div>
|
|
|
|
`);
|
|
|
|
},
|
2017-10-18 09:54:23 +02:00
|
|
|
choiceList(globalClasses, isSelectOneElement) {
|
|
|
|
const ariaMultiSelectable = !isSelectOneElement ?
|
2017-10-10 17:59:49 +02:00
|
|
|
'aria-multiselectable="true"' :
|
|
|
|
'';
|
|
|
|
|
|
|
|
return strToEl(`
|
|
|
|
<div
|
|
|
|
class="${globalClasses.list}"
|
|
|
|
dir="ltr"
|
|
|
|
role="listbox"
|
|
|
|
${ariaMultiSelectable}
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
`);
|
|
|
|
},
|
|
|
|
choiceGroup(globalClasses, data) {
|
|
|
|
const ariaDisabled = data.disabled ? 'aria-disabled="true"' : '';
|
|
|
|
const localClasses = classNames(
|
|
|
|
globalClasses.group, {
|
|
|
|
[globalClasses.itemDisabled]: data.disabled,
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
|
|
|
return strToEl(`
|
|
|
|
<div
|
|
|
|
class="${localClasses}"
|
|
|
|
data-group
|
|
|
|
data-id="${data.id}"
|
|
|
|
data-value="${data.value}"
|
|
|
|
role="group"
|
|
|
|
${ariaDisabled}
|
|
|
|
>
|
|
|
|
<div class="${globalClasses.groupHeading}">${data.value}</div>
|
|
|
|
</div>
|
|
|
|
`);
|
|
|
|
},
|
2017-10-18 09:54:23 +02:00
|
|
|
choice(globalClasses, data, itemSelectText) {
|
2017-10-10 17:59:49 +02:00
|
|
|
const role = data.groupId > 0 ? 'role="treeitem"' : 'role="option"';
|
|
|
|
const localClasses = classNames(
|
|
|
|
globalClasses.item,
|
|
|
|
globalClasses.itemChoice, {
|
|
|
|
[globalClasses.itemDisabled]: data.disabled,
|
|
|
|
[globalClasses.itemSelectable]: !data.disabled,
|
|
|
|
[globalClasses.placeholder]: data.placeholder,
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
|
|
|
return strToEl(`
|
|
|
|
<div
|
|
|
|
class="${localClasses}"
|
2017-10-18 09:54:23 +02:00
|
|
|
data-select-text="${itemSelectText}"
|
2017-10-10 17:59:49 +02:00
|
|
|
data-choice
|
|
|
|
data-id="${data.id}"
|
|
|
|
data-value="${data.value}"
|
|
|
|
${data.disabled ?
|
|
|
|
'data-choice-disabled aria-disabled="true"' :
|
|
|
|
'data-choice-selectable'
|
|
|
|
}
|
|
|
|
id="${data.elementId}"
|
|
|
|
${role}
|
|
|
|
>
|
|
|
|
${data.label}
|
|
|
|
</div>
|
|
|
|
`);
|
|
|
|
},
|
|
|
|
input(globalClasses) {
|
|
|
|
const localClasses = classNames(
|
|
|
|
globalClasses.input,
|
|
|
|
globalClasses.inputCloned,
|
|
|
|
);
|
|
|
|
|
|
|
|
return strToEl(`
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
class="${localClasses}"
|
|
|
|
autocomplete="off"
|
|
|
|
autocapitalize="off"
|
|
|
|
spellcheck="false"
|
|
|
|
role="textbox"
|
|
|
|
aria-autocomplete="list"
|
|
|
|
>
|
|
|
|
`);
|
|
|
|
},
|
|
|
|
dropdown(globalClasses) {
|
|
|
|
const localClasses = classNames(
|
|
|
|
globalClasses.list,
|
|
|
|
globalClasses.listDropdown,
|
|
|
|
);
|
|
|
|
|
|
|
|
return strToEl(`
|
|
|
|
<div
|
|
|
|
class="${localClasses}"
|
|
|
|
aria-expanded="false"
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
`);
|
|
|
|
},
|
|
|
|
notice(globalClasses, label, type = '') {
|
|
|
|
const localClasses = classNames(
|
|
|
|
globalClasses.item,
|
|
|
|
globalClasses.itemChoice, {
|
|
|
|
[globalClasses.noResults]: (type === 'no-results'),
|
|
|
|
[globalClasses.noChoices]: (type === 'no-choices'),
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
|
|
|
return strToEl(`
|
|
|
|
<div class="${localClasses}">
|
|
|
|
${label}
|
|
|
|
</div>
|
|
|
|
`);
|
|
|
|
},
|
|
|
|
option(globalClasses, data) {
|
|
|
|
return strToEl(`
|
|
|
|
<option value="${data.value}" selected>${data.label}</option>
|
|
|
|
`);
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
export default TEMPLATES;
|