lightning-base-components 1.21.2-alpha → 1.21.4-alpha

package/src/lightning/datatable/columnWidthManager.js

@@ -1,62 +1,38 @@
-import {
-    getColumnsWidths,
-    getResizerDefaultState,
-    hasDefinedColumnsWidths,
-    isTableRenderedVisible,
-} from './columnResizer';
+import { RESIZER_DEFAULT_STATE, isTableRenderedVisible } from './columnResizer';
 import { AutoWidthStrategy } from './autoWidthStrategy';
 import { FixedWidthStrategy } from './fixedWidthStrategy';
+import { getScrollerXFromScrollerY, getScrollerY } from './utils';
 import {
     getRowNumberColumnIndex,
     getAdjustedRowNumberColumnWidth,
 } from './rowNumber';
-import {
-    getColumnWidthFromDef,
-    getDomWidth,
-    buildCSSWidthStyle,
-} from './widthManagerShared';
+import { getColumnWidth } from './widthManagerShared';
 import { isRTL } from 'lightning/utilsPrivate';
 
 const AUTO_WIDTH_MODE = 'auto';
 const FIXED_WIDTH_MODE = 'fixed';
 
-const tableTypes = {
-    default: {
-        BASE: '.slds-table',
-        CONTAINER: '.slds-scrollable_x',
-        DATA_CELL: 'tbody tr:first-child td,tbody tr:first-child th',
-        HEADER_CELL: 'thead tr th lightning-primitive-header-factory',
-    },
-    roleBased: {
-        BASE: '.slds-table',
-        CONTAINER: '.slds-scrollable_x',
-        DATA_CELL: 'div[data-rowgroup-body] div[role="row"]:first-child div',
-        HEADER_CELL: 'div.table-header lightning-primitive-header-factory',
-    },
-};
-
 /**
  * Computes and updates the `widthsData` for a datatable.
  *
+ * @param {Array} columns The column definitions
+ * @param {Object} widthsData The widths data to update
  * @param {Object} adjustedWidths The adjusted widths object
- * @param {Array} columnDefs The column definitions array
- * @param {Object} widthsData The source widths data to update
  */
-export function computeColumnWidths(adjustedWidths, columnDefs, widthsData) {
+export function updateColumnWidths(columns, widthsData, adjustedWidths) {
     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);
-
+        col.style = newWidth ? `width: ${newWidth}px;` : '';
         // In RTL, we need to explicitly position the column headers.
         // We do this by providing the offset (in pixels) from the start of the table.
         if (rtl) {
@@ -76,27 +52,24 @@ export function computeColumnWidths(adjustedWidths, columnDefs, widthsData) {
  * on `column-widths-mode`: "auto" or "fixed"
  */
 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 **************************/
 
     constructor(widthsData) {
         const minColumnWidth =
-            widthsData.minColumnWidth ||
-            getResizerDefaultState().minColumnWidth;
+            widthsData.minColumnWidth || RESIZER_DEFAULT_STATE.minColumnWidth;
         const maxColumnWidth =
-            widthsData.maxColumnWidth ||
-            getResizerDefaultState().maxColumnWidth;
+            widthsData.maxColumnWidth || RESIZER_DEFAULT_STATE.maxColumnWidth;
         const fixedWidthStrategy = new FixedWidthStrategy(
             minColumnWidth,
             maxColumnWidth
@@ -105,9 +78,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 +92,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 +117,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,38 +131,11 @@ 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 **************************/
 
-    /**
-     * Sets the datatable's configured render mode.
-     *
-     * @param {String} mode Either "table" or "role-based"
-     */
-    setRenderMode(mode) {
-        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,71 +143,66 @@ 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 &&
+            previousWidthsData.columnWidths.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} columns The column definitions
      * @param {Object} widthsData The widths data object
      */
-    adjustColumnsSize(root, columnDefs, widthsData) {
+    adjustColumnsSize(template, columns, widthsData) {
         const {
-            _queueResizingUpdate,
-            _queueAutoResizingUpdate,
             columnWidthStrategy,
+            isAutoResizingUpdateQueued,
+            isResizingUpdateQueued,
         } = 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
                 adjustedWidths = {
                     columnWidths: widthsData.columnWidths,
-                    expectedTableWidth: widthsData.tableWidth,
                 };
             }
-            computeColumnWidths(adjustedWidths, columnDefs, widthsData);
+            updateColumnWidths(columns, widthsData, adjustedWidths);
         }
 
-        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(columns, widthsData, adjustedWidths);
     }
 
     /**
@@ -286,17 +210,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 +229,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 +254,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];
+        if (colIndex !== -1) {
+            const { columns } = state;
+            const col = columns[colIndex];
             const newWidth = getAdjustedRowNumberColumnWidth(state);
-            if (rowNumberCol.initialWidth !== newWidth) {
-                rowNumberCol.initialWidth = Math.max(
-                    newWidth,
-                    rowNumberCol.minWidth
-                );
-                if (hasDefinedColumnsWidths(widthsData)) {
+            if (col.initialWidth !== newWidth) {
+                col.initialWidth = Math.max(newWidth, col.minWidth);
+                if (widthsData.columnWidths.length > 0) {
                     // 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 +279,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 +292,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 +321,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.
+     * Evaluates 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,87 +340,59 @@ 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) {
-        if (hasDefinedColumnsWidths(widthsData)) {
+    shouldResizeWithUpdate(template, widthsData) {
+        if (widthsData.columnWidths.length > 0) {
             // 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;
     }
 
     /**
-     * @private
-     * Determines the appropriate selectors to use based on the datatable render mode.
-     *
-     * @returns {Object} Selectors based on datatable render mode
-     */
-    _getTableSelectors() {
-        if (this._renderMode === 'role-based') {
-            return tableTypes.roleBased;
-        }
-        return tableTypes.default;
-    }
-
-    /**
-     * @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) {
-        const datatableSelectors = this._getTableSelectors();
+    getDatatableInterface(template) {
         return {
             getAvailableWidthFromDom() {
-                const container = root.querySelector(
-                    datatableSelectors.CONTAINER
-                );
-                return getDomWidth(container);
+                const scrollerY = getScrollerY(template);
+                return getScrollerXFromScrollerY(scrollerY).offsetWidth;
             },
             getDataCellWidths() {
-                const cells = root.querySelectorAll(
-                    datatableSelectors.DATA_CELL
+                const cellElements = template.querySelectorAll(
+                    '[data-rowgroup-body] [role="row"]:first-child > *'
                 );
-                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(
-                    datatableSelectors.HEADER_CELL
+                const headerElements = template.querySelectorAll(
+                    '[role="columnheader"] lightning-primitive-header-factory'
                 );
-                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"]');
-                return getDomWidth(tableElement);
+                return template.querySelector('.slds-table').offsetWidth;
             },
         };
     }