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

package/src/lightning/datatable/errors.js

@@ -1,36 +1,27 @@
-// Default empty error state
-const DEFAULT_ERROR_STATE = {
-    rows: {},
-    table: {},
-};
-
-/**
- * Retrieves the errors object from datatable's state object
- * Returns the set of row-level errors and table-level errors
- */
-export function getErrors(state) {
-    return state.errors;
-}
-
 /**
- * Sets the row-level errors and table-level errors in datatable's state object
- * Errors being set here overwrite the previous error object in the state
+ * Sets row-level and table-level errors in datatable state object.
+ * Errors being set here overwrite the previous error object in the state.
+ *
+ * @param {Object} state - The untracked datatable state
  */
 export function setErrors(state, errors) {
-    return (state.errors = Object.assign({}, DEFAULT_ERROR_STATE, errors));
-}
-
-/**
- * Retrieves the row-level errors of a particular row from datatable's state object
- */
-export function getRowError(state, rowKey) {
-    const { rows } = state.errors;
-    return (rows && rows[rowKey]) || {};
+    state.errors = Object.assign(
+        {
+            rows: {},
+            table: {},
+        },
+        errors
+    );
 }
 
 /**
- * Retrieves the table-level errors from the datatable's state object
+ * Resets row-level and table-level errors in datatable state object.
+ *
+ * @param {Object} _state - The untracked datatable state
  */
-export function getTableError(state) {
-    return state.errors.table || {};
+export function resetErrors(state) {
+    state.errors = {
+        rows: {},
+        table: {},
+    };
 }

package/src/lightning/datatable/fixedWidthStrategy.js

@@ -1,61 +1,44 @@
-import {
-    getTotalWidthsMetadata,
-    getColumnWidthFromDef,
-} from './widthManagerShared';
+import { getColumnWidth, getTotalWidthsData } from './widthManagerShared';
 
 /**
  * Determines the expected table width
  *
  * @param {Number} availableWidth The available width for the entire table
- * @param {Object} widthsMetadata The widths metadata object
+ * @param {Object} widthsData The widths metadata object
  * @returns {Number} The expected width of the table
  */
-function getExpectedTableWidth(availableWidth, widthsMetadata) {
-    const minExpectedTableWidth = getMinExpectedTableWidth(widthsMetadata);
-    return widthsMetadata.totalFlexibleColumns === 0
-        ? minExpectedTableWidth
-        : Math.max(minExpectedTableWidth, availableWidth);
-}
-
-/**
- * Determines the minimum expected table width
- *
- * @param {Object} widthsMetadata The widths metadata object
- * @returns {Number} The minimum expected table width
- */
-function getMinExpectedTableWidth(widthsMetadata) {
+function getExpectedTableWidth(availableWidth, widthsData) {
     const {
         totalFixedWidth,
         totalResizedWidth,
         totalFlexibleColumns,
         minColumnWidth,
-    } = widthsMetadata;
+    } = widthsData;
     const minTotalFlexibleWidth = totalFlexibleColumns * minColumnWidth;
-    return minTotalFlexibleWidth + totalFixedWidth + totalResizedWidth;
+    const minExpectedTableWidth =
+        minTotalFlexibleWidth + totalFixedWidth + totalResizedWidth;
+    return widthsData.totalFlexibleColumns === 0
+        ? minExpectedTableWidth
+        : Math.max(minExpectedTableWidth, availableWidth);
 }
 
 /**
  * Strategy for columns with defined fixed widths.
  */
 export class FixedWidthStrategy {
-    // Private variables
-    _columnWidthMetaData = {};
-
-    /************************** LIFECYCLE HOOKS **************************/
+    widthsData = {};
 
     constructor(minColumnWidth, maxColumnWidth) {
-        this._columnWidthMetaData = { minColumnWidth, maxColumnWidth };
+        this.widthsData = { minColumnWidth, maxColumnWidth };
     }
 
-    /************************** PRIVATE SETTERS **************************/
-
     /**
      * Sets the minimum column width
      *
      * @param {Number} value The minimum width
      */
     set minColumnWidth(value) {
-        this._columnWidthMetaData.minColumnWidth = value;
+        this.widthsData.minColumnWidth = value;
     }
 
     /**
@@ -64,7 +47,7 @@ export class FixedWidthStrategy {
      * @param {Number} value The maximum width
      */
     set maxColumnWidth(value) {
-        this._columnWidthMetaData.maxColumnWidth = value;
+        this.widthsData.maxColumnWidth = value;
     }
 
     /**
@@ -72,50 +55,45 @@ export class FixedWidthStrategy {
      * equally amongst the possible columns
      *
      * @param {Object} datatableInterface Interface to datatable with callbacks giving width information
-     * @param {Array} columnDefs Ccolumn definitions array with defined widths and other attributes
+     * @param {Array} _columns The untracked column definitions
      * @returns {Object} columnWidths: [], expectedTableWidth: (number)
      */
-    getAdjustedColumnWidths(datatableInterface, columnDefs) {
-        const widthsMetadata = getTotalWidthsMetadata(
-            this._columnWidthMetaData,
-            columnDefs
-        );
+    getAdjustedColumnWidths(datatableInterface, _columns) {
+        const totalWidthsData = getTotalWidthsData(this.widthsData, _columns);
         const availableWidth = datatableInterface.getAvailableWidthFromDom();
         const expectedTableWidth = getExpectedTableWidth(
             availableWidth,
-            widthsMetadata
+            totalWidthsData
         );
-
-        const expectedFlexibleColumnWidth = this._getFlexibleColumnWidth(
-            widthsMetadata,
+        const expectedFlexibleColumnWidth = this.getFlexibleColumnWidth(
+            totalWidthsData,
             expectedTableWidth
         );
-
         const columnWidths = [];
-        columnDefs.forEach((column, colIndex) => {
+        for (let colIndex = 0; colIndex < _columns.length; colIndex += 1) {
             const width =
-                getColumnWidthFromDef(column) || expectedFlexibleColumnWidth;
+                getColumnWidth(_columns[colIndex]) ||
+                expectedFlexibleColumnWidth;
             columnWidths[colIndex] = width;
-        });
-
-        return { columnWidths, expectedTableWidth };
+        }
+        return { columnWidths };
     }
 
     /**
      * Determines the expected flexible column width
      *
-     * @param {Object} widthsMetadata The widths metadata object
+     * @param {Object} widthsData The widths metadata object
      * @param {Number} totalTableWidth The total available width for the table
      * @returns {Number} The column width
      */
-    _getFlexibleColumnWidth(widthsMetadata, totalTableWidth) {
+    getFlexibleColumnWidth(widthsData, totalTableWidth) {
         const {
             totalFixedWidth,
             totalResizedWidth,
             totalFlexibleColumns,
             minColumnWidth,
             maxColumnWidth,
-        } = widthsMetadata;
+        } = widthsData;
         const totalFlexibleWidth =
             totalTableWidth - totalFixedWidth - totalResizedWidth;
         const avgFlexibleColumnWidth = Math.floor(

package/src/lightning/datatable/headerActions.js

@@ -1,6 +1,6 @@
 import { unwrap } from 'lwc';
-import { getUserColumnIndex, getColumns } from './columns';
-import { getActions, handleTriggeredAction } from './wrapText';
+import { getUserColumnIndex } from './columns';
+import { getInternalActions, handleTriggeredAction } from './wrapText';
 
 // Height of a clickable menu item
 const ACTION_REM_HEIGHT = 2.125;
@@ -10,35 +10,18 @@ const DIVIDER_REM_HEIGHT = 1.0625;
 
 /************************** PUBLIC METHODS ***************************/
 
-/**
- * Merges wrapText internal actions.
- * If there are new internal actions in the future, they may be added here.
- *
- * @param {Object} state The state of the datatable
- * @param {Object} columnDefinition The column definition to extract internal actions from
- * @returns {Array} All wrapText internal actions
- */
-export function getInternalActions(state, columnDefinition) {
-    return [...getActions(state, columnDefinition)];
-}
-
 /**
  * Overrides the actions with the internal ones, plus the customer ones.
  *
  * @param {Object} state The state of the datatable
  */
-export function updateHeaderActions(state) {
-    const columns = getColumns(state);
-
-    columns.forEach((column, idx) => {
-        column.actions = {
-            menuAlignment: getMenuAlignment(columns, idx),
-            customerActions: Array.isArray(column.actions)
-                ? column.actions
-                : [],
-            internalActions: getInternalActions(state, column),
-        };
-    });
+export function updateHeaderInternalActions(state) {
+    const { columns } = state;
+    const { length: colCount } = columns;
+    for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
+        const col = columns[colIndex];
+        col.actions.internalActions = getInternalActions(state, col);
+    }
 }
 
 /**
@@ -53,7 +36,7 @@ export function handleHeaderActionTriggered(event) {
     const { action, actionType, colKeyValue } = event.detail;
 
     if (actionType !== 'customer') {
-        handleTriggeredAction(this.state, action, colKeyValue);
+        handleTriggeredAction(this, action, colKeyValue);
     }
 
     dispatchHeaderActionEvent(this, action, colKeyValue);
@@ -107,18 +90,3 @@ function dispatchHeaderActionEvent(dt, action, colKeyValue) {
         })
     );
 }
-
-/**
- * Determines the menu alignment based on column placement.
- *
- * @param {Array} columns Array of all the columns
- * @param {Integer} index The current column index to check
- * @returns {String} The computed alignment
- */
-function getMenuAlignment(columns, index) {
-    const isLastColumn = index === columns.length - 1;
-
-    return isLastColumn || columns[index + 1].type === 'action'
-        ? 'auto-right'
-        : 'auto-left';
-}

package/src/lightning/datatable/indexes.js

@@ -0,0 +1,42 @@
+import { generateColKeyValue } from './columns';
+
+export const HEADER_ROW_INDEX = -1;
+export const HEADER_ROW_KEY = 'HEADER';
+
+export function getCellFromIndexes(state, rowIndex, colIndex) {
+    const { columns, rows } = state;
+    if (columns.length > 0) {
+        return {
+            rowKeyValue:
+                rowIndex === HEADER_ROW_INDEX
+                    ? HEADER_ROW_KEY
+                    : rows[rowIndex].key,
+            colKeyValue: generateColKeyValue(columns[colIndex], colIndex),
+        };
+    }
+    return undefined;
+}
+
+export function getRowIndexByKey(state, rowKeyValue) {
+    const row = state.indexes[rowKeyValue];
+    return row ? row.rowIndex : undefined;
+}
+
+export function getRowByKey(state, key) {
+    return state.rows[getRowIndexByKey(state, key)];
+}
+
+export function getUserRowByCellKeys(state, rowKeyValue, colKeyValue) {
+    const rowIndex = state.indexes[rowKeyValue][colKeyValue][0];
+    return state.data[rowIndex];
+}
+
+export function isValidCell(state, rowKeyValue, colKeyValue) {
+    if (rowKeyValue === HEADER_ROW_KEY) {
+        return state.headerIndexes[colKeyValue] !== undefined;
+    }
+    const row = getRowByKey(state, rowKeyValue);
+    const colIndex = state.headerIndexes[colKeyValue];
+
+    return row && row.cells[colIndex];
+}

package/src/lightning/datatable/infiniteLoading.js

@@ -1,5 +1,9 @@
 import { normalizeBoolean } from 'lightning/utilsPrivate';
-import { getScrollOffsetFromTableEnd, isNonNegativeInteger } from './utils';
+import {
+    getScrollOffsetFromTableEnd,
+    getScrollerY,
+    isNonNegativeInteger,
+} from './utils';
 
 const SCROLL_ALLOWANCE = 2;
 export const DEFAULT_LOAD_MORE_OFFSET = 20;
@@ -7,17 +11,7 @@ export const DEFAULT_LOAD_MORE_OFFSET = 20;
 /*********************** STATE MANAGEMENT ************************/
 
 /**
- * Returns whether the datatable is in a loading state
- *
- * @param {Object} state The datatable state object
- * @returns {Boolean} The loading state
- */
-export function isLoading(state) {
-    return state.isLoading;
-}
-
-/**
- * Sets the loading state of the datatable
+ * Sets the loading state of the datatable.
  *
  * @param {Object} state The datatable state object
  * @param {Boolean} value The loading state to set
@@ -27,22 +21,12 @@ export function setLoading(state, value) {
 }
 
 /**
- * Returns whether infinite loading is enabled on the datatable
- *
- * @param {Object} state The datatable state object
- * @returns {Boolean} The infinite loading state
- */
-export function isInfiniteLoadingEnabled(state) {
-    return state.enableInfiniteLoading;
-}
-
-/**
- * Sets the infinite loading option on the datatable
+ * Sets the infinite loading option on the datatable.
  *
  * @param {Object} state The datatable state object
  * @param {Boolean} value The infinite loading state to set
  */
-export function setInfiniteLoading(state, value) {
+export function setEnableInfiniteLoading(state, value) {
     state.enableInfiniteLoading = normalizeBoolean(value);
 }
 
@@ -79,7 +63,7 @@ export function setLoadMoreOffset(state, value) {
 
 /**
  * Checks whether the datatable should begin loading more content
- * and then dispatches the `loadmore` event indicating that directive.
+ * and then dispatches the 'loadmore' event indicating that directive.
  *
  * @param {Event} event
  */
@@ -104,26 +88,23 @@ export function handleLoadMoreCheck(event) {
 /**
  * Determines whether or not to prefetch data. If so,
  * dispatches the `loadmore` event.
- *
- * @param {Object} root  The datatable
- * @param {Object} state The datatable state object
  */
-export function handlePrefetch(root, state) {
+export function handlePrefetch() {
+    const { state, template } = this;
     if (
         state.isLoading ||
         !state.enableInfiniteLoading ||
         (this.viewportRendering &&
             this._renderManager &&
             !this._renderManager.hasWrapperHeight()) ||
-        !hasData(root)
+        !hasData(template)
     ) {
-        // dont prefetch if already loading or data is not set yet
+        // Don't prefetch if already loading or data is not set yet.
         return;
     }
 
-    const elem = root.querySelector('.slds-scrollable_y');
-
-    if (elem && isScrollerVisible(elem) && !isScrollable(elem)) {
+    const scrollerY = getScrollerY(template);
+    if (scrollerY && isScrollerVisible(scrollerY) && !isScrollable(scrollerY)) {
         this.dispatchEvent(new CustomEvent('loadmore'));
     }
 }
@@ -131,27 +112,27 @@ export function handlePrefetch(root, state) {
 /************************** PRIVATE METHODS ***************************/
 
 /**
- * Determines if a DOM element is scrollable
+ * Determines if a scroller element is scrollable.
  *
- * @param {Element} element The DOM element to check
- * @returns {Boolean} Whether or not the element is scrollable
+ * @param {Element} scroller The scroller element to check
+ * @returns {Boolean} Whether the element is scrollable
  */
-function isScrollable(element) {
+function isScrollable(scroller) {
     // scrollHeight should be greater than clientHeight by some allowance
-    return element.scrollHeight > element.clientHeight + SCROLL_ALLOWANCE;
+    return scroller.scrollHeight > scroller.clientHeight + SCROLL_ALLOWANCE;
 }
 
 /**
- * Determines if a DOM element's scroll bars are visible
+ * Determines if a scroller element's scroll bars are visible.
  *
- * @param {Element} element The DOM element to check
- * @returns {Boolean} Whether or not the element's scroll bars are visible
+ * @param {Element} scroller The scroller element to check
+ * @returns {Boolean} Whether the scroller element's scroll bars are visible
  */
-function isScrollerVisible(element) {
+function isScrollerVisible(scroller) {
     return !!(
-        element.offsetParent ||
-        element.offsetHeight ||
-        element.offsetWidth
+        scroller.offsetParent ||
+        scroller.offsetHeight ||
+        scroller.offsetWidth
     );
 }