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

package/src/lightning/datatable/columnResizer.js

@@ -1,275 +1,165 @@
-import { normalizeBoolean, isRTL } from 'lightning/utilsPrivate';
-import { isCustomerColumn } from './columns';
-import { clamp, normalizeNumberAttribute } from './utils';
-import { buildCSSWidthStyle } from './widthManagerShared';
+import { isRTL, normalizeBoolean } from 'lightning/utilsPrivate';
+import { clamp, getScrollerY, normalizeNumberAttribute } from './utils';
 
 /**
- * Returns the default state/values of the resizer metadata
+ * Returns the default state/values of the resizer metadata.
+ *
  * @returns {Object} - resizer default state
  */
 export function getResizerDefaultState() {
     return {
+        columnWidths: [],
+        columnWidthsMode: 'fixed',
+        maxColumnWidth: 1000,
+        minColumnWidth: 50,
         resizeColumnDisabled: false,
         resizeStep: 10,
-        columnWidths: [],
         tableWidth: 0,
-        minColumnWidth: 50,
-        maxColumnWidth: 1000,
-        columnWidthsMode: 'fixed',
     };
 }
 
-/***************** GETTERS / SETTERS for Resizer Metadata (widthsData) *****************/
+export const RESIZER_DEFAULT_STATE = getResizerDefaultState();
 
-/************* resizeColumnDisabled *************/
+/***************** GETTERS / SETTERS *****************/
 
-export function isResizeColumnDisabled(widthsData) {
-    return widthsData.resizeColumnDisabled;
-}
 export function setResizeColumnDisabled(widthsData, value) {
+    // Untracked state change.
     widthsData.resizeColumnDisabled = normalizeBoolean(value);
 }
 
-/************* resizeStep *************/
-
-export function getResizeStep(widthsData) {
-    return widthsData.resizeStep;
-}
-
 export function setResizeStep(widthsData, value) {
+    // Tracked state change.
     widthsData.resizeStep = normalizeNumberAttribute(
         'resizeStep',
         value,
         'non-negative',
-        getResizerDefaultState().resizeStep
+        RESIZER_DEFAULT_STATE.resizeStep
     );
 }
 
-/************* columnWidths *************/
-
-/**
- * Returns the columnsWidths saved in the state
- * @param {object} widthsData - data regarding column and table widths
- * @returns {Array|*} - list of column widths
- */
-export function getColumnsWidths(widthsData) {
-    return widthsData.columnWidths;
-}
-/**
- * Sets columnWidths to empty array
- * @param {object} widthsData - data regarding column and table widths
- */
-export function resetColumnWidths(widthsData) {
-    widthsData.columnWidths = [];
-}
-/**
- * Returns true if there are widths stored in the state
- * @param {object} widthsData - data regarding column and table widths
- * @returns {boolean} - true if there are widths store in the state
- */
-export function hasDefinedColumnsWidths(widthsData) {
-    return widthsData.columnWidths.length > 0;
-}
-
-/************* tableWidth *************/
-
-/**
- * Get the full width of table
- * @param {object} widthsData - data regarding column and table widths
- * @returns {number} - table's width
- */
-function getTableWidth(widthsData) {
-    return widthsData.tableWidth;
-}
-function setTableWidth(widthsData, tableWidth) {
-    widthsData.tableWidth = tableWidth;
-}
-
-/************* minColumnWidth *************/
-
-export function getMinColumnWidth(widthsData) {
-    return widthsData.minColumnWidth;
-}
-
 export function setMinColumnWidth(columns, widthsData, value) {
+    // Untracked state changes.
     widthsData.minColumnWidth = normalizeNumberAttribute(
         'minColumnWidth',
         value,
         'non-negative',
-        getResizerDefaultState().minColumnWidth
+        RESIZER_DEFAULT_STATE.minColumnWidth
     );
-
+    // Tracked state change.
     updateColumnWidthsMetadata(columns, widthsData);
 }
 
-/************* maxColumnWidth *************/
-
-export function getMaxColumnWidth(widthsData) {
-    return widthsData.maxColumnWidth;
-}
 export function setMaxColumnWidth(columns, widthsData, value) {
+    // Untracked state change.
     widthsData.maxColumnWidth = normalizeNumberAttribute(
         'maxColumnWidth',
         value,
         'non-negative',
-        getResizerDefaultState().maxColumnWidth
+        RESIZER_DEFAULT_STATE.maxColumnWidth
     );
-
+    // Tracked state change.
     updateColumnWidthsMetadata(columns, widthsData);
 }
 
 /***************************** RESIZE LOGIC *****************************/
 
 /**
- * Get the style to match the full width of table
- * @param {object} widthsData - data regarding column and table widths
- * @returns {string} - style string
- */
-export function getCSSWidthStyleOfTable(widthsData) {
-    return buildCSSWidthStyle(getTableWidth(widthsData));
-}
-
-/**
- * - It adjusts the columns widths from the state
- * - It is used when there are columnwidths in state but the table is hidden with offsetwidth 0
- * - In this case we reset the columns to the width in state
+ * Resizes a column width.
  *
- * @param {object} state - table state
- */
-export function adjustColumnsSizeFromState(state) {
-    const columnsWidths = getColumnsWidths(state);
-    let columnsWidthSum = 0;
-    const columns = getColumns(state);
-    for (let i = 0, { length } = columns; i < length; i += 1) {
-        const width = columnsWidths[i];
-        if (width !== undefined) {
-            const col = columns[i];
-            if (isRTL()) {
-                col.offset = columnsWidthSum;
-            }
-            columnsWidthSum += width;
-            col.columnWidth = width;
-            col.style = buildCSSWidthStyle(width);
-        }
-    }
-    setTableWidth(state, columnsWidthSum);
-}
-
-/**
- * Resizes a column width
- * @param {object} columns - all columns on the table
- * @param {object} widthsData - object containing the resizer metadata
- * @param {number} colIndex - the index of the column based on state.columns
- * @param {number} width - the new width is gonna be applied
+ * @param {Object} columns - The column definitions
+ * @param {Object} widthsData - The widths data
+ * @param {number} colIndex - The index of the column based on state.columns
+ * @param {number} width - The new width is gonna be applied
  */
 export function resizeColumn(columns, widthsData, colIndex, width) {
-    const columnToResize = columns[colIndex];
-    const columnsWidths = getColumnsWidths(widthsData);
-    const currentWidth = columnsWidths[colIndex];
-    const { minWidth, maxWidth } = columnToResize;
-
+    const col = columns[colIndex];
+    const { columnWidths } = widthsData;
+    const currentWidth = columnWidths[colIndex];
+    const { minWidth, maxWidth } = col;
     const newWidth = clamp(width, minWidth, maxWidth);
     if (currentWidth !== newWidth) {
         const newDelta = newWidth - currentWidth;
-        setTableWidth(widthsData, getTableWidth(widthsData) + newDelta);
-        updateColumnWidth(columns, widthsData, colIndex, newWidth);
+        // Untracked state changes.
+        columnWidths[colIndex] = newWidth;
+        widthsData.tableWidth += newDelta;
+        // Tracked state changes.
+        col.columnWidth = newWidth;
+        col.style = newWidth ? `width: ${newWidth}px;` : '';
         // Workaround for header positioning issues in RTL
-        updateColumnOffsets(columns, colIndex + 1, newDelta);
-        columnToResize.isResized = true;
+        if (isRTL()) {
+            // update column offsets
+            for (let i = colIndex + 1; i < columns.length; i += 1) {
+                // Tracked state change.
+                columns[i].offset += newDelta;
+            }
+        }
+        // Tracked state change.
+        col.isResized = true;
     }
 }
 
 /**
- * Resize a column width with an additional delta
- * @param {object} columns - all columns of the table
- * @param {object} widthsData - data regarding column and table widths
- * @param {number} colIndex - the index of the column based on state.columns
- * @param {number} widthDelta - the delta that creates the new width
+ * Resize a column width with an additional delta.
+ *
+ * @param {object} columns - The column definitions
+ * @param {object} widthsData - The widths data
+ * @param {number} colIndex - The index of the column based on state.columns
+ * @param {number} delta - The delta that creates the new width
  */
-export function resizeColumnWithDelta(
-    columns,
-    widthsData,
-    colIndex,
-    widthDelta
-) {
-    const currentWidth = getColumnsWidths(widthsData)[colIndex];
-    resizeColumn(columns, widthsData, colIndex, currentWidth + widthDelta);
-}
-
-function updateColumnWidth(columns, widthsData, colIndex, newWidth) {
-    const columnsWidths = getColumnsWidths(widthsData);
-    columnsWidths[colIndex] = newWidth;
-
-    const column = columns[colIndex];
-    column.columnWidth = newWidth;
-    column.style = buildCSSWidthStyle(newWidth);
+export function resizeColumnWithDelta(columns, widthsData, colIndex, delta) {
+    const currentWidth = widthsData.columnWidths[colIndex];
+    resizeColumn(columns, widthsData, colIndex, currentWidth + delta);
 }
 
 export function updateColumnWidthsMetadata(columns, widthsData) {
-    for (let i = 0, { length } = columns; i < length; i += 1) {
-        const col = columns[i];
+    const { maxColumnWidth, minColumnWidth } = widthsData;
+    for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
+        const col = columns[colIndex];
         if (!col.internal) {
-            col.minWidth = getMinColumnWidth(widthsData);
-            col.maxWidth = getMaxColumnWidth(widthsData);
+            col.maxWidth = maxColumnWidth;
+            col.minWidth = minColumnWidth;
         }
-
-        if (col.initialWidth) {
-            col.initialWidth = clamp(
-                col.initialWidth,
-                col.minWidth,
-                col.maxWidth
-            );
+        const { initialWidth } = col;
+        if (initialWidth) {
+            const { minWidth: min, maxWidth: max } = col;
+            col.initialWidth = clamp(initialWidth, min, max);
         }
     }
 }
 
 /**
- * Updates the column offsets based on the specified delta, starting from the specified index.
- * This is used to position the column headers properly in RTL.
+ * Returns the current widths for customer columns.
  *
- * @param {object} columns - All columns of the table
- * @param {number} colIndex - The first index to start applying the change in column width
- * @param {number} newDelta - The change in column width to apply to
- */
-function updateColumnOffsets(columns, colIndex, newDelta) {
-    if (isRTL()) {
-        for (let i = colIndex, { length } = columns; i < length; i += 1) {
-            columns[i].offset += newDelta;
-        }
-    }
-}
-
-/**
- * Returns the current widths for customer columns
- * @param {object} columns - all columns of the table
- * @param {object} widthsData - data regarding column and table widths
- * @returns {Array} - the widths collection, every element
+ * @param {Object} columns - The columns of the table
+ * @param {Object} widthsData - The data regarding column and table widths
+ * @returns {Array} - The widths collection, every element
  * belong to a column with the same index in column prop
  */
 export function getCustomerColumnWidths(columns, widthsData) {
     const widths = [];
     const { columnWidths } = widthsData;
-    for (let i = 0, { length } = columns; i < length; i += 1) {
-        if (isCustomerColumn(columns[i])) {
-            widths.push(columnWidths[i]);
+    for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
+        if (columns[colIndex].internal !== true) {
+            widths.push(columnWidths[colIndex]);
         }
     }
     return widths;
 }
 
 /**
- * It returns if table is rendered and not hidden
- * @param {node} root - table root element
- * @returns {boolean} - true or false if dt is rendered and not hidden on the page
+ * It returns if table is rendered and not hidden.
+ *
+ * @param {Node} template - The datatable template
+ * @returns {boolean} - Whether the datatable is rendered and not hidden on the page
  */
-export function isTableRenderedVisible(root) {
-    const CONTAINER_SEL = '.slds-scrollable_y';
-    const elem = root.querySelector(CONTAINER_SEL);
+export function isTableRenderedVisible(template) {
+    const scrollerY = getScrollerY(template);
     return (
-        elem && !!(elem.offsetParent || elem.offsetHeight || elem.offsetWidth)
+        scrollerY &&
+        !!(
+            scrollerY.offsetParent ||
+            scrollerY.offsetHeight ||
+            scrollerY.offsetWidth
+        )
     );
 }
-
-function getColumns(state) {
-    return state.columns;
-}