fix: add missing option to control row highlight duration (#982)

- also rework some code using `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()`

examples/example14-highlighting.html

@@ -177,6 +177,7 @@ <h2>View Source:</h2>
 
   function highlightSecondRow() {
     // default is: { rowHighlightCssClass: 'highlight-animate' }
+    grid.navigateTop();
     grid.setOptions({ rowHighlightCssClass: 'highlighting-animation' });
     grid.highlightRow(1, 500);
   }

src/models/gridOption.interface.ts

@@ -261,6 +261,9 @@ export interface GridOption<C extends BaseColumn = BaseColumn> {
    */
   rowHighlightCssClass?: string;
 
+  /** Defaults to 400, duration to show the row highlight (e.g. after CRUD executions) */
+  rowHighlightDuration?: number;
+
   /** Optional sanitizer function to use for sanitizing data to avoid XSS attacks */
   sanitizer?: (dirtyHtml: string) => string;
 

src/slick.core.ts

@@ -839,8 +839,8 @@ export class Utils {
    * 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 classes
+   * e.g.: " class1    class2   " => will result in `['class1', 'class2']`.
+   * @param {String} className - space separated list of class names
    */
   public static classNameToList(className = ''): string[] {
     return className.split(' ').filter(cls => cls);

src/slick.grid.ts

@@ -246,6 +246,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     editorFactory: null,
     cellFlashingCssClass: 'flashing',
     rowHighlightCssClass: 'highlight-animate',
+    rowHighlightDuration: 400,
     selectedCellCssClass: 'selected',
     multiSelect: true,
     enableTextSelectionOnCells: false,
@@ -3956,11 +3957,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 += Utils.classNameToList((addlCssClasses ? ' ' : '') + (formatterResult as FormatterResultObject).addClasses).join(' ');
     }
 
     const toolTipText = (formatterResult as FormatterResultObject)?.toolTip ? `${(formatterResult as FormatterResultObject).toolTip}` : '';
-    const cellDiv = Utils.createDomElement('div', { className: `${cellCss} ${addlCssClasses || ''}`.trim(), role: 'gridcell', tabIndex: -1 });
+    const cellDiv = Utils.createDomElement('div', {
+      className: Utils.classNameToList(`${cellCss} ${addlCssClasses || ''}`).join(' '),
+      role: 'gridcell',
+      tabIndex: -1
+    });
     cellDiv.setAttribute('aria-describedby', this.uid + m.id);
     if (toolTipText) {
       cellDiv.setAttribute('title', toolTipText);
@@ -4141,12 +4146,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 = Utils.classNameToList((formatterResult as FormatterResultObject).removeClasses);
-      classes.forEach((c) => cellNode.classList.remove(c));
+      cellNode.classList.remove(...Utils.classNameToList((formatterResult as FormatterResultObject).removeClasses));
     }
     if ((formatterResult as FormatterResultObject).addClasses) {
-      const classes = Utils.classNameToList((formatterResult as FormatterResultObject).addClasses);
-      classes.forEach((c) => cellNode.classList.add(c));
+      cellNode.classList.add(...Utils.classNameToList((formatterResult as FormatterResultObject).addClasses));
     }
     if ((formatterResult as FormatterResultObject).toolTip) {
       cellNode.setAttribute('title', (formatterResult as FormatterResultObject).toolTip!);
@@ -5246,16 +5249,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 = 500) {
+  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(...Utils.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(...Utils.classNameToList(this._options.rowHighlightCssClass)));
       }, duration);
     }
   }