return (items: I[]) => { const chunks = Arr.chunk(items, numColumns); return Arr.map(chunks, (c) => ({ dom: rowDom, components: c })); };
const setContents = (comp, items) => { const htmlLines = Arr.map(items, (item) => { const textContent = spec.columns === 1 ? `<div class="tox-collection__item-label">${item.text}</div>` : ''; const iconContent = `<div class="tox-collection__item-icon">${item.icon}</div>`; // Replacing the hyphens and underscores in collection items with spaces // to ensure the screen readers pronounce the words correctly. // This is only for aria purposes. Emoticon and Special Character names will still use _ and - for autocompletion. const mapItemName = { '_': ' ', ' - ': ' ', '-': ' ' }; // Title attribute is added here to provide tooltips which might be helpful to sighted users. // Using aria-label here overrides the Apple description of emojis and special characters in Mac/ MS description in Windows. // But if only the title attribute is used instead, the names are read out twice. i.e., the description followed by the item.text. const ariaLabel = item.text.replace(/\_| \- |\-/g, (match) => { return mapItemName[match]; }); return `<div class="tox-collection__item" tabindex="-1" data-collection-item-value="${escapeAttribute(item.value)}" title="${ariaLabel}" aria-label="${ariaLabel}">${iconContent}${textContent}</div>`; }); const chunks = spec.columns > 1 && spec.columns !== 'auto' ? Arr.chunk(htmlLines, spec.columns) : [ htmlLines ]; const html = Arr.map(chunks, (ch) => { return `<div class="tox-collection__group">${ch.join('')}</div>`; }); Html.set(comp.element(), html.join('')); };