lightning-base-components 1.21.1-alpha → 1.21.3-alpha

package/src/lightning/datatable/rows.js

@@ -40,13 +40,13 @@ export function getKeyField(state) {
 }
 
 export function setKeyField(state, value) {
-    assert(
-        typeof value === 'string',
-        `The "keyField" value expected in lightning:datatable must be type String.`
-    );
     if (typeof value === 'string') {
         state.keyField = value;
     } else {
+        assert(
+            false,
+            `The "keyField" value expected in lightning:datatable must be type String.`
+        );
         state.keyField = undefined;
     }
 }
@@ -63,12 +63,7 @@ export function hasValidKeyField(state) {
  * @returns {string} the classSet string
  */
 export function resolveRowClassNames(row) {
-    const classes = classSet('slds-hint-parent');
-    if (row.isSelected) {
-        classes.add('slds-is-selected');
-    }
-
-    return classes.toString();
+    return `slds-hint-parent${row.isSelected ? ' slds-is-selected' : ''}`;
 }
 
 /**
@@ -118,93 +113,124 @@ export function updateRowsAndCellIndexes() {
     const data = getData(state);
     const columns = getColumns(state);
     const computeUniqueRowKey = uniqueRowKeyGenerator(keyField);
-    const scopeCol = columns.find(
-        (colData) => types.isValidType(colData.type) && colData.isScopeCol
-    );
+    const { length: rowCount } = data;
+    const { length: colCount } = columns;
+
+    let scopeCol;
+    for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
+        const col = columns[colIndex];
+        if (col.isScopeCol && types.isValidType(col.type)) {
+            scopeCol = col;
+            break;
+        }
+    }
+
     // initializing indexes
     state.indexes = {};
 
-    state.rows = data.reduce((prev, rowData, rowIndex) => {
+    const rows = Array(rowCount);
+    state.rows = rows;
+
+    for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
+        const rowData = data[rowIndex];
+        const key = computeUniqueRowKey(rowData);
+        const rowErrors = getRowError(state, key);
+
+        state.indexes[key] = { rowIndex };
+
+        const isRowSelected = isSelectedRow(state, key);
+        const rowNumber = rowIndex + 1;
+        const cells = Array(colCount);
+
         const row = {
-            key: computeUniqueRowKey(rowData), // attaching unique key to the row
-            cells: [],
+            key,
+            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
+            inputType: getRowSelectionInputType(state),
+            isSelected: isRowSelected,
+            ariaSelected: isRowSelected ? 'true' : false,
+            isDisabled: isDisabledRow(state, key),
+            classnames: resolveRowClassNames(rowData),
+            tabIndex: -1,
+            style: virtualize
+                ? styleToString({
+                      position: 'absolute',
+                      top: `${rowIndex * rowHeight}px`,
+                  })
+                : '',
+            level: undefined,
+            posInSet: undefined,
+            setSize: undefined,
+            isExpanded: undefined,
+            hasChildren: undefined,
         };
-        const rowErrors = getRowError(state, row.key);
-
-        state.indexes[row.key] = { rowIndex };
-
-        row.rowIndex = rowIndex;
-        row.rowNumber = rowIndex + 1; // for UTAM since methods are base-1
-        row.ariaRowIndex = rowIndex + 2; // aria attrs are base-1 and also count header as a row
-        row.inputType = getRowSelectionInputType(state);
-        row.isSelected = isSelectedRow(state, row.key);
-        row.ariaSelected = row.isSelected ? 'true' : false;
-        row.isDisabled = isDisabledRow(state, row.key);
-        row.classnames = resolveRowClassNames(row);
+
+        // Add tree specific row properties.
         Object.assign(row, getRowStateForTree(rowData, state));
-        row.tabIndex = -1;
-        if (virtualize) {
-            row.style = styleToString({
-                position: 'absolute',
-                top: `${rowIndex * rowHeight}px`,
-            });
-        }
 
-        columns.reduce((currentRow, colData, colIndex) => {
-            const { fieldName } = colData;
-            const colKeyValue = generateColKeyValue(colData, colIndex);
+        rows[rowIndex] = row;
+
+        // Add cell indexes.
+        for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
+            const col = columns[colIndex];
+            const {
+                fieldName,
+                isScopeCol,
+                label: dataLabel,
+                type: columnType,
+                typeAttributes,
+            } = col;
+            const colKeyValue = generateColKeyValue(col, colIndex);
+            const columnSubType = typeAttributes
+                ? typeAttributes.subType
+                : undefined;
             const dirtyValue = getDirtyValueFromCell(
                 state,
                 row.key,
                 colKeyValue
             );
-            const cellHasErrors = hasCellErrors(
-                rowErrors,
-                colData.fieldName,
-                colData.columnKey
-            );
-            const computedCellValue =
-                dirtyValue !== undefined ? dirtyValue : rowData[fieldName];
+            const hasError = hasCellErrors(rowErrors, fieldName, col.columnKey);
+            // value based on the fieldName
+            const value =
+                dirtyValue === undefined ? rowData[fieldName] : dirtyValue;
+            const isValidType = types.isValidType(columnType);
+            const isCheckbox = columnType === 'SELECTABLE_CHECKBOX';
+            const isDataType = isValidType && !isScopeCol;
+            const isDataTypeScope = isValidType && isScopeCol;
+
             // cell object creation
             const cell = {
-                columnType: colData.type,
-                columnSubType: colData.typeAttributes
-                    ? colData.typeAttributes.subType
-                    : undefined,
-                dataLabel: colData.label,
-                value: computedCellValue, // value based on the fieldName
-                displayValue: rowData.displayValue ? rowData.displayValue : '',
+                columnType,
+                columnSubType,
+                dataLabel,
+                value,
+                displayValue: rowData.displayValue || '',
                 rowKeyValue: row.key, // unique row key value
                 colKeyValue, // unique column key value
-                tabIndex: -1, // tabindex
-                isCheckbox: colData.type === 'SELECTABLE_CHECKBOX',
+                tabIndex: -1,
+                isCheckbox,
                 class: computeCellClassNames(
                     rowData,
-                    colData,
-                    cellHasErrors,
+                    col,
+                    hasError,
                     dirtyValue,
                     renderModeRoleBased
                 ),
-                hasError: cellHasErrors,
-                isDataType:
-                    types.isValidType(colData.type) && !colData.isScopeCol,
-                isDataTypeScope:
-                    types.isValidType(colData.type) && colData.isScopeCol,
+                hasError,
+                isDataType,
+                isDataTypeScope,
                 wrapText: state.wrapText[colKeyValue], // wrapText state
                 wrapTextMaxLines: state.wrapText[colKeyValue]
                     ? state.wrapTextMaxLines
                     : undefined,
-                style: computeCellStyles(types, colData, renderModeRoleBased),
+                style: computeCellStyles(types, col, renderModeRoleBased),
             };
-            if (isCustomerColumn(colData)) {
-                assignCustomerColumnAttributes(
-                    cell,
-                    row,
-                    rowData,
-                    colData,
-                    types
-                );
-            } else if (isRowNumberColumn(colData)) {
+
+            if (isCustomerColumn(col)) {
+                assignCustomerColumnAttributes(cell, row, rowData, col, types);
+            } else if (isRowNumberColumn(col)) {
                 assignRowNumberColumnAttributes(
                     cell,
                     rowData,
@@ -218,14 +244,9 @@ export function updateRowsAndCellIndexes() {
             // 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];
-
-            currentRow.push(cell);
-            return currentRow;
-        }, row.cells);
-
-        prev.push(row);
-        return prev;
-    }, []);
+            cells[colIndex] = cell;
+        }
+    }
 }
 
 /**
@@ -238,11 +259,11 @@ export function updateRowsAndCellIndexes() {
  * as column identifiers.
  */
 function hasCellErrors(rowErrors, fieldName, columnKey) {
-    const rowErrorsHasColumnKey = rowErrors.cells && rowErrors.cells[columnKey];
-    const rowErrorsHasFieldName =
-        rowErrors.fieldNames && rowErrors.fieldNames.includes(fieldName);
-
-    return rowErrorsHasColumnKey || (!columnKey && rowErrorsHasFieldName);
+    const cellErrors = rowErrors.cells;
+    const errorFieldNames = rowErrors.fieldNames;
+    return columnKey
+        ? !!(cellErrors && cellErrors[columnKey])
+        : !!(errorFieldNames && errorFieldNames.includes(fieldName));
 }
 
 /**
@@ -315,18 +336,20 @@ function assignRowNumberColumnAttributes(
  * This object that contains the resolved mapping is then set in the `cell` object
  * in each row.
  *
- * @param {Object} row - current row data. Required for cases cellAttributes refers to a fieldName in a row
- * @param {Object} column - column definition
+ * @param {Object} rowData - current row data. Required for cases cellAttributes refers to a fieldName in a row
+ * @param {Object} col - column definition
  * @returns {Object} - contains the resolved mapping of cellAttributes and their values
  */
-export function computeCellAttributes(row, column) {
-    const cellAttributesValues = getCellAttributesValues(column);
-    return Object.keys(cellAttributesValues).reduce((attrs, attrName) => {
-        const attrValue = cellAttributesValues[attrName];
-        attrs[attrName] = resolveAttributeValue(attrValue, row);
-
-        return attrs;
-    }, {});
+export function computeCellAttributes(rowData, col) {
+    const cellAttrs = {};
+    const cellAttributes = getCellAttributesValues(col);
+    const keys = Object.keys(cellAttributes);
+    for (let i = 0, { length } = keys; i < length; i += 1) {
+        const attrName = keys[i];
+        const attrValue = cellAttributes[attrName];
+        cellAttrs[attrName] = resolveAttributeValue(attrValue, rowData);
+    }
+    return cellAttrs;
 }
 
 /**
@@ -347,43 +370,47 @@ export function computeCellAttributes(row, column) {
  * type-attribute-1={cell.typeAttribute1}
  * ...
  *
- * @param {Object} row - current row data. Required for cases typeAttributes refers to a fieldName in a row
- * @param {Object} column - column definition
+ * @param {Object} rowData - current row data. Required for cases typeAttributes refers to a fieldName in a row
+ * @param {Object} col - column definition
  * @param {Object} types - instance of DatatableTypes from `./types.js`
  * @returns {Object} - object containing all the typeAttributes{index} and their mapped values
  */
-export function computeCellTypeAttributes(row, column, types) {
-    if (column.typeAttributes && column.typeAttributes.subType) {
-        return computeCellSubTypeAttributes(row, column);
+export function computeCellTypeAttributes(rowData, column, types) {
+    const { typeAttributes } = column;
+    if (typeAttributes && typeAttributes.subType) {
+        return computeCellSubTypeAttributes(rowData, column);
     }
-    const attributesNames = types.getType(column.type).typeAttributes;
-    const typeAttributesValues = getTypeAttributesValues(column);
-
-    return attributesNames.reduce((attrs, attrName, index) => {
-        const typeAttributeName = `typeAttribute${index}`;
-
-        attrs[typeAttributeName] = resolveAttributeValue(
-            typeAttributesValues[attrName],
-            row
+    const attributeNames = types.getType(column.type).typeAttributes;
+    const attributeValues = getTypeAttributesValues(column);
+
+    const cellAttrs = {};
+    const attributeNamesLength = attributeNames ? attributeNames.length : 0;
+    for (let i = 0; i < attributeNamesLength; i += 1) {
+        const attrName = attributeNames[i];
+        const attrValue = attributeValues[attrName];
+        cellAttrs[`typeAttribute${i}`] = resolveAttributeValue(
+            attrValue,
+            rowData
         );
-
-        return attrs;
-    }, {});
+    }
+    return cellAttrs;
 }
 
-export function computeCellSubTypeAttributes(row, column) {
-    const attributesNames = getAttributesNames(column.typeAttributes.subType);
-    const typeAttributesValues = getSubTypeAttributesValues(column);
+function computeCellSubTypeAttributes(rowData, column) {
+    const attributeNames = getAttributesNames(column.typeAttributes.subType);
+    const attributeValues = getSubTypeAttributesValues(column);
 
-    return attributesNames.reduce((attrs, attrName, index) => {
-        const typeAttributeName = `typeAttribute${index}`;
-        attrs[typeAttributeName] = resolveAttributeValue(
-            typeAttributesValues[attrName],
-            row
+    const cellAttrs = {};
+    const attributeNamesLength = attributeNames ? attributeNames.length : 0;
+    for (let i = 0; i < attributeNamesLength; i += 1) {
+        const attrName = attributeNames[i];
+        const attrValue = attributeValues[attrName];
+        cellAttrs[`typeAttribute${i}`] = resolveAttributeValue(
+            attrValue,
+            rowData
         );
-
-        return attrs;
-    }, {});
+    }
+    return cellAttrs;
 }
 
 function computeCellEditable(row, column) {
@@ -401,16 +428,16 @@ function computeCellEditable(row, column) {
  *
  * Returns false in all other cases.
  *
- * @param {object} row - a row data object stored in datatable state. Must be truthy.
- * @param {object} column - a column data object stored in datatable state. Must be truthy.
+ * @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.
  */
-export function isCellEditable(row, column) {
-    return !!resolveAttributeValue(column.editable, row);
+export function isCellEditable(rowData, col) {
+    return !!resolveAttributeValue(col.editable, rowData);
 }
 
-function computeCellDisplayReadOnlyIcon(column) {
+function computeCellDisplayReadOnlyIcon(col) {
     return {
-        displayReadOnlyIcon: !!column.displayReadOnlyIcon,
+        displayReadOnlyIcon: !!col.displayReadOnlyIcon,
     };
 }
 
@@ -422,52 +449,61 @@ function computeCellDisplayReadOnlyIcon(column) {
  *    managed by ourselves unlike the <table> version.
  *
  * @param {Object} types - instance of DatatableTypes from `./types.js`
- * @param {Object} colData - column definition
+ * @param {Object} col - column definition
  * @param {Boolean} renderModeRoleBased - render mode of datatable (div || table)
  * @returns {String} - styles to be set on the cell
  */
-function computeCellStyles(types, colData, renderModeRoleBased) {
-    let style = '';
-    const columnType = colData.type;
+function computeCellStyles(types, col, renderModeRoleBased) {
+    const columnType = col.type;
 
-    // When a custom type is not using the standard layout,
-    // remove the padding that comes with the standard layout
+    let cellStyle = '';
     if (
         types.isCustomType(columnType) &&
         !types.isStandardCellLayoutForCustomType(columnType)
     ) {
-        style = 'padding: 0;';
+        // When a custom type is not using the standard layout,
+        // remove the padding that comes with the standard layout
+        cellStyle = 'padding: 0;';
     }
 
     // Width needs to be managed when rendering as divs
     if (renderModeRoleBased) {
-        const columnWidth = colData.columnWidth;
-        style += columnWidth > 0 ? `width:${columnWidth}px;` : '';
+        const { columnWidth } = col.columnWidth;
+        if (columnWidth > 0) {
+            cellStyle += `width:${columnWidth}px;`;
+        }
     }
 
-    return style;
+    return cellStyle;
 }
 
 function computeCellClassNames(
     row,
     column,
-    cellHasErrors,
+    hasError,
     dirtyValue,
     renderModeRoleBased
 ) {
-    const classNames = classSet('');
     // 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.
-    classNames.add({
-        'slds-cell-edit':
-            isCellEditable(row, column) || column.displayReadOnlyIcon,
-        'slds-tree__item': isTreeType(column.type),
-        'slds-has-error': cellHasErrors,
-        'slds-is-edited': dirtyValue !== undefined,
-        cell: renderModeRoleBased,
-    });
-    return classNames.toString();
+    let cellClass = '';
+    if (column.displayReadOnlyIcon || isCellEditable(row, column)) {
+        cellClass += 'slds-cell-edit';
+    }
+    if (isTreeType(column.type)) {
+        cellClass += (cellClass.length ? ' ' : '') + 'slds-tree__item';
+    }
+    if (hasError) {
+        cellClass += (cellClass.length ? ' ' : '') + 'slds-has-error';
+    }
+    if (dirtyValue !== undefined) {
+        cellClass += (cellClass.length ? ' ' : '') + 'slds-is-edited';
+    }
+    if (renderModeRoleBased) {
+        cellClass += (cellClass.length ? ' ' : '') + 'cell';
+    }
+    return cellClass;
 }
 
 /**
@@ -506,11 +542,11 @@ export function getRowsTotal(state) {
     return getRows(state).length;
 }
 
-function resolveAttributeValue(attrValue, row) {
+function resolveAttributeValue(attrValue, rowData) {
     if (isObjectLike(attrValue)) {
-        const fieldName = attrValue.fieldName;
+        const { fieldName } = attrValue;
         if (fieldName) {
-            return row[fieldName];
+            return rowData[fieldName];
         }
     }
 
@@ -518,69 +554,68 @@ function resolveAttributeValue(attrValue, row) {
 }
 
 function getRowStateForTree(row, state) {
+    const _row = {};
     const column = getStateTreeColumn(state);
     if (column) {
-        return {
-            level: getRowLevel(column, row),
-            posInSet: getRowPosInSet(column, row),
-            setSize: getRowSetSize(column, row),
-            isExpanded: isRowExpanded(column, row),
-            hasChildren: getRowHasChildren(column, row),
-        };
+        _row.hasChildren = getRowHasChildren(column, row);
+        _row.isExpanded = isRowExpanded(column, row);
+        _row.level = getRowLevel(column, row);
+        _row.posInSet = getRowPosInSet(column, row);
+        _row.setSize = getRowSetSize(column, row);
     }
-    return {};
+    return _row;
 }
 
-export function getRowLevel(column, row) {
-    const typeAttributesValues = getTypeAttributesValues(column);
-    const attrValue = resolveAttributeValue(
-        typeAttributesValues[getTreeStateIndicatorFieldNames().level],
-        row
+export function getRowLevel(column, rowData) {
+    const treeColTypeAttrs = getTypeAttributesValues(column);
+    return (
+        resolveAttributeValue(
+            treeColTypeAttrs[getTreeStateIndicatorFieldNames().level],
+            rowData
+        ) || 1
     );
-    return attrValue ? attrValue : 1;
 }
 
 function getRowPosInSet(column, row) {
-    const typeAttributesValues = getTypeAttributesValues(column);
-    const attrValue = resolveAttributeValue(
-        typeAttributesValues[getTreeStateIndicatorFieldNames().position],
-        row
+    const treeColTypeAttrs = getTypeAttributesValues(column);
+    return (
+        resolveAttributeValue(
+            treeColTypeAttrs[getTreeStateIndicatorFieldNames().position],
+            row
+        ) || 1
     );
-    return attrValue ? attrValue : 1;
 }
 
 function getRowSetSize(column, row) {
-    const typeAttributesValues = getTypeAttributesValues(column);
-    const attrValue = resolveAttributeValue(
-        typeAttributesValues[getTreeStateIndicatorFieldNames().setsize],
-        row
+    const treeColTypeAttrs = getTypeAttributesValues(column);
+    return (
+        resolveAttributeValue(
+            treeColTypeAttrs[getTreeStateIndicatorFieldNames().setsize],
+            row
+        ) || 1
     );
-    return attrValue ? attrValue : 1;
 }
 
-export function isRowExpanded(column, row) {
-    const typeAttributesValues = getTypeAttributesValues(column);
+export function isRowExpanded(column, rowData) {
+    const treeColTypeAttrs = getTypeAttributesValues(column);
     const hasChildren = resolveAttributeValue(
-        typeAttributesValues[getTreeStateIndicatorFieldNames().children],
-        row
+        treeColTypeAttrs[getTreeStateIndicatorFieldNames().children],
+        rowData
     );
-    if (hasChildren) {
-        const attrValue = resolveAttributeValue(
-            typeAttributesValues[getTreeStateIndicatorFieldNames().expanded],
-            row
-        );
-        return !!attrValue + '';
-    }
-    return undefined;
-}
-
-export function getRowHasChildren(column, row) {
-    const typeAttributesValues = getTypeAttributesValues(column);
-    const hasChildren = resolveAttributeValue(
-        typeAttributesValues[getTreeStateIndicatorFieldNames().children],
-        row
+    return hasChildren
+        ? `${!!resolveAttributeValue(
+              treeColTypeAttrs[getTreeStateIndicatorFieldNames().expanded],
+              rowData
+          )}`
+        : undefined;
+}
+
+function getRowHasChildren(column, rowData) {
+    const treeColTypeAttrs = getTypeAttributesValues(column);
+    return !!resolveAttributeValue(
+        treeColTypeAttrs[getTreeStateIndicatorFieldNames().children],
+        rowData
     );
-    return !!hasChildren;
 }
 
 /**