lightning-base-components 1.21.2-alpha → 1.21.3-alpha

package/src/lightning/datatable/columnWidthManager.js

@@ -11,7 +11,7 @@ import {
     getAdjustedRowNumberColumnWidth,
 } from './rowNumber';
 import {
-    getColumnWidthFromDef,
+    getColumnWidth,
     getDomWidth,
     buildCSSWidthStyle,
 } from './widthManagerShared';
@@ -39,21 +39,21 @@ const tableTypes = {
  * Computes and updates the `widthsData` for a datatable.
  *
  * @param {Object} adjustedWidths The adjusted widths object
- * @param {Array} columnDefs The column definitions array
- * @param {Object} widthsData The source widths data to update
+ * @param {Array} columns The column definitions
+ * @param {Object} widthsData The widths data to update
  */
-export function computeColumnWidths(adjustedWidths, columnDefs, widthsData) {
+export function updateColumnWidths(adjustedWidths, columns, widthsData) {
     const { columnWidths } = adjustedWidths;
-    const { length: columnDefsLength } = columnDefs;
-    if (columnWidths.length !== columnDefsLength) {
+    const { length: colCount } = columns;
+    if (columnWidths.length !== colCount) {
         return;
     }
     let columnWidthsSum = 0;
     const rtl = isRTL();
-    for (let i = 0; i < columnDefsLength; i += 1) {
-        const col = columnDefs[i];
-        const newWidth = columnWidths[i];
-        widthsData.columnWidths[i] = newWidth;
+    for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
+        const col = columns[colIndex];
+        const newWidth = columnWidths[colIndex];
+        widthsData.columnWidths[colIndex] = newWidth;
         col.columnWidth = newWidth;
         col.style = buildCSSWidthStyle(newWidth);
 
@@ -77,16 +77,16 @@ export function computeColumnWidths(adjustedWidths, columnDefs, widthsData) {
  */
 export class ColumnWidthManager {
     // Private variables
-    _columnWidthMode = FIXED_WIDTH_MODE;
-    _resizeObserverAvailable = typeof ResizeObserver === 'function';
+    columnWidthMode = FIXED_WIDTH_MODE;
+    resizeObserverAvailable = typeof ResizeObserver === 'function';
 
     // Flag to indicate resetting column widths is needed.
     // Could be with or without `autoResizingUpdate`.
-    _queueResizingUpdate = false;
+    isResizingUpdateQueued = false;
 
     // Flag to indicate whether auto resizing computation update is needed,
     // in which case table styles need to auto flow.
-    _queueAutoResizingUpdate = false;
+    isAutoResizingUpdateQueued = false;
 
     /************************** LIFECYCLE HOOKS **************************/
 
@@ -105,9 +105,10 @@ export class ColumnWidthManager {
             minColumnWidth,
             maxColumnWidth
         );
-        this._widthStrategies = {};
-        this._widthStrategies[FIXED_WIDTH_MODE] = fixedWidthStrategy;
-        this._widthStrategies[AUTO_WIDTH_MODE] = autoWidthStrategy;
+        this.widthStrategies = {
+            [FIXED_WIDTH_MODE]: fixedWidthStrategy,
+            [AUTO_WIDTH_MODE]: autoWidthStrategy,
+        };
     }
 
     /************************** PRIVATE GETTERS **************************/
@@ -118,40 +119,22 @@ export class ColumnWidthManager {
      * @returns {Object} The column width strategy
      */
     get columnWidthStrategy() {
-        return this._widthStrategies[this.columnWidthMode];
-    }
-
-    /**
-     * Gets the configured column width mode.
-     *
-     * @returns {String} The column width mode
-     */
-    get columnWidthMode() {
-        return this._columnWidthMode;
+        return this.widthStrategies[this.columnWidthMode];
     }
 
     /************************** PRIVATE SETTERS **************************/
 
-    /**
-     * Sets the column width mode.
-     *
-     * @param {String} value The new column width mode
-     */
-    set columnWidthMode(value) {
-        this._columnWidthMode = value;
-    }
-
     /**
      * Sets the minimum column width (in pixels).
      *
      * @param {Number} value The minimum column width
      */
     set minColumnWidth(value) {
-        const { _widthStrategies } = this;
-        const keys = Object.keys(_widthStrategies);
+        const { widthStrategies } = this;
+        const keys = Object.keys(widthStrategies);
         for (let i = 0, { length } = keys; i < length; i += 1) {
             const strategy = keys[i];
-            _widthStrategies[strategy].minColumnWidth = value;
+            widthStrategies[strategy].minColumnWidth = value;
         }
     }
 
@@ -161,11 +144,11 @@ export class ColumnWidthManager {
      * @param {Number} value The maximum column width
      */
     set maxColumnWidth(value) {
-        const { _widthStrategies } = this;
-        const keys = Object.keys(_widthStrategies);
+        const { widthStrategies } = this;
+        const keys = Object.keys(widthStrategies);
         for (let i = 0, { length } = keys; i < length; i += 1) {
             const strategy = keys[i];
-            _widthStrategies[strategy].maxColumnWidth = value;
+            widthStrategies[strategy].maxColumnWidth = value;
         }
     }
 
@@ -175,7 +158,7 @@ export class ColumnWidthManager {
      * @param {Number} value The maximum number of lines text can be wrapped on
      */
     set wrapTextMaxLines(value) {
-        this._widthStrategies[AUTO_WIDTH_MODE].wrapTextMaxLines = value;
+        this.widthStrategies[AUTO_WIDTH_MODE].wrapTextMaxLines = value;
     }
 
     /************************* HELPER FUNCTIONS **************************/
@@ -189,24 +172,6 @@ export class ColumnWidthManager {
         this._renderMode = mode;
     }
 
-    /**
-     * Returns whether a resizing update is queued.
-     *
-     * @returns {Boolean} Whether there is a resizing update queued
-     */
-    isResizingUpdateQueued() {
-        return this._queueResizingUpdate;
-    }
-
-    /**
-     * Returns whether an auto-resizing update is queued.
-     *
-     * @returns {Boolean} Whether there is an auto-resizing update queued
-     */
-    isAutoResizingUpdateQueued() {
-        return this._queueAutoResizingUpdate;
-    }
-
     /**
      * Determines if we should fire the resize event based on the previous
      * widths data and the column definition. The event is only fired when
@@ -214,43 +179,39 @@ export class ColumnWidthManager {
      * nothing happens.
      *
      * @param {Object} previousWidthsData The previous widths data to evaluate
-     * @param {Array} columnDefs The column definitions array
+     * @param {Array} columns The column definitions
      * @returns {Boolean} Whether or not the resize event should be fired
      */
-    shouldFireResizeEvent(previousWidthsData, columnDefs) {
-        if (this._columnWidthMode === FIXED_WIDTH_MODE) {
-            return (
-                getColumnsWidths(previousWidthsData).length !==
-                columnDefs.length
-            );
-        }
-        return false;
+    shouldFireResizeEvent(previousWidthsData, columns) {
+        return (
+            this._columnWidthMode === FIXED_WIDTH_MODE &&
+            getColumnsWidths(previousWidthsData).length !== columns.length
+        );
     }
 
     /**
      * Adjusts all the column sizes based on the supplied widths data.
      *
-     * @param {Node} root The root column node
-     * @param {Array} columnDefs The column definitions array
+     * @param {Node} template The datatable template
+     * @param {Array} columnDefs The column definitions
      * @param {Object} widthsData The widths data object
      */
-    adjustColumnsSize(root, columnDefs, widthsData) {
+    adjustColumnsSize(template, columns, widthsData) {
         const {
-            _queueResizingUpdate,
-            _queueAutoResizingUpdate,
+            isResizingUpdateQueued,
+            isAutoResizingUpdateQueued,
             columnWidthStrategy,
         } = this;
-        let adjustedWidths = [];
-
-        if (_queueResizingUpdate) {
+        if (isResizingUpdateQueued) {
+            let adjustedWidths;
             // If table is hidden when updating and `ResizeObserver` is not available,
             // then updating sizes causes min widths to be set.
             // Hence, the check if ok update from DOM.
-            if (this._shouldResizeWithUpdate(root, widthsData)) {
+            if (this.shouldResizeWithUpdate(template, widthsData)) {
                 adjustedWidths = columnWidthStrategy.getAdjustedColumnWidths(
-                    this._getDatatableInterface(root),
-                    columnDefs,
-                    _queueAutoResizingUpdate
+                    this.getDatatableInterface(template),
+                    columns,
+                    isAutoResizingUpdateQueued
                 );
             } else {
                 // Otherwise update from previous widths
@@ -259,26 +220,25 @@ export class ColumnWidthManager {
                     expectedTableWidth: widthsData.tableWidth,
                 };
             }
-            computeColumnWidths(adjustedWidths, columnDefs, widthsData);
+            updateColumnWidths(adjustedWidths, columns, widthsData);
         }
-
-        this._resetAutoResizingUpdate();
-        this._queueResizingUpdate = false;
+        this.isAutoResizingUpdateQueued = false;
+        this.isResizingUpdateQueued = false;
     }
 
     /**
      * Adjusts all the column widths after a resize happens.
      *
-     * @param {Node} root The root column node
-     * @param {Array} columnDefs The column definitions array
+     * @param {Node} template The datatable template
+     * @param {Array} columns The column definitions
      * @param {Object} widthsData The widths data object
      */
-    adjustColumnsSizeAfterResize(root, columnDefs, widthsData) {
+    adjustColumnsSizeAfterResize(template, columns, widthsData) {
         const adjustedWidths = this.columnWidthStrategy.getAdjustedColumnWidths(
-            this._getDatatableInterface(root),
-            columnDefs
+            this.getDatatableInterface(template),
+            columns
         );
-        computeColumnWidths(adjustedWidths, columnDefs, widthsData);
+        updateColumnWidths(adjustedWidths, columns, widthsData);
     }
 
     /**
@@ -286,17 +246,17 @@ export class ColumnWidthManager {
      *
      * @param {Object} previousData The previous data
      * @param {Object} newData The new data
-     * @param {Array} columnDefs The column definitions array
+     * @param {Array} columns The column definitions
      */
-    handleDataChange(previousData, newData, columnDefs) {
-        if (columnDefs.length > 0) {
+    handleDataChange(previousData, newData, columns) {
+        if (columns.length > 0) {
             // Resize columns with auto-resizing update only if...
             // The mode is auto and new data length is equal to previous data
             // length (change in data) or previously there was no data at all.
             if (this.columnWidthMode === AUTO_WIDTH_MODE) {
-                if (this._hasDataChanged(previousData, newData)) {
-                    this._queueResizingUpdate = true;
-                    this._setAutoResizingUpdate(columnDefs);
+                if (this.hasDataChanged(previousData, newData)) {
+                    this.isResizingUpdateQueued = true;
+                    this.setAutoResizingUpdate(columns);
                 }
             }
         }
@@ -305,24 +265,24 @@ export class ColumnWidthManager {
     /**
      * React to change in column definitions
      *
-     * @param {Array} columnDefs The column definitions array
+     * @param {Array} columns The column definitions
      */
-    handleColumnsChange(columnDefs) {
-        if (columnDefs.length > 0) {
-            this._queueResizingUpdate = true;
-            this._setAutoResizingUpdate(columnDefs);
+    handleColumnsChange(columns) {
+        if (columns.length > 0) {
+            this.isResizingUpdateQueued = true;
+            this.setAutoResizingUpdate(columns);
         }
     }
 
     /**
      * React to change in column widths mode
      *
-     * @param {Array} columnDefs The column definitions array
+     * @param {Array} columns The column definitions
      */
-    handleWidthModeChange(columnDefs) {
-        if (columnDefs.length > 0) {
-            this._queueResizingUpdate = true;
-            this._setAutoResizingUpdate(columnDefs);
+    handleWidthModeChange(columns) {
+        if (columns.length > 0) {
+            this.isResizingUpdateQueued = true;
+            this.setAutoResizingUpdate(columns);
         }
     }
 
@@ -330,23 +290,21 @@ export class ColumnWidthManager {
      * React to change in row number offset
      *
      * @param {Object} state The datatable state
-     * @param {Object} widthsData The source widths data to updated
+     * @param {Object} widthsData The widths data
      */
     handleRowNumberOffsetChange(state, widthsData) {
         const colIndex = getRowNumberColumnIndex(state);
         if (colIndex > -1) {
-            const rowNumberCol = state.columns[colIndex];
+            const { columns } = state;
+            const col = columns[colIndex];
             const newWidth = getAdjustedRowNumberColumnWidth(state);
-            if (rowNumberCol.initialWidth !== newWidth) {
-                rowNumberCol.initialWidth = Math.max(
-                    newWidth,
-                    rowNumberCol.minWidth
-                );
+            if (col.initialWidth !== newWidth) {
+                col.initialWidth = Math.max(newWidth, col.minWidth);
                 if (hasDefinedColumnsWidths(widthsData)) {
                     // When columns are resized with the resizer, a horizontal scroller appears.
                     // Adjusting the columns size will respect widths already set and try to fit this column.
-                    this._queueResizingUpdate = true;
-                    this._setAutoResizingUpdate(state.columns);
+                    this.isResizingUpdateQueued = true;
+                    this.setAutoResizingUpdate(columns);
                 }
             }
         }
@@ -357,11 +315,11 @@ export class ColumnWidthManager {
      *
      * @param {Any} previousValue The previous column value
      * @param {Any} newValue The new column value
-     * @param {Array} columnDefs The column definitions array
+     * @param {Array} columns The column definitions
      */
-    handleCheckboxColumnChange(previousValue, newValue, columnDefs) {
-        if (columnDefs.length > 0 && previousValue !== newValue) {
-            this._queueResizingUpdate = true;
+    handleCheckboxColumnChange(previousValue, newValue, columns) {
+        if (columns.length > 0 && previousValue !== newValue) {
+            this.isResizingUpdateQueued = true;
         }
     }
 
@@ -370,29 +328,28 @@ export class ColumnWidthManager {
      *
      * @param {Any} previousValue The previous column value
      * @param {Any} newValue The new column value
-     * @param {Array} columnDefs The column definitions array
+     * @param {Array} columns The column definitions
      */
-    handleRowNumberColumnChange(previousValue, newValue, columnDefs) {
-        if (columnDefs.length > 0 && previousValue !== newValue) {
-            this._queueResizingUpdate = true;
-            this._setAutoResizingUpdate(columnDefs);
+    handleRowNumberColumnChange(previousValue, newValue, columns) {
+        if (columns.length > 0 && previousValue !== newValue) {
+            this.isResizingUpdateQueued = true;
+            this.setAutoResizingUpdate(columns);
         }
     }
 
     /**
-     * @private
      * Queues up an auto resizing update. If a column width isn't defined,
      * reset the width so it can be recalculated.
      *
-     * @param {Array} columnDefs The column definitions array
+     * @param {Array} columns The column definitions
      */
-    _setAutoResizingUpdate(columnDefs) {
+    setAutoResizingUpdate(columns) {
         if (this.columnWidthMode === AUTO_WIDTH_MODE) {
-            this._queueAutoResizingUpdate = true;
+            this.isAutoResizingUpdateQueued = true;
         }
-        for (let i = 0, { length } = columnDefs; i < length; i += 1) {
-            const col = columnDefs[i];
-            if (!getColumnWidthFromDef(col)) {
+        for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
+            const col = columns[colIndex];
+            if (!getColumnWidth(col)) {
                 col.columnWidth = null;
                 col.style = '';
             }
@@ -400,26 +357,18 @@ export class ColumnWidthManager {
     }
 
     /**
-     * @private
-     * Resets the auto resizing update queue.
-     */
-    _resetAutoResizingUpdate() {
-        this._queueAutoResizingUpdate = false;
-    }
-
-    /**
-     * @private
      * Evalutes if there is a change between two sets of data.
      *
      * @param {Array} previousData An array of previous data
      * @param {Array} newData An array of new data
      * @returns {Boolean} Whether or not the is a difference between the two data sets
      */
-    _hasDataChanged(previousData, newData) {
+    hasDataChanged(previousData, newData) {
+        const { length: previousDataLength } = previousData;
+        const { length: newDataLength } = newData;
         return (
-            newData.length > 0 &&
-            (previousData.length === 0 ||
-                previousData.length !== newData.length)
+            newDataLength > 0 &&
+            (previousDataLength === 0 || previousDataLength !== newDataLength)
         );
     }
 
@@ -427,16 +376,16 @@ export class ColumnWidthManager {
      * @private
      * Determines if a column should resize with an update.
      *
-     * @param {Node} root The root column node
+     * @param {Node} template The datatable template
      * @param {Object} widthsData The source widths data
      * @returns {Boolean} Whether the column should resize with an update
      */
-    _shouldResizeWithUpdate(root, widthsData) {
+    shouldResizeWithUpdate(template, widthsData) {
         if (hasDefinedColumnsWidths(widthsData)) {
             // Can resize from DOM when table is visible.
             // Otherwise, only when `ResizeObserver` is available in browser.
             return (
-                this._resizeObserverAvailable || isTableRenderedVisible(root)
+                this.resizeObserverAvailable || isTableRenderedVisible(template)
             );
         }
         return true;
@@ -456,57 +405,49 @@ export class ColumnWidthManager {
     }
 
     /**
-     * @private
      * Retrieves the datatable interface from the DOM
      *
-     * @param {Node} root The root datatable node
+     * @param {Node} template The datatable template
      * @returns {Object} The datatable interface
      */
-    _getDatatableInterface(root) {
+    getDatatableInterface(template) {
         const datatableSelectors = this._getTableSelectors();
         return {
             getAvailableWidthFromDom() {
-                const container = root.querySelector(
+                const container = template.querySelector(
                     datatableSelectors.CONTAINER
                 );
                 return getDomWidth(container);
             },
             getDataCellWidths() {
-                const cells = root.querySelectorAll(
+                const cellElements = template.querySelectorAll(
                     datatableSelectors.DATA_CELL
                 );
-                if (cells.length > 0) {
-                    return Array.prototype.slice
-                        .call(cells)
-                        .reduce((result, cell) => {
-                            result.push(cell.offsetWidth);
-                            return result;
-                        }, []);
+                const { length } = cellElements;
+                const result = Array(length);
+                for (let i = 0; i < length; i += 1) {
+                    result[i] = cellElements[i].offsetWidth;
                 }
-                return [];
+                return result;
             },
             getHeaderCellWidths() {
-                const headerCells = root.querySelectorAll(
+                const headerElements = template.querySelectorAll(
                     datatableSelectors.HEADER_CELL
                 );
-                if (headerCells.length > 0) {
-                    return Array.prototype.slice
-                        .call(headerCells)
-                        .reduce((result, primitiveCell) => {
-                            const headerDomWidth = primitiveCell.getDomWidth();
-                            if (headerDomWidth) {
-                                result.push(headerDomWidth);
-                            }
-                            return result;
-                        }, []);
+                const result = [];
+                for (let i = 0; i < headerElements.length; i += 1) {
+                    const headerDomWidth = headerElements[i].getDomWidth();
+                    if (headerDomWidth) {
+                        result.push(headerDomWidth);
+                    }
                 }
-                return [];
+                return result;
             },
             getTableElementWidth() {
                 const tableElement =
-                    root.querySelector(datatableSelectors.BASE) ||
-                    root.querySelector('[role="grid"]') ||
-                    root.querySelector('[role="treegrid"]');
+                    template.querySelector(datatableSelectors.BASE) ||
+                    template.querySelector('[role="grid"]') ||
+                    template.querySelector('[role="treegrid"]');
                 return getDomWidth(tableElement);
             },
         };