lightning-base-components 1.13.6-alpha → 1.13.10-alpha

package/src/lightning/datatable/resizer.js

@@ -1,10 +1,11 @@
 import { normalizeBoolean, isRTL } from 'lightning/utilsPrivate';
-import { isCustomerColumn } from './columns-shared';
+import { isCustomerColumn } from './columns';
 import { clamp, normalizeNumberAttribute } from './utils';
+import { buildCSSWidthStyle } from './widthManagerShared';
 
 /**
- * It return the default portion of state use it for the resizer
- * @returns {{resizer: {columnWidths: Array}}} - resizer default state
+ * Returns the default state/values of the resizer metadata
+ * @returns {Object} - resizer default state
  */
 export function getResizerDefaultState() {
     return {
@@ -18,13 +19,9 @@ export function getResizerDefaultState() {
     };
 }
 
-// *******************************
-// states Getters/Setters
-// *******************************
+/***************** GETTERS / SETTERS for Resizer Metadata (widthsData) *****************/
 
-/**
- * resizeColumnDisabled
- */
+/************* resizeColumnDisabled *************/
 
 export function isResizeColumnDisabled(widthsData) {
     return widthsData.resizeColumnDisabled;
@@ -33,9 +30,11 @@ export function setResizeColumnDisabled(widthsData, value) {
     widthsData.resizeColumnDisabled = normalizeBoolean(value);
 }
 
-/**
- * resizeStep
- */
+/************* resizeStep *************/
+
+export function getResizeStep(widthsData) {
+    return widthsData.resizeStep;
+}
 
 export function setResizeStep(widthsData, value) {
     widthsData.resizeStep = normalizeNumberAttribute(
@@ -45,24 +44,11 @@ export function setResizeStep(widthsData, value) {
         getResizerDefaultState().resizeStep
     );
 }
-export function getResizeStep(widthsData) {
-    return widthsData.resizeStep;
-}
 
-/**
- * columnWidths
- */
+/************* columnWidths *************/
 
 /**
- * It return true if there are widths store 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;
-}
-/**
- * It return the columnsWidths saved in the state
+ * Returns the columnsWidths saved in the state
  * @param {object} widthsData - data regarding column and table widths
  * @returns {Array|*} - list of column widths
  */
@@ -70,16 +56,22 @@ export function getColumnsWidths(widthsData) {
     return widthsData.columnWidths;
 }
 /**
- * It set columnWidths to empty array
+ * Sets columnWidths to empty array
  * @param {object} widthsData - data regarding column and table widths
  */
 export function resetColumnWidths(widthsData) {
     widthsData.columnWidths = [];
 }
-
 /**
- * tableWidth
+ * 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
@@ -93,11 +85,13 @@ function setTableWidth(widthsData, tableWidth) {
     widthsData.tableWidth = tableWidth;
 }
 
-/**
- * minColumnWidth
- */
+/************* minColumnWidth *************/
+
+export function getMinColumnWidth(widthsData) {
+    return widthsData.minColumnWidth;
+}
 
-export function setMinColumnWidth(state, widthsData, value) {
+export function setMinColumnWidth(columns, widthsData, value) {
     widthsData.minColumnWidth = normalizeNumberAttribute(
         'minColumnWidth',
         value,
@@ -105,20 +99,15 @@ export function setMinColumnWidth(state, widthsData, value) {
         getResizerDefaultState().minColumnWidth
     );
 
-    updateColumnWidthsMetadata(state, widthsData);
-}
-export function getMinColumnWidth(widthsData) {
-    return widthsData.minColumnWidth;
+    updateColumnWidthsMetadata(columns, widthsData);
 }
 
-/**
- * maxColumnWidth
- */
+/************* maxColumnWidth *************/
 
 export function getMaxColumnWidth(widthsData) {
     return widthsData.maxColumnWidth;
 }
-export function setMaxColumnWidth(state, widthsData, value) {
+export function setMaxColumnWidth(columns, widthsData, value) {
     widthsData.maxColumnWidth = normalizeNumberAttribute(
         'maxColumnWidth',
         value,
@@ -126,20 +115,18 @@ export function setMaxColumnWidth(state, widthsData, value) {
         getResizerDefaultState().maxColumnWidth
     );
 
-    updateColumnWidthsMetadata(state, widthsData);
+    updateColumnWidthsMetadata(columns, widthsData);
 }
 
-// *******************************
-// Logics
-// *******************************
+/***************************** 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 getTableWidthStyle(widthsData) {
-    return getWidthStyle(getTableWidth(widthsData));
+export function getCSSWidthStyleOfTable(widthsData) {
+    return buildCSSWidthStyle(getTableWidth(widthsData));
 }
 
 /**
@@ -149,7 +136,7 @@ export function getTableWidthStyle(widthsData) {
  *
  * @param {object} state - table state
  */
-export const adjustColumnsSizeFromState = function (state) {
+export function adjustColumnsSizeFromState(state) {
     const columnsWidths = getColumnsWidths(state);
     let columnsWidthSum = 0;
     getColumns(state).forEach((column, colIndex) => {
@@ -160,80 +147,64 @@ export const adjustColumnsSizeFromState = function (state) {
             }
             columnsWidthSum += width;
             column.columnWidth = columnsWidths[colIndex];
-            column.style = getWidthStyle(columnsWidths[colIndex]);
+            column.style = buildCSSWidthStyle(columnsWidths[colIndex]);
         }
     });
     setTableWidth(state, columnsWidthSum);
-};
+}
 
 /**
- * It resize a column width
- * @param {object} state - table state
+ * 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
  */
-export const resizeColumn = function (state, widthsData, colIndex, width) {
-    const column = getColumns(state)[colIndex];
+export function resizeColumn(columns, widthsData, colIndex, width) {
+    const columnToResize = columns[colIndex];
     const columnsWidths = getColumnsWidths(widthsData);
     const currentWidth = columnsWidths[colIndex];
-    const { minWidth, maxWidth } = column;
+    const { minWidth, maxWidth } = columnToResize;
 
     const newWidth = clamp(width, minWidth, maxWidth);
     if (currentWidth !== newWidth) {
         const newDelta = newWidth - currentWidth;
         setTableWidth(widthsData, getTableWidth(widthsData) + newDelta);
-        updateColumnWidth(state, widthsData, colIndex, newWidth);
+        updateColumnWidth(columns, widthsData, colIndex, newWidth);
         // Workaround for header positioning issues in RTL
-        updateColumnOffsets(state, colIndex + 1, newDelta);
-        column.isResized = true;
+        updateColumnOffsets(columns, colIndex + 1, newDelta);
+        columnToResize.isResized = true;
     }
-};
+}
 
 /**
- * It resize a column width
- * @param {object} state - table state
+ * 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
  */
-export const resizeColumnWithDelta = function (
-    state,
+export function resizeColumnWithDelta(
+    columns,
     widthsData,
     colIndex,
     widthDelta
 ) {
     const currentWidth = getColumnsWidths(widthsData)[colIndex];
-    resizeColumn(state, widthsData, colIndex, currentWidth + widthDelta);
-};
+    resizeColumn(columns, widthsData, colIndex, currentWidth + widthDelta);
+}
 
-function updateColumnWidth(state, widthsData, colIndex, newWidth) {
+function updateColumnWidth(columns, widthsData, colIndex, newWidth) {
     const columnsWidths = getColumnsWidths(widthsData);
     columnsWidths[colIndex] = newWidth;
 
-    const column = getColumns(state)[colIndex];
+    const column = columns[colIndex];
     column.columnWidth = newWidth;
-    column.style = getWidthStyle(newWidth);
-}
-
-/**
- * It return the current widths for customer columns
- * @param {object} state - table state
- * @param {object} widthsData - 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(state, widthsData) {
-    const columns = getColumns(state);
-    return columns.reduce((prev, column, index) => {
-        if (isCustomerColumn(column)) {
-            prev.push(widthsData.columnWidths[index]);
-        }
-        return prev;
-    }, []);
+    column.style = buildCSSWidthStyle(newWidth);
 }
 
-export function updateColumnWidthsMetadata(state, widthsData) {
-    getColumns(state).forEach((col) => {
+export function updateColumnWidthsMetadata(columns, widthsData) {
+    columns.forEach((col) => {
         if (!col.internal) {
             col.minWidth = getMinColumnWidth(widthsData);
             col.maxWidth = getMaxColumnWidth(widthsData);
@@ -249,6 +220,39 @@ export function updateColumnWidthsMetadata(state, widthsData) {
     });
 }
 
+/**
+ * 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.
+ *
+ * @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()) {
+        const offsetColumns = columns.slice(colIndex);
+        offsetColumns.forEach((column) => {
+            column.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
+ * belong to a column with the same index in column prop
+ */
+export function getCustomerColumnWidths(columns, widthsData) {
+    return columns.reduce((prev, column, index) => {
+        if (isCustomerColumn(column)) {
+            prev.push(widthsData.columnWidths[index]);
+        }
+        return prev;
+    }, []);
+}
+
 /**
  * It returns if table is rendered and not hidden
  * @param {node} root - table root element
@@ -262,27 +266,6 @@ export function isTableRenderedVisible(root) {
     );
 }
 
-function getWidthStyle(pixels) {
-    return pixels > 0 ? `width:${pixels}px` : '';
-}
-
 function getColumns(state) {
     return state.columns;
 }
-
-/**
- * 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.
- *
- * @param {object} state
- * @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(state, colIndex, newDelta) {
-    if (isRTL()) {
-        const columns = getColumns(state).slice(colIndex);
-        columns.forEach((column) => {
-            column.offset += newDelta;
-        });
-    }
-}