import classNames from 'classnames';
import { strToEl } from './lib/utils';
export const TEMPLATES = {
containerOuter(
globalClasses,
direction,
isSelectElement,
isSelectOneElement,
searchEnabled,
passedElementType,
) {
const tabIndex = isSelectOneElement ? 'tabindex="0"' : '';
let role = isSelectElement ? 'role="listbox"' : '';
let ariaAutoComplete = '';
if (isSelectElement && searchEnabled) {
role = 'role="combobox"';
ariaAutoComplete = 'aria-autocomplete="list"';
}
return strToEl(`
`);
},
containerInner(globalClasses) {
return strToEl(`
`);
},
itemList(globalClasses, isSelectOneElement) {
const localClasses = classNames(globalClasses.list, {
[globalClasses.listSingle]: isSelectOneElement,
[globalClasses.listItems]: !isSelectOneElement,
});
return strToEl(`
`);
},
placeholder(globalClasses, value) {
return strToEl(`
${value}
`);
},
item(globalClasses, data, removeItemButton) {
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,
});
if (removeItemButton) {
localClasses = classNames(globalClasses.item, {
[globalClasses.highlightedState]: data.highlighted,
[globalClasses.itemSelectable]: !data.disabled,
[globalClasses.placeholder]: data.placeholder,
});
return strToEl(`
${data.label}
`);
}
return strToEl(`
${data.label}
`);
},
choiceList(globalClasses, isSelectOneElement) {
const ariaMultiSelectable = !isSelectOneElement
? 'aria-multiselectable="true"'
: '';
return strToEl(`
`);
},
choiceGroup(globalClasses, data) {
const ariaDisabled = data.disabled ? 'aria-disabled="true"' : '';
const localClasses = classNames(globalClasses.group, {
[globalClasses.itemDisabled]: data.disabled,
});
return strToEl(`
`);
},
choice(globalClasses, data, itemSelectText) {
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(`
${data.label}
`);
},
input(globalClasses, placeholderValue) {
const localClasses = classNames(
globalClasses.input,
globalClasses.inputCloned,
);
return strToEl(`
`);
},
dropdown(globalClasses) {
const localClasses = classNames(
globalClasses.list,
globalClasses.listDropdown,
);
return strToEl(`
`);
},
notice(globalClasses, label, type = '') {
const localClasses = classNames(
globalClasses.item,
globalClasses.itemChoice,
{
[globalClasses.noResults]: type === 'no-results',
[globalClasses.noChoices]: type === 'no-choices',
},
);
return strToEl(`
${label}
`);
},
option(data) {
return strToEl(`
`);
},
};
export default TEMPLATES;