lightning-base-components 1.21.3-alpha → 1.21.4-alpha

package/src/lightning/datatable/rowSelection.js

@@ -1,33 +1,11 @@
-import {
-    resolveRowClassNames,
-    getRows,
-    getRowByKey,
-    getRowsTotal,
-    getRowIndexByKey,
-    rowKeyExists,
-} from './rows';
-import {
-    getColumns,
-    getStateColumnIndex,
-    SELECTABLE_ROW_CHECKBOX,
-} from './columns';
+import { getRowByKey, getRowIndexByKey, HEADER_ROW_KEY } from './indexes';
+import { getStateColumnIndex } from './columns';
 import { isNonNegativeInteger } from './utils';
 import {
     getCurrentSelectionLength,
-    isSelectedRow,
-    isDisabledRow,
-    getRowSelectionInputType,
-    getMaxRowSelection,
     getSelectedRowsKeys,
-} from './rowSelectionShared';
-
-export {
-    getCurrentSelectionLength,
-    isSelectedRow,
     isDisabledRow,
-    getRowSelectionInputType,
-    getMaxRowSelection,
-    getSelectedRowsKeys,
+    SELECTABLE_HEADER_TYPE,
 } from './rowSelectionShared';
 
 const MAX_ROW_SELECTION_DEFAULT = undefined;
@@ -85,7 +63,7 @@ export function handleSelectRow(event) {
         ? getLastRowSelection(state) || rowKeyValue
         : rowKeyValue;
     markSelectedRowsInterval(state, fromRowKey, rowKeyValue);
-    setLastRowSelection(state, rowKeyValue);
+    state.lastSelectedRowKey = rowKeyValue;
     this.fireSelectedRowsChange(this.getSelectedRows(), {
         action: ROWS_ACTION.ROW_SELECT,
         value: rowKeyValue,
@@ -109,7 +87,7 @@ export function handleDeselectRow(event) {
         ? getLastRowSelection(state) || rowKeyValue
         : rowKeyValue;
     markDeselectedRowsInterval(state, fromRowKey, rowKeyValue);
-    setLastRowSelection(state, rowKeyValue);
+    state.lastSelectedRowKey = rowKeyValue;
     this.fireSelectedRowsChange(this.getSelectedRows(), {
         action: ROWS_ACTION.ROW_DESELECT,
         value: rowKeyValue,
@@ -138,20 +116,19 @@ export function handleRowSelectionChange() {
  * @param {Object} state - The datatable state
  */
 export function markAllRowsSelected(state) {
-    const rows = getRows(state);
-    const maxRowSelection = getMaxRowSelection(state);
-
-    resetSelectedRowsKeys(state);
+    const { maxRowSelection, rows } = state;
+    const selectedRowsKeys = {};
     for (let i = 0, { length: rowCount } = rows; i < rowCount; i += 1) {
         const row = rows[i];
         if (maxRowSelection === undefined || i < maxRowSelection) {
-            setRowSelectedAttributes(true, row);
-            addKeyToSelectedRowKeys(state, row.key);
+            selectedRowsKeys[row.key] = true;
+            setRowSelectedAttributes(row, true);
         } else {
             row.isDisabled = true;
-            setRowSelectedAttributes(false, row);
+            setRowSelectedAttributes(row, false);
         }
     }
+    state.selectedRowsKeys = selectedRowsKeys;
 }
 
 /**
@@ -161,16 +138,15 @@ export function markAllRowsSelected(state) {
  * the `classnames` for the row to reflect that it is not selected.
  *
  * @param {Object} state - The datatable state
- * @returns
  */
 export function markAllRowsDeselected(state) {
-    const rows = getRows(state);
-    resetSelectedRowsKeys(state);
+    const { rows } = state;
     for (let i = 0, { length: rowCount } = rows; i < rowCount; i += 1) {
         const row = rows[i];
         row.isDisabled = false;
-        setRowSelectedAttributes(false, row);
+        setRowSelectedAttributes(row, false);
     }
+    state.selectedRowsKeys = {};
 }
 
 /**
@@ -192,9 +168,9 @@ export function markAllRowsDeselected(state) {
  * @param {String} endRowKey - row key value of the last row that was selected (end of the interval)
  */
 function markSelectedRowsInterval(state, startRowKey, endRowKey) {
-    const rows = getRows(state);
+    const { rows } = state;
     const { start, end } = getRowIntervalIndexes(state, startRowKey, endRowKey);
-    const total = getMaxRowSelection(state) || getRowsTotal(state);
+    const total = state.maxRowSelection || rows.length;
     let rowIndex = start;
     let maxSelectionReached;
     while (rowIndex <= end && !maxSelectionReached) {
@@ -222,11 +198,17 @@ function markSelectedRowsInterval(state, startRowKey, endRowKey) {
  * @param {String} endRowKey - row key value of the last row that was selected (end of the interval)
  */
 function markDeselectedRowsInterval(state, startRowKey, endRowKey) {
-    const rows = getRows(state);
+    const { rows, selectedRowsKeys } = state;
     const { start, end } = getRowIntervalIndexes(state, startRowKey, endRowKey);
 
     for (let rowIndex = start; rowIndex <= end; rowIndex += 1) {
-        markRowDeselected(state, rows[rowIndex].key);
+        const row = rows[rowIndex];
+        setRowSelectedAttributes(row, false);
+        // Setting to `false` instead of using `delete` for better performance.
+        selectedRowsKeys[row.key] = false;
+        if (getCurrentSelectionLength(state) === state.maxRowSelection - 1) {
+            markDeselectedRowEnabled(state);
+        }
     }
 }
 
@@ -249,12 +231,13 @@ function markDeselectedRowsInterval(state, startRowKey, endRowKey) {
 export function markRowSelected(state, rowKeyValue) {
     const row = getRowByKey(state, rowKeyValue);
     const prevSelectionLength = getCurrentSelectionLength(state);
-    const total = getMaxRowSelection(state) || getRowsTotal(state);
+    const total = state.maxRowSelection || state.rows.length;
 
-    setRowSelectedAttributes(true, row);
+    setRowSelectedAttributes(row, true);
 
+    let { selectedRowsKeys } = state;
     if (total > 1) {
-        addKeyToSelectedRowKeys(state, row.key);
+        selectedRowsKeys[row.key] = true;
         if (prevSelectionLength + 1 === total) {
             markDeselectedRowDisabled(state);
         }
@@ -262,37 +245,13 @@ export function markRowSelected(state, rowKeyValue) {
         if (prevSelectionLength === 1) {
             const prevSelectedRow = getRowByKey(
                 state,
-                Object.keys(state.selectedRowsKeys)[0]
+                Object.keys(selectedRowsKeys)[0]
             );
-            setRowSelectedAttributes(false, prevSelectedRow);
-            resetSelectedRowsKeys(state);
+            setRowSelectedAttributes(prevSelectedRow, false);
+            selectedRowsKeys = {};
+            state.selectedRowsKeys = selectedRowsKeys;
         }
-        addKeyToSelectedRowKeys(state, row.key);
-    }
-}
-
-/**
- * Marks a row with the specified row key value as de-selected. This is done by:
- *     1. Sets `isSelected`, `ariaSelected` to false and resolves `classnames`
- *        to that which reflect that the row is not selected, on the row object.
- *        These are used by the template to render the appropriate values.
- *     2. The row key value of this row is removed from list of selected row keys
- *     3. Before the current de-selection, if the remaining unselected rows were
- *        disabled (max-row-selection was reached), enable all unselected rows
- *        so that they can be selected.
- *
- * @param {Object} state - datatable's state object
- * @param {String} rowKeyValue - row key value of row to mark selected
- */
-export function markRowDeselected(state, rowKeyValue) {
-    const row = getRowByKey(state, rowKeyValue);
-    const maxRowSelection = getMaxRowSelection(state);
-
-    setRowSelectedAttributes(false, row);
-    removeKeyFromSelectedRowKeys(state, row.key);
-
-    if (getCurrentSelectionLength(state) === maxRowSelection - 1) {
-        markDeselectedRowEnabled(state);
+        selectedRowsKeys[row.key] = true;
     }
 }
 
@@ -308,7 +267,7 @@ export function markRowDeselected(state, rowKeyValue) {
 function markRowsSelectedByKeys(state, keys) {
     for (let i = 0, { length } = keys; i < length; i += 1) {
         const row = getRowByKey(state, keys[i]);
-        setRowSelectedAttributes(true, row);
+        setRowSelectedAttributes(row, true);
     }
 }
 
@@ -325,7 +284,7 @@ function markRowsSelectedByKeys(state, keys) {
 function markRowsDeselectedByKeys(state, keys) {
     for (let i = 0, { length } = keys; i < length; i += 1) {
         const row = getRowByKey(state, keys[i]);
-        setRowSelectedAttributes(false, row);
+        setRowSelectedAttributes(row, false);
     }
 }
 
@@ -338,10 +297,10 @@ function markRowsDeselectedByKeys(state, keys) {
  * @param {Object} state - datatable's state object
  */
 export function markDeselectedRowDisabled(state) {
-    const rows = getRows(state);
+    const { rows, selectedRowsKeys } = state;
     for (let i = 0, { length: rowCount } = rows; i < rowCount; i += 1) {
         const row = rows[i];
-        if (!isSelectedRow(state, row.key)) {
+        if (!selectedRowsKeys[row.key]) {
             row.isDisabled = true;
         }
     }
@@ -357,10 +316,10 @@ export function markDeselectedRowDisabled(state) {
  * @param {Object} state - The datatable state
  */
 export function markDeselectedRowEnabled(state) {
-    const rows = getRows(state);
+    const { rows, selectedRowsKeys } = state;
     for (let i = 0, { length: rowCount } = rows; i < rowCount; i += 1) {
         const row = rows[i];
-        if (!isSelectedRow(state, row.key)) {
+        if (!selectedRowsKeys[row.key]) {
             row.isDisabled = false;
         }
     }
@@ -388,12 +347,12 @@ export function markDeselectedRowEnabled(state) {
  * If the previous selection had reached the max limit and the new selection
  * is less than the limit, re-enable the de-selected rows to allow for new selection.
  *
- * @param {Object} state - datatable's state object
+ * @param {Object} state - The datatable state
  * @param {Array} value - key-field values of rows to set as selected
  */
 export function setSelectedRowsKeys(state, value) {
     if (Array.isArray(value)) {
-        const maxRowSelection = getMaxRowSelection(state);
+        const { maxRowSelection } = state;
         const previousSelectionLength = getCurrentSelectionLength(state);
         let selectedRows = filterValidKeys(state, value);
         if (selectedRows.length > maxRowSelection) {
@@ -447,7 +406,7 @@ export function syncSelectedRowsKeys(state, selectedRows) {
     let changed = false;
     const { keyField, selectedRowsKeys } = state;
     const { length: selectedRowCount } = selectedRows;
-    if (Object.keys(selectedRowsKeys).length !== selectedRows.length) {
+    if (Object.keys(selectedRowsKeys).length !== selectedRowCount) {
         changed = true;
         // Untracked state change.
         state.selectedRowsKeys = updateSelectedRowsKeysFromSelectedRows(
@@ -469,7 +428,7 @@ export function syncSelectedRowsKeys(state, selectedRows) {
         }
     }
     if (changed) {
-        const total = getMaxRowSelection(state) || getRowsTotal(state);
+        const total = state.maxRowSelection || state.rows.length;
         if (total > 1) {
             // Tracked state changes.
             if (selectedRowCount < total) {
@@ -481,7 +440,6 @@ export function syncSelectedRowsKeys(state, selectedRows) {
     }
     // Tracked state change.
     updateBulkSelectionState(state);
-
     return {
         ifChanged(callback) {
             if (changed && typeof callback === 'function') {
@@ -500,16 +458,6 @@ function updateSelectedRowsKeysFromSelectedRows(selectedRows, keyField) {
     return selectedRowsKeys;
 }
 
-function addKeyToSelectedRowKeys(state, key) {
-    state.selectedRowsKeys[key] = true;
-}
-
-function removeKeyFromSelectedRowKeys(state, key) {
-    // not using delete this.state.selectedRowsKeys[key]
-    // because that causes perf issues
-    state.selectedRowsKeys[key] = false;
-}
-
 function normalizeSelectedRowsKey(keys) {
     const selectedRowsKeys = {};
     for (let i = 0, { length } = keys; i < length; i += 1) {
@@ -520,19 +468,19 @@ function normalizeSelectedRowsKey(keys) {
 
 function filterValidKeys(state, keys) {
     const filtered = [];
-    for (let i = 0, { length } = keys; i < length; i += 1) {
-        const key = keys[i];
-        if (rowKeyExists(state, key)) {
-            filtered.push(key);
+    const { rows } = state;
+    if (rows.length) {
+        const { indexes } = state;
+        for (let i = 0, { length } = keys; i < length; i += 1) {
+            const key = keys[i];
+            if (indexes[key]) {
+                filtered.push(key);
+            }
         }
     }
     return filtered;
 }
 
-export function resetSelectedRowsKeys(state) {
-    state.selectedRowsKeys = {};
-}
-
 /************************** LAST SELECTED ROW KEYS **************************/
 
 /**
@@ -551,10 +499,6 @@ function getLastRowSelection(state) {
     return keyIsValid ? lastSelectedRowKey : undefined;
 }
 
-function setLastRowSelection(state, rowKeyValue) {
-    state.lastSelectedRowKey = rowKeyValue;
-}
-
 /************************** INPUT TYPES **************************/
 
 /**
@@ -579,14 +523,18 @@ export function inputTypeNeedsToChange(
         previousMaxRowSelection === 0 ||
         newMaxRowSelection === 0 ||
         (previousMaxRowSelection === 1 &&
-            isMultiSelection(newMaxRowSelection)) ||
-        (newMaxRowSelection === 1 && isMultiSelection(previousMaxRowSelection))
+            // is newMaxRowSelection multi-selection
+            (newMaxRowSelection > 1 || newMaxRowSelection === undefined)) ||
+        (newMaxRowSelection === 1 &&
+            // is previousMaxRowSelection multi-selection
+            (previousMaxRowSelection > 1 ||
+                previousMaxRowSelection === undefined))
     );
 }
 
 export function updateRowSelectionInputType(state) {
-    const type = getRowSelectionInputType(state);
-    const rows = getRows(state);
+    const type = state.maxRowSelection === 1 ? 'radio' : 'checkbox';
+    const { rows } = state;
 
     for (let i = 0, { length: rowCount } = rows; i < rowCount; i += 1) {
         // Tracked state changes.
@@ -614,10 +562,10 @@ export function setMaxRowSelection(state, value) {
     // Tracked state changes.
     markAllRowsDeselected(state);
     if (isNonNegativeInteger(value)) {
-        const previousMaxRowSelection = getMaxRowSelection(state);
+        const previousMaxRowSelection = state.maxRowSelection;
+        const newMaxRowSelection = Number(value);
         // Untracked state change.
-        state.maxRowSelection = Number(value);
-        const newMaxRowSelection = getMaxRowSelection(state);
+        state.maxRowSelection = newMaxRowSelection;
         // Reselect up to maxRowSelection rows.
         const numberOfRows = Math.min(
             previousSelectedRowsKeys.length,
@@ -628,10 +576,7 @@ export function setMaxRowSelection(state, value) {
             markRowSelected(state, previousSelectedRowsKeys[i]);
         }
         if (
-            inputTypeNeedsToChange(
-                previousMaxRowSelection,
-                getMaxRowSelection(state)
-            )
+            inputTypeNeedsToChange(previousMaxRowSelection, newMaxRowSelection)
         ) {
             // Tracked state changes.
             updateRowSelectionInputType(state);
@@ -653,28 +598,31 @@ export function setMaxRowSelection(state, value) {
 /************************** BULK SELECTION STATE **************************/
 
 export function updateBulkSelectionState(state) {
-    const { columns } = state;
-    const colIndex = getSelectBoxesColumnIndex(state);
-    if (colIndex >= 0) {
+    const columns = state.columns || {};
+    for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
         const col = columns[colIndex];
-        const updatedCol = Object.assign({}, col);
-        updatedCol.bulkSelection = getBulkSelectionState(state);
-        updatedCol.isBulkSelectionDisabled = isBulkSelectionDisabled(state);
-        columns[colIndex] = updatedCol;
-    }
-}
-
-function getBulkSelectionState(state) {
-    const total = getMaxRowSelection(state) || getRowsTotal(state);
-    const selected = getCurrentSelectionLength(state);
-    if (selected) {
-        return selected === total ? 'all' : 'some';
+        if (col.type === SELECTABLE_HEADER_TYPE) {
+            const {
+                maxRowSelection,
+                rows: { length: rowCount },
+            } = state;
+            const total = maxRowSelection || rowCount;
+            const selected = getCurrentSelectionLength(state);
+            // Force a rerender of this column by replacing the tracked object.
+            // Required to pass treegrid unit tests.
+            const updatedCol = Object.assign({}, col);
+            if (selected) {
+                updatedCol.bulkSelection = selected === total ? 'all' : 'some';
+            } else {
+                updatedCol.bulkSelection = 'none';
+            }
+            updatedCol.isBulkSelectionDisabled =
+                maxRowSelection === 0 || rowCount === 0;
+            // Replace old column with shallow cloned and updated column.
+            columns[colIndex] = updatedCol;
+            return;
+        }
     }
-    return 'none';
-}
-
-function isBulkSelectionDisabled(state) {
-    return getRowsTotal(state) === 0 || getMaxRowSelection(state) === 0;
 }
 
 /************************** HELPER FUNCTIONS **************************/
@@ -692,7 +640,9 @@ function isBulkSelectionDisabled(state) {
  */
 function getRowIntervalIndexes(state, startRowKey, endRowKey) {
     const start =
-        startRowKey === 'HEADER' ? 0 : getRowIndexByKey(state, startRowKey);
+        startRowKey === HEADER_ROW_KEY
+            ? 0
+            : getRowIndexByKey(state, startRowKey);
     const end = getRowIndexByKey(state, endRowKey);
 
     return {
@@ -745,13 +695,15 @@ export function unsetAriaSelectedOnCell(state, rowKeyValue, colKeyValue) {
  * to one which reflects the selected value of the row on the row object.
  * These are used by the template to render the appropriate values.
  *
- * @param {Boolean} selectedValue - Whether the row is selected
  * @param {Object} row - The row
+ * @param {Boolean} selectedValue - Whether the row is selected
  */
-function setRowSelectedAttributes(selectedValue, row) {
-    row.isSelected = selectedValue;
+function setRowSelectedAttributes(row, selectedValue) {
     row.ariaSelected = selectedValue;
-    row.classnames = resolveRowClassNames(row);
+    row.classnames = `slds-hint-parent${
+        selectedValue ? ' slds-is-selected' : ''
+    }`;
+    row.isSelected = selectedValue;
 }
 
 function getSelectedDiff(state, selectedRows) {
@@ -778,38 +730,3 @@ function getDeselectedDiff(state, value) {
     }
     return filtered;
 }
-
-function getSelectBoxesColumnIndex(state) {
-    const columns = getColumns(state) || [];
-    for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
-        const col = columns[colIndex];
-        if (col.type === SELECTABLE_ROW_CHECKBOX) {
-            return colIndex;
-        }
-    }
-    return -1;
-}
-
-/**
- * Represents whether the select all rows checkbox on the header
- * should be visible or not.
- * If max-row-selection = 1, then the select all rows checkbox
- * should not be visible/rendered.
- *
- * @param {Object} state - datatable's state object
- * @returns
- */
-export function getHideSelectAllCheckbox(state) {
-    return getMaxRowSelection(state) === 1;
-}
-
-/**
- * Represents whether the datatable should enable multiselection or not
- * depending on the max-row-selection value passed in
- *
- * @param {Number} value - max-row-selection value
- * @returns
- */
-function isMultiSelection(value) {
-    return value > 1 || value === undefined;
-}

package/src/lightning/datatable/rowSelectionShared.js

@@ -1,3 +1,5 @@
+export const SELECTABLE_HEADER_TYPE = 'SELECTABLE_CHECKBOX';
+
 /**
  * This file exists in order to get around circular dependencies.
  * In this case, rowSelection.js has a dependency on rows.js;
@@ -32,8 +34,8 @@ export function isSelectedRow(state, rowKeyValue) {
  * @returns {Boolean} Whether the row should be disabled or not
  */
 export function isDisabledRow(state, rowKeyValue) {
-    if (!isSelectedRow(state, rowKeyValue)) {
-        const maxRowSelection = getMaxRowSelection(state);
+    if (!state.selectedRowsKeys[rowKeyValue]) {
+        const { maxRowSelection } = state;
 
         // when selection is 1, we should not disable selection
         return (
@@ -45,30 +47,6 @@ export function isDisabledRow(state, rowKeyValue) {
     return false;
 }
 
-/**
- * Returns which input type to use for row selection.
- * If `max-row-selection` is 1, use radio buttons. Otherwise, use checkboxes.
- *
- * @param {Object} state Datatable state object
- * @returns {String} `radio` is only one row is allowed to be selected, otherwise `checkbox`
- */
-export function getRowSelectionInputType(state) {
-    if (getMaxRowSelection(state) === 1) {
-        return 'radio';
-    }
-    return 'checkbox';
-}
-
-/**
- * Retrieves the maximum number of rows that can be selected from state.
- *
- * @param {Object} state Datatable state object
- * @returns {Integer} The maximum rows that can be selected
- */
-export function getMaxRowSelection(state) {
-    return state.maxRowSelection;
-}
-
 /**
  * Determines the number of rows currently selected.
  *
@@ -76,7 +54,15 @@ export function getMaxRowSelection(state) {
  * @returns {Integer} The number of currently selected rows
  */
 export function getCurrentSelectionLength(state) {
-    return getSelectedRowsKeys(state).length;
+    let filteredLength = 0;
+    const { selectedRowsKeys } = state;
+    const keys = Object.keys(selectedRowsKeys);
+    for (let i = 0, { length } = keys; i < length; i += 1) {
+        if (selectedRowsKeys[keys[i]]) {
+            filteredLength += 1;
+        }
+    }
+    return filteredLength;
 }
 
 /**