Skip to content

Commit

Permalink
fix(core): allow extra spaces to be striped to any css classes (#1352)
Browse files Browse the repository at this point in the history
- using the `classNameToList()` util, we can permit any amount of spaces to css classes like Formatter `addClasses`
- also cleanup and simplify some code around other css classes, `classNameToList` returns an array of string and we can take advantage of iterator available in DOM classList `.add()` and `.remove()`
  • Loading branch information
ghiscoding authored Jan 19, 2024
1 parent 2657d90 commit e5e29c0
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 12 deletions.
20 changes: 11 additions & 9 deletions packages/common/src/core/slickGrid.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3357,11 +3357,15 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
const appendCellResult = evt.getReturnValue();
let addlCssClasses = typeof appendCellResult === 'string' ? appendCellResult : '';
if ((formatterResult as FormatterResultObject)?.addClasses) {
addlCssClasses += (addlCssClasses ? ' ' : '') + (formatterResult as FormatterResultObject).addClasses;
addlCssClasses += classNameToList((addlCssClasses ? ' ' : '') + (formatterResult as FormatterResultObject).addClasses).join(' ');
}

const toolTipText = (formatterResult as FormatterResultObject)?.toolTip ? `${(formatterResult as FormatterResultObject).toolTip}` : '';
const cellDiv = createDomElement('div', { className: `${cellCss} ${addlCssClasses || ''}`.trim(), role: 'gridcell', tabIndex: -1 });
const cellDiv = createDomElement('div', {
className: classNameToList(`${cellCss} ${addlCssClasses || ''}`).join(' '),
role: 'gridcell',
tabIndex: -1
});
cellDiv.setAttribute('aria-describedby', this.uid + m.id);
if (toolTipText) {
cellDiv.setAttribute('title', toolTipText);
Expand Down Expand Up @@ -3549,12 +3553,10 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
this.applyHtmlCode(cellNode, formatterVal);

if ((formatterResult as FormatterResultObject).removeClasses && !suppressRemove) {
const classes = classNameToList((formatterResult as FormatterResultObject).removeClasses);
classes.forEach((c) => cellNode.classList.remove(c));
cellNode.classList.remove(...classNameToList((formatterResult as FormatterResultObject).removeClasses));
}
if ((formatterResult as FormatterResultObject).addClasses) {
const classes = classNameToList((formatterResult as FormatterResultObject).addClasses);
classes.forEach((c) => cellNode.classList.add(c));
cellNode.classList.add(...classNameToList((formatterResult as FormatterResultObject).addClasses));
}
if ((formatterResult as FormatterResultObject).toolTip) {
cellNode.setAttribute('title', (formatterResult as FormatterResultObject).toolTip!);
Expand Down Expand Up @@ -4656,17 +4658,17 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
/**
* Highlight a row for a certain duration (ms) of time.
* @param {Number} row - grid row number
* @param {Number} [duration] - duration (ms), defaults to 500ms
* @param {Number} [duration] - duration (ms), defaults to 400ms
*/
highlightRow(row: number, duration?: number) {
const rowCache = this.rowsCache[row];
duration ||= this._options.rowHighlightDuration;

if (Array.isArray(rowCache?.rowNode) && this._options.rowHighlightCssClass) {
rowCache.rowNode.forEach(node => node.classList.add(this._options.rowHighlightCssClass || ''));
rowCache.rowNode.forEach(node => node.classList.add(...classNameToList(this._options.rowHighlightCssClass)));
clearTimeout(this._highlightRowTimer);
this._highlightRowTimer = setTimeout(() => {
rowCache.rowNode?.forEach(node => node.classList.remove(this._options.rowHighlightCssClass || ''));
rowCache.rowNode?.forEach(node => node.classList.remove(...classNameToList(this._options.rowHighlightCssClass)));
}, duration);
}
}
Expand Down
12 changes: 9 additions & 3 deletions packages/utils/src/domUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,15 @@ export function createDomElement<T extends keyof HTMLElementTagNameMap, K extend
return elm;
}

/** Takes an input string and splits it into an array of words (extra whitespaces are ignored). */
export function classNameToList(s = ''): string[] {
return s.split(' ').filter(cls => cls); // filter will remove whitespace entries
/**
* Accepts string containing the class or space-separated list of classes, and
* returns list of individual classes.
* Method properly takes into account extra whitespaces in the `className`
* e.g.: " class1 class2 " => will result in `['class1', 'class2']`.
* @param {String} className - space separated list of class names
*/
export function classNameToList(className = ''): string[] {
return className.split(' ').filter(cls => cls); // filter will remove whitespace entries
}

/**
Expand Down

0 comments on commit e5e29c0

Please sign in to comment.