lightning-base-components 1.21.5-alpha → 1.21.7-alpha

package/src/lightning/datatable/rows.js

@@ -1,17 +1,24 @@
-import { assert } from 'lightning/utilsPrivate';
-import { classSet, isObjectLike } from './utils';
-import { getAttributesNames } from './types';
-import {
-    getCurrentSelectionLength,
-    SELECTABLE_HEADER_TYPE,
-} from './rowSelectionShared';
+import { assert, isRTL } from 'lightning/utilsPrivate';
 import {
     getTypeAttributesValues,
     getSubTypeAttributesValues,
     getCellAttributesValues,
-    generateColKeyValue,
 } from './columns';
+import { addHeaderIndex } from './indexes';
+import {
+    setInliningProperties,
+    updateInlineCell,
+    updateInlineClassAndStyle,
+    updateInlineCellValue,
+} from './rowsInlining';
 import { getRowNumberError } from './rowNumber';
+import {
+    getCurrentSelectionLength,
+    SELECTABLE_HEADER_TYPE,
+    SORTING_MENU_HEADER_TYPE,
+} from './rowSelectionShared';
+import { getAttributesNames } from './types';
+import { classSet, isObjectLike } from './utils';
 
 const CELL_EDIT_CLASS = 'slds-cell-edit';
 const HAS_ERROR_CLASS = 'slds-has-error';
@@ -19,6 +26,16 @@ const IS_EDITED_CLASS = 'slds-is-edited';
 const ROLE_BASED_CELL_CLASS = 'cell';
 const TREE__ITEM_CLASS = 'slds-tree__item';
 
+function resolveAttributeValue(attrValue, rowData) {
+    if (isObjectLike(attrValue)) {
+        const { fieldName } = attrValue;
+        if (fieldName) {
+            return rowData[fieldName];
+        }
+    }
+    return attrValue;
+}
+
 export function setKeyField(state, value) {
     if (typeof value === 'string') {
         state.keyField = value;
@@ -32,8 +49,7 @@ export function setKeyField(state, value) {
 }
 
 /**
- * It compute the state.rows collection based on the current normalized (data, columns)
- * and generate cells indexes map(state.indexes)
+ * Compute state.rows and state.indexes based on the current normalized (data, columns).
  *
  * TODO: Reduce redundant calls to this function. This is indirectly called by the
  * setters of 'data' and 'columns'. Additionally, for the role-based table, if we are
@@ -43,28 +59,38 @@ export function setKeyField(state, value) {
  * @param {Object} state - The datatable state
  * @param {Object} types - The type handling factory
  */
-export function updateRowsAndCellIndexes(state, types) {
+export function updateRowsAndCells(state, types, datatableId) {
     const {
         columns,
         data,
         keyField,
         maxRowSelection,
-        renderModeRoleBased,
-        virtualize,
+        renderModeInline,
         rowHeight,
+        virtualize,
     } = state;
+    const { privateCustomTypes } = types;
+    const rtl = isRTL();
     const { length: rowCount } = data;
-    const { dirtyValues } = state.inlineEdit;
     const { length: colCount } = columns;
     const currentSelectionLength =
         maxRowSelection === 1 ? 1 : getCurrentSelectionLength(state);
     const inputType = maxRowSelection === 1 ? 'radio' : 'checkbox';
+    const isInputTypeCheckbox = inputType === 'checkbox';
 
     let scopeCol;
     let treeColTypeAttrs;
+
+    // Initializing all indexes.
+    const indexes = {};
+    const headerIndexes = Array(colCount);
+
     for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
         const col = columns[colIndex];
-        const { type: columnType } = col;
+        const { colKeyValue, type: columnType } = col;
+        addHeaderIndex(headerIndexes, indexes, colKeyValue, colIndex);
+
+        // Find scopeCol
         if (!scopeCol && col.isScopeCol && types.isValidType(columnType)) {
             scopeCol = col;
         }
@@ -73,51 +99,64 @@ export function updateRowsAndCellIndexes(state, types) {
         }
     }
 
-    // initializing indexes
-    state.indexes = {};
-
-    const { rows: errorsRows } = state.errors;
+    // create arrays to track inlined checkbox, lookup and url cells
+    // so they can get necessary updates on re-renders
+    const checkboxCells = [];
+    const lookupCells = [];
+    const shownUrlCells = [];
     const rows = Array(rowCount);
+
+    // Store in caches early so data can be referenced by other methods
+    // during initialization.
+
+    // Untracked state changes.
+    state.checkboxCells = checkboxCells;
+    state.headerIndexes = headerIndexes;
+    state.indexes = indexes;
+    state.lookupCells = lookupCells;
+    state.shownUrlCells = shownUrlCells;
     // Tracked state changes.
     state.rows = rows;
 
+    // Add row indexes.
     for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
         const rowData = data[rowIndex];
         const rowDataKeyField = rowData[keyField];
         const rowKeyValue = rowDataKeyField
             ? `${rowDataKeyField}`
             : `row-${rowIndex}`;
-        const dirtyRowData = dirtyValues[rowKeyValue];
-        const rowErrors = errorsRows && errorsRows[rowKeyValue];
-        const cellErrors = rowErrors && rowErrors.cells;
-        const errorFieldNames = rowErrors && rowErrors.fieldNames;
 
         state.indexes[rowKeyValue] = { rowIndex };
 
         const isRowSelected = !!state.selectedRowsKeys[rowKeyValue];
+        const ariaSelected = isRowSelected ? 'true' : false;
         const rowNumber = rowIndex + 1;
+        const scopeColValue = scopeCol
+            ? rowData[scopeCol.fieldName]
+            : undefined;
         const cells = Array(colCount);
+        const checkboxHidden = state.hideCheckboxColumn;
 
         const row = {
-            key: rowKeyValue,
-            cells,
-            rowIndex,
-            rowNumber, // for UTAM since methods are base-1
             ariaRowIndex: rowIndex + 2, // aria attrs are base-1 and also count header as a row
+            ariaSelected: checkboxHidden ? null : ariaSelected,
+            cells,
+            classnames: `slds-hint-parent${
+                isRowSelected ? ' slds-is-selected' : ''
+            }`,
             inputType,
             isSelected: isRowSelected,
-            ariaSelected: isRowSelected ? 'true' : false,
             isDisabled:
                 !isRowSelected &&
                 maxRowSelection !== 1 &&
                 currentSelectionLength === maxRowSelection,
-            classnames: `slds-hint-parent${
-                isRowSelected ? ' slds-is-selected' : ''
-            }`,
-            tabIndex: -1,
+            key: rowKeyValue,
+            rowIndex,
+            rowNumber, // for UTAM since methods are base-1
             style: virtualize
                 ? `position:absolute;top:${rowIndex * rowHeight}px;`
                 : '',
+            tabIndex: -1,
             level: undefined,
             posInSet: undefined,
             setSize: undefined,
@@ -146,70 +185,83 @@ export function updateRowsAndCellIndexes(state, types) {
                 resolveAttributeValue(treeColTypeAttrs.setSize, rowData) || 1;
         }
 
+        // Store in caches early so data can be referenced by other methods
+        // during initialization.
+        indexes[rowKeyValue] = row;
         rows[rowIndex] = row;
 
         // Add cell indexes.
         for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
             const col = columns[colIndex];
             const {
-                columnKey,
-                fieldName,
+                colKeyValue,
                 isScopeCol,
                 label: dataLabel,
                 type: columnType,
                 typeAttributes,
             } = col;
-            const colKeyValue = generateColKeyValue(col, colIndex);
+            const cellKeyValue = `${rowKeyValue}-${colKeyValue}`;
             const columnSubType = typeAttributes
                 ? typeAttributes.subType
                 : undefined;
-            const dirtyValue = dirtyRowData && dirtyRowData[colKeyValue];
-            const hasError = columnKey
-                ? !!(cellErrors && cellErrors[columnKey])
-                : !!(errorFieldNames && errorFieldNames.includes(fieldName));
             const hasTreeData = columnType === 'tree';
-            // value based on the fieldName
-            const value =
-                dirtyValue === undefined ? rowData[fieldName] : dirtyValue;
+            const privateType =
+                privateCustomTypes && privateCustomTypes.get(columnType);
+            const standardCellLayout = privateType
+                ? privateType.standardCellLayout
+                : false;
             const displayReadOnlyIcon = !!col.displayReadOnlyIcon;
-            const editable = isCellEditable(rowData, col);
+            const editable = !!resolveAttributeValue(col.editable, rowData);
+            const isEditable = editable && types.isEditableType(columnType);
             const isValidType = types.isValidType(columnType);
             const isCheckbox = columnType === SELECTABLE_HEADER_TYPE;
+            const isSortingMenu = columnType === SORTING_MENU_HEADER_TYPE;
+            const isCustom = privateType !== undefined;
+            const isCustomBareLayout = isCustom && !standardCellLayout;
+            const isCustomStandardLayout = isCustom && standardCellLayout;
             const isDataType = isValidType && !isScopeCol;
             const isDataTypeScope = isValidType && isScopeCol;
 
             // cell object creation
             const cell = {
                 ariaReadOnly: !editable,
+                cellKeyValue,
                 class: '',
+                colIndex,
                 colKeyValue, // unique column key value
                 columnSubType,
                 columnType,
                 dataLabel,
-                describedBy: dirtyValue ? 'unsaved-cell-notification' : null,
                 displayReadOnlyIcon,
                 displayValue: rowData.displayValue || '',
+                describedBy: null,
                 editable,
-                hasError,
+                hasError: undefined,
+                hasTreeData,
                 isCheckbox,
+                isCustom,
+                isCustomBareLayout,
+                isCustomStandardLayout,
                 isDataType,
                 isDataTypeScope,
-                rowKeyValue: row.key, // unique row key value
-                style: computeCellStyles(types, col, renderModeRoleBased),
+                isEditable,
+                isRTL: rtl,
+                isSortingMenu,
+                rowIndex,
+                rowKeyValue, // unique row key value
+                rowNumber,
+                scopeColValue,
+                style: '',
                 tabIndex: -1,
-                value,
-                wrapText: state.wrapText[colKeyValue], // wrapText state
-                wrapTextMaxLines: state.wrapText[colKeyValue]
-                    ? state.wrapTextMaxLines
-                    : undefined,
+                value: undefined,
+                wrapText: undefined, // wrapText state
+                wrapTextMaxLines: 0,
             };
 
-            cell.class = computeCellClassNames(
-                cell,
-                hasTreeData,
-                dirtyValue,
-                renderModeRoleBased
-            );
+            // Store in caches early so data can be referenced by other methods
+            // during initialization.
+            indexes[cellKeyValue] = cell;
+            cells[colIndex] = cell;
 
             if (!col.internal) {
                 // Assign cell type or cell subType attributes.
@@ -219,7 +271,8 @@ export function updateRowsAndCellIndexes(state, types) {
                     attributeNames = getAttributesNames(columnSubType);
                     attributeValues = getSubTypeAttributesValues(col);
                 } else {
-                    attributeNames = types.getType(columnType).typeAttributes;
+                    const typeDesc = types.getType(columnType);
+                    attributeNames = typeDesc && typeDesc.typeAttributes;
                     attributeValues = getTypeAttributesValues(col);
                 }
                 const attributeNamesLength = attributeNames
@@ -241,7 +294,7 @@ export function updateRowsAndCellIndexes(state, types) {
                 // object in each row.
                 const cellAttributes = getCellAttributesValues(col);
                 const keys = Object.keys(cellAttributes);
-                for (let i = 0, { length } = keys; i < length; i += 1) {
+                for (let i = 0; i < keys.length; i += 1) {
                     const attrName = keys[i];
                     const attrValue = cellAttributes[attrName];
                     cell[attrName] = resolveAttributeValue(attrValue, rowData);
@@ -260,40 +313,123 @@ export function updateRowsAndCellIndexes(state, types) {
                     cell.typeAttribute22 = row.isExpanded === 'true';
                 }
             }
-            // Populate row number attributes.
-            else if (columnType === 'rowNumber') {
-                const scopeColValue = rowData[scopeCol.fieldName];
-                // computes and sets the resolved typeAttribute for the row
-                // number column error state
-                cell.typeAttribute0 = getRowNumberError(
-                    rowErrors,
-                    scopeColValue
-                );
-            }
 
             // adding cell indexes to state.indexes
             // Keeping the hash for backward compatibility, but we need to have 2 indexes, 1 for columns and one for rows,
             // because of memory usage and also at certain point we might have the data but not the columns
             state.indexes[row.key][colKeyValue] = [rowIndex, colIndex];
             cells[colIndex] = cell;
+
+            if (renderModeInline) {
+                setInliningProperties(
+                    state,
+                    cell,
+                    isInputTypeCheckbox,
+                    datatableId
+                );
+            }
+            // Update cell properties including class, style, and value properties.
+            updateCell(state, rowIndex, colIndex);
+
+            // Update shownUrlCells state since it's dependent on updateCell
+            if (cell.showUrlLink) {
+                shownUrlCells.push(cell);
+            }
         }
     }
+
+    state.hasCalledUpdateRowsAndCells = true;
 }
 
 /**
- * Returns true in the following three cases:
+ * Cells are normally updated via updateRowsAndCells().
+ * However, a smaller update can be used when modifying datatable properties
+ * such as dt.errors and dt.wrapTextMaxLines.
  *
- * (1) typeof column.editable !== 'object' && column.editable
- * (2) typeof column.editable === 'object' && !column.editable.fieldName
- * (3) typeof column.editable === 'object' && column.editable.fieldName && row[column.editable.fieldName]
- *
- * Returns false in all other cases.
+ * @param {Object} state - The datatable state
+ */
+export function updateCells(state, types) {
+    if (!state.hasCalledUpdateRowsAndCells) {
+        updateRowsAndCells(state, types);
+        return;
+    }
+    const { rows } = state;
+    for (let rowIndex = 0; rowIndex < rows.length; rowIndex += 1) {
+        for (
+            let colIndex = 0;
+            colIndex < rows[rowIndex].cells.length;
+            colIndex += 1
+        ) {
+            updateCell(state, rowIndex, colIndex);
+        }
+    }
+}
+
+/**
+ * Performs a smaller update on the cell at the given rowIndex and colIndex.
+ * Used by updateCells() and updateWrapTextAndMaxLinesValuesInCells().
  *
- * @param {object} rowData - a row data object stored in datatable state. Must be truthy.
- * @param {object} col - a column data object stored in datatable state. Must be truthy.
+ * @param {Object} state - The tracked datatable state
+ * @param {Object} rowIndex - The cell row index
+ * @param {Object} colIndex - The cell column index
  */
-export function isCellEditable(rowData, col) {
-    return !!resolveAttributeValue(col.editable, rowData);
+export function updateCell(state, rowIndex, colIndex) {
+    const { renderModeRoleBased } = state;
+    const { rows: errorsRows } = state.errors;
+    const row = state.rows[rowIndex];
+    const rowData = state.data[rowIndex];
+    const { key: rowKeyValue } = row;
+    const dirtyRowData = state.inlineEdit.dirtyValues[rowKeyValue];
+    const rowErrors = errorsRows && errorsRows[rowKeyValue];
+    const cellErrors = rowErrors && rowErrors.cells;
+    const errorFieldNames = rowErrors && rowErrors.fieldNames;
+    const col = state.columns[colIndex];
+    const cell = row.cells[colIndex];
+    const { colKeyValue, columnKey, fieldName } = col;
+    const dirtyValue = dirtyRowData && dirtyRowData[colKeyValue];
+    const hasError = columnKey
+        ? !!(cellErrors && cellErrors[columnKey])
+        : !!(errorFieldNames && errorFieldNames.includes(fieldName));
+    // value based on the fieldName
+    const value = dirtyValue === undefined ? rowData[fieldName] : dirtyValue;
+    const wrapText = state.wrapText[colKeyValue];
+    const wrapTextMaxLines = wrapText ? state.wrapTextMaxLines : undefined;
+
+    cell.hasError = hasError;
+    cell.wrapText = wrapText;
+    cell.wrapTextMaxLines = wrapTextMaxLines;
+    cell.value = value;
+
+    if (col.internal && col.type === 'rowNumber') {
+        cell.typeAttribute0 = getRowNumberError(rowErrors, cell.scopeColValue);
+    }
+
+    let cellClass = cell.class;
+    if (cell.displayReadOnlyIcon || cell.editable) {
+        cellClass += (cellClass.length ? ' ' : '') + CELL_EDIT_CLASS;
+    }
+    if (cell.hasTreeData) {
+        cellClass += (cellClass.length ? ' ' : '') + TREE__ITEM_CLASS;
+    }
+    if (hasError) {
+        cellClass += (cellClass.length ? ' ' : '') + HAS_ERROR_CLASS;
+    }
+    if (dirtyValue !== undefined) {
+        cellClass += (cellClass.length ? ' ' : '') + IS_EDITED_CLASS;
+        cell.describedBy = 'unsaved-cell-notification';
+    }
+    if (renderModeRoleBased) {
+        cellClass += (cellClass.length ? ' ' : '') + ROLE_BASED_CELL_CLASS;
+    }
+
+    cell.class = cellClass;
+    cell.style = computeCellStyles(cell, col, renderModeRoleBased);
+
+    if (cell.isInlined) {
+        updateInlineCell(cell);
+        updateInlineClassAndStyle(cell, cellClass);
+        updateInlineCellValue(cell, value);
+    }
 }
 
 /**
@@ -308,14 +444,9 @@ export function isCellEditable(rowData, col) {
  * @param {Boolean} renderModeRoleBased - render mode of datatable (div || table)
  * @returns {String} - styles to be set on the cell
  */
-function computeCellStyles(types, col, renderModeRoleBased) {
-    const columnType = col.type;
-
+function computeCellStyles(cell, col, renderModeRoleBased) {
     let cellStyle = '';
-    if (
-        types.isCustomType(columnType) &&
-        !types.isStandardCellLayoutForCustomType(columnType)
-    ) {
+    if (cell.isCustomBareLayout) {
         // When a custom type is not using the standard layout,
         // remove the padding that comes with the standard layout
         cellStyle = 'padding: 0;';
@@ -332,45 +463,6 @@ function computeCellStyles(types, col, renderModeRoleBased) {
     return cellStyle;
 }
 
-function computeCellClassNames(
-    cell,
-    hasTreeData,
-    dirtyValue,
-    renderModeRoleBased
-) {
-    // TODO: With the current SLDS design, the 'slds-cell-edit' class is required on a cell in cases
-    // where the read only icon is to be displayed. This is an issue with their design that will need to
-    // be addressed on their end, so once they do that we can modify this code accordingly.
-    let cellClass = '';
-    if (cell.displayReadOnlyIcon || cell.editable) {
-        cellClass += CELL_EDIT_CLASS;
-    }
-    if (hasTreeData) {
-        cellClass += (cellClass.length ? ' ' : '') + TREE__ITEM_CLASS;
-    }
-    if (cell.hasError) {
-        cellClass += (cellClass.length ? ' ' : '') + HAS_ERROR_CLASS;
-    }
-    if (dirtyValue !== undefined) {
-        cellClass += (cellClass.length ? ' ' : '') + IS_EDITED_CLASS;
-    }
-    if (renderModeRoleBased) {
-        cellClass += (cellClass.length ? ' ' : '') + ROLE_BASED_CELL_CLASS;
-    }
-    return cellClass;
-}
-
-function resolveAttributeValue(attrValue, rowData) {
-    if (isObjectLike(attrValue)) {
-        const { fieldName } = attrValue;
-        if (fieldName) {
-            return rowData[fieldName];
-        }
-    }
-
-    return attrValue;
-}
-
 /**
  * For the role-based table, we need to manage the width of each cell separately.
  * Re-compute the cell styles so that the width of the cell is set
@@ -378,27 +470,27 @@ function resolveAttributeValue(attrValue, rowData) {
  *
  * @param {Object} state - Datatable's state object
  */
-export function recomputeCellStyles(types, state) {
+export function recomputeCellStyles(state) {
     const { columns } = state;
     state.rows.forEach((row) => {
         row.cells.forEach((cell, colIndex) => {
             const colData = columns[colIndex];
-            cell.style = computeCellStyles(types, colData, true);
+            cell.style = computeCellStyles(cell, colData, true);
         });
     });
 }
 
 /**
- * The cells' classes are normally updated via `updateRowsAndCellIndexes()`. This ideally
- * happens after renderMode is set since `updateRowsAndCellIndexes` requires the final
+ * The cells' classes are normally updated via `updateRowsAndCells()`. This ideally
+ * happens after renderMode is set since `updateRowsAndCells` requires the final
  * renderMode value in order to set the 'cell' class on each cell.
  *
- * However, in some cases, it's possible that updateRowsAndCellIndexes is called
+ * However, in some cases, it's possible that updateRowsAndCells is called
  * before the renderMode is set (to 'role-based'). This will cause the 'cell' class to NOT be set
  * in the individual cells because state.renderModeRoleBased will be `false` at that point.
  * As a result, positioning of the cell content will be off.
  *
- * In such a case where the renderMode is 'role-based' and when the updateRowsAndCellIndexes
+ * In such a case where the renderMode is 'role-based' and when the updateRowsAndCells
  * has already been called (indicated by the presence of 'state.rows'), retroactively
  * add the 'cell' class to each cell.
  *